[client] Rework OAuth login page

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"

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,9 +228,8 @@ export async function openAccountMenu(
 	);
 
 	if (opts.withExtraOperation) {
-		popupMenu(
+		const menu = [
-			[
+			...(!opts.withoutProfileLink ? [
-				...[
 				{
 					type: "link",
 					text: i18n.ts.profile,
@@ -237,8 +237,10 @@ export async function openAccountMenu(
 					avatar: $i,
 				},
 				null,
+			] : []),
 			...(opts.includeCurrentAccount ? [createItem($i)] : []),
 			...accountItemPromises,
+			...(opts.withoutProfileLink ? [null] : []),
 			{
 				type: "parent",
 				icon: "ph-plus ph-bold ph-lg",
@@ -272,8 +274,10 @@ export async function openAccountMenu(
 					signout();
 				},
 			},
-				],
+		];
-			],
+
+		popupMenu(
+			menu,
 			ev.currentTarget ?? ev.target,
 			{
 				align: "left",

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"))

packages/client/src/pages/oauth.vue

@@ -1,35 +1,55 @@
 <template>
 	<MkSpacer :content-max="800">
 		<div v-if="$i">
-			<div v-if="state == 'waiting'" class="waiting _section">
+			<div v-if="state == 'waiting'" class="waiting _section" :class="[$style.section]">
 				<div class="_content">
 					<MkLoading />
 				</div>
 			</div>
-			<div v-if="state == 'denied'" class="denied _section">
+			<div v-if="state == 'denied'" class="denied _section" :class="[$style.section]">
 				<div class="_content">
 					<p>{{ i18n.ts._auth.denied }}</p>
 				</div>
 			</div>
-			<div v-else-if="state == 'error'" class="error _section">
+			<div v-else-if="state == 'error'" class="error _section" :class="[$style.section]">
 				<div class="_content">
 					<p>{{ message }}</p>
 				</div>
 			</div>
-			<div v-else-if="state == 'accepted-oob'" class="accepted-oob _section">
+			<div v-else-if="state == 'accepted-oob'" class="accepted-oob _section" :class="[$style.section]">
 				<div class="_content">
 					<p>{{ i18n.ts._auth.copyAsk }}</p>
 					<pre>{{ code }}</pre>
 				</div>
 			</div>
-			<div v-else-if="state == 'accepted'" class="accepted _section">
+			<div v-else-if="state == 'accepted'" class="accepted _section" :class="[$style.section]">
 				<div class="_content">
 					<p>
 						{{ i18n.ts._auth.callback }}<MkEllipsis />
 					</p>
 				</div>
 			</div>
-			<div v-else class="_section">
+			<div v-else class="_section" :class="[$style.section]">
+				<div :class="[$style.container]">
+					<button
+							v-click-anime
+							class="item _button"
+							:class="[$style.account]"
+							@click="openAccountMenu"
+					>
+						<MkAvatar
+								:user="$i"
+								:class="[$style.icon]"
+								disableLink
+						/><!-- <MkAcct class="text" :user="$i"/> -->
+					</button>
+					<div :class="[$style.left]">
+						<div>{{ i18n.ts.signedInAs }}:</div>
+						<div>@{{ $i.username }}<span :class="[$style.fade]">@{{ config.host }}</span></div>
+					</div>
+				</div>
+				<hr/>
+				<h2>Authorization required</h2>
 				<div v-if="name" class="_title">
 					{{ i18n.t("_auth.shareAccess", { name: name }) }}
 				</div>
@@ -70,13 +90,13 @@
 </template>
 
 <script lang="ts" setup>
-import {} from "vue";
 import MkSignin from "@/components/MkSignin.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
-import { $i, login } from "@/account";
+import { $i, login, openAccountMenu as openAccountMenu_ } from "@/account";
 import { appendQuery, query } from "@/scripts/url";
 import { i18n } from "@/i18n";
+import * as config from "@/config.js";
 
 const props = defineProps<{
 	response_type: string;
@@ -161,6 +181,17 @@ function deny(): void {
 async function onLogin(res): Promise<void> {
 	await login(res.i);
 }
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_(
+			{
+				includeCurrentAccount: true,
+				withExtraOperation: true,
+				withoutProfileLink: true
+			},
+			ev,
+	);
+}
 </script>
 
 <style lang="scss" module>
@@ -169,6 +200,8 @@ async function onLogin(res): Promise<void> {
 }
 
 .permissions {
+	justify-content: center;
+	padding-top: var(--margin);
 	display: flex;
 	flex-wrap: wrap;
 	gap: 1rem;
@@ -182,4 +215,36 @@ async function onLogin(res): Promise<void> {
 	background-color: var(--buttonBg);
 	color: var(--fg);
 }
+
+.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;
+}
 </style>

packages/client/src/ui/oauth.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="mk-app">
+		<RouterView />
+
+		<XCommon />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ComputedRef } from "vue";
+import { provide } from "vue";
+import XCommon from "./_common_/common.vue";
+import { mainRouter } from "@/router";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import {
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+
+provide("router", mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+
+document.documentElement.style.overflowY = "scroll";
+</script>
+
+<style lang="scss" scoped>
+.mk-app {
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+}
+</style>