From 093f13646e2d0152f88786eb60e674ab964f471a Mon Sep 17 00:00:00 2001 From: Laura Hausmann Date: Fri, 3 Nov 2023 23:15:58 +0100 Subject: [PATCH] [client] Rework OAuth login page --- locales/en-US.yml | 1 + packages/client/src/account.ts | 88 +++++++++++++++-------------- packages/client/src/init.ts | 4 +- packages/client/src/pages/oauth.vue | 83 ++++++++++++++++++++++++--- packages/client/src/ui/oauth.vue | 40 +++++++++++++ 5 files changed, 164 insertions(+), 52 deletions(-) create mode 100644 packages/client/src/ui/oauth.vue diff --git a/locales/en-US.yml b/locales/en-US.yml index 668be1330..6fd04ade5 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1032,6 +1032,7 @@ activeEmailValidationDescription: "Enables stricter validation of email addresse navbar: "Navigation bar" shuffle: "Shuffle" account: "Account" +signedInAs: "Signed in as" move: "Move" pushNotification: "Push notifications" subscribePushNotification: "Enable push notifications" diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts index 8afb0d394..c51ef8a2e 100644 --- a/packages/client/src/account.ts +++ b/packages/client/src/account.ts @@ -150,6 +150,7 @@ export async function openAccountMenu( opts: { includeCurrentAccount?: boolean; withExtraOperation: boolean; + withoutProfileLink?: boolean; active?: misskey.entities.UserDetailed["id"]; onChoose?: (account: misskey.entities.UserDetailed) => void; }, @@ -227,53 +228,56 @@ export async function openAccountMenu( ); if (opts.withExtraOperation) { - popupMenu( - [ - ...[ + const menu = [ + ...(!opts.withoutProfileLink ? [ + { + type: "link", + text: i18n.ts.profile, + to: `/@${$i.username}`, + avatar: $i, + }, + null, + ] : []), + ...(opts.includeCurrentAccount ? [createItem($i)] : []), + ...accountItemPromises, + ...(opts.withoutProfileLink ? [null] : []), + { + type: "parent", + icon: "ph-plus ph-bold ph-lg", + text: i18n.ts.addAccount, + children: [ { - type: "link", - text: i18n.ts.profile, - to: `/@${$i.username}`, - avatar: $i, - }, - null, - ...(opts.includeCurrentAccount ? [createItem($i)] : []), - ...accountItemPromises, - { - type: "parent", - icon: "ph-plus ph-bold ph-lg", - text: i18n.ts.addAccount, - children: [ - { - text: i18n.ts.existingAccount, - action: () => { - showSigninDialog(); - }, - }, - { - text: i18n.ts.createAccount, - action: () => { - createAccount(); - }, - }, - ], - }, - { - type: "link", - icon: "ph-users ph-bold ph-lg", - text: i18n.ts.manageAccounts, - to: "/settings/accounts", - }, - { - type: "button", - icon: "ph-sign-out ph-bold ph-lg", - text: i18n.ts.logout, + text: i18n.ts.existingAccount, action: () => { - signout(); + showSigninDialog(); + }, + }, + { + text: i18n.ts.createAccount, + action: () => { + createAccount(); }, }, ], - ], + }, + { + type: "link", + icon: "ph-users ph-bold ph-lg", + text: i18n.ts.manageAccounts, + to: "/settings/accounts", + }, + { + type: "button", + icon: "ph-sign-out ph-bold ph-lg", + text: i18n.ts.logout, + action: () => { + signout(); + }, + }, + ]; + + popupMenu( + menu, ev.currentTarget ?? ev.target, { align: "left", diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index d51ddeb1d..29c8a4c19 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -188,7 +188,9 @@ function checkForSplash() { }); const app = createApp( - window.location.search === "?zen" + window.location.pathname === "/oauth/authorize" + ? defineAsyncComponent(() => import("@/ui/oauth.vue")) + : window.location.search === "?zen" ? defineAsyncComponent(() => import("@/ui/zen.vue")) : !$i ? defineAsyncComponent(() => import("@/ui/visitor.vue")) diff --git a/packages/client/src/pages/oauth.vue b/packages/client/src/pages/oauth.vue index d33151b87..da9734534 100644 --- a/packages/client/src/pages/oauth.vue +++ b/packages/client/src/pages/oauth.vue @@ -1,35 +1,55 @@ \ No newline at end of file + +.container { + display: flex; + align-items: center; + justify-content: center; +} + +.account { + margin-right: 20px; +} + +.icon { + display: inline-block; + width: 55px; + aspect-ratio: 1; +} + +.section { + background: var(--panel); + padding: 20px 32px; + border-radius: var(--radius); + font-size: 1.05em; + text-align: center; +} + +.fade { + opacity: .5; +} + +.left { + text-align: left; +} + diff --git a/packages/client/src/ui/oauth.vue b/packages/client/src/ui/oauth.vue new file mode 100644 index 000000000..b171420d7 --- /dev/null +++ b/packages/client/src/ui/oauth.vue @@ -0,0 +1,40 @@ + + + + +