From ec28b18fb08e37c22634c0b7a418ea1018828897 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 5 May 2025 13:30:47 +0900
Subject: [PATCH] wip

---
 locales/index.d.ts                            |  16 ++
 locales/ja-JP.yml                             |   4 +
 packages/frontend/src/components/MkRadio.vue  |   2 +-
 .../src/components/MkServerSetupWizard.vue    | 213 ++++++++++++++++++
 packages/frontend/src/pages/welcome.setup.vue | 155 +------------
 5 files changed, 239 insertions(+), 151 deletions(-)
 create mode 100644 packages/frontend/src/components/MkServerSetupWizard.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 55f4804293..9762076ace 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11717,6 +11717,18 @@ export interface Locale extends ILocale {
          * 連合可能なサーバーの指定など、高度な設定も後ほど可能です。
          */
         "youCanConfigureMoreFederationSettingsLater": string;
+        /**
+         * 管理者情報
+         */
+        "adminInfo": string;
+        /**
+         * 問い合わせを受け付けるために使用される管理者情報を設定します。
+         */
+        "adminInfo_description": string;
+        /**
+         * オープンサーバー、または連合がオンの場合は必ず入力が必要です。
+         */
+        "adminInfo_mustBeFilled": string;
         /**
          * 以下の設定が推奨されます
          */
@@ -11737,6 +11749,10 @@ export interface Locale extends ILocale {
          * お疲れ様でした。準備が整ったので、さっそくサーバーの使用を開始できます。
          */
         "settingsCompleted_description": string;
+        /**
+         * 詳細なサーバー設定は、「コントロールパネル」から行えます。
+         */
+        "settingsCompleted_description2": string;
         /**
          * 寄付のお願い
          */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9c63bff6c8..a33ebad931 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3134,11 +3134,15 @@ _serverSetupWizard:
   doYouConnectToFediverse_description1: "分散型サーバーで構成されるネットワーク(Fediverse)に接続すると、他のサーバーと相互にコンテンツのやり取りが可能です。"
   doYouConnectToFediverse_description2: "Fediverseと接続することは「連合」とも呼ばれます。"
   youCanConfigureMoreFederationSettingsLater: "連合可能なサーバーの指定など、高度な設定も後ほど可能です。"
+  adminInfo: "管理者情報"
+  adminInfo_description: "問い合わせを受け付けるために使用される管理者情報を設定します。"
+  adminInfo_mustBeFilled: "オープンサーバー、または連合がオンの場合は必ず入力が必要です。"
   followingSettingsAreRecommended: "以下の設定が推奨されます"
   applyTheseSettings: "この設定を適用"
   skipSettings: "設定をスキップ"
   settingsCompleted: "設定が完了しました！"
   settingsCompleted_description: "お疲れ様でした。準備が整ったので、さっそくサーバーの使用を開始できます。"
+  settingsCompleted_description2: "詳細なサーバー設定は、「コントロールパネル」から行えます。"
   donationRequest: "寄付のお願い"
   _donationRequest:
     text1: "Misskeyは有志によって開発されている無料のソフトウェアです。"
diff --git a/packages/frontend/src/components/MkRadio.vue b/packages/frontend/src/components/MkRadio.vue
index 2c5f1b32b0..a7d77dd118 100644
--- a/packages/frontend/src/components/MkRadio.vue
+++ b/packages/frontend/src/components/MkRadio.vue
@@ -128,7 +128,7 @@ function toggle(): void {
 }
 
 .label {
-	margin-left: 12px;
+	margin-left: 8px;
 	display: block;
 	line-height: 20px;
 	cursor: pointer;
diff --git a/packages/frontend/src/components/MkServerSetupWizard.vue b/packages/frontend/src/components/MkServerSetupWizard.vue
new file mode 100644
index 0000000000..fed25ca53d
--- /dev/null
+++ b/packages/frontend/src/components/MkServerSetupWizard.vue
@@ -0,0 +1,213 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root" class="_gaps_m">
+	<MkInput v-model="q_name">
+		<template #label>{{ i18n.ts.instanceName }}</template>
+	</MkInput>
+
+	<MkFolder :defaultOpen="true">
+		<template #label>{{ i18n.ts._serverSetupWizard.howWillYouUseMisskey }}</template>
+		<template #icon><i class="ti ti-settings-question"></i></template>
+
+		<div class="_gaps_s">
+			<MkRadios v-model="q_use" :vertical="true">
+				<option value="one">
+					<div><i class="ti ti-user"></i> <b>{{ i18n.ts._serverSetupWizard._use.one }}</b></div>
+					<div>{{ i18n.ts._serverSetupWizard._use.one_description }}</div>
+				</option>
+				<option value="group">
+					<div><i class="ti ti-lock"></i> <b>{{ i18n.ts._serverSetupWizard._use.group }}</b></div>
+					<div>{{ i18n.ts._serverSetupWizard._use.group_description }}</div>
+				</option>
+				<option value="open">
+					<div><i class="ti ti-world"></i> <b>{{ i18n.ts._serverSetupWizard._use.open }}</b></div>
+					<div>{{ i18n.ts._serverSetupWizard._use.open_description }}</div>
+				</option>
+			</MkRadios>
+
+			<MkInfo v-if="q_use === 'one'">{{ i18n.ts._serverSetupWizard._use.one_youCanCreateMultipleAccounts }}</MkInfo>
+			<MkInfo v-if="q_use === 'open'" warn><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.openServerAdvice }}</MkInfo>
+		</div>
+	</MkFolder>
+
+	<MkFolder v-if="q_use !== 'one'" :defaultOpen="true">
+		<template #label>{{ i18n.ts._serverSetupWizard.howManyUsersDoYouExpect }}</template>
+		<template #icon><i class="ti ti-users"></i></template>
+
+		<div class="_gaps_s">
+			<MkRadios v-model="q_scale" :vertical="true">
+				<option value="small"><i class="ti ti-user"></i> {{ i18n.ts._serverSetupWizard._scale.small }}</option>
+				<option value="medium"><i class="ti ti-users"></i> {{ i18n.ts._serverSetupWizard._scale.medium }}</option>
+				<option value="large"><i class="ti ti-users-group"></i> {{ i18n.ts._serverSetupWizard._scale.large }}</option>
+			</MkRadios>
+
+			<MkInfo v-if="q_scale === 'large'"><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.largeScaleServerAdvice }}</MkInfo>
+		</div>
+	</MkFolder>
+
+	<MkFolder :defaultOpen="true">
+		<template #label>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse }}</template>
+		<template #icon><i class="ti ti-planet"></i></template>
+
+		<div class="_gaps_s">
+			<div>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description1 }}<br>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description2 }}</div>
+
+			<MkRadios v-model="q_federation" :vertical="true">
+				<option value="yes">{{ i18n.ts.yes }}</option>
+				<option value="no">{{ i18n.ts.no }}</option>
+			</MkRadios>
+
+			<MkInfo v-if="q_federation === 'yes'">{{ i18n.ts._serverSetupWizard.youCanConfigureMoreFederationSettingsLater }}</MkInfo>
+		</div>
+	</MkFolder>
+
+	<MkFolder v-if="q_use === 'open' || q_federation === 'yes'" :defaultOpen="true">
+		<template #label>{{ i18n.ts._serverSetupWizard.adminInfo }}</template>
+		<template #icon><i class="ti ti-mail"></i></template>
+
+		<div class="_gaps_s">
+			<div>{{ i18n.ts._serverSetupWizard.adminInfo_description }}</div>
+
+			<MkInfo warn>{{ i18n.ts._serverSetupWizard.adminInfo_mustBeFilled }}</MkInfo>
+
+			<MkInput v-model="q_adminName">
+				<template #label>{{ i18n.ts.maintainerName }}</template>
+			</MkInput>
+
+			<MkInput v-model="q_adminEmail" type="email">
+				<template #label>{{ i18n.ts.maintainerEmail }}</template>
+			</MkInput>
+		</div>
+	</MkFolder>
+
+	<MkFolder :defaultOpen="true">
+		<template #label>{{ i18n.ts._serverSetupWizard.followingSettingsAreRecommended }}</template>
+		<template #icon><i class="ti ti-adjustments-alt"></i></template>
+
+		<div class="_gaps_s">
+			<div>
+				<div><b>{{ i18n.ts._serverSettings.openRegistration }}:</b></div>
+				<div>{{ !serverSettings.disableRegistration ? i18n.ts.yes : i18n.ts.no }}</div>
+			</div>
+			<div>
+				<div><b>{{ i18n.ts.emailRequiredForSignup }}:</b></div>
+				<div>{{ serverSettings.emailRequiredForSignup ? i18n.ts.yes : i18n.ts.no }}</div>
+			</div>
+			<div>
+				<div><b>{{ i18n.ts.federation }}:</b></div>
+				<div>{{ serverSettings.federation === 'none' ? i18n.ts.no : i18n.ts.all }}</div>
+			</div>
+			<div>
+				<div><b>{{ i18n.ts.baseRole }}/{{ i18n.ts._role._options.rateLimitFactor }}:</b></div>
+				<div>{{ defaultPolicies.rateLimitFactor }}</div>
+			</div>
+			<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="applySettings">
+				<i class="ti ti-check"></i> {{ i18n.ts._serverSetupWizard.applyTheseSettings }}
+			</MkButton>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import { ROLE_POLICIES } from '@@/js/const.js';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkInfo from '@/components/MkInfo.vue';
+
+const emit = defineEmits<{
+	(ev: 'finished'): void;
+}>();
+
+const props = withDefaults(defineProps<{
+	token?: string;
+}>(), {
+});
+
+const q_name = ref('');
+const q_use = ref('one');
+const q_scale = ref('small');
+const q_federation = ref('yes');
+const q_adminName = ref('');
+const q_adminEmail = ref('');
+
+const serverSettings = computed<Misskey.entities.AdminUpdateMetaRequest>(() => {
+	return {
+		disableRegistration: q_use.value !== 'open',
+		emailRequiredForSignup: q_use.value === 'open',
+		federation: q_federation.value === 'yes' ? 'all' : 'none',
+	};
+});
+
+const defaultPolicies = computed<Misskey.entities.AdminRolesUpdateDefaultPoliciesRequest>(() => {
+	let driveCapacityMb;
+	if (q_use.value === 'one') {
+		driveCapacityMb = 8192;
+	} else if (q_use.value === 'group') {
+		driveCapacityMb = 1000;
+	} else if (q_use.value === 'open') {
+		driveCapacityMb = 100;
+	}
+
+	let rateLimitFactor;
+	if (q_use.value === 'one') {
+		rateLimitFactor = 0.3;
+	} else if (q_use.value === 'group') {
+		rateLimitFactor = 0.7;
+	} else if (q_use.value === 'open') {
+		if (q_scale.value === 'small') {
+			rateLimitFactor = 1;
+		} else if (q_scale.value === 'medium') {
+			rateLimitFactor = 1.25;
+		} else if (q_scale.value === 'large') {
+			rateLimitFactor = 1.5;
+		}
+	}
+
+	return {
+		rateLimitFactor,
+		driveCapacityMb,
+	} satisfies Partial<Record<typeof ROLE_POLICIES[number], any>>;
+});
+
+function applySettings() {
+	const _close = os.waiting();
+	Promise.all([
+		misskeyApi('admin/update-meta', {
+			...serverSettings.value,
+			name: q_name.value === '' ? undefined : q_name.value,
+			maintainerName: q_adminName.value === '' ? undefined : q_adminName.value,
+			maintainerEmail: q_adminEmail.value === '' ? undefined : q_adminEmail.value,
+		}, props.token),
+		misskeyApi('admin/roles/update-default-policies', {
+			policies: defaultPolicies.value,
+		}, props.token),
+	]).then(() => {
+		emit('finished');
+	}).catch((err) => {
+		os.alert({
+			type: 'error',
+			title: err.code,
+			text: err.message,
+		});
+	}).finally(() => {
+		_close();
+	});
+}
+</script>
+
+<style lang="scss" module>
+.root {
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index c728b02a37..675e82a71d 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -99,88 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div>{{ i18n.ts._serverSetupWizard.settingsYouMakeHereCanBeChangedLater }}</div>
 					</div>
 
-					<MkInput v-model="q_name">
-						<template #label>{{ i18n.ts.instanceName }}</template>
-					</MkInput>
-
-					<MkFolder :defaultOpen="true">
-						<template #label>{{ i18n.ts._serverSetupWizard.howWillYouUseMisskey }}</template>
-						<template #icon><i class="ti ti-settings-question"></i></template>
-
-						<div class="_gaps_s">
-							<MkRadios v-model="q_use" :vertical="true">
-								<option value="one">
-									<div><i class="ti ti-user"></i> <b>{{ i18n.ts._serverSetupWizard._use.one }}</b></div>
-									<div>{{ i18n.ts._serverSetupWizard._use.one_description }}</div>
-								</option>
-								<option value="group">
-									<div><i class="ti ti-lock"></i> <b>{{ i18n.ts._serverSetupWizard._use.group }}</b></div>
-									<div>{{ i18n.ts._serverSetupWizard._use.group_description }}</div>
-								</option>
-								<option value="open">
-									<div><i class="ti ti-world"></i> <b>{{ i18n.ts._serverSetupWizard._use.open }}</b></div>
-									<div>{{ i18n.ts._serverSetupWizard._use.open_description }}</div>
-								</option>
-							</MkRadios>
-
-							<MkInfo v-if="q_use === 'one'">{{ i18n.ts._serverSetupWizard._use.one_youCanCreateMultipleAccounts }}</MkInfo>
-							<MkInfo v-if="q_use === 'open'" warn><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.openServerAdvice }}</MkInfo>
-						</div>
-					</MkFolder>
-
-					<MkFolder v-if="q_use !== 'one'" :defaultOpen="true">
-						<template #label>{{ i18n.ts._serverSetupWizard.howManyUsersDoYouExpect }}</template>
-						<template #icon><i class="ti ti-users"></i></template>
-
-						<div class="_gaps_s">
-							<MkRadios v-model="q_scale" :vertical="true">
-								<option value="small"><i class="ti ti-user"></i> {{ i18n.ts._serverSetupWizard._scale.small }}</option>
-								<option value="medium"><i class="ti ti-users"></i> {{ i18n.ts._serverSetupWizard._scale.medium }}</option>
-								<option value="large"><i class="ti ti-users-group"></i> {{ i18n.ts._serverSetupWizard._scale.large }}</option>
-							</MkRadios>
-
-							<MkInfo v-if="q_scale === 'large'"><b>{{ i18n.ts.advice }}:</b> {{ i18n.ts._serverSetupWizard.largeScaleServerAdvice }}</MkInfo>
-						</div>
-					</MkFolder>
-
-					<MkFolder :defaultOpen="true">
-						<template #label>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse }}</template>
-						<template #icon><i class="ti ti-planet"></i></template>
-
-						<div class="_gaps_s">
-							<div>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description1 }}<br>{{ i18n.ts._serverSetupWizard.doYouConnectToFediverse_description2 }}</div>
-
-							<MkRadios v-model="q_federation" :vertical="true">
-								<option value="yes">{{ i18n.ts.yes }}</option>
-								<option value="no">{{ i18n.ts.no }}</option>
-							</MkRadios>
-
-							<MkInfo v-if="q_federation === 'yes'">{{ i18n.ts._serverSetupWizard.youCanConfigureMoreFederationSettingsLater }}</MkInfo>
-						</div>
-					</MkFolder>
-
-					<MkFolder :defaultOpen="true">
-						<template #label>{{ i18n.ts._serverSetupWizard.followingSettingsAreRecommended }}</template>
-						<template #icon><i class="ti ti-adjustments-alt"></i></template>
-
-						<div class="_gaps_s">
-							<div>
-								<div><b>{{ i18n.ts._serverSettings.openRegistration }}:</b></div>
-								<div>{{ !serverSettings.disableRegistration ? i18n.ts.yes : i18n.ts.no }}</div>
-							</div>
-							<div>
-								<div><b>{{ i18n.ts.emailRequiredForSignup }}:</b></div>
-								<div>{{ serverSettings.emailRequiredForSignup ? i18n.ts.yes : i18n.ts.no }}</div>
-							</div>
-							<div>
-								<div><b>{{ i18n.ts.federation }}:</b></div>
-								<div>{{ serverSettings.federation === 'none' ? i18n.ts.no : i18n.ts.all }}</div>
-							</div>
-							<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="applySettings">
-								<i class="ti ti-check"></i> {{ i18n.ts._serverSetupWizard.applyTheseSettings }}
-							</MkButton>
-						</div>
-					</MkFolder>
+					<MkServerSetupWizard :token="token" @finished="onWizardFinished"/>
 
 					<MkButton rounded style="margin: 0 auto;" @click="skipSettings">
 						{{ i18n.ts._serverSetupWizard.skipSettings }}
