You've already forked AstralRinth
forked from didirus/AstralRinth
Refine the auth design; clean up the layout and styles there (#1240)
* Refine the auth design; clean up the layout and styles there * It doesn't really sing, does it * Tweak auth form spacing and wording * Final tweaks to improved auth design * Merge * fix lockfile --------- Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
falseresync
196
pages/auth.vue
196
pages/auth.vue
@@ -1,159 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtPage class="auth-container universal-card" :route="route" />
|
||||
</div>
|
||||
<NuxtPage class="auth-container universal-card" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.auth-container {
|
||||
width: 25rem;
|
||||
padding: var(--gap-xl);
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 30rem;
|
||||
margin: 2rem auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
.auth-container h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin: 0 0 -1rem 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
.auth-container p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.auth-container .btn {
|
||||
font-weight: 700;
|
||||
min-height: 2.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
min-height: 2.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.centered-btn {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.btn.continue-btn svg {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.btn.right-icon svg {
|
||||
margin-left: var(--gap-sm);
|
||||
}
|
||||
.third-party {
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn.left-icon svg {
|
||||
margin-right: var(--gap-sm);
|
||||
}
|
||||
.third-party .btn {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: var(--gap-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.third-party .btn svg {
|
||||
margin-right: var(--gap-sm);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
button.checkbox {
|
||||
appearance: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.continue-btn {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.continue-btn svg {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
// login styles
|
||||
.third-party {
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 25.5rem) {
|
||||
.third-party .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.third-party .btn svg {
|
||||
margin-right: var(--gap-sm);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.discord-btn {
|
||||
color: #ffffff;
|
||||
background-color: #5865f2;
|
||||
}
|
||||
|
||||
.apple-btn {
|
||||
color: var(--color-accent-contrast);
|
||||
background-color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.google-btn {
|
||||
color: #ffffff;
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.gitlab-btn {
|
||||
color: #ffffff;
|
||||
background-color: #fc6d26;
|
||||
}
|
||||
|
||||
.github-btn {
|
||||
color: #ffffff;
|
||||
background-color: #8740f1;
|
||||
}
|
||||
|
||||
.microsoft-btn {
|
||||
color: var(--color-accent-contrast);
|
||||
background-color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.text-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-divider div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
max-width: 5rem;
|
||||
opacity: 40%;
|
||||
border-radius: var(--radius-max);
|
||||
background-color: var(--color-base);
|
||||
}
|
||||
|
||||
.text-divider span {
|
||||
margin-inline: var(--gap-sm);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25.5rem) {
|
||||
width: auto;
|
||||
margin: 1rem;
|
||||
|
||||
.third-party .btn {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-page-container {
|
||||
.turnstile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
|
||||
.auth-form .auth-form__input {
|
||||
width: 100%;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.auth-form__additional-options {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,69 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<h1>Reset your password</h1>
|
||||
<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.
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email or username" />
|
||||
<button class="btn btn-primary continue-btn" @click="recovery">Send recovery email</button>
|
||||
</template>
|
||||
<template v-else-if="step === 'passed_challenge'">
|
||||
<p>Enter your new password below to gain access to your account.</p>
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="newPassword" type="password" placeholder="Password" />
|
||||
<label for="confirm-password" hi2dden>Password</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmNewPassword"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
<button class="btn btn-primary continue-btn" @click="changePassword">Reset password</button>
|
||||
</template>
|
||||
<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.
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary centered-btn" @click="recovery">
|
||||
<SendIcon /> Send recovery email
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="step === 'passed_challenge'">
|
||||
<p>Enter your new password below to gain access to your account.</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="newPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmNewPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
|
||||
Reset password
|
||||
</button>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { SendIcon } from 'omorphia'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
|
||||
useHead({
|
||||
title: 'Reset Password - Modrinth',
|
||||
})
|
||||
@@ -35,7 +73,6 @@ if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
const route = useRoute()
|
||||
|
||||
const step = ref('choose_method')
|
||||
@@ -60,14 +97,14 @@ async function recovery() {
|
||||
},
|
||||
})
|
||||
|
||||
data.$notify({
|
||||
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.',
|
||||
type: 'success',
|
||||
})
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@@ -92,7 +129,7 @@ async function changePassword() {
|
||||
},
|
||||
})
|
||||
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'Password successfully reset',
|
||||
text: 'You can now log-in into your account with your new password.',
|
||||
@@ -100,7 +137,7 @@ async function changePassword() {
|
||||
})
|
||||
await navigateTo('/auth/sign-in')
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<template v-if="flow">
|
||||
<label for="two-factor-code">
|
||||
<span class="label__title">Enter two-factor code</span>
|
||||
@@ -13,74 +13,101 @@
|
||||
placeholder="Enter code..."
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn" @click="loginTwoFactor">
|
||||
<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
|
||||
Sign in <RightArrowIcon />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h1>Continue with</h1>
|
||||
<div class="third-party">
|
||||
<a class="btn discord-btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon /> <span>Discord</span>
|
||||
<h1>Sign in with</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn github-btn" :href="getAuthUrl('github')"
|
||||
><GitHubIcon /> <span>GitHub</span></a
|
||||
>
|
||||
<a class="btn microsoft-btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon /> <span>Microsoft</span>
|
||||
<a class="btn" :href="getAuthUrl('github')">
|
||||
<GitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn google-btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon /> <span>Google</span>
|
||||
<a class="btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn apple-btn" :href="getAuthUrl('steam')"><SteamIcon /> <span>Steam</span></a>
|
||||
<a class="btn gitlab-btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon /> <span>GitLab</span></a
|
||||
>
|
||||
</div>
|
||||
<div class="text-divider">
|
||||
<div></div>
|
||||
<span>or</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email or username" />
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="password" type="password" placeholder="Password" />
|
||||
<div class="account-options">
|
||||
<a class="btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam')">
|
||||
<SteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>Or use a password</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email or username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
<nuxt-link class="text-link" to="/auth/reset-password">Forgot password?</nuxt-link>
|
||||
</div>
|
||||
<button class="btn btn-primary continue-btn" @click="loginPassword()">
|
||||
Continue <RightArrowIcon />
|
||||
</button>
|
||||
<p>
|
||||
Don't have an account yet?
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="`/auth/sign-up${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`"
|
||||
>
|
||||
Create one.
|
||||
</nuxt-link>
|
||||
</p>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="beginPasswordSignIn()">
|
||||
Sign in <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
<NuxtLink class="text-link" to="/auth/reset-password">Forgot password?</NuxtLink>
|
||||
<p>•</p>
|
||||
<NuxtLink class="text-link" :to="signUpLink"> Create an account</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GitHubIcon, RightArrowIcon } from 'omorphia'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import { RightArrowIcon } from 'omorphia'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
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'
|
||||
|
||||
useHead({
|
||||
title: 'Sign In - Modrinth',
|
||||
})
|
||||
|
||||
const auth = await useAuth()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
if (route.fullPath.includes('new_account=true')) {
|
||||
await navigateTo(
|
||||
`/auth/welcome?authToken=${route.query.code}${
|
||||
@@ -88,15 +115,13 @@ if (route.fullPath.includes('new_account=true')) {
|
||||
}`
|
||||
)
|
||||
} else if (route.query.code) {
|
||||
await loginHandler()
|
||||
await finishSignIn()
|
||||
}
|
||||
|
||||
if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
|
||||
const turnstile = ref()
|
||||
|
||||
const email = ref('')
|
||||
@@ -105,7 +130,11 @@ const token = ref('')
|
||||
|
||||
const flow = ref(route.query.flow)
|
||||
|
||||
async function loginPassword() {
|
||||
const signUpLink = computed(
|
||||
() => `/auth/sign-up${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
|
||||
)
|
||||
|
||||
async function beginPasswordSignIn() {
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login', {
|
||||
@@ -120,10 +149,10 @@ async function loginPassword() {
|
||||
if (res.flow) {
|
||||
flow.value = res.flow
|
||||
} else {
|
||||
await loginHandler(res.session)
|
||||
await finishSignIn(res.session)
|
||||
}
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@@ -135,7 +164,7 @@ async function loginPassword() {
|
||||
}
|
||||
|
||||
const twoFactorCode = ref(null)
|
||||
async function loginTwoFactor() {
|
||||
async function begin2FASignIn() {
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login/2fa', {
|
||||
@@ -146,9 +175,9 @@ async function loginTwoFactor() {
|
||||
},
|
||||
})
|
||||
|
||||
await loginHandler(res.session)
|
||||
await finishSignIn(res.session)
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@@ -158,7 +187,7 @@ async function loginTwoFactor() {
|
||||
}
|
||||
stopLoading()
|
||||
}
|
||||
async function loginHandler(token) {
|
||||
async function finishSignIn(token) {
|
||||
if (token) {
|
||||
await useAuth(token)
|
||||
await useUser()
|
||||
@@ -171,25 +200,3 @@ async function loginHandler(token) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.totp {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.totp-codes {
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.account-options {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
.account-options a {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,71 +1,121 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<h1>Create your account</h1>
|
||||
<div class="third-party">
|
||||
<div>
|
||||
<h1>Sign up with</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn discord-btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon /> <span>Discord</span>
|
||||
<DiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn github-btn" :href="getAuthUrl('github')"><GitHubIcon /> <span>GitHub</span></a>
|
||||
<a class="btn microsoft-btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon /> <span>Microsoft</span>
|
||||
<a class="btn" :href="getAuthUrl('github')">
|
||||
<GitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn google-btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon /> <span>Google</span>
|
||||
<a class="btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn apple-btn" :href="getAuthUrl('steam')"><SteamIcon /> <span>Steam</span></a>
|
||||
<a class="btn gitlab-btn" :href="getAuthUrl('gitlab')"> <GitLabIcon /> <span>GitLab</span></a>
|
||||
</div>
|
||||
<div class="text-divider">
|
||||
<div></div>
|
||||
<span>or</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<label for="email" hidden>Email</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email" />
|
||||
<label for="username" hidden>Username</label>
|
||||
<input id="username" v-model="username" type="text" placeholder="Username" />
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="password" type="password" placeholder="Password" />
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
|
||||
<nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
|
||||
</p>
|
||||
<button class="btn btn-primary continue-btn" @click="createAccount">
|
||||
Create account <RightArrowIcon />
|
||||
</button>
|
||||
<p>
|
||||
Already have an account?
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="`/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`"
|
||||
>
|
||||
Sign in.
|
||||
</nuxt-link>
|
||||
<a class="btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam')">
|
||||
<SteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>Or create an account yourself</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="username" hidden>Username</label>
|
||||
<UserIcon />
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
|
||||
<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>.
|
||||
</p>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="createAccount">
|
||||
Create account <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
Already have an account?
|
||||
<NuxtLink class="text-link" :to="signInLink">Sign in</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GitHubIcon, RightArrowIcon, Checkbox } from 'omorphia'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import { RightArrowIcon, UserIcon, Checkbox } from 'omorphia'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
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'
|
||||
|
||||
useHead({
|
||||
title: 'Sign Up - Modrinth',
|
||||
@@ -86,8 +136,6 @@ if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
|
||||
const turnstile = ref()
|
||||
|
||||
const email = ref('')
|
||||
@@ -97,11 +145,15 @@ const confirmPassword = ref('')
|
||||
const token = ref('')
|
||||
const subscribe = ref(true)
|
||||
|
||||
const signInLink = computed(
|
||||
() => `/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
|
||||
)
|
||||
|
||||
async function createAccount() {
|
||||
startLoading()
|
||||
try {
|
||||
if (confirmPassword.value !== password.value) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: 'Passwords do not match!',
|
||||
@@ -130,7 +182,7 @@ async function createAccount() {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@@ -141,8 +193,3 @@ async function createAccount() {
|
||||
stopLoading()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.subscribe-btn {
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,39 +1,52 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<template v-if="auth.user && auth.user.email_verified && !success">
|
||||
<h1>Email already verified</h1>
|
||||
<p>Your email is already verified!</p>
|
||||
<nuxt-link class="btn" link="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>Your email is already verified!</p>
|
||||
|
||||
<NuxtLink class="btn" to="/settings/account"> <SettingsIcon /> Account settings </NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else-if="success">
|
||||
<h1>Email verification</h1>
|
||||
<p>Your email address has been successfully verified!</p>
|
||||
<nuxt-link v-if="auth.user" class="btn" to="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</nuxt-link>
|
||||
<nuxt-link v-else to="/auth/sign-in" class="btn btn-primary continue-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>Your email address has been successfully verified!</p>
|
||||
|
||||
<NuxtLink v-if="auth.user" class="btn" link="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</NuxtLink>
|
||||
<NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h1>Email verification failed</h1>
|
||||
<p>
|
||||
We were unable to verify your email.
|
||||
<template v-if="auth.user">
|
||||
Try re-sending the verification email through the button below.
|
||||
</template>
|
||||
<template v-else>
|
||||
Try re-sending the verification email through your dashboard by signing in.
|
||||
</template>
|
||||
</p>
|
||||
<button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
|
||||
Resend verification email <RightArrowIcon />
|
||||
</button>
|
||||
<nuxt-link v-else to="/auth/sign-in" class="btn btn-primary continue-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>
|
||||
We were unable to verify your email.
|
||||
<template v-if="auth.user">
|
||||
Try re-sending the verification email through the button below.
|
||||
</template>
|
||||
<template v-else>
|
||||
Try re-sending the verification email through your dashboard by signing in.
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
|
||||
Resend verification email <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,25 +1,33 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<h1>Welcome to Modrinth!</h1>
|
||||
<p>
|
||||
Thank you for creating an account. You can now follow and create projects, receive updates
|
||||
about your favorite projects, and more!
|
||||
</p>
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
<button class="btn btn-primary continue-btn" @click="continueSignUp">Continue</button>
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
|
||||
<nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
|
||||
</p>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>
|
||||
Thank you for creating an account. You can now follow and create projects, receive updates
|
||||
about your favorite projects, and more!
|
||||
</p>
|
||||
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
|
||||
Continue <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<p>
|
||||
By creating an account, you have agreed to Modrinth's
|
||||
<NuxtLink to="/legal/terms" class="text-link">Terms</NuxtLink> and
|
||||
<NuxtLink to="/legal/privacy" class="text-link">Privacy Policy</NuxtLink>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Checkbox } from 'omorphia'
|
||||
import { Checkbox, RightArrowIcon } from 'omorphia'
|
||||
|
||||
useHead({
|
||||
title: 'Welcome - Modrinth',
|
||||
|
||||
@@ -381,16 +381,16 @@ import {
|
||||
LeftArrowIcon,
|
||||
RightArrowIcon,
|
||||
CheckIcon,
|
||||
GitHubIcon,
|
||||
ExternalIcon,
|
||||
} from 'omorphia'
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import KeyIcon from '~/assets/images/utils/key.svg'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
|
||||
import ModalConfirm from '~/components/ui/ModalConfirm.vue'
|
||||
import Modal from '~/components/ui/Modal.vue'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user