enhance(frontend): improve signup complete ui (#10876)

* enhance(frontend): improve signup complete ui

* relocation

* tweak

* Update _boot_.ts

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

packages/frontend/src/_boot_.ts

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

packages/frontend/src/pages/signup-complete.vue

 <template>
-<div>
-	{{ i18n.ts.processing }}
+<div :class="$style.root">
+	<MkAnimBg style="position: fixed; top: 0;"/>
+	<div :class="$style.formContainer">
+		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
+			<div :class="$style.banner">
+				<i class="ti ti-user-check"></i>
+			</div>
+			<div class="_gaps_m" style="padding: 32px;">
+				<div>{{ i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }) }}</div>
+				<div>
+					<MkButton gradate large rounded type="submit" :disabled="submitting" data-cy-admin-ok style="margin: 0 auto;">
+						{{ submitting ? i18n.ts.processing : i18n.ts.gotIt }}<MkEllipsis v-if="submitting"/>
+					</MkButton>
+				</div>
+			</div>
+		</form>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
+import { } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkAnimBg from '@/components/MkAnimBg.vue';
 import { login } from '@/account';
 import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import * as os from '@/os';
+
+let submitting = $ref(false);
 
 const props = defineProps<{
 	code: string;
 }>();
 
-onMounted(async () => {
-	await os.alert({
-		type: 'info',
-		text: i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }),
-	});
-	const res = await os.apiWithDialog('signup-pending', {
+function submit() {
+	if (submitting) return;
+	submitting = true;
+
+	os.api('signup-pending', {
 		code: props.code,
+	}).then(res => {
+		return login(res.i, '/');
+	}).catch(() => {
+		submitting = false;
+
+		os.alert({
+			type: 'error',
+			text: i18n.ts.somethingHappened,
+		});
 	});
-	login(res.i, '/');
-});
+}
+</script>
 
-const headerActions = $computed(() => []);
+<style lang="scss" module>
+.root {
+}
 
-const headerTabs = $computed(() => []);
+.formContainer {
+	min-height: 100svh;
+	padding: 32px 32px 64px 32px;
+	box-sizing: border-box;
+display: grid;
+place-content: center;
+}
 
-definePageMetadata({
-	title: i18n.ts.signup,
-	icon: 'ti ti-user',
-});
-</script>
+.form {
+	position: relative;
+	z-index: 10;
+	border-radius: var(--radius);
+	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+	overflow: clip;
+	max-width: 500px;
+}
+
+.banner {
+	padding: 16px;
+	text-align: center;
+	font-size: 26px;
+	background-color: var(--accentedBg);
+	color: var(--accent);
+}
+</style>