@@ -190,6 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div style="text-align: center;" class="_gaps_s">
 						<div><b>{{ i18n.ts._serverSetupWizard.settingsCompleted }}</b></div>
 						<div>{{ i18n.ts._serverSetupWizard.settingsCompleted_description }}</div>
+						<div>{{ i18n.ts._serverSetupWizard.settingsCompleted_description2 }}</div>
 					</div>
 					<div class="_buttonsCenter">
 						<MkButton gradate large rounded data-cy-next style="margin: 0 auto;" @click="finish">
@@ -207,7 +127,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { host, version } from '@@/js/config.js';
-import { ROLE_POLICIES } from '@@/js/const.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
@@ -215,9 +134,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { login } from '@/accounts.js';
 import MkLink from '@/components/MkLink.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkInfo from '@/components/MkInfo.vue';
+import MkServerSetupWizard from '@/components/MkServerSetupWizard.vue';
 
 const username = ref('');
 const password = ref('');
@@ -225,49 +142,6 @@ const setupPassword = ref('');
 const accountCreating = ref(false);
 const accountCreated = ref(false);
 const step = ref(0);
-const q_name = ref('');
-const q_use = ref('one');
-const q_scale = ref('small');
-const q_federation = ref('yes');
-
-const serverSettings = computed<Misskey.entities.AdminUpdateMetaRequest>(() => {
-	return {
-		disableRegistration: q_use.value !== 'open',
-		emailRequiredForSignup: q_use.value === 'open',
-		federation: q_federation.value === 'yes' ? 'all' : 'none',
-	};
-});
-
-const defaultPolicies = computed<Misskey.entities.AdminRolesUpdateDefaultPoliciesRequest>(() => {
-	let driveCapacityMb;
-	if (q_use.value === 'one') {
-		driveCapacityMb = 8192;
-	} else if (q_use.value === 'group') {
-		driveCapacityMb = 1000;
-	} else if (q_use.value === 'open') {
-		driveCapacityMb = 100;
-	}
-
-	let rateLimitFactor;
-	if (q_use.value === 'one') {
-		rateLimitFactor = 0.3;
-	} else if (q_use.value === 'group') {
-		rateLimitFactor = 0.7;
-	} else if (q_use.value === 'open') {
-		if (q_scale.value === 'small') {
-			rateLimitFactor = 1;
-		} else if (q_scale.value === 'medium') {
-			rateLimitFactor = 1.25;
-		} else if (q_scale.value === 'large') {
-			rateLimitFactor = 1.5;
-		}
-	}
-
-	return {
-		rateLimitFactor,
-		driveCapacityMb,
-	} satisfies Partial<Record<typeof ROLE_POLICIES[number], any>>;
-});
 
 let token;
 
@@ -308,27 +182,8 @@ function createAccount() {
 	});
 }
 
-function applySettings() {
-	const _close = os.waiting();
-	Promise.all([
-		misskeyApi('admin/update-meta', {
-			...serverSettings.value,
-			name: q_name.value === '' ? undefined : q_name.value,
-		}, token),
-		misskeyApi('admin/roles/update-default-policies', {
-			policies: defaultPolicies.value,
-		}, token),
-	]).then(() => {
-		step.value++;
-	}).catch((err) => {
-		os.alert({
-			type: 'error',
-			title: err.code,
-			text: err.message,
-		});
-	}).finally(() => {
-		_close();
-	});
+function onWizardFinished() {
+	step.value++;
 }
 
 function skipSettings() {