upd: move the prompting of the id verification from page into router

packages/frontend/src/components/SkStripeIdDialog.vue

@@ -62,7 +62,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
-import { $i } from '@/account.js';
+import { $i, updateAccount } from '@/account.js';
 
 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 const url = ref('');
@@ -89,8 +89,7 @@ function openCheck() {
 async function confirmFinish() {
 	await misskeyApi('i').then(res => {
 		if (!res.idCheckRequired && $i) {
-			$i.idCheckRequired = res.idCheckRequired;
-			$i.idVerified = res.idVerified;
+			updateAccount({ idCheckRequired: res.idCheckRequired, idVerified: res.idVerified });
 			dialog.value?.close();
 		}
 	})

packages/frontend/src/nirax.ts

@@ -13,6 +13,7 @@ interface RouteDefBase {
 	path: string;
 	query?: Record<string, string>;
 	loginRequired?: boolean;
+	idRequired?: boolean;
 	name?: string;
 	hash?: string;
 	globalCacheKey?: string;
@@ -186,13 +187,14 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 	public currentRoute: ShallowRef<RouteDef>;
 	private currentPath: string;
 	private isLoggedIn: boolean;
+	private isNotIdConfirmed: boolean;
 	private notFoundPageComponent: Component;
 	private currentKey = Date.now().toString();
 	private redirectCount = 0;
 
 	public navHook: ((path: string, flag?: any) => boolean) | null = null;
 
-	constructor(routes: Router['routes'], currentPath: Router['currentPath'], isLoggedIn: boolean, notFoundPageComponent: Component) {
+	constructor(routes: Router['routes'], currentPath: Router['currentPath'], isLoggedIn: boolean, isNotIdConfirmed: boolean, notFoundPageComponent: Component) {
 		super();
 
 		this.routes = routes;
@@ -201,6 +203,7 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 		this.currentRoute = shallowRef(this.current.route);
 		this.currentPath = currentPath;
 		this.isLoggedIn = isLoggedIn;
+		this.isNotIdConfirmed = isNotIdConfirmed;
 		this.notFoundPageComponent = notFoundPageComponent;
 	}
 
@@ -366,6 +369,11 @@ export class Router extends EventEmitter<RouterEvent> implements IRouter {
 			res.props.set('showLoginPopup', true);
 		}
 
+		if (res.route.idRequired && this.isNotIdConfirmed) {
+			res.route.component = this.notFoundPageComponent;
+			res.props.set('showIdConfirm', true);
+		}
+
 		const isSamePath = beforePath === path;
 		if (isSamePath && key == null) key = this.currentKey;
 		this.current = res;

packages/frontend/src/pages/not-found.vue

@@ -17,16 +17,22 @@ import { computed } from 'vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
+import { confirmId } from '@/scripts/confirm-id.js';
 import { notFoundImageUrl } from '@/instance.js';
 
 const props = defineProps<{
 	showLoginPopup?: boolean;
+	showIdConfirm?: boolean;
 }>();
 
 if (props.showLoginPopup) {
 	pleaseLogin('/');
 }
 
+if (props.showIdConfirm) {
+	confirmId('/');
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);

packages/frontend/src/pages/timeline.vue

@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, provide, shallowRef, ref, defineAsyncComponent } from 'vue';
+import { computed, watch, provide, shallowRef, ref } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -71,13 +71,6 @@ const withRenotes = computed<boolean>({
 	set: (x) => saveTlFilter('withRenotes', x),
 });
 
-if ($i && $i.idCheckRequired) {
-	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/SkStripeIdDialog.vue')), {
-	}, {
-		closed: () => dispose(),
-	});
-}
-
 // computed内での無限ループを防ぐためのフラグ
 const localSocialTLFilterSwitchStore = ref<'withReplies' | 'onlyFiles' | false>(
 	defaultStore.reactiveState.tl.value.filter.withReplies ? 'withReplies' :

packages/frontend/src/router/definition.ts

@@ -52,6 +52,7 @@ const routes: RouteDef[] = [{
 	path: '/settings',
 	component: page(() => import('@/pages/settings/index.vue')),
 	loginRequired: true,
+	idRequired: true,
 	children: [{
 		path: '/profile',
 		name: 'profile',
@@ -217,6 +218,7 @@ const routes: RouteDef[] = [{
 	path: '/theme-editor',
 	component: page(() => import('@/pages/theme-editor.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/roles/:role',
 	component: page(() => import('@/pages/role.vue')),
@@ -253,14 +255,17 @@ const routes: RouteDef[] = [{
 	path: '/lookup',
 	component: page(() => import('@/pages/lookup.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/share',
 	component: page(() => import('@/pages/share.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/api-console',
 	component: page(() => import('@/pages/api-console.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/scratchpad',
 	component: page(() => import('@/pages/scratchpad.vue')),
@@ -335,9 +340,11 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/channels/:channelId',
 	component: page(() => import('@/pages/channel.vue')),
+	idRequired: true,
 }, {
 	path: '/channels',
 	component: page(() => import('@/pages/channels.vue')),
+	idRequired: true,
 }, {
 	path: '/custom-emojis-manager',
 	component: page(() => import('@/pages/custom-emojis-manager.vue')),
@@ -559,10 +566,12 @@ const routes: RouteDef[] = [{
 	path: '/timeline/list/:listId',
 	component: page(() => import('@/pages/user-list-timeline.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/timeline/antenna/:antennaId',
 	component: page(() => import('@/pages/antenna-timeline.vue')),
 	loginRequired: true,
+	idRequired: true,
 }, {
 	path: '/clicker',
 	component: page(() => import('@/pages/clicker.vue')),
@@ -586,11 +595,13 @@ const routes: RouteDef[] = [{
 }, {
 	path: '/timeline',
 	component: page(() => import('@/pages/timeline.vue')),
+	idRequired: true,
 }, {
 	name: 'index',
 	path: '/',
 	component: $i ? page(() => import('@/pages/timeline.vue')) : page(() => import('@/pages/welcome.vue')),
 	globalCacheKey: 'index',
+	idRequired: $i && $i.idCheckRequired ? true : false,
 }, {
 	// テスト用リダイレクト設定。ログイン中ユーザのプロフィールにリダイレクトする
 	path: '/redirect-test',
@@ -602,7 +613,7 @@ const routes: RouteDef[] = [{
 }];
 
 function createRouterImpl(path: string): IRouter {
-	return new Router(routes, path, !!$i, page(() => import('@/pages/not-found.vue')));
+	return new Router(routes, path, !!$i, $i?.idCheckRequired!, page(() => import('@/pages/not-found.vue')));
 }
 
 /**

packages/frontend/src/scripts/confirm-id.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: marie and sharkey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineAsyncComponent } from 'vue';
+import { $i } from '@/account.js';
+import { popup } from '@/os.js';
+
+export function confirmId(path?: string) {
+	if ($i && !$i.idCheckRequired) return;
+
+	const { dispose } = popup(defineAsyncComponent(() => import('@/components/SkStripeIdDialog.vue')), {
+	}, {
+		closed: () => {
+			dispose()
+			if (path) {
+				window.location.href = path;
+			}
+		},
+	});
+
+	throw new Error('id confirmation required');
+}