spec(frontend): メアド認証が義務化されているのにメアドが登録されてない・認証されてない場合登録するように促す (MisskeyIO#608)

locales/en-US.yml

@@ -749,6 +749,8 @@ loadRawImages: "Load original images instead of showing thumbnails"
 disableShowingAnimatedImages: "Don't play animated images"
 highlightSensitiveMedia: "Highlight sensitive media"
 verificationEmailSent: "A verification email has been sent. Please follow the included link to complete verification."
+emailRegistrationRequired: "Email registration required"
+emailRegistrationRequiredBanner: "{instance} requires email registration. Click here to register your email address."
 notSet: "Not set"
 emailVerified: "Email has been verified"
 noteFavoritesCount: "Number of favorite notes"

locales/index.d.ts

@@ -3008,6 +3008,14 @@ export interface Locale extends ILocale {
      * 確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。
      */
     "verificationEmailSent": string;
+    /**
+     * メールアドレスの登録が必要です
+     */
+    "emailRegistrationRequired": string;
+    /**
+     * {instance}はメールアドレスの登録が必要です。ここをクリックしてメールアドレスを登録してください。
+     */
+    "emailRegistrationRequiredBanner": ParameterizedString<"instance">;
     /**
      * 未設定
      */

locales/ja-JP.yml

@@ -748,6 +748,8 @@ loadRawImages: "添付画像のサムネイルをオリジナル画質にする"
 disableShowingAnimatedImages: "アニメーション画像を再生しない"
 highlightSensitiveMedia: "メディアがセンシティブであることを分かりやすく表示"
 verificationEmailSent: "確認のメールを送信しました。メールに記載されたリンクにアクセスして、設定を完了してください。"
+emailRegistrationRequired: "メールアドレスの登録が必要です"
+emailRegistrationRequiredBanner: "{instance}はメールアドレスの登録が必要です。ここをクリックしてメールアドレスを登録してください。"
 notSet: "未設定"
 emailVerified: "メールアドレスが確認されました"
 noteFavoritesCount: "お気に入りノートの数"

locales/ko-KR.yml

@@ -748,6 +748,8 @@ loadRawImages: "첨부한 이미지의 썸네일을 원본화질로 표시"
 disableShowingAnimatedImages: "움직이는 이미지를 자동으로 재생하지 않음"
 highlightSensitiveMedia: "미디어가 민감한 내용이라는 것을 알기 쉽게 표시"
 verificationEmailSent: "확인 메일을 발송하였습니다. 설정을 완료하려면 메일에 첨부된 링크를 확인해 주세요."
+emailRegistrationRequired: "이메일 주소 등록이 필요합니다"
+emailRegistrationRequiredBanner: "{instance}에서는 이메일 주소 등록이 필요합니다. 여기를 클릭하여 이메일 주소를 등록해 주세요."
 notSet: "설정되지 않음"
 emailVerified: "메일 주소가 확인되었습니다."
 noteFavoritesCount: "즐겨찾기한 노트 수"

packages/frontend/src/pages/settings/email.vue

@@ -7,11 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div v-if="instance.enableEmail" class="_gaps_m">
 	<FormSection first>
 		<template #label>{{ i18n.ts.emailAddress }}</template>
-		<MkInput v-model="emailAddress" type="email" manualSave>
-			<template #prefix><i class="ti ti-mail"></i></template>
-			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
-		</MkInput>
+		<div class="_gaps_s">
+			<MkInfo v-if="instance.emailRequiredForSignup && !emailAddress" warn>{{ i18n.ts.emailRegistrationRequired }}</MkInfo>
+			<MkInput v-model="emailAddress" type="email" manualSave>
+				<template #prefix><i class="ti ti-mail"></i></template>
+				<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
+				<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
+			</MkInput>
+		</div>
 	</FormSection>
 
 	<FormSection>

packages/frontend/src/ui/_common_/announcements.vue

@@ -5,6 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
+	<MkA v-if="instance.emailRequiredForSignup && $i && !$i.email" :class="$style.item" to="/settings/email">
+		<span :class="$style.icon">
+			<i class="ti ti-circle-x" style="color: var(--error);"></i>
+		</span>
+		<span :class="$style.title">{{ i18n.tsx.emailRegistrationRequiredBanner({ instance: instanceName }) }}</span>
+	</MkA>
+	<MkA v-if="$i && $i.email && !$i.emailVerified" :class="$style.item" to="/settings/email">
+		<span :class="$style.icon">
+			<i class="ti ti-mail"></i>
+		</span>
+		<span :class="$style.title">{{ i18n.ts.verificationEmailSent }}</span>
+	</MkA>
 	<MkA
 		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')"
 		:key="announcement.id"
@@ -24,7 +36,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+import { instanceName } from '@/config.js';
+import { instance } from '@/instance.js';
 import { $i } from '@/account.js';
+import { i18n } from '@/i18n.js';
 </script>
 
 <style lang="scss" module>