Img 51 register form server side functionality

src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from ".";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let level: $$Props["level"] = "h5";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { alertVariants, type Variant } from ".";
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export { className as class };
+</script>
+
+<div
+	class={cn(alertVariants({ variant }), className)}
+	{...$$restProps}
+	role="alert"
+>
+	<slot />
+</div>

src/lib/components/ui/alert/index.ts

@@ -0,0 +1,33 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+
+export const alertVariants = tv({
+	base: "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+
+	variants: {
+		variant: {
+			default: "bg-background text-foreground",
+			destructive:
+				"text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
+		}
+	},
+	defaultVariants: {
+		variant: "default"
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};

src/routes/dash/register/+page.server.ts

@@ -0,0 +1,61 @@
+import type { PageServerLoad, Actions } from './$types'
+import { fail, redirect } from '@sveltejs/kit'
+import { setError, superValidate } from 'sveltekit-superforms/server'
+import { registerSchema } from '$lib/schema'
+
+interface ResponseType {
+    message: string
+    details: any
+    error: {
+        statusCode: number
+        statusPhrase: string
+    }
+}
+
+export const load: PageServerLoad = () => {
+    return {
+        form: superValidate(registerSchema)
+    }
+}
+
+export const actions: Actions = {
+    default: async (event) => {
+        const form = await superValidate(event, registerSchema)
+        if (!form.valid) {
+            return fail(400, {
+                form
+            })
+        }
+        const response = await fetch('https://api.unideb.tech/auth/register', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: form.data.username,
+                email: form.data.email,
+                password: form.data.password,
+                inviteKey: form.data.inviteToken
+            })
+        })
+        if (response.status === 200) {
+            console.log(response)
+            throw redirect(303, '/dash/login/')
+        } else {
+            console.log(response)
+            const resp = (await response.json()) as ResponseType
+            let responseError = resp.details
+            let responseMessage = resp.message
+            switch (true) {
+                case responseError[0] === 0:
+                    return setError(form, 'username', responseMessage)
+                case responseError[0] === 1:
+                    return setError(form, 'email', responseMessage)
+                case responseError[0] === 2:
+                    return setError(form, 'password', responseMessage)
+                case responseError[0] === 3:
+                    return setError(form, 'inviteToken', responseMessage)
+            }
+        }
+    }
+}

src/routes/dash/register/+page.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-    import * as Form from '$lib/components/ui/form'
     import * as Card from '$lib/components/ui/card'
     import { Label } from '$components/ui/label'
     import { Button } from '$components/ui/button'
     import type { RegisterSchema } from '$lib/schema'
     import type { SuperValidated } from 'sveltekit-superforms'
+
+
     import RegisterForm from '$lib/RegisterForm.svelte'
     import Centered from '$lib/Centered.svelte'
     import logo from '$lib/assets/icons/logo_slate-700.png'
     export let form: SuperValidated<RegisterSchema>
+
+    export let data: { errorMessage?: string } = {}
 </script>
 
+
 <Centered>
     <img class="w-48 lg:w-1/8 mb-10" src={logo} alt="Logo" />
     <Card.Root class="w-100 bg-slate-900">
         <Card.Header>
             <Card.Title class="text-2xl">Register a New Account</Card.Title>
         </Card.Header>
-
+        
         <Card.Content>
             <RegisterForm {form} />
             <Label class="">Already have an account?</Label>