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

* enhance(frontend): アカウント初期設定ウィザードに戻るボタンを追加

* enhance(frontend): アカウント初期設定ウィザードにあとでボタンを追加

* tweak

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
NoriDev 2023-05-26 14:40:44 +09:00 committed by GitHub
parent eee1e74174
commit cf46816687
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 7 deletions

View file

@ -29,6 +29,8 @@
- AiScriptを0.13.3に更新 - AiScriptを0.13.3に更新
- Deck UIを使用している場合、`/`以外にアクセスした際にZen UIで表示するように - Deck UIを使用している場合、`/`以外にアクセスした際にZen UIで表示するように
- メインカラムを設置していない場合の問題を解決 - メインカラムを設置していない場合の問題を解決
- アカウント初期設定ウィザードに戻るボタンを追加
- アカウントの初期設定ウィザードにあとでボタンを追加
- Fix: URLプレビューで情報が取得できなかった際の挙動を修正 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正
- Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正 - Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正
- fix:ロールタイムラインが無効でも投稿が流れてしまう問題の修正 - fix:ロールタイムラインが無効でも投稿が流れてしまう問題の修正

View file

@ -169,20 +169,25 @@ describe('After user signed in', () => {
cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ'); cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
// TODO: アイコン設定テスト // TODO: アイコン設定テスト
cy.get('[data-cy-user-setup-back]').click();
cy.get('[data-cy-user-setup-continue]').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-continue]').click();
// フォローはスキップ // フォローはスキップ
cy.get('[data-cy-user-setup-back]').click();
cy.get('[data-cy-user-setup-continue]').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-continue]').click();
cy.get('[data-cy-user-setup-back]').click();
cy.get('[data-cy-user-setup-continue]').click(); cy.get('[data-cy-user-setup-continue]').click();
}); });
}); });

2
locales/index.d.ts vendored
View file

@ -1060,6 +1060,7 @@ export interface Locale {
"rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string; "rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string;
"cancelReactionConfirm": string; "cancelReactionConfirm": string;
"changeReactionConfirm": string; "changeReactionConfirm": string;
"later": string;
"goToMisskey": string; "goToMisskey": string;
"_initialAccountSetting": { "_initialAccountSetting": {
"accountCreated": string; "accountCreated": string;
@ -1075,6 +1076,7 @@ export interface Locale {
"haveFun": string; "haveFun": string;
"ifYouNeedLearnMore": string; "ifYouNeedLearnMore": string;
"skipAreYouSure": string; "skipAreYouSure": string;
"laterAreYouSure": string;
}; };
"_serverRules": { "_serverRules": {
"description": string; "description": string;

View file

@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。" rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
cancelReactionConfirm: "リアクションを取り消しますか?" cancelReactionConfirm: "リアクションを取り消しますか?"
changeReactionConfirm: "リアクションを変更しますか?" changeReactionConfirm: "リアクションを変更しますか?"
later: "あとで"
goToMisskey: "Misskeyへ" goToMisskey: "Misskeyへ"
_initialAccountSetting: _initialAccountSetting:
@ -1073,6 +1074,7 @@ _initialAccountSetting:
haveFun: "{name}をお楽しみください!" haveFun: "{name}をお楽しみください!"
ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。" ifYouNeedLearnMore: "{name}(Misskey)の使い方などを詳しく知るには{link}をご覧ください。"
skipAreYouSure: "初期設定をスキップしますか?" skipAreYouSure: "初期設定をスキップしますか?"
laterAreYouSure: "初期設定をあとでやり直しますか?"
_serverRules: _serverRules:
description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。" description: "新規登録前に表示する、サーバーの簡潔なルールを設定します。内容は利用規約の要約とすることを推奨します。"

View file

@ -2,7 +2,7 @@
<button <button
v-if="!link" v-if="!link"
ref="el" class="_button" 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" :type="type"
@click="emit('click', $event)" @click="emit('click', $event)"
@mousedown="onMousedown" @mousedown="onMousedown"
@ -14,7 +14,7 @@
</button> </button>
<MkA <MkA
v-else class="_button" 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" :to="to"
@mousedown="onMousedown" @mousedown="onMousedown"
> >
@ -44,6 +44,7 @@ const props = defineProps<{
full?: boolean; full?: boolean;
small?: boolean; small?: boolean;
large?: boolean; large?: boolean;
transparent?: boolean;
asLike?: boolean; asLike?: boolean;
}>(); }>();
@ -194,6 +195,10 @@ function onMousedown(evt: MouseEvent): void {
} }
} }
&.transparent {
background: transparent;
}
&.gradate { &.gradate {
font-weight: bold; font-weight: bold;
color: var(--fgOnAccent) !important; color: var(--fgOnAccent) !important;

View file

@ -34,6 +34,7 @@
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div> <div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
<div>{{ i18n.ts._initialAccountSetting.letsStartAccountSetup }}</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 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> </div>
</MkSpacer> </MkSpacer>
</div> </div>
@ -43,6 +44,7 @@
<MkSpacer :marginMin="20" :marginMax="28"> <MkSpacer :marginMin="20" :marginMax="28">
<XProfile/> <XProfile/>
<div class="_buttonsCenter" style="margin-top: 16px;"> <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> <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> </MkSpacer>
@ -53,6 +55,7 @@
<MkSpacer :marginMin="20" :marginMax="28"> <MkSpacer :marginMin="20" :marginMax="28">
<XPrivacy/> <XPrivacy/>
<div class="_buttonsCenter" style="margin-top: 16px;"> <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> <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> </MkSpacer>
@ -64,7 +67,10 @@
<XFollow/> <XFollow/>
</MkSpacer> </MkSpacer>
<div :class="$style.pageFooter"> <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>
</div> </div>
</template> </template>
@ -76,7 +82,10 @@
<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div> <div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
<div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div> <div style="padding: 0 16px;">{{ i18n.t('_initialAccountSetting.pushNotificationDescription', { name: instance.name ?? host }) }}</div>
<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/> <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> </div>
</MkSpacer> </MkSpacer>
</div> </div>
@ -95,7 +104,10 @@
</template> </template>
</I18n> </I18n>
<div>{{ i18n.t('_initialAccountSetting.haveFun', { name: instance.name ?? host }) }}</div> <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> </div>
</MkSpacer> </MkSpacer>
</div> </div>
@ -144,6 +156,19 @@ async function close(skip: boolean) {
dialog.value.close(); dialog.value.close();
defaultStore.set('accountSetupWizard', -1); 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> </script>
<style lang="scss" module> <style lang="scss" module>
@ -190,7 +215,7 @@ async function close(skip: boolean) {
left: 0; left: 0;
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: blur(15px);
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: blur(15px);
} }
</style> </style>