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

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

* チュートリアルが特定の操作でスキップできてしまうのを修正

---------

Co-authored-by: CyberRex <26585194+CyberRex0@users.noreply.github.com>

locales/en-US.yml

@@ -1330,7 +1330,7 @@ _initialAccountSetting:
   pushNotificationDescription: "Enabling push notifications will allow you to receive notifications from {name} directly on your device."
   initialAccountSettingCompleted: "Profile setup complete!"
   haveFun: "Enjoy {name}!"
-  youCanContinueTutorial: "You can proceed to a tutorial on how to use {name} (Misskey) or you can exit the setup here and start using it immediately."
+  continueTutorial: "Now, let's proceed with a tutorial on how to use {name} (Misskey)."
   startTutorial: "Start Tutorial"
   skipAreYouSure: "Really skip profile setup?"
   laterAreYouSure: "Really do profile setup later?"

locales/index.d.ts

@@ -5344,9 +5344,9 @@ export interface Locale extends ILocale {
          */
         "haveFun": ParameterizedString<"name">;
         /**
-         * このまま{name}(Misskey)の使い方についてのチュートリアルに進むこともできますが、ここで中断してすぐに使い始めることもできます。
+         * このまま{name}(Misskey)の使い方についてのチュートリアルに進みます。
          */
-        "youCanContinueTutorial": ParameterizedString<"name">;
+        "continueTutorial": ParameterizedString<"name">;
         /**
          * チュートリアルを開始
          */

locales/ja-JP.yml

@@ -1338,7 +1338,7 @@ _initialAccountSetting:
   pushNotificationDescription: "プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。"
   initialAccountSettingCompleted: "初期設定が完了しました！"
   haveFun: "{name}をお楽しみください！"
-  youCanContinueTutorial: "このまま{name}(Misskey)の使い方についてのチュートリアルに進むこともできますが、ここで中断してすぐに使い始めることもできます。"
+  continueTutorial: "このまま{name}(Misskey)の使い方についてのチュートリアルに進みます。"
   startTutorial: "チュートリアルを開始"
   skipAreYouSure: "初期設定をスキップしますか？"
   laterAreYouSure: "初期設定をあとでやり直しますか？"

locales/ja-KS.yml

@@ -1275,7 +1275,7 @@ _initialAccountSetting:
   pushNotificationDescription: "プッシュ通知を有効にすると{name}の通知をあんたのデバイスで受け取れるで。"
   initialAccountSettingCompleted: "初期設定終わりや！"
   haveFun: "{name}、楽しんでな～"
-  youCanContinueTutorial: "こんまま{name}(Misskey)の使い方のチュートリアルにも行けるけど、ここでやめてすぐに使い始めてもええで。"
+  continueTutorial: "こんまま{name}(Misskey)の使い方のチュートリアルが始まるで。"
   startTutorial: "チュートリアルはじめる"
   skipAreYouSure: "初期設定飛ばすか？"
   laterAreYouSure: "初期設定あとでやり直すん？"

locales/ko-KR.yml

@@ -1323,7 +1323,7 @@ _initialAccountSetting:
   pushNotificationDescription: "푸시 알림을 활성화하면 {name}의 알림을 나의 기기에서 받아볼 수 있게 됩니다."
   initialAccountSettingCompleted: "초기 설정을 모두 마쳤습니다!"
   haveFun: "{name}와 함께 즐거운 시간 보내세요!"
-  youCanContinueTutorial: "이대로 {name}(Misskey)의 사용법에 대해 튜토리얼을 진행할 수도 있지만, 여기서 중단하고 바로 시작할 수도 있습니다."
+  continueTutorial: "이대로 {name}(Misskey)의 사용법에 대해 튜토리얼을 진행합니다."
   startTutorial: "튜토리얼 시작"
   skipAreYouSure: "초기 설정을 중단하시겠습니까?"
   laterAreYouSure: "초기 설정을 나중에 진행하시겠습니까?"

packages/frontend/src/components/MkModalWindow.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span :class="$style.title">
 				<slot name="header"></slot>
 			</span>
-			<button v-if="!withOkButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="!withOkButton && withCloseButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
 			<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div :class="$style.body">
@@ -27,12 +27,16 @@ import MkModal from './MkModal.vue';
 
 const props = withDefaults(defineProps<{
 	withOkButton: boolean;
+	withCloseButton: boolean;
 	okButtonDisabled: boolean;
+	escKeyDisabled: boolean;
 	width: number;
 	height: number;
 }>(), {
 	withOkButton: false,
+	withCloseButton: true,
 	okButtonDisabled: false,
+	escKeyDisabled: false,
 	width: 400,
 	height: 500,
 });
@@ -60,6 +64,7 @@ const onBgClick = () => {
 
 const onKeydown = (evt) => {
 	if (evt.which === 27) { // Esc
+		if (props.escKeyDisabled) return;
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();

packages/frontend/src/components/MkTutorialDialog.vue

@@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="dialog"
 	:width="600"
 	:height="650"
-	@close="close(true)"
+	:withCloseButton="false"
+	:escKeyDisabled="true"
 	@closed="emit('closed')"
 >
 	<template v-if="page === 1" #header><i class="ti ti-pencil"></i> {{ i18n.ts._initialTutorial._note.title }}</template>
@@ -35,7 +36,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._landing.title }}</div>
 							<div>{{ i18n.ts._initialTutorial._landing.description }}</div>
 							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialTutorial.launchTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
-							<MkButton style="margin: 0 auto;" transparent rounded @click="close(true)">{{ i18n.ts.close }}</MkButton>
 						</div>
 					</MkSpacer>
 				</div>

packages/frontend/src/components/MkUserSetupDialog.vue

@@ -9,6 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:width="500"
 	:height="550"
 	data-cy-user-setup
+	:withCloseButton="false"
+	:escKeyDisabled="true"
 	@closed="emit('closed')"
 >
 	<template v-if="page === 1" #header><i class="ti ti-user-edit"></i> {{ i18n.ts._initialAccountSetting.profileSetting }}</template>
@@ -38,7 +40,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
 							<div>{{ i18n.ts._initialAccountSetting.letsStartAccountSetup }}</div>
 							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
-							<MkButton style="margin: 0 auto;" transparent rounded @click="later(true)">{{ i18n.ts.later }}</MkButton>
 						</div>
 					</MkSpacer>
 				</div>
@@ -109,13 +110,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
-							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._initialAccountSetting.continueTutorial({ name: instance.name ?? host }) }}</div>
+
 							<div class="_buttonsCenter" style="margin-top: 16px;">
-								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
-							</div>
-							<div class="_buttonsCenter">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
-								<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
+								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
 						</div>
 					</MkSpacer>