From 9b6a3a4bb74595f6157f0dd61dd4619a9d5ca58f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 22 Dec 2024 15:50:54 +0900
Subject: [PATCH] implement frontend

---
 locales/index.d.ts                            |  8 ++++++++
 locales/ja-JP.yml                             |  2 ++
 .../src/components/MkSignin.input.vue         | 19 +++++++++++++++++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 63878d3d47..266c7b18a9 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5222,6 +5222,14 @@ export interface Locale extends ILocale {
      * 注意事項を理解した上でオンにします。
      */
     "acknowledgeNotesAndEnable": string;
+    /**
+     * ユーザー名を使う
+     */
+    "useUsername": string;
+    /**
+     * メールアドレスを使う
+     */
+    "useEmail": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d78bd4ee65..f8f99223a2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1301,6 +1301,8 @@ lockdown: "ロックダウン"
 pleaseSelectAccount: "アカウントを選択してください"
 availableRoles: "利用可能なロール"
 acknowledgeNotesAndEnable: "注意事項を理解した上でオンにします。"
+useUsername: "ユーザー名を使う"
+useEmail: "メールアドレスを使う"
 
 _accountSettings:
   requireSigninToViewContents: "コンテンツの表示にログインを必須にする"
diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 34c22abc31..83113e0955 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -32,9 +32,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<!-- username入力 -->
 		<form class="_gaps_s" @submit.prevent="emit('usernameSubmitted', username)">
-			<MkInput v-model="username" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autocomplete="username webauthn" autofocus required data-cy-signin-username>
-				<template #prefix>@</template>
+			<MkInput
+				v-model="username"
+				:placeholder="isEmail ? i18n.ts.emailAddress : i18n.ts.username"
+				:type="isEmail ? 'email' : 'text'"
+				:pattern="isEmail ? '^[^@]+@[^@]+$' : undefined"
+				:spellcheck="false"
+				:autocomplete="isEmail ? 'email' : 'username webauthn'"
+				autofocus
+				required
+				data-cy-signin-username
+			>
+				<template #prefix>
+					<i v-if="isEmail" class="ti ti-email"></i>
+					<span v-else>@</span>
+				</template>
 				<template #suffix>@{{ host }}</template>
+				<template #caption><button class="_textButton" type="button" @click="isEmail = !isEmail">{{ isEmail ? i18n.ts.useUsername : i18n.ts.useEmail }}</button></template>
 			</MkInput>
 			<MkButton type="submit" large primary rounded style="margin: 0 auto;" data-cy-signin-page-input-continue>{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
 		</form>
@@ -82,6 +96,7 @@ const emit = defineEmits<{
 const host = toUnicode(configHost);
 
 const username = ref('');
+const isEmail = ref(false);
 
 //#region Open on remote
 function openRemote(options: OpenOnRemoteOptions, targetHost?: string): void {