From 1ac4c692bbdd667569eb4f66ceedcb85560168d9 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sun, 22 Dec 2024 18:51:22 +0900
Subject: [PATCH] fix

---
 locales/index.d.ts                            |  4 +++
 locales/ja-JP.yml                             |  1 +
 .../src/components/MkSignin.input.vue         |  2 +-
 .../src/components/MkSignin.password.vue      | 22 ++++++++++---
 packages/frontend/src/components/MkSignin.vue | 31 ++++++++++++-------
 5 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 266c7b18a936..6a0e8e2d1034 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -3722,6 +3722,10 @@ export interface Locale extends ILocale {
      * モバイルデバイスのときドロワーで表示
      */
     "useDrawerReactionPickerForMobile": string;
+    /**
+     * おかえりなさい
+     */
+    "welcomeBack": string;
     /**
      * おかえりなさい、{name}さん
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f8f99223a25e..80fc646c2f23 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -926,6 +926,7 @@ incorrectTotp: "ワンタイムパスワードが間違っているか、期限
 voteConfirm: "「{choice}」に投票しますか？"
 hide: "隠す"
 useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
+welcomeBack: "おかえりなさい"
 welcomeBackWithName: "おかえりなさい、{name}さん"
 clickToFinishEmailVerification: "[{ok}]を押して、メールアドレスの確認を完了してください。"
 overridedDeviceKind: "デバイスタイプ"
diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index a9692b211401..cdc6aa5134ed 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				v-model="username"
 				:placeholder="isEmail ? i18n.ts.emailAddress : i18n.ts.username"
 				:type="isEmail ? 'email' : 'text'"
-				:pattern="isEmail ? '^[^@]+@[^@]+$' : undefined"
+				:pattern="isEmail ? undefined : '^[^@]+$'"
 				:spellcheck="false"
 				:autocomplete="isEmail ? 'email' : 'username webauthn'"
 				autofocus
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index cd003a39df32..b940c349b013 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -6,17 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-password>
 	<div class="_gaps" :class="$style.root">
-		<div :class="$style.avatar" :style="{ backgroundImage: user ? `url('${user.avatarUrl}')` : undefined }"></div>
+		<div v-if="user" :class="$style.avatar" :style="{ backgroundImage: `url('${user.avatarUrl}')` }"></div>
+		<div v-else :class="[$style.avatar, $style.avatarFallback]">
+			<i class="ti ti-user"></i>
+		</div>
 		<div :class="$style.welcomeBackMessage">
-			<I18n :src="i18n.ts.welcomeBackWithName" tag="span">
+			<I18n v-if="user" :src="i18n.ts.welcomeBackWithName" tag="span">
 				<template #name><Mfm :text="user.name ?? user.username" :plain="true"/></template>
 			</I18n>
+			<span v-else>{{ i18n.ts.welcomeBack }}</span>
 		</div>
 
 		<!-- password入力 -->
 		<form class="_gaps_s" @submit.prevent="onSubmit">
 			<!-- ブラウザ オートコンプリート用 -->
-			<input type="hidden" name="username" autocomplete="username" :value="user.username">
+			<input v-if="user" type="hidden" name="username" autocomplete="username" :value="user.username">
 
 			<MkInput v-model="password" :placeholder="i18n.ts.password" type="password" autocomplete="current-password webauthn" :withPasswordToggle="true" required autofocus data-cy-signin-password>
 				<template #prefix><i class="ti ti-lock"></i></template>
@@ -63,7 +67,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkCaptcha from '@/components/MkCaptcha.vue';
 
 const props = defineProps<{
-	user: Misskey.entities.UserDetailed;
+	user: Misskey.entities.UserDetailed | null;
 	needCaptcha: boolean;
 }>();
 
@@ -147,6 +151,16 @@ defineExpose({
 	background-position: center;
 	background-size: cover;
 	border-radius: 100%;
+
+	&.avatarFallback {
+		background-color: var(--MI_THEME-accentedBg);
+		color: var(--MI_THEME-accent);
+		text-align: center;
+		height: 64px;
+		width: 64px;
+		font-size: 24px;
+		line-height: 64px;
+	}
 }
 
 .welcomeBackMessage {
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index 776ee20e36f6..5b6707b9bee5 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			key="password"
 			ref="passwordPageEl"
 
-			:user="userInfo!"
+			:user="userInfo"
 			:needCaptcha="needCaptcha"
 
 			@passwordSubmitted="onPasswordSubmitted"
@@ -101,6 +101,7 @@ const waiting = ref(false);
 const passwordPageEl = useTemplateRef('passwordPageEl');
 const needCaptcha = ref(false);
 
+const username = ref('');
 const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
 const password = ref('');
 
@@ -141,7 +142,7 @@ function onPasskeyDone(credential: AuthenticationPublicKeyCredential): void {
 			}
 			emit('login', res.signinResponse);
 		}).catch(onSigninApiError);
-	} else if (userInfo.value != null) {
+	} else if (userInfo.value != null || username.value !== '') {
 		tryLogin({
 			username: userInfo.value.username,
 			password: password.value,
@@ -155,15 +156,18 @@ function onUseTotp(): void {
 }
 //#endregion
 
-async function onUsernameSubmitted(username: string) {
+async function onUsernameSubmitted(_username: string) {
 	waiting.value = true;
+	username.value = _username;
 
-	userInfo.value = await misskeyApi('users/show', {
-		username,
-	}).catch(() => null);
+	if (!_username.includes('@')) {
+		userInfo.value = await misskeyApi('users/show', {
+			username: _username,
+		}).catch(() => null);
+	}
 
 	await tryLogin({
-		username,
+		username: _username,
 	});
 }
 
@@ -171,7 +175,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
 	waiting.value = true;
 	password.value = pw.password;
 
-	if (userInfo.value == null) {
+	if (userInfo.value == null && username.value === '') {
 		await os.alert({
 			type: 'error',
 			title: i18n.ts.noSuchUser,
@@ -181,7 +185,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
 		return;
 	} else {
 		await tryLogin({
-			username: userInfo.value.username,
+			username: userInfo.value?.username ?? username.value,
 			password: pw.password,
 			'hcaptcha-response': pw.captcha.hCaptchaResponse,
 			'm-captcha-response': pw.captcha.mCaptchaResponse,
@@ -195,7 +199,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
 async function onTotpSubmitted(token: string) {
 	waiting.value = true;
 
-	if (userInfo.value == null) {
+	if (userInfo.value == null && username.value === '') {
 		await os.alert({
 			type: 'error',
 			title: i18n.ts.noSuchUser,
@@ -205,7 +209,7 @@ async function onTotpSubmitted(token: string) {
 		return;
 	} else {
 		await tryLogin({
-			username: userInfo.value.username,
+			username: userInfo.value?.username ?? username.value,
 			password: password.value,
 			token,
 		});
@@ -214,7 +218,7 @@ async function onTotpSubmitted(token: string) {
 
 async function tryLogin(req: Partial<Misskey.entities.SigninFlowRequest>): Promise<Misskey.entities.SigninFlowResponse> {
 	const _req = {
-		username: req.username ?? userInfo.value?.username,
+		username: req.username ?? userInfo.value?.username ?? username.value,
 		...req,
 	};
 
@@ -367,7 +371,9 @@ function onSigninApiError(err?: any): void {
 	if (doingPasskeyFromInputPage.value === true) {
 		doingPasskeyFromInputPage.value = false;
 		page.value = 'input';
+		username.value = '';
 		password.value = '';
+		userInfo.value = null;
 	}
 	passwordPageEl.value?.resetCaptcha();
 	nextTick(() => {
@@ -376,6 +382,7 @@ function onSigninApiError(err?: any): void {
 }
 
 onBeforeUnmount(() => {
+	username.value = '';
 	password.value = '';
 	needCaptcha.value = false;
 	userInfo.value = null;