[+] Verify email workflow

pull/14/head
Azalea 2024-02-21 00:11:45 -05:00
parent 729015d719
commit f7e0a33935
1 changed files with 42 additions and 8 deletions

View File

@ -3,9 +3,11 @@
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { TURNSTILE_SITE_KEY } from "../libs/config"; import { TURNSTILE_SITE_KEY } from "../libs/config";
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
import { login, register } from "../libs/sdk"; import { login, register, USER } from "../libs/sdk";
let state = "verify" let params = new URLSearchParams(window.location.search)
let state = "home"
$: isSignup = state === "signup" $: isSignup = state === "signup"
let submitting = false let submitting = false
@ -15,6 +17,21 @@
let turnstile = "" let turnstile = ""
let error = "" let error = ""
let verifyMsg = ""
if (params.get('confirm-email')) {
state = 'verify'
verifyMsg = "Verifying your email... please wait."
submitting = true
// Send request to server
USER.confirmEmail(params.get('confirm-email')!)
.then(() => {
verifyMsg = "Your email has been verified! You can now log in now."
submitting = false
})
.catch(e => verifyMsg = `Email verification failed: ${e.message}`)
}
async function submit() { async function submit() {
submitting = true submitting = true
@ -39,7 +56,7 @@
} }
// Send request to server // Send request to server
await register({ username, email, password, turnstile }) await USER.register({ username, email, password, turnstile })
.catch(e => { .catch(e => {
error = e.message error = e.message
submitting = false submitting = false
@ -47,13 +64,28 @@
// Show verify email message // Show verify email message
state = 'verify' state = 'verify'
verifyMsg = `A verification email has been sent to ${email}. Please check your inbox!`
} }
else { else {
// Send request to server // Send request to server
await login({ email, password, turnstile }) await USER.login({ email, password, turnstile })
.catch(e => { .catch(e => {
error = e.message if (e.message === 'Email not verified - STATE_0') {
submitting = false state = 'verify'
verifyMsg = "You haven't verified your email. A verification email had been sent to your inbox less than a minute ago. Please check your inbox!"
}
else if (e.message === 'Email not verified - STATE_1') {
state = 'verify'
verifyMsg = "You haven't verified your email. We've already sent 3 emails over the last 24 hours so we'll not send another one. Please check your inbox!"
}
else if (e.message === 'Email not verified - STATE_2') {
state = 'verify'
verifyMsg = "You haven't verified your email. We just sent you another verification email. Please check your inbox!"
}
else {
error = e.message
submitting = false
}
}) })
// TODO: Redirect to home page // TODO: Redirect to home page
@ -102,8 +134,10 @@
</div> </div>
{:else if state === "verify"} {:else if state === "verify"}
<div class="login-form" transition:slide> <div class="login-form" transition:slide>
<span>A verification email has been sent to {email}. Please check your inbox!</span> <span>{verifyMsg}</span>
<button on:click={() => state = 'home'}>Back</button> {#if !submitting}
<button on:click={() => state = 'home'} transition:slide>Back</button>
{/if}
</div> </div>
{/if} {/if}
</div> </div>