diff --git a/locales/index.d.ts b/locales/index.d.ts index 66b24890f..db7e3e957 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -1094,6 +1094,9 @@ export interface Locale { "unused": string; "used": string; "expired": string; + "doYouAgree": string; + "beSureToReadThisAsItIsImportant": string; + "iHaveReadXCarefullyAndAgree": string; "_initialAccountSetting": { "accountCreated": string; "letsStartAccountSetup": string; diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 5f728e0e8..b2fa9c337 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1042,7 +1042,7 @@ vertical: "縦" horizontal: "横" position: "位置" serverRules: "サーバールール" -pleaseConfirmBelowBeforeSignup: "このサーバーに登録する前に、以下を確認してください。" +pleaseConfirmBelowBeforeSignup: "このサーバーに登録するには、以下の内容を確認し同意する必要があります。" pleaseAgreeAllToContinue: "続けるには、全ての「同意する」にチェックが入っている必要があります。" continue: "続ける" preservedUsernames: "予約ユーザー名" @@ -1091,6 +1091,9 @@ usedAt: "使用日時" unused: "未使用" used: "使用済み" expired: "期限切れ" +doYouAgree: "同意しますか?" +beSureToReadThisAsItIsImportant: "重要ですので必ずお読みください。" +iHaveReadXCarefullyAndAgree: "「{x}」の内容をよく読み、同意します。" _initialAccountSetting: accountCreated: "アカウントの作成が完了しました!" diff --git a/packages/frontend/src/components/MkSignupDialog.rules.vue b/packages/frontend/src/components/MkSignupDialog.rules.vue index b6ffba6cc..de5195ab4 100644 --- a/packages/frontend/src/components/MkSignupDialog.rules.vue +++ b/packages/frontend/src/components/MkSignupDialog.rules.vue @@ -9,7 +9,10 @@ <MkInfo warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo> </div> - <div style="text-align: center;">{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div> + <div style="text-align: center;"> + <div>{{ i18n.ts.pleaseConfirmBelowBeforeSignup }}</div> + <div style="font-weight: bold; margin-top: 0.5em;">{{ i18n.ts.beSureToReadThisAsItIsImportant }}</div> + </div> <MkFolder v-if="availableServerRules" :defaultOpen="true"> <template #label>{{ i18n.ts.serverRules }}</template> @@ -19,7 +22,7 @@ <li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li> </ol> - <MkSwitch v-model="agreeServerRules" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch> + <MkSwitch :modelValue="agreeServerRules" style="margin-top: 16px;" @update:modelValue="updateAgreeServerRules">{{ i18n.ts.agree }}</MkSwitch> </MkFolder> <MkFolder v-if="availableTos" :defaultOpen="true"> @@ -28,7 +31,7 @@ <a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a> - <MkSwitch v-model="agreeTos" style="margin-top: 16px;">{{ i18n.ts.agree }}</MkSwitch> + <MkSwitch :modelValue="agreeTos" style="margin-top: 16px;" @update:modelValue="updateAgreeTos">{{ i18n.ts.agree }}</MkSwitch> </MkFolder> <MkFolder :defaultOpen="true"> @@ -37,7 +40,7 @@ <a href="https://misskey-hub.net/docs/notes.html" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a> - <MkSwitch v-model="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree>{{ i18n.ts.agree }}</MkSwitch> + <MkSwitch :modelValue="agreeNote" style="margin-top: 16px;" data-cy-signup-rules-notes-agree @update:modelValue="updateAgreeNote">{{ i18n.ts.agree }}</MkSwitch> </MkFolder> <div v-if="!agreed" style="text-align: center;">{{ i18n.ts.pleaseAgreeAllToContinue }}</div> @@ -52,13 +55,14 @@ </template> <script lang="ts" setup> -import { computed, ref } from 'vue'; +import { computed, onMounted, ref, watch } from 'vue'; import { instance } from '@/instance'; import { i18n } from '@/i18n'; import MkButton from '@/components/MkButton.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkInfo from '@/components/MkInfo.vue'; +import * as os from '@/os'; const availableServerRules = instance.serverRules.length > 0; const availableTos = instance.tosUrl != null; @@ -75,6 +79,48 @@ const emit = defineEmits<{ (ev: 'cancel'): void; (ev: 'done'): void; }>(); + +async function updateAgreeServerRules(v: boolean) { + if (v) { + const confirm = await os.confirm({ + type: 'question', + title: i18n.ts.doYouAgree, + text: i18n.t('iHaveReadXCarefullyAndAgree', { x: i18n.ts.serverRules }), + }); + if (confirm.canceled) return; + agreeServerRules.value = true; + } else { + agreeServerRules.value = false; + } +} + +async function updateAgreeTos(v: boolean) { + if (v) { + const confirm = await os.confirm({ + type: 'question', + title: i18n.ts.doYouAgree, + text: i18n.t('iHaveReadXCarefullyAndAgree', { x: i18n.ts.termsOfService }), + }); + if (confirm.canceled) return; + agreeTos.value = true; + } else { + agreeTos.value = false; + } +} + +async function updateAgreeNote(v: boolean) { + if (v) { + const confirm = await os.confirm({ + type: 'question', + title: i18n.ts.doYouAgree, + text: i18n.t('iHaveReadXCarefullyAndAgree', { x: i18n.ts.basicNotesBeforeCreateAccount }), + }); + if (confirm.canceled) return; + agreeNote.value = true; + } else { + agreeNote.value = false; + } +} </script> <style lang="scss" module>