feat: アカウント初期設定ウィザードに戻るボタンと、後で進むボタンを追加 (#10893)

* enhance(frontend): アカウント初期設定ウィザードに戻るボタンを追加 * enhance(frontend): アカウント初期設定ウィザードにあとでボタンを追加 * tweak --------- Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2024-12-23 00:29:22 +09:00 · 2023-05-26 14:40:44 +09:00 · 2023-05-26 14:40:44 +09:00 · cf46816687
commit cf46816687
parent eee1e74174
6 changed files with 48 additions and 7 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -29,6 +29,8 @@
 - AiScriptを0.13.3に更新
 - Deck UIを使用している場合、`/`以外にアクセスした際にZen UIで表示するように
 	- メインカラムを設置していない場合の問題を解決
+- アカウント初期設定ウィザードに戻るボタンを追加
+- アカウントの初期設定ウィザードにあとでボタンを追加
 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正
 - Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正
 - fix:ロールタイムラインが無効でも投稿が流れてしまう問題の修正
--- a/cypress/e2e/basic.cy.js
+++ b/cypress/e2e/basic.cy.js
@ -169,20 +169,25 @@ describe('After user signed in', () => {
 		cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
 		// TODO: アイコン設定テスト

+		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// プライバシー設定

+		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// フォローはスキップ

+		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// プッシュ通知設定はスキップ

+		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

+		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();
  });
 });
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -1060,6 +1060,7 @@ export interface Locale {
    "rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string;
    "cancelReactionConfirm": string;
    "changeReactionConfirm": string;
+    "later": string;
    "goToMisskey": string;
    "_initialAccountSetting": {
        "accountCreated": string;
@ -1075,6 +1076,7 @@ export interface Locale {
        "haveFun": string;
        "ifYouNeedLearnMore": string;
        "skipAreYouSure": string;
+        "laterAreYouSure": string;
    };
    "_serverRules": {
        "description": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
 rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
 cancelReactionConfirm: "リアクションを取り消しますか？"
 changeReactionConfirm: "リアクションを変更しますか？"
+later: "あとで"
 goToMisskey: "Misskeyへ"

 _initialAccountSetting:
@ -1073,6 +1074,7 @@ _initialAccountSetting:
  haveFun: "{name}をお楽しみください！"
  ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。"
  skipAreYouSure: "初期設定をスキップしますか？"
+  laterAreYouSure: "初期設定をあとでやり直しますか？"

 _serverRules:
  description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@ -2,7 +2,7 @@
 <button
 	v-if="!link"
 	ref="el" class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:type="type"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
@ -14,7 +14,7 @@
 </button>
 <MkA
 	v-else class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.asLike]: asLike }]"
+	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:to="to"
 	@mousedown="onMousedown"
 >
@ -44,6 +44,7 @@ const props = defineProps<{
 	full?: boolean;
 	small?: boolean;
 	large?: boolean;
+	transparent?: boolean;
 	asLike?: boolean;
 }>();

@ -194,6 +195,10 @@ function onMousedown(evt: MouseEvent): void {
 		}
 	}

+	&.transparent {
+		background: transparent;
+	}
+
 	&.gradate {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@ -34,6 +34,7 @@
 							<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>
@ -43,6 +44,7 @@
 					<MkSpacer :marginMin="20" :marginMax="28">
 						<XProfile/>
 						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<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>
 						</div>
 					</MkSpacer>
@ -53,6 +55,7 @@
 					<MkSpacer :marginMin="20" :marginMax="28">
 						<XPrivacy/>
 						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<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>
 						</div>
 					</MkSpacer>
@ -64,7 +67,10 @@
 						<XFollow/>
 					</MkSpacer>
 					<div :class="$style.pageFooter">
-						<MkButton primary rounded gradate style="margin: 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						<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 style="" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
 					</div>
 				</div>
 			</template>
@ -76,7 +82,10 @@
 							<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
 							<div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div>
 							<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>
-							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<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>
+							</div>
 						</div>
 					</MkSpacer>
 				</div>
@ -95,7 +104,10 @@
 								</template>
 							</I18n>
 							<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div>
-							<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="close(false)">{{ i18n.ts.close }}</MkButton>
+							<div class="_buttonsCenter" style="margin-top: 16px;">
+								<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="close(false)">{{ i18n.ts.close }}</MkButton>
+							</div>
 						</div>
 					</MkSpacer>
 				</div>
@ -144,6 +156,19 @@ async function close(skip: boolean) {
 	dialog.value.close();
 	defaultStore.set('accountSetupWizard', -1);
 }
+
+async function later(later: boolean) {
+	if (later) {
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts._initialAccountSetting.laterAreYouSure,
+		});
+		if (canceled) return;
+	}
+
+	dialog.value.close();
+	defaultStore.set('accountSetupWizard', 0);
+}
 </script>

 <style lang="scss" module>
@ -190,7 +215,7 @@ async function close(skip: boolean) {
 	left: 0;
 	padding: 12px;
 	border-top: solid 0.5px var(--divider);
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
+	-webkit-backdrop-filter: blur(15px);
+	backdrop-filter: blur(15px);
 }
 </style>