mirror of https://github.com/hykilpikonna/AquaDX
[+] Auto redirect to /home when already logged in
Azalea
parent
df3deee316
commit
f290e6e576
|
|
@ -1,251 +1,255 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Turnstile } from "svelte-turnstile";
|
import { Turnstile } from "svelte-turnstile";
|
||||||
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 { USER } from "../libs/sdk";
|
import { USER } from "../libs/sdk";
|
||||||
import { t } from "../libs/i18n"
|
import { t } from "../libs/i18n"
|
||||||
|
|
||||||
let params = new URLSearchParams(window.location.search)
|
let params = new URLSearchParams(window.location.search)
|
||||||
|
|
||||||
let state = "home"
|
let state = "home"
|
||||||
$: isSignup = state === "signup"
|
$: isSignup = state === "signup"
|
||||||
let submitting = false
|
let submitting = false
|
||||||
|
|
||||||
let email = ""
|
let email = ""
|
||||||
let password = ""
|
let password = ""
|
||||||
let username = ""
|
let username = ""
|
||||||
let turnstile = ""
|
let turnstile = ""
|
||||||
let turnstileReset: () => void | undefined;
|
let turnstileReset: () => void | undefined;
|
||||||
|
|
||||||
let error = ""
|
let error = ""
|
||||||
let verifyMsg = ""
|
let verifyMsg = ""
|
||||||
|
|
||||||
if (params.get('confirm-email')) {
|
if (USER.isLoggedIn()) {
|
||||||
state = 'verify'
|
window.location.href = "/home"
|
||||||
verifyMsg = t("welcome.verifying")
|
}
|
||||||
submitting = true
|
|
||||||
|
if (params.get('confirm-email')) {
|
||||||
// Send request to server
|
state = 'verify'
|
||||||
USER.confirmEmail(params.get('confirm-email')!)
|
verifyMsg = t("welcome.verifying")
|
||||||
.then(() => {
|
submitting = true
|
||||||
verifyMsg = t('welcome.verified')
|
|
||||||
submitting = false
|
// Send request to server
|
||||||
|
USER.confirmEmail(params.get('confirm-email')!)
|
||||||
// Clear the query param
|
.then(() => {
|
||||||
window.history.replaceState({}, document.title, window.location.pathname)
|
verifyMsg = t('welcome.verified')
|
||||||
})
|
submitting = false
|
||||||
.catch(e => verifyMsg = t('welcome.verification-failed', { message: e.message }))
|
|
||||||
}
|
// Clear the query param
|
||||||
|
window.history.replaceState({}, document.title, window.location.pathname)
|
||||||
async function submit(): Promise<any> {
|
})
|
||||||
submitting = true
|
.catch(e => verifyMsg = t('welcome.verification-failed', { message: e.message }))
|
||||||
|
}
|
||||||
// Check if username and password are valid
|
|
||||||
if (email === "" || password === "") {
|
async function submit(): Promise<any> {
|
||||||
error = t("welcome.email-password-missing")
|
submitting = true
|
||||||
return submitting = false
|
|
||||||
}
|
// Check if username and password are valid
|
||||||
|
if (email === "" || password === "") {
|
||||||
if (turnstile === "") {
|
error = t("welcome.email-password-missing")
|
||||||
// Sleep for 100ms to allow Turnstile to finish
|
return submitting = false
|
||||||
error = t("welcome.waiting-turnstile")
|
}
|
||||||
return setTimeout(submit, 100)
|
|
||||||
}
|
if (turnstile === "") {
|
||||||
|
// Sleep for 100ms to allow Turnstile to finish
|
||||||
// Signup
|
error = t("welcome.waiting-turnstile")
|
||||||
if (isSignup) {
|
return setTimeout(submit, 100)
|
||||||
if (username === "") {
|
}
|
||||||
error = t("welcome.username-missing")
|
|
||||||
return submitting = false
|
// Signup
|
||||||
}
|
if (isSignup) {
|
||||||
|
if (username === "") {
|
||||||
// Send request to server
|
error = t("welcome.username-missing")
|
||||||
await USER.register({ username, email, password, turnstile })
|
return submitting = false
|
||||||
.then(() => {
|
}
|
||||||
// Show verify email message
|
|
||||||
state = 'verify'
|
// Send request to server
|
||||||
verifyMsg = t("welcome.verification-sent", { email })
|
await USER.register({ username, email, password, turnstile })
|
||||||
})
|
.then(() => {
|
||||||
.catch(e => {
|
// Show verify email message
|
||||||
error = e.message
|
state = 'verify'
|
||||||
submitting = false
|
verifyMsg = t("welcome.verification-sent", { email })
|
||||||
turnstileReset()
|
})
|
||||||
})
|
.catch(e => {
|
||||||
}
|
error = e.message
|
||||||
else {
|
submitting = false
|
||||||
// Send request to server
|
turnstileReset()
|
||||||
await USER.login({ email, password, turnstile })
|
})
|
||||||
.then(() => window.location.href = "/home")
|
}
|
||||||
.catch(e => {
|
else {
|
||||||
if (e.message === 'Email not verified - STATE_0') {
|
// Send request to server
|
||||||
state = 'verify'
|
await USER.login({ email, password, turnstile })
|
||||||
verifyMsg = t("welcome.verify-state-0")
|
.then(() => window.location.href = "/home")
|
||||||
}
|
.catch(e => {
|
||||||
else if (e.message === 'Email not verified - STATE_1') {
|
if (e.message === 'Email not verified - STATE_0') {
|
||||||
state = 'verify'
|
state = 'verify'
|
||||||
verifyMsg = t("welcome.verify-state-1")
|
verifyMsg = t("welcome.verify-state-0")
|
||||||
}
|
}
|
||||||
else if (e.message === 'Email not verified - STATE_2') {
|
else if (e.message === 'Email not verified - STATE_1') {
|
||||||
state = 'verify'
|
state = 'verify'
|
||||||
verifyMsg = t("welcome.verify-state-2")
|
verifyMsg = t("welcome.verify-state-1")
|
||||||
}
|
}
|
||||||
else {
|
else if (e.message === 'Email not verified - STATE_2') {
|
||||||
error = e.message
|
state = 'verify'
|
||||||
submitting = false
|
verifyMsg = t("welcome.verify-state-2")
|
||||||
turnstileReset()
|
}
|
||||||
}
|
else {
|
||||||
})
|
error = e.message
|
||||||
}
|
submitting = false
|
||||||
|
turnstileReset()
|
||||||
submitting = false
|
}
|
||||||
}
|
})
|
||||||
|
}
|
||||||
</script>
|
|
||||||
|
submitting = false
|
||||||
<main id="home" class="no-margin">
|
}
|
||||||
<div>
|
|
||||||
<h1 id="title">AquaNet</h1>
|
</script>
|
||||||
{#if state === "home"}
|
|
||||||
<div class="btn-group" transition:slide>
|
<main id="home" class="no-margin">
|
||||||
<button on:click={() => state = 'login'}>{t('welcome.btn-login')}</button>
|
<div>
|
||||||
<button on:click={() => state = 'signup'}>{t('welcome.btn-signup')}</button>
|
<h1 id="title">AquaNet</h1>
|
||||||
</div>
|
{#if state === "home"}
|
||||||
{:else if state === "login" || state === "signup"}
|
<div class="btn-group" transition:slide>
|
||||||
<div class="login-form" transition:slide>
|
<button on:click={() => state = 'login'}>{t('welcome.btn-login')}</button>
|
||||||
{#if error}
|
<button on:click={() => state = 'signup'}>{t('welcome.btn-signup')}</button>
|
||||||
<span class="error">{error}</span>
|
</div>
|
||||||
{/if}
|
{:else if state === "login" || state === "signup"}
|
||||||
<div on:click={() => state = 'home'} on:keypress={() => state = 'home'}
|
<div class="login-form" transition:slide>
|
||||||
role="button" tabindex="0" class="clickable">
|
{#if error}
|
||||||
<Icon icon="line-md:chevron-small-left" />
|
<span class="error">{error}</span>
|
||||||
<span>{t('back')}</span>
|
{/if}
|
||||||
</div>
|
<div on:click={() => state = 'home'} on:keypress={() => state = 'home'}
|
||||||
{#if isSignup}
|
role="button" tabindex="0" class="clickable">
|
||||||
<input type="text" placeholder={t('username')} bind:value={username}>
|
<Icon icon="line-md:chevron-small-left" />
|
||||||
{/if}
|
<span>{t('back')}</span>
|
||||||
<input type="email" placeholder={t('email')} bind:value={email}>
|
</div>
|
||||||
<input type="password" placeholder={t('password')} bind:value={password}>
|
{#if isSignup}
|
||||||
<button on:click={submit}>
|
<input type="text" placeholder={t('username')} bind:value={username}>
|
||||||
{#if submitting}
|
{/if}
|
||||||
<Icon icon="line-md:loading-twotone-loop"/>
|
<input type="email" placeholder={t('email')} bind:value={email}>
|
||||||
{:else}
|
<input type="password" placeholder={t('password')} bind:value={password}>
|
||||||
{isSignup ? t('welcome.btn-signup') : t('welcome.btn-login')}
|
<button on:click={submit}>
|
||||||
{/if}
|
{#if submitting}
|
||||||
</button>
|
<Icon icon="line-md:loading-twotone-loop"/>
|
||||||
<Turnstile siteKey={TURNSTILE_SITE_KEY} bind:reset={turnstileReset}
|
{:else}
|
||||||
on:turnstile-callback={e => console.log(turnstile = e.detail.token)}
|
{isSignup ? t('welcome.btn-signup') : t('welcome.btn-login')}
|
||||||
on:turnstile-error={_ => console.log(error = t("welcome.turnstile-error"))}
|
{/if}
|
||||||
on:turnstile-expired={_ => window.location.reload()}
|
</button>
|
||||||
on:turnstile-timeout={_ => console.log(error = t('welcome.turnstile-timeout'))} />
|
<Turnstile siteKey={TURNSTILE_SITE_KEY} bind:reset={turnstileReset}
|
||||||
</div>
|
on:turnstile-callback={e => console.log(turnstile = e.detail.token)}
|
||||||
{:else if state === "verify"}
|
on:turnstile-error={_ => console.log(error = t("welcome.turnstile-error"))}
|
||||||
<div class="login-form" transition:slide>
|
on:turnstile-expired={_ => window.location.reload()}
|
||||||
<span>{verifyMsg}</span>
|
on:turnstile-timeout={_ => console.log(error = t('welcome.turnstile-timeout'))} />
|
||||||
{#if !submitting}
|
</div>
|
||||||
<button on:click={() => state = 'home'} transition:slide>{t('back')}</button>
|
{:else if state === "verify"}
|
||||||
{/if}
|
<div class="login-form" transition:slide>
|
||||||
</div>
|
<span>{verifyMsg}</span>
|
||||||
{/if}
|
{#if !submitting}
|
||||||
</div>
|
<button on:click={() => state = 'home'} transition:slide>{t('back')}</button>
|
||||||
|
{/if}
|
||||||
<div class="light-pollution">
|
</div>
|
||||||
<div class="l1"></div>
|
{/if}
|
||||||
<div class="l2"></div>
|
</div>
|
||||||
<div class="l3"></div>
|
|
||||||
</div>
|
<div class="light-pollution">
|
||||||
</main>
|
<div class="l1"></div>
|
||||||
|
<div class="l2"></div>
|
||||||
<style lang="sass">
|
<div class="l3"></div>
|
||||||
@use "../vars"
|
</div>
|
||||||
|
</main>
|
||||||
.login-form
|
|
||||||
display: flex
|
<style lang="sass">
|
||||||
flex-direction: column
|
@use "../vars"
|
||||||
gap: 8px
|
|
||||||
width: calc(100% - 12px)
|
.login-form
|
||||||
max-width: 300px
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
div.clickable
|
gap: 8px
|
||||||
display: flex
|
width: calc(100% - 12px)
|
||||||
align-items: center
|
max-width: 300px
|
||||||
|
|
||||||
#home
|
div.clickable
|
||||||
color: vars.$c-main
|
display: flex
|
||||||
position: relative
|
align-items: center
|
||||||
width: 100%
|
|
||||||
height: 100%
|
#home
|
||||||
padding-left: 100px
|
color: vars.$c-main
|
||||||
overflow: hidden
|
position: relative
|
||||||
background-color: black
|
width: 100%
|
||||||
|
height: 100%
|
||||||
box-sizing: border-box
|
padding-left: 100px
|
||||||
|
overflow: hidden
|
||||||
display: flex
|
background-color: black
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
box-sizing: border-box
|
||||||
|
|
||||||
margin-top: -(vars.$nav-height)
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
// Content container
|
justify-content: center
|
||||||
> div
|
|
||||||
display: flex
|
margin-top: -(vars.$nav-height)
|
||||||
flex-direction: column
|
|
||||||
align-items: flex-start
|
// Content container
|
||||||
width: max-content
|
> div
|
||||||
|
display: flex
|
||||||
// Switching state container
|
flex-direction: column
|
||||||
> div
|
align-items: flex-start
|
||||||
transition: vars.$transition
|
width: max-content
|
||||||
|
|
||||||
#title
|
// Switching state container
|
||||||
font-family: Quicksand, vars.$font
|
> div
|
||||||
user-select: none
|
transition: vars.$transition
|
||||||
|
|
||||||
// Gap between text characters
|
#title
|
||||||
letter-spacing: 0.2em
|
font-family: Quicksand, vars.$font
|
||||||
margin-top: 0
|
user-select: none
|
||||||
margin-bottom: 32px
|
|
||||||
opacity: 0.9
|
// Gap between text characters
|
||||||
|
letter-spacing: 0.2em
|
||||||
.btn-group
|
margin-top: 0
|
||||||
display: flex
|
margin-bottom: 32px
|
||||||
gap: 8px
|
opacity: 0.9
|
||||||
|
|
||||||
.light-pollution
|
.btn-group
|
||||||
pointer-events: none
|
display: flex
|
||||||
opacity: 0.8
|
gap: 8px
|
||||||
|
|
||||||
> div
|
.light-pollution
|
||||||
position: absolute
|
pointer-events: none
|
||||||
z-index: 1
|
opacity: 0.8
|
||||||
|
|
||||||
.l1
|
> div
|
||||||
left: -560px
|
position: absolute
|
||||||
top: 90px
|
z-index: 1
|
||||||
height: 1130px
|
|
||||||
width: 1500px
|
.l1
|
||||||
$color: rgb(158, 110, 230)
|
left: -560px
|
||||||
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
top: 90px
|
||||||
|
height: 1130px
|
||||||
.l2
|
width: 1500px
|
||||||
left: -200px
|
$color: rgb(158, 110, 230)
|
||||||
top: 560px
|
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
||||||
height: 1200px
|
|
||||||
width: 1500px
|
.l2
|
||||||
$color: rgb(92, 195, 250)
|
left: -200px
|
||||||
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
top: 560px
|
||||||
|
height: 1200px
|
||||||
.l3
|
width: 1500px
|
||||||
left: -600px
|
$color: rgb(92, 195, 250)
|
||||||
opacity: 0.7
|
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
||||||
top: -630px
|
|
||||||
width: 1500px
|
.l3
|
||||||
height: 1000px
|
left: -600px
|
||||||
$color: rgb(230, 110, 156)
|
opacity: 0.7
|
||||||
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
top: -630px
|
||||||
|
width: 1500px
|
||||||
@media (max-width: 500px)
|
height: 1000px
|
||||||
align-items: center
|
$color: rgb(230, 110, 156)
|
||||||
padding-left: 0
|
background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba(0,0,0,0) 100%)
|
||||||
</style>
|
|
||||||
|
@media (max-width: 500px)
|
||||||
|
align-items: center
|
||||||
|
padding-left: 0
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue