feat(frontend): チュートリアルにBotの設定を追加、チュートリアルをスキップ不可に (MisskeyIO#665)

locales/index.d.ts

@@ -5347,6 +5347,10 @@ export interface Locale extends ILocale {
          * 初期設定をあとでやり直しますか？
          */
         "laterAreYouSure": string;
+        /**
+         * Botアカウントは管理者を必ず記載する必要があります。以下から管理者のアカウントを選択してください。
+         */
+        "mustBeSetBotOwner": string;
     };
     "_initialTutorial": {
         /**

locales/ja-JP.yml

@@ -1339,6 +1339,7 @@ _initialAccountSetting:
   startTutorial: "チュートリアルを開始"
   skipAreYouSure: "初期設定をスキップしますか？"
   laterAreYouSure: "初期設定をあとでやり直しますか？"
+  mustBeSetBotOwner: "Botアカウントは管理者を必ず記載する必要があります。以下から管理者のアカウントを選択してください。"
 
 _initialTutorial:
   launchTutorial: "チュートリアルを見る"

packages/frontend/src/components/MkUserSetupDialog.Profile.vue

@@ -25,12 +25,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #label>{{ i18n.ts._profile.description }}</template>
 	</MkTextarea>
 
+	<MkSwitch v-model="useAsBot">
+		<template #label>{{ i18n.ts.flagAsBot }}</template>
+	</MkSwitch>
+
+	<div v-if="useAsBot" class="_gaps_m">
+		<div>
+			<MkInfo>{{ i18n.ts._initialAccountSetting.mustBeSetBotOwner }}</MkInfo>
+		</div>
+		<div>
+			<MkButton @click="selectBotOwner">{{ i18n.ts.selectUser }}</MkButton>
+			<MkUserCardMini v-if="botOwner" :user="botOwner"></MkUserCardMini>
+		</div>
+	</div>
+
 	<MkInfo>{{ i18n.ts._initialAccountSetting.youCanEditMoreSettingsInSettingsPageLater }}</MkInfo>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
@@ -45,6 +62,12 @@ const $i = signinRequired();
 
 const name = ref($i.name ?? '');
 const description = ref($i.description ?? '');
+const useAsBot = ref($i.isBot ?? false);
+const botOwner = ref<Misskey.entities.UserDetailed | null>(null);
+
+const emit = defineEmits<{
+	(ev: 'nextButtonEnabled', value: boolean): void;
+}>();
 
 watch(name, () => {
 	os.apiWithDialog('i/update', {
@@ -62,6 +85,12 @@ watch(description, () => {
 	});
 });
 
+watch(useAsBot, () => {
+	watchBotSettings();
+	os.apiWithDialog('i/update', { isBot: useAsBot.value });
+});
+watch(botOwner, watchBotSettings);
+
 function setAvatar(ev) {
 	chooseFileFromPc(false).then(async (files) => {
 		const file = files[0];
@@ -88,6 +117,25 @@ function setAvatar(ev) {
 		$i.avatarUrl = i.avatarUrl;
 	});
 }
+
+function selectBotOwner() {
+	os.selectUser({ includeSelf: false, localOnly: true }).then(_user => {
+		botOwner.value = _user;
+	});
+}
+
+function watchBotSettings() {
+	if (useAsBot.value) {
+		if (botOwner.value != null) {
+			description.value = (description.value + '\n管理者: @' + botOwner.value.username).trim();
+			emit('nextButtonEnabled', true);
+		} else {
+			emit('nextButtonEnabled', false);
+		}
+	} else {
+		emit('nextButtonEnabled', true);
+	}
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -9,7 +9,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:width="500"
 	:height="550"
 	data-cy-user-setup
-	@close="close(true)"
 	@closed="emit('closed')"
 >
 	<template v-if="page === 1" #header><i class="ti ti-user-edit"></i> {{ i18n.ts._initialAccountSetting.profileSetting }}</template>
@@ -48,12 +47,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div style="height: 100cqh; overflow: auto;">
 					<div :class="$style.pageRoot">
 						<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
-							<XProfile/>
+							<XProfile :onNextButtonEnabled="(state) => page1NextButtonDisabled = !state"/>
 						</MkSpacer>
 						<div :class="$style.pageFooter">
 							<div class="_buttonsCenter">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+								<MkButton primary rounded gradate data-cy-user-setup-continue :disabled="page1NextButtonDisabled" @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 						</div>
 					</div>
@@ -151,6 +150,8 @@ const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 // eslint-disable-next-line vue/no-setup-props-destructure
 const page = ref(defaultStore.state.accountSetupWizard);
 
+const page1NextButtonDisabled = ref(false);
+
 watch(page, () => {
 	defaultStore.set('accountSetupWizard', page.value);
 });