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

locales/index.d.ts

@@ -8468,6 +8468,10 @@ export interface Locale extends ILocale {
          * アプリケーションにアクセス許可を与えるには、ログインが必要です。
          */
         "pleaseLogin": string;
+        /**
+         * アクセスを許可すると、自動で以下のURLに遷移します
+         */
+        "byClickingYouWillBeRedirectedToThisUrl": string;
     };
     "_antennaSources": {
         /**

locales/ja-JP.yml

@@ -2222,6 +2222,7 @@ _auth:
   denied: "アクセスを拒否しました"
   scopeUser: "以下のユーザーとして操作しています"
   pleaseLogin: "アプリケーションにアクセス許可を与えるには、ログインが必要です。"
+  byClickingYouWillBeRedirectedToThisUrl: "アクセスを許可すると、自動で以下のURLに遷移します"
 
 _antennaSources:
   all: "全てのノート"

packages/frontend/src/components/MkAuthConfirm.vue

@@ -57,10 +57,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div v-if="permissions && permissions.length > 0" class="_gaps_s" :class="$style.permissionRoot">
 				<div>{{ name ? i18n.tsx._auth.permission({ name }) : i18n.ts._auth.permissionAsk }}</div>
+				<div :class="$style.permissionListWrapper">
 					<ul :class="$style.permissionList">
 						<li v-for="p in permissions" :key="p">{{ i18n.ts._permissions[p] }}</li>
 					</ul>
 				</div>
+			</div>
+			<slot name="consentAdditionalInfo"></slot>
 			<div :class="$style.accountSelectorRoot">
 				<div :class="$style.accountSelectorLabel">
 					{{ i18n.ts._auth.scopeUser }} <button class="_textButton" @click="clickBackToAccountSelect">{{ i18n.ts.switchAccount }}</button>
@@ -346,9 +349,18 @@ defineExpose({
 	background-color: var(--MI_THEME-bg);
 }
 
+.permissionListWrapper {
+	max-height: 350px;
+	overflow-y: auto;
+	padding: 12px;
+	border-radius: var(--MI-radius);
+	background-color: var(--MI_THEME-panel);
+}
+
 .permissionList {
 	margin: 0 0 0 1.5em;
 	padding: 0;
+	font-size: 90%;
 }
 
 .accountSelectorLabel {

packages/frontend/src/pages/miauth.vue

@@ -15,7 +15,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:permissions="_permissions"
 				@accept="onAccept"
 				@deny="onDeny"
-			/>
+			>
+				<template #consentAdditionalInfo>
+					<div v-if="callback != null" :class="$style.redirectRoot">
+						<div>{{ i18n.ts._auth.byClickingYouWillBeRedirectedToThisUrl }}</div>
+						<div class="_monospace" :class="$style.redirectUrl">{{ callback }}</div>
+					</div>
+				</template>
+			</MkAuthConfirm>
 		</div>
 	</div>
 </div>
@@ -24,10 +31,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
+
 import MkAnimBg from '@/components/MkAnimBg.vue';
+import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
+
+import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
 
 const props = defineProps<{
 	session: string;
@@ -94,4 +104,18 @@ definePageMetadata(() => ({
 	height: min(60svh, calc(100svh - calc(env(safe-area-inset-bottom, 0px) + 64px)));
 	overflow-y: scroll;
 }
+
+.redirectRoot {
+	padding: 16px;
+	border-radius: var(--MI-radius);
+	background-color: var(--MI_THEME-bg);
+}
+
+.redirectUrl {
+	font-size: 90%;
+	padding: 12px;
+	border-radius: var(--MI-radius);
+	background-color: var(--MI_THEME-panel);
+	overflow-x: scroll;
+}
 </style>