Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed submit function, working on matchin passwords alert

Browse Source
This commit is contained in:
Eclypsed
2024-01-22 14:27:09 -05:00
parent d6d58a7c75
commit fd489b055c
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/routes/+layout.svelte
View File

@@ -10,14 +10,13 @@
</script>
<svelte:window bind:innerWidth={$pageWidth} />
<div class="no-scrollbar relative font-notoSans text-white">
<div class="no-scrollbar relative h-screen font-notoSans text-white">
<div class="fixed isolate -z-10 h-full w-screen bg-black">
<div id="background-gradient" class="absolute z-10 h-1/2 w-full bg-cover" />
{#key $backgroundImage}
<img id="background-image" src={$backgroundImage} alt="" class="absolute blur-lg h-1/2 w-full object-cover" transition:fade={{ duration: 1000 }} />
{/key}
</div>
<button class="w-14 aspect-square bg-neutral-500" on:click={() => $newestAlert = ['success', 'Test message!']} />
<slot />
<AlertBox bind:this={alertBox} />
</div>

36
src/routes/login/+page.svelte
View File

@@ -6,40 +6,46 @@
import type { PageServerData } from "../$types";
import type { SubmitFunction } from "@sveltejs/kit";
export let data: PageServerData
// export let data: PageServerData
type FormMode = 'signIn' | 'newUser'
let formMode: FormMode = 'signIn'
let passwordInput: string, confirmPasswordInput: string
let passwordsMatch: boolean = false
$: passwordsMatch = (passwordInput === confirmPasswordInput)
$: console.log(passwordsMatch)
const handleForm: SubmitFunction = ({ formData, cancel, action }) => {
const actionType: string = action.search.substring(2)
if (actionType !== formMode) {
cancel()
return (formMode = formMode === 'signIn' ? 'newUser' : 'signIn')
formMode = formMode === 'signIn' ? 'newUser' : 'signIn'
return cancel()
}
const { username, password, confirmPassword } = Object.fromEntries(formData)
if (!username || !password || (formMode === 'newUser' && !confirmPassword)) {
cancel()
return ($newestAlert = ['caution', 'All fields must be filled out'])
$newestAlert = ['caution', 'All fields must be filled out']
return cancel()
}
if (formMode === 'newUser') {
if (username.toString().length > 30) {
cancel()
return $newestAlert = ['caution', 'Username must be 30 characters or fewer']
$newestAlert = ['caution', 'Username must be 30 characters or fewer']
return cancel()
}
if (password.toString().length < 8) {
cancel()
return $newestAlert = ['caution', 'Password must be at least 8 characters']
$newestAlert = ['caution', 'Password must be at least 8 characters']
return cancel()
}
if (password !== confirmPassword) {
cancel()
return ($newestAlert = ['caution', 'Password and Confirm Password must match'])
$newestAlert = ['caution', 'Password and Confirm Password must match']
return cancel()
}
}
console.log("Passed all checks")
cancel()
}
</script>
@@ -51,23 +57,23 @@
<h1 class="absolute text-5xl" transition:fade={{ duration: 100 }}>{formMode === 'signIn' ? 'Sign In' : 'Create New User'}</h1>
{/key}
</div>
<form method="post" on:submit|preventDefault use:enhance={handleForm}>
<form method="post" 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" />
<input bind:value={passwordInput} 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" style="width: {formMode === 'newUser' ? '100%': 0};" aria-hidden={formMode !== 'newUser'}>
<div class="px-4">
<input name="confirmPassword" type="password" placeholder="Confirm Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" tabindex="{formMode === 'newUser' ? 0 : -1}" />
<input bind:value={confirmPasswordInput} name="confirmPassword" type="password" placeholder="Confirm Password" class="h-10 w-full border-b-2 border-lazuli-primary bg-transparent px-1 outline-none" tabindex="{formMode === 'newUser' ? 0 : -1}" />
</div>
</div>
</div>
</section>
<section class="mt-6 flex items-center justify-around">
<section class="mt-6 flex items-center justify-around gap-2">
<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" />