This commit is contained in:
kakkokari-gtyih 2024-12-22 18:51:22 +09:00
parent b0ec08f204
commit 1ac4c692bb
5 changed files with 43 additions and 17 deletions

4
locales/index.d.ts vendored
View file

@ -3722,6 +3722,10 @@ export interface Locale extends ILocale {
* *
*/ */
"useDrawerReactionPickerForMobile": string; "useDrawerReactionPickerForMobile": string;
/**
*
*/
"welcomeBack": string;
/** /**
* {name} * {name}
*/ */

View file

@ -926,6 +926,7 @@ incorrectTotp: "ワンタイムパスワードが間違っているか、期限
voteConfirm: "「{choice}」に投票しますか?" voteConfirm: "「{choice}」に投票しますか?"
hide: "隠す" hide: "隠す"
useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示" useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
welcomeBack: "おかえりなさい"
welcomeBackWithName: "おかえりなさい、{name}さん" welcomeBackWithName: "おかえりなさい、{name}さん"
clickToFinishEmailVerification: "[{ok}]を押して、メールアドレスの確認を完了してください。" clickToFinishEmailVerification: "[{ok}]を押して、メールアドレスの確認を完了してください。"
overridedDeviceKind: "デバイスタイプ" overridedDeviceKind: "デバイスタイプ"

View file

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
v-model="username" v-model="username"
:placeholder="isEmail ? i18n.ts.emailAddress : i18n.ts.username" :placeholder="isEmail ? i18n.ts.emailAddress : i18n.ts.username"
:type="isEmail ? 'email' : 'text'" :type="isEmail ? 'email' : 'text'"
:pattern="isEmail ? '^[^@]+@[^@]+$' : undefined" :pattern="isEmail ? undefined : '^[^@]+$'"
:spellcheck="false" :spellcheck="false"
:autocomplete="isEmail ? 'email' : 'username webauthn'" :autocomplete="isEmail ? 'email' : 'username webauthn'"
autofocus autofocus

View file

@ -6,17 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div :class="$style.wrapper" data-cy-signin-page-password> <div :class="$style.wrapper" data-cy-signin-page-password>
<div class="_gaps" :class="$style.root"> <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"> <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> <template #name><Mfm :text="user.name ?? user.username" :plain="true"/></template>
</I18n> </I18n>
<span v-else>{{ i18n.ts.welcomeBack }}</span>
</div> </div>
<!-- password入力 --> <!-- password入力 -->
<form class="_gaps_s" @submit.prevent="onSubmit"> <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> <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> <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'; import MkCaptcha from '@/components/MkCaptcha.vue';
const props = defineProps<{ const props = defineProps<{
user: Misskey.entities.UserDetailed; user: Misskey.entities.UserDetailed | null;
needCaptcha: boolean; needCaptcha: boolean;
}>(); }>();
@ -147,6 +151,16 @@ defineExpose({
background-position: center; background-position: center;
background-size: cover; background-size: cover;
border-radius: 100%; 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 { .welcomeBackMessage {

View file

@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
key="password" key="password"
ref="passwordPageEl" ref="passwordPageEl"
:user="userInfo!" :user="userInfo"
:needCaptcha="needCaptcha" :needCaptcha="needCaptcha"
@passwordSubmitted="onPasswordSubmitted" @passwordSubmitted="onPasswordSubmitted"
@ -101,6 +101,7 @@ const waiting = ref(false);
const passwordPageEl = useTemplateRef('passwordPageEl'); const passwordPageEl = useTemplateRef('passwordPageEl');
const needCaptcha = ref(false); const needCaptcha = ref(false);
const username = ref('');
const userInfo = ref<null | Misskey.entities.UserDetailed>(null); const userInfo = ref<null | Misskey.entities.UserDetailed>(null);
const password = ref(''); const password = ref('');
@ -141,7 +142,7 @@ function onPasskeyDone(credential: AuthenticationPublicKeyCredential): void {
} }
emit('login', res.signinResponse); emit('login', res.signinResponse);
}).catch(onSigninApiError); }).catch(onSigninApiError);
} else if (userInfo.value != null) { } else if (userInfo.value != null || username.value !== '') {
tryLogin({ tryLogin({
username: userInfo.value.username, username: userInfo.value.username,
password: password.value, password: password.value,
@ -155,15 +156,18 @@ function onUseTotp(): void {
} }
//#endregion //#endregion
async function onUsernameSubmitted(username: string) { async function onUsernameSubmitted(_username: string) {
waiting.value = true; waiting.value = true;
username.value = _username;
userInfo.value = await misskeyApi('users/show', { if (!_username.includes('@')) {
username, userInfo.value = await misskeyApi('users/show', {
}).catch(() => null); username: _username,
}).catch(() => null);
}
await tryLogin({ await tryLogin({
username, username: _username,
}); });
} }
@ -171,7 +175,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
waiting.value = true; waiting.value = true;
password.value = pw.password; password.value = pw.password;
if (userInfo.value == null) { if (userInfo.value == null && username.value === '') {
await os.alert({ await os.alert({
type: 'error', type: 'error',
title: i18n.ts.noSuchUser, title: i18n.ts.noSuchUser,
@ -181,7 +185,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
return; return;
} else { } else {
await tryLogin({ await tryLogin({
username: userInfo.value.username, username: userInfo.value?.username ?? username.value,
password: pw.password, password: pw.password,
'hcaptcha-response': pw.captcha.hCaptchaResponse, 'hcaptcha-response': pw.captcha.hCaptchaResponse,
'm-captcha-response': pw.captcha.mCaptchaResponse, 'm-captcha-response': pw.captcha.mCaptchaResponse,
@ -195,7 +199,7 @@ async function onPasswordSubmitted(pw: PwResponse) {
async function onTotpSubmitted(token: string) { async function onTotpSubmitted(token: string) {
waiting.value = true; waiting.value = true;
if (userInfo.value == null) { if (userInfo.value == null && username.value === '') {
await os.alert({ await os.alert({
type: 'error', type: 'error',
title: i18n.ts.noSuchUser, title: i18n.ts.noSuchUser,
@ -205,7 +209,7 @@ async function onTotpSubmitted(token: string) {
return; return;
} else { } else {
await tryLogin({ await tryLogin({
username: userInfo.value.username, username: userInfo.value?.username ?? username.value,
password: password.value, password: password.value,
token, token,
}); });
@ -214,7 +218,7 @@ async function onTotpSubmitted(token: string) {
async function tryLogin(req: Partial<Misskey.entities.SigninFlowRequest>): Promise<Misskey.entities.SigninFlowResponse> { async function tryLogin(req: Partial<Misskey.entities.SigninFlowRequest>): Promise<Misskey.entities.SigninFlowResponse> {
const _req = { const _req = {
username: req.username ?? userInfo.value?.username, username: req.username ?? userInfo.value?.username ?? username.value,
...req, ...req,
}; };
@ -367,7 +371,9 @@ function onSigninApiError(err?: any): void {
if (doingPasskeyFromInputPage.value === true) { if (doingPasskeyFromInputPage.value === true) {
doingPasskeyFromInputPage.value = false; doingPasskeyFromInputPage.value = false;
page.value = 'input'; page.value = 'input';
username.value = '';
password.value = ''; password.value = '';
userInfo.value = null;
} }
passwordPageEl.value?.resetCaptcha(); passwordPageEl.value?.resetCaptcha();
nextTick(() => { nextTick(() => {
@ -376,6 +382,7 @@ function onSigninApiError(err?: any): void {
} }
onBeforeUnmount(() => { onBeforeUnmount(() => {
username.value = '';
password.value = ''; password.value = '';
needCaptcha.value = false; needCaptcha.value = false;
userInfo.value = null; userInfo.value = null;