mirror of https://github.com/TZGyn/shortener
update signup page to use superform
parent
ea8ff70aa2
commit
68af735f09
GPG Key ID:
122EAF77AE81FD4A
@ -0,0 +1,69 @@
|
||||
<script lang="ts">
|
||||
import * as Form from '$lib/components/ui/form'
|
||||
import { Input } from '$lib/components/ui/input'
|
||||
import { formSchema, type FormSchema } from '../schema'
|
||||
import {
|
||||
type SuperValidated,
|
||||
type Infer,
|
||||
superForm,
|
||||
} from 'sveltekit-superforms'
|
||||
import { zodClient } from 'sveltekit-superforms/adapters'
|
||||
import { toast } from 'svelte-sonner'
|
||||
|
||||
export let data: SuperValidated<Infer<FormSchema>>
|
||||
|
||||
const form = superForm(data, {
|
||||
validators: zodClient(formSchema),
|
||||
invalidateAll: 'force',
|
||||
resetForm: true,
|
||||
onResult: ({ result }) => {
|
||||
if (result.status === 200) {
|
||||
toast.success('Signup success')
|
||||
}
|
||||
},
|
||||
onError: ({ result }) => {
|
||||
toast.error('Error signing up')
|
||||
},
|
||||
})
|
||||
|
||||
const { form: formData, enhance } = form
|
||||
</script>
|
||||
|
||||
<form method="POST" use:enhance class="flex flex-col gap-4">
|
||||
<Form.Field {form} name="email" class="flex flex-col gap-2">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Email</Form.Label>
|
||||
<Input
|
||||
{...attrs}
|
||||
bind:value={$formData.email}
|
||||
placeholder="name@example.com" />
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field {form} name="password" class="flex flex-col gap-2">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Password</Form.Label>
|
||||
<Input
|
||||
{...attrs}
|
||||
type="password"
|
||||
bind:value={$formData.password}
|
||||
placeholder="••••••••" />
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Field
|
||||
{form}
|
||||
name="password_confirm"
|
||||
class="flex flex-col gap-2">
|
||||
<Form.Control let:attrs>
|
||||
<Form.Label>Password Confirm</Form.Label>
|
||||
<Input
|
||||
{...attrs}
|
||||
type="password"
|
||||
bind:value={$formData.password_confirm}
|
||||
placeholder="••••••••" />
|
||||
</Form.Control>
|
||||
<Form.FieldErrors />
|
||||
</Form.Field>
|
||||
<Form.Button>Sign Up</Form.Button>
|
||||
</form>
|
||||
@ -1,67 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Button from '$lib/components/ui/button/button.svelte'
|
||||
import Input from '$lib/components/ui/input/input.svelte'
|
||||
import Label from '$lib/components/ui/label/label.svelte'
|
||||
import { Loader2 } from 'lucide-svelte'
|
||||
import { goto } from '$app/navigation'
|
||||
|
||||
let isLoading = false
|
||||
|
||||
let email = ''
|
||||
let password = ''
|
||||
let password_confirm = ''
|
||||
|
||||
const userSignUp = async () => {
|
||||
isLoading = true
|
||||
const response = await fetch('/api/signup', {
|
||||
method: 'post',
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
password_confirm,
|
||||
}),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
isLoading = false
|
||||
if (data.success) {
|
||||
goto('/')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="name@example.com"
|
||||
bind:value={email} />
|
||||
</div>
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
id="password"
|
||||
placeholder="••••••••"
|
||||
bind:value={password} />
|
||||
</div>
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<Label for="password_confirm">Password Confirm</Label>
|
||||
<Input
|
||||
type="password"
|
||||
id="password_confirm"
|
||||
placeholder="••••••••"
|
||||
bind:value={password_confirm} />
|
||||
</div>
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
on:click={userSignUp}
|
||||
class="flex items-center gap-2">
|
||||
{#if isLoading}
|
||||
<Loader2 class="animate-spin" />
|
||||
{/if}
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
@ -0,0 +1,63 @@
|
||||
import type { PageServerLoad, Actions } from './$types'
|
||||
import { fail } from '@sveltejs/kit'
|
||||
import { setError, superValidate } from 'sveltekit-superforms'
|
||||
import { formSchema } from './schema'
|
||||
import { zod } from 'sveltekit-superforms/adapters'
|
||||
import { db } from '$lib/db'
|
||||
import { user as userSchema } from '$lib/db/schema'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import { lucia } from '$lib/server/auth'
|
||||
|
||||
export const load = (async (event) => {
|
||||
return {
|
||||
form: await superValidate(zod(formSchema)),
|
||||
}
|
||||
}) satisfies PageServerLoad
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async (event) => {
|
||||
const form = await superValidate(event, zod(formSchema))
|
||||
if (!form.valid) {
|
||||
return fail(400, {
|
||||
form,
|
||||
})
|
||||
}
|
||||
|
||||
if (form.data.password !== form.data.password_confirm) {
|
||||
return setError(form, 'password_confirm', 'Password Not Match')
|
||||
}
|
||||
|
||||
const users = await db
|
||||
.select()
|
||||
.from(userSchema)
|
||||
.where(eq(userSchema.email, form.data.email))
|
||||
|
||||
const user = users[0]
|
||||
|
||||
if (user) {
|
||||
return setError(form, 'email', 'Email Already Exist')
|
||||
}
|
||||
|
||||
const hashedPassword = await Bun.password.hash(form.data.password)
|
||||
const returnUsers = await db
|
||||
.insert(userSchema)
|
||||
.values({
|
||||
email: form.data.email,
|
||||
password: hashedPassword,
|
||||
})
|
||||
.returning()
|
||||
|
||||
const session = await lucia.createSession(returnUsers[0].id, {})
|
||||
const sessionCookie = lucia.createSessionCookie(session.id)
|
||||
|
||||
event.cookies.set(sessionCookie.name, sessionCookie.value, {
|
||||
...sessionCookie.attributes,
|
||||
path: '/',
|
||||
secure: Bun.env.APP_ENV === 'prod',
|
||||
})
|
||||
|
||||
return {
|
||||
form,
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -1,76 +0,0 @@
|
||||
import type { RequestHandler } from './$types'
|
||||
import { user as userSchema } from '$lib/db/schema'
|
||||
import { eq } from 'drizzle-orm'
|
||||
import { userCreateSchema } from '$lib/server/types'
|
||||
import { db } from '$lib/db'
|
||||
import { lucia } from '$lib/server/auth'
|
||||
|
||||
export const GET: RequestHandler = async () => {
|
||||
return new Response()
|
||||
}
|
||||
|
||||
export const POST: RequestHandler = async (event) => {
|
||||
const body = await event.request.json()
|
||||
|
||||
const userCreate = userCreateSchema.safeParse(body)
|
||||
|
||||
if (!userCreate.success) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
if (userCreate.data.password !== userCreate.data.password_confirm) {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
message: 'password doesnt match',
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
const users = await db
|
||||
.select()
|
||||
.from(userSchema)
|
||||
.where(eq(userSchema.email, userCreate.data.email))
|
||||
|
||||
const user = users[0]
|
||||
|
||||
if (!user) {
|
||||
const hashedPassword = await Bun.password.hash(
|
||||
userCreate.data.password,
|
||||
)
|
||||
const returnUsers = await db
|
||||
.insert(userSchema)
|
||||
.values({
|
||||
email: userCreate.data.email,
|
||||
password: hashedPassword,
|
||||
})
|
||||
.returning()
|
||||
|
||||
const user = returnUsers[0]
|
||||
|
||||
const session = await lucia.createSession(user.id, {})
|
||||
const sessionCookie = lucia.createSessionCookie(session.id)
|
||||
|
||||
event.cookies.set(sessionCookie.name, sessionCookie.value, {
|
||||
...sessionCookie.attributes,
|
||||
path: '/',
|
||||
secure: Bun.env.APP_ENV === 'prod',
|
||||
})
|
||||
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
}),
|
||||
)
|
||||
} else {
|
||||
return new Response(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
}),
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue