You've already forked AstralRinth
forked from didirus/AstralRinth
Add translation keys for sign-up page (#1505)
* Begin Work * WIP * WIP * Finish adding notification keys * WIP * Finish work * Fix lint error * Re-organize Sign up page messages (#13) - Re-order messages by their appearance in template - Change the keys to conform to conventions - Inline password mismatch notification message --------- 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
@@ -1,4 +1,43 @@
|
||||
{
|
||||
"auth.sign-up.action.create-account": {
|
||||
"message": "Create account"
|
||||
},
|
||||
"auth.sign-up.confirm-password.label": {
|
||||
"message": "Confirm password"
|
||||
},
|
||||
"auth.sign-up.email.label": {
|
||||
"message": "Email"
|
||||
},
|
||||
"auth.sign-up.label.username": {
|
||||
"message": "Username"
|
||||
},
|
||||
"auth.sign-up.legal-dislaimer": {
|
||||
"message": "By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
|
||||
},
|
||||
"auth.sign-up.notification.password-mismatch.text": {
|
||||
"message": "Passwords do not match!"
|
||||
},
|
||||
"auth.sign-up.password.label": {
|
||||
"message": "Password"
|
||||
},
|
||||
"auth.sign-up.sign-in-option.action": {
|
||||
"message": "Sign in"
|
||||
},
|
||||
"auth.sign-up.sign-in-option.title": {
|
||||
"message": "Already have an account?"
|
||||
},
|
||||
"auth.sign-up.subscribe.label": {
|
||||
"message": "Subscribe to updates about Modrinth"
|
||||
},
|
||||
"auth.sign-up.title": {
|
||||
"message": "Sign Up"
|
||||
},
|
||||
"auth.sign-up.title.create-account": {
|
||||
"message": "Or create an account yourself"
|
||||
},
|
||||
"auth.sign-up.title.sign-up-with": {
|
||||
"message": "Sign up with"
|
||||
},
|
||||
"auth.verify-email.action.account-settings": {
|
||||
"message": "Account settings"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Sign up with</h1>
|
||||
<h1>{{ formatMessage(messages.signUpWithTitle) }}</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn discord-btn" :href="getAuthUrl('discord', redirectTarget)">
|
||||
@@ -29,11 +29,11 @@
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>Or create an account yourself</h1>
|
||||
<h1>{{ formatMessage(messages.createAccountTitle) }}</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email</label>
|
||||
<label for="email" hidden>{{ formatMessage(messages.emailLabel) }}</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
@@ -41,12 +41,12 @@
|
||||
type="email"
|
||||
autocomplete="username"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
:placeholder="formatMessage(messages.emailLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="username" hidden>Username</label>
|
||||
<label for="username" hidden>{{ formatMessage(messages.usernameLabel) }}</label>
|
||||
<UserIcon />
|
||||
<input
|
||||
id="username"
|
||||
@@ -54,12 +54,12 @@
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
class="auth-form__input"
|
||||
placeholder="Username"
|
||||
:placeholder="formatMessage(messages.usernameLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<label for="password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
@@ -67,12 +67,12 @@
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="Password"
|
||||
:placeholder="formatMessage(messages.passwordLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<label for="confirm-password" hidden>{{ formatMessage(messages.passwordLabel) }}</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
@@ -80,7 +80,7 @@
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
:placeholder="formatMessage(messages.confirmPasswordLabel)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -89,23 +89,34 @@
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
description="Subscribe to updates about Modrinth"
|
||||
:label="formatMessage(messages.subscribeLabel)"
|
||||
:description="formatMessage(messages.subscribeLabel)"
|
||||
/>
|
||||
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<NuxtLink to="/legal/terms" class="text-link">Terms</NuxtLink> and
|
||||
<NuxtLink to="/legal/privacy" class="text-link">Privacy Policy</NuxtLink>.
|
||||
<IntlFormatted :message-id="messages.legalDisclaimer">
|
||||
<template #terms-link="{ children }">
|
||||
<NuxtLink to="/legal/terms" class="text-link">
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
<template #privacy-policy-link="{ children }">
|
||||
<NuxtLink to="/legal/privacy" class="text-link">
|
||||
<component :is="() => children" />
|
||||
</NuxtLink>
|
||||
</template>
|
||||
</IntlFormatted>
|
||||
</p>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="createAccount">
|
||||
Create account <RightArrowIcon />
|
||||
{{ formatMessage(messages.createAccountButton) }} <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
Already have an account?
|
||||
<NuxtLink class="text-link" :to="signInLink">Sign in</NuxtLink>
|
||||
{{ formatMessage(messages.alreadyHaveAccountLabel) }}
|
||||
<NuxtLink class="text-link" :to="signInLink">
|
||||
{{ formatMessage(messages.signInLabel) }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -122,8 +133,62 @@ import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
|
||||
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
const messages = defineMessages({
|
||||
title: {
|
||||
id: 'auth.sign-up.title',
|
||||
defaultMessage: 'Sign Up',
|
||||
},
|
||||
signUpWithTitle: {
|
||||
id: 'auth.sign-up.title.sign-up-with',
|
||||
defaultMessage: 'Sign up with',
|
||||
},
|
||||
createAccountTitle: {
|
||||
id: 'auth.sign-up.title.create-account',
|
||||
defaultMessage: 'Or create an account yourself',
|
||||
},
|
||||
emailLabel: {
|
||||
id: 'auth.sign-up.email.label',
|
||||
defaultMessage: 'Email',
|
||||
},
|
||||
usernameLabel: {
|
||||
id: 'auth.sign-up.label.username',
|
||||
defaultMessage: 'Username',
|
||||
},
|
||||
passwordLabel: {
|
||||
id: 'auth.sign-up.password.label',
|
||||
defaultMessage: 'Password',
|
||||
},
|
||||
confirmPasswordLabel: {
|
||||
id: 'auth.sign-up.confirm-password.label',
|
||||
defaultMessage: 'Confirm password',
|
||||
},
|
||||
subscribeLabel: {
|
||||
id: 'auth.sign-up.subscribe.label',
|
||||
defaultMessage: 'Subscribe to updates about Modrinth',
|
||||
},
|
||||
legalDisclaimer: {
|
||||
id: 'auth.sign-up.legal-dislaimer',
|
||||
defaultMessage:
|
||||
"By creating an account, you agree to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>.",
|
||||
},
|
||||
createAccountButton: {
|
||||
id: 'auth.sign-up.action.create-account',
|
||||
defaultMessage: 'Create account',
|
||||
},
|
||||
alreadyHaveAccountLabel: {
|
||||
id: 'auth.sign-up.sign-in-option.title',
|
||||
defaultMessage: 'Already have an account?',
|
||||
},
|
||||
signInLabel: {
|
||||
id: 'auth.sign-up.sign-in-option.action',
|
||||
defaultMessage: 'Sign in',
|
||||
},
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Sign Up - Modrinth',
|
||||
title: () => `${formatMessage(messages.title)} - Modrinth`,
|
||||
})
|
||||
|
||||
const auth = await useAuth()
|
||||
@@ -162,8 +227,11 @@ async function createAccount() {
|
||||
if (confirmPassword.value !== password.value) {
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: 'Passwords do not match!',
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: formatMessage({
|
||||
id: 'auth.sign-up.notification.password-mismatch.text',
|
||||
defaultMessage: 'Passwords do not match!',
|
||||
}),
|
||||
type: 'error',
|
||||
})
|
||||
turnstile.value?.reset()
|
||||
@@ -191,7 +259,7 @@ async function createAccount() {
|
||||
} catch (err) {
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
title: formatMessage(commonMessages.errorNotificationTitle),
|
||||
text: err.data ? err.data.description : err,
|
||||
type: 'error',
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user