enhance(client): /authおよびMiAuthのUIをブラッシュアップ

Fix #9742

packages/frontend/src/pages/auth.form.vue

@@ -1,60 +1,66 @@
 <template>
-<section class="">
-	<div class="">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="">
-		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
-		<p class="description">{{ app.description }}</p>
-	</div>
-	<div class="">
-		<h2>{{ $ts._auth.permissionAsk }}</h2>
-		<ul>
-			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-		</ul>
-	</div>
-	<div class="">
-		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
-	</div>
-</section>
+	<section>
+		<div v-if="app.permission.length > 0">
+			<p>{{ i18n.ts._auth.permissionAsk }}</p>
+			<ul>
+				<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+			</ul>
+		</div>
+		<div>{{ i18n.t('_auth.shareAccess', { name: `${name} (${app.id})` }) }}</div>
+		<div :class="$style.buttons">
+			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
+		</div>
+	</section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { AuthSession } from 'misskey-js/built/entities';
 
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	props: ['session'],
-	computed: {
-		name(): string {
-			const el = document.createElement('div');
-			el.textContent = this.app.name;
-			return el.innerHTML;
-		},
-		app(): any {
-			return this.session.app;
-		},
-	},
-	methods: {
-		cancel() {
-			os.api('auth/deny', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('denied');
-			});
-		},
+const props = defineProps<{
+	session: AuthSession;
+}>();
 
-		accept() {
-			os.api('auth/accept', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('accepted');
-			});
-		},
-	},
+const emit = defineEmits<{
+	(event: 'accepted'): void;
+	(event: 'denied'): void;
+}>();
+
+const app = $computed(() => props.session.app);
+
+const name = $computed(() => {
+	const el = document.createElement('div');
+	el.textContent = app.name;
+	return el.innerHTML;
 });
+
+function cancel() {
+	os.api('auth/deny', {
+		token: props.session.token,
+	}).then(() => {
+		emit('denied');
+	});
+}
+
+function accept() {
+	os.api('auth/accept', {
+		token: props.session.token,
+	}).then(() => {
+		emit('accepted');
+	});
+}
+
 </script>
+
+<style lang="scss" module>
+.buttons {
+	margin-top: 16px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+</style>