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
2023-08-18 22:00:44 +03:00
committed by GitHub
parent ce995812d4
commit 0ffe8ef102
21 changed files with 1849 additions and 398 deletions

View File

@@ -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>