92 lines
4.2 KiB
Svelte
92 lines
4.2 KiB
Svelte
|
<script>
|
||
|
|
import { enhance } from '$app/forms'
|
||
|
|
import { goto } from '$app/navigation'
|
||
|
|
import { fade } from 'svelte/transition'
|
||
|
|
import { newestAlert } from '$lib/stores/alertStore.js'
|
||
|
|
|
||
|
|
export let data
|
||
|
|
|
||
|
|
let formMode = 'signIn'
|
||
|
|
|
||
|
|
const handleForm = ({ formData, cancel, action }) => {
|
||
|
|
const actionType = action.search.substring(2)
|
||
|
|
if (actionType !== formMode) {
|
||
|
|
cancel()
|
||
|
|
return (formMode = formMode === 'signIn' ? 'newUser' : 'signIn')
|
||
|
|
}
|
||
|
|
|
||
|
|
const { username, password, confirmPassword } = Object.fromEntries(formData)
|
||
|
|
|
||
|
|
if (!username || !password || (formMode === 'newUser' && !confirmPassword)) {
|
||
|
|
cancel()
|
||
|
|
return ($newestAlert = ['caution', 'All fields must be filled out'])
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formMode === 'newUser') {
|
||
|
|
if (username.length > 50) {
|
||
|
|
cancel()
|
||
|
|
return ($newestAlert = ['caution', 'Really? You need a username longer that 50 characters? No, stop it, be normal'])
|
||
|
|
}
|
||
|
|
if (password.length < 8) {
|
||
|
|
cancel()
|
||
|
|
return ($newestAlert = ['caution', 'Password must be at least 8 characters long'])
|
||
|
|
}
|
||
|
|
if (password !== confirmPassword) {
|
||
|
|
cancel()
|
||
|
|
return ($newestAlert = ['caution', 'Password and Confirm Password must match'])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.redirectLocation) formData.append('redirectLocation', data.redirectLocation)
|
||
|
|
|
||
|
|
return async ({ result }) => {
|
||
|
|
if (result.type === 'redirect') {
|
||
|
|
goto(result.location)
|
||
|
|
} else if (result.type === 'failure') {
|
||
|
|
return ($newestAlert = ['warning', result.data.message])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex h-full items-center justify-center">
|
||
|
|
<div class="w-full max-w-4xl rounded-2xl p-8">
|
||
|
|
<section class="flex h-14 justify-center">
|
||
|
|
{#key formMode}
|
||
|
|
<span class="absolute text-5xl" transition:fade={{ duration: 100 }}>{formMode === 'signIn' ? 'Sign In' : 'Create New User'}</span>
|
||
|
|
{/key}
|
||
|
|
</section>
|
||
|
|
<form method="post" on:submit|preventDefault use:enhance={handleForm}>
|
||
|
|
<section>
|
||
|
|
<div class="p-4">
|
||
|
|
<input name="username" type="text" autocomplete="off" placeholder="Username" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
|
||
|
|
</div>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="w-full p-4">
|
||
|
|
<input name="password" type="password" placeholder="Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
|
||
|
|
</div>
|
||
|
|
<div class="overflow-hidden py-4 transition-[width] duration-300 ease-linear" style="width: {formMode === 'newUser' ? '100%' : 0};" aria-hidden={formMode !== 'newUser'}>
|
||
|
|
<div class="px-4">
|
||
|
|
<input name="confirmPassword" type="password" placeholder="Confirm Password" class="block h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="mt-6 flex items-center justify-around">
|
||
|
|
<button formaction="?/signIn" class="h-12 w-1/3 rounded-md transition-all active:scale-[97%]" style="background-color: {formMode === 'signIn' ? 'var(--lazuli-primary)' : '#262626'};">
|
||
|
|
Sign In
|
||
|
|
<i class="fa-solid fa-right-to-bracket ml-1" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
formaction="?/newUser"
|
||
|
|
class="h-12 w-1/3 rounded-md transition-all active:scale-[97%]"
|
||
|
|
style="background-color: {formMode === 'newUser' ? 'var(--lazuli-primary)' : '#262626'};"
|
||
|
|
>
|
||
|
|
Create New User
|
||
|
|
<i class="fa-solid fa-user-plus ml-1" />
|
||
|
|
</button>
|
||
|
|
</section>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|