enhance(frontend): 外部アプリ認証画面の改良 (#14828)

* enhance(frontend): 外部アプリ認証画面の改良

* 🎨

* lint

* Update Changelog

* indent

* lint

* enhance: miauthのリダイレクト先をUI内でも表示するように

* 🎨

* fix

* fix

CHANGELOG.md

@@ -10,6 +10,9 @@
 - Enhance: ドライブでソートができるように
 - Enhance: 「単なるラッキー」の取得条件を変更
 - Enhance: 投稿フォームでEscキーを押したときIME入力中ならフォームを閉じないように（ #10866 ）  
+- Enhance: MiAuth, OAuthの認可画面の改善
+  - どのアカウントで認証しようとしているのかがわかるように
+  - 認証するアカウントを切り替えられるように
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)

locales/index.d.ts

@@ -5210,6 +5210,10 @@ export interface Locale extends ILocale {
      * ロックダウン
      */
     "lockdown": string;
+    /**
+     * アカウントを選択してください
+     */
+    "pleaseSelectAccount": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする
@@ -8448,14 +8452,26 @@ export interface Locale extends ILocale {
          * アプリケーションに戻っています
          */
         "callback": string;
+        /**
+         * アクセスを許可しました
+         */
+        "accepted": string;
         /**
          * アクセスを拒否しました
          */
         "denied": string;
+        /**
+         * 以下のユーザーとして操作しています
+         */
+        "scopeUser": string;
         /**
          * アプリケーションにアクセス許可を与えるには、ログインが必要です。
          */
         "pleaseLogin": string;
+        /**
+         * アクセスを許可すると、自動で以下のURLに遷移します
+         */
+        "byClickingYouWillBeRedirectedToThisUrl": string;
     };
     "_antennaSources": {
         /**

locales/ja-JP.yml

@@ -1298,6 +1298,7 @@ yourNameContainsProhibitedWords: "変更しようとした名前に禁止され
 yourNameContainsProhibitedWordsDescription: "名前に禁止されている文字列が含まれています。この名前を使用したい場合は、サーバー管理者にお問い合わせください。"
 thisContentsAreMarkedAsSigninRequiredByAuthor: "投稿者により、表示にはログインが必要と設定されています"
 lockdown: "ロックダウン"
+pleaseSelectAccount: "アカウントを選択してください"
 
 _accountSettings:
   requireSigninToViewContents: "コンテンツの表示にログインを必須にする"
@@ -2217,8 +2218,11 @@ _auth:
   permissionAsk: "このアプリは次の権限を要求しています"
   pleaseGoBack: "アプリケーションに戻ってやっていってください"
   callback: "アプリケーションに戻っています"
+  accepted: "アクセスを許可しました"
   denied: "アクセスを拒否しました"
+  scopeUser: "以下のユーザーとして操作しています"
   pleaseLogin: "アプリケーションにアクセス許可を与えるには、ログインが必要です。"
+  byClickingYouWillBeRedirectedToThisUrl: "アクセスを許可すると、自動で以下のURLに遷移します"
 
 _antennaSources:
   all: "全てのノート"

packages/frontend/src/_boot_.ts

@@ -12,7 +12,7 @@ import '@/style.scss';
 import { mainBoot } from '@/boot/main-boot.js';
 import { subBoot } from '@/boot/sub-boot.js';
 
-const subBootPaths = ['/share', '/auth', '/miauth', '/signup-complete'];
+const subBootPaths = ['/share', '/auth', '/miauth', '/oauth', '/signup-complete'];
 
 if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
 	subBoot();

packages/frontend/src/account.ts

@@ -235,26 +235,6 @@ export async function openAccountMenu(opts: {
 }, ev: MouseEvent) {
 	if (!$i) return;
 
-	function showSigninDialog() {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
-			done: (res: Misskey.entities.SigninFlowResponse & { finished: true }) => {
-				addAccount(res.id, res.i);
-				success();
-			},
-			closed: () => dispose(),
-		});
-	}
-
-	function createAccount() {
-		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
-			done: (res: Misskey.entities.SignupResponse) => {
-				addAccount(res.id, res.token);
-				switchAccountWithToken(res.token);
-			},
-			closed: () => dispose(),
-		});
-	}
-
 	async function switchAccount(account: Misskey.entities.UserDetailed) {
 		const storedAccounts = await getAccounts();
 		const found = storedAccounts.find(x => x.id === account.id);
@@ -323,10 +303,22 @@ export async function openAccountMenu(opts: {
 			text: i18n.ts.addAccount,
 			children: [{
 				text: i18n.ts.existingAccount,
-				action: () => { showSigninDialog(); },
+				action: () => {
+					getAccountWithSigninDialog().then(res => {
+						if (res != null) {
+							success();
+						}
+					});
+				},
 			}, {
 				text: i18n.ts.createAccount,
-				action: () => { createAccount(); },
+				action: () => {
+					getAccountWithSignupDialog().then(res => {
+						if (res != null) {
+							switchAccountWithToken(res.token);
+						}
+					});
+				},
 			}],
 		}, {
 			type: 'link',
@@ -347,6 +339,40 @@ export async function openAccountMenu(opts: {
 	});
 }
 
+export function getAccountWithSigninDialog(): Promise<{ id: string, token: string } | null> {
+	return new Promise((resolve) => {
+		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
+			done: async (res: Misskey.entities.SigninFlowResponse & { finished: true }) => {
+				await addAccount(res.id, res.i);
+				resolve({ id: res.id, token: res.i });
+			},
+			cancelled: () => {
+				resolve(null);
+			},
+			closed: () => {
+				dispose();
+			},
+		});
+	});
+}
+
+export function getAccountWithSignupDialog(): Promise<{ id: string, token: string } | null> {
+	return new Promise((resolve) => {
+		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
+			done: async (res: Misskey.entities.SignupResponse) => {
+				await addAccount(res.id, res.token);
+				resolve({ id: res.id, token: res.token });
+			},
+			cancelled: () => {
+				resolve(null);
+			},
+			closed: () => {
+				dispose();
+			},
+		});
+	});
+}
+
 if (_DEV_) {
 	(window as any).$i = $i;
 }

packages/frontend/src/components/MkAuthConfirm.stories.impl.ts

@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import MkAuthConfirm from './MkAuthConfirm.vue';
+void MkAuthConfirm;