Add translation keys for reset password page (#1502)
* Begin Work * Add email sent notification keys * Finish adding notification keys * Fix lint error * Finish work (I think) * Remove password label (generic) * Add password label key * Re-organize Reset password page messages (#11) - Group messages by their use - Change some of the keys for clarity - Change some keys to conform to conventions --------- Co-authored-by: Sasha Sorokin <10401817+brawaru@users.noreply.github.com> Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
This commit is contained in:
Mysterious_Dev
GitHub
parent
52b299315d
commit
f0631d734e
@ -1,4 +1,43 @@
|
||||
{
|
||||
"auth.reset-password.method-choice.action": {
|
||||
"message": "Send recovery email"
|
||||
},
|
||||
"auth.reset-password.method-choice.description": {
|
||||
"message": "Enter your email below and we'll send a recovery link to allow you to recover your account."
|
||||
},
|
||||
"auth.reset-password.method-choice.email-username.label": {
|
||||
"message": "Email or username"
|
||||
},
|
||||
"auth.reset-password.method-choice.email-username.placeholder": {
|
||||
"message": "Email"
|
||||
},
|
||||
"auth.reset-password.notification.email-sent.text": {
|
||||
"message": "An email with instructions has been sent to you if the email was previously saved on your account."
|
||||
},
|
||||
"auth.reset-password.notification.email-sent.title": {
|
||||
"message": "Email sent"
|
||||
},
|
||||
"auth.reset-password.notification.password-reset.text": {
|
||||
"message": "You can now log-in into your account with your new password."
|
||||
},
|
||||
"auth.reset-password.notification.password-reset.title": {
|
||||
"message": "Password successfully reset"
|
||||
},
|
||||
"auth.reset-password.post-challenge.action": {
|
||||
"message": "Reset password"
|
||||
},
|
||||
"auth.reset-password.post-challenge.confirm-password.label": {
|
||||
"message": "Confirm password"
|
||||
},
|
||||
"auth.reset-password.post-challenge.description": {
|
||||
"message": "Enter your new password below to gain access to your account."
|
||||
},
|
||||
"auth.reset-password.title": {
|
||||
"message": "Reset Password"
|
||||
},
|
||||
"auth.reset-password.title.long": {
|
||||
"message": "Reset your password"
|
||||
},
|
||||
"auth.welcome.checkbox.subscribe": {
|
||||
"message": "Subscribe to updates about Modrinth"
|
||||
},
|
||||
@ -122,6 +161,9 @@
|
||||
"input.view.list": {
|
||||
"message": "List view"
|
||||
},
|
||||
"label.password": {
|
||||
"message": "Password"
|
||||
},
|
||||
"label.collections": {
|
||||
"message": "Collections"
|
||||
},
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Reset your password</h1>
|
||||
<h1>{{ formatMessage(messages.longTitle) }}</h1>
|
||||
<section class="auth-form">
|
||||
<template v-if="step === 'choose_method'">
|
||||
<p>
|
||||
Enter your email below and we'll send a recovery link to allow you to recover your
|
||||
account.
|
||||
{{ formatMessage(methodChoiceMessages.description) }}
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<label for="email" hidden>
|
||||
{{ formatMessage(methodChoiceMessages.emailUsernameLabel) }}
|
||||
</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
@ -18,19 +19,19 @@
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
:placeholder="formatMessage(methodChoiceMessages.emailUsernamePlaceholder)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary centered-btn" @click="recovery">
|
||||
<SendIcon /> Send recovery email
|
||||
<SendIcon /> {{ formatMessage(methodChoiceMessages.action) }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="step === 'passed_challenge'">
|
||||
<p>Enter your new password below to gain access to your account.</p>
|
||||
<p>{{ formatMessage(postChallengeMessages.description) }}</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
@ -38,12 +39,14 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="auth-form__input"
|
||||
placeholder="Password"
|
||||
:placeholder="formatMessage(commonMessages.passwordLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<label for="confirm-password" hidden>
|
||||
{{ formatMessage(commonMessages.passwordLabel) }}
|
||||
</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
@ -51,12 +54,12 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
:placeholder="formatMessage(postChallengeMessages.confirmPasswordLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
|
||||
Reset password
|
||||
{{ formatMessage(postChallengeMessages.action) }}
|
||||
</button>
|
||||
</template>
|
||||
</section>
|
||||
@ -67,8 +70,82 @@ import { SendIcon } from 'omorphia'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const methodChoiceMessages = defineMessages({
|
||||
description: {
|
||||
id: 'auth.reset-password.method-choice.description',
|
||||
defaultMessage:
|
||||
"Enter your email below and we'll send a recovery link to allow you to recover your account.",
|
||||
},
|
||||
emailUsernameLabel: {
|
||||
id: 'auth.reset-password.method-choice.email-username.label',
|
||||
defaultMessage: 'Email or username',
|
||||
},
|
||||
emailUsernamePlaceholder: {
|
||||
id: 'auth.reset-password.method-choice.email-username.placeholder',
|
||||
defaultMessage: 'Email',
|
||||
},
|
||||
action: {
|
||||
id: 'auth.reset-password.method-choice.action',
|
||||
defaultMessage: 'Send recovery email',
|
||||
},
|
||||
})
|
||||
|
||||
const postChallengeMessages = defineMessages({
|
||||
description: {
|
||||
id: 'auth.reset-password.post-challenge.description',
|
||||
defaultMessage: 'Enter your new password below to gain access to your account.',
|
||||
},
|
||||
confirmPasswordLabel: {
|
||||
id: 'auth.reset-password.post-challenge.confirm-password.label',
|
||||
defaultMessage: 'Confirm password',
|
||||
},
|
||||
action: {
|
||||
id: 'auth.reset-password.post-challenge.action',
|
||||
defaultMessage: 'Reset password',
|
||||
},
|
||||
})
|
||||
|
||||
// NOTE(Brawaru): Vite uses esbuild for minification so can't combine these
|
||||
// because it'll keep the original prop names compared to consts, which names
|
||||
// will be mangled.
|
||||
const emailSentNotificationMessages = defineMessages({
|
||||
title: {
|
||||
id: 'auth.reset-password.notification.email-sent.title',
|
||||
defaultMessage: 'Email sent',
|
||||
},
|
||||
text: {
|
||||
id: 'auth.reset-password.notification.email-sent.text',
|
||||
defaultMessage:
|
||||
'An email with instructions has been sent to you if the email was previously saved on your account.',
|
||||
},
|
||||
})
|
||||
|
||||
const passwordResetNotificationMessages = defineMessages({
|
||||
title: {
|
||||
id: 'auth.reset-password.notification.password-reset.title',
|
||||
defaultMessage: 'Password successfully reset',
|
||||
},
|
||||
text: {
|
||||
id: 'auth.reset-password.notification.password-reset.text',
|
||||
defaultMessage: 'You can now log-in into your account with your new password.',
|
||||
},
|
||||
})
|
||||
|
||||
const messages = defineMessages({
|
||||
title: {
|
||||
id: 'auth.reset-password.title',
|
||||
defaultMessage: 'Reset Password',
|
||||
},
|
||||
longTitle: {
|
||||
id: 'auth.reset-password.title.long',
|
||||
defaultMessage: 'Reset your password',
|
||||
},
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Reset Password - Modrinth',
|
||||
title: () => `${formatMessage(messages.title)} - Modrinth`,
|
||||
})
|
||||
|
||||
const auth = await useAuth()
|
||||
@ -102,14 +179,14 @@ async function recovery() {
|
||||
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'Email sent',
|
||||
text: 'An email with instructions has been sent to you if the email was previously saved on your account.',
|
||||
title: formatMessage(emailSentNotificationMessages.title),
|
||||
text: formatMessage(emailSentNotificationMessages.text),
|
||||
type: 'success',
|
||||
})
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: 'error',
|
||||
})
|
||||
@ -134,15 +211,15 @@ async function changePassword() {
|
||||
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'Password successfully reset',
|
||||
text: 'You can now log-in into your account with your new password.',
|
||||
title: formatMessage(passwordResetNotificationMessages.title),
|
||||
text: formatMessage(passwordResetNotificationMessages.text),
|
||||
type: 'success',
|
||||
})
|
||||
await navigateTo('/auth/sign-in')
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: 'error',
|
||||
})
|
||||
|
||||
@ -63,6 +63,10 @@ export const commonMessages = defineMessages({
|
||||
id: 'label.rejected',
|
||||
defaultMessage: 'Rejected',
|
||||
},
|
||||
passwordLabel: {
|
||||
id: 'label.password',
|
||||
defaultMessage: 'Password',
|
||||
},
|
||||
saveButton: {
|
||||
id: 'button.save',
|
||||
defaultMessage: 'Save',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user