From 73386db6a9e1b34bfe683985860ee026969c52f4 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 25 Oct 2024 00:49:06 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20miauth=E3=81=AE=E3=83=AA=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=83=AC=E3=82=AF=E3=83=88=E5=85=88=E3=82=92UI?=
 =?UTF-8?q?=E5=86=85=E3=81=A7=E3=82=82=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  4 +++
 locales/ja-JP.yml                             |  1 +
 .../frontend/src/components/MkAuthConfirm.vue | 18 ++++++++++--
 packages/frontend/src/pages/miauth.vue        | 28 +++++++++++++++++--
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 1e5b142c58..80adf69232 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -8468,6 +8468,10 @@ export interface Locale extends ILocale {
          * アプリケーションにアクセス許可を与えるには、ログインが必要です。
          */
         "pleaseLogin": string;
+        /**
+         * アクセスを許可すると、自動で以下のURLに遷移します
+         */
+        "byClickingYouWillBeRedirectedToThisUrl": string;
     };
     "_antennaSources": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index adb8fcf4ff..d545425cbd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2222,6 +2222,7 @@ _auth:
   denied: "アクセスを拒否しました"
   scopeUser: "以下のユーザーとして操作しています"
   pleaseLogin: "アプリケーションにアクセス許可を与えるには、ログインが必要です。"
+  byClickingYouWillBeRedirectedToThisUrl: "アクセスを許可すると、自動で以下のURLに遷移します"
 
 _antennaSources:
   all: "全てのノート"
diff --git a/packages/frontend/src/components/MkAuthConfirm.vue b/packages/frontend/src/components/MkAuthConfirm.vue
index 144c5d9d21..bff642671d 100644
--- a/packages/frontend/src/components/MkAuthConfirm.vue
+++ b/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>
-				<ul :class="$style.permissionList">
-					<li v-for="p in permissions" :key="p">{{ i18n.ts._permissions[p] }}</li>
-				</ul>
+				<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 {
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
index a729f4ea7b..8961ea502d 100644
--- a/packages/frontend/src/pages/miauth.vue
+++ b/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>