feat: prefill welcome stepHEADmaster

6 files changed, 79 insertions, 59 deletions

diff --git a/website/src/app.css b/website/src/app.css
index 798629d..cd67023 100644
--- a/website/src/app.css
+++ b/website/src/app.css
@@ -1,3 +1,3 @@
 @import 'tailwindcss';
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
diff --git a/website/src/lib/components/user-profile.svelte b/website/src/lib/components/user-profile.svelte
index 7ad7ba2..4e41e61 100644
--- a/website/src/lib/components/user-profile.svelte
+++ b/website/src/lib/components/user-profile.svelte
@@ -1,18 +1,18 @@
-<svg

-    class={$$props.class}

-    viewBox="0 0 512 512"

-    version="1.1"

-    xmlns="http://www.w3.org/2000/svg"

-    xmlns:xlink="http://www.w3.org/1999/xlink"

->

-    <title>user-profile-filled</title>

-    <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">

-        <g id="drop" fill="currentColor" transform="translate(42.666667, 42.666667)">

-            <path

-                d="M213.333333,3.55271368e-14 C269.912851,3.55271368e-14 324.175019,22.4761259 364.18278,62.4838867 C404.190541,102.491647 426.666667,156.753816 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 2.84217094e-14,331.15408 2.84217094e-14,213.333333 C2.84217094e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,234.666667 L192,234.666667 C139.18529,234.666667 93.8415802,266.653822 74.285337,312.314895 C105.229171,355.70638 155.977088,384 213.333333,384 C270.689579,384 321.437496,355.70638 352.381644,312.31198 C332.825087,266.653822 287.481377,234.666667 234.666667,234.666667 L234.666667,234.666667 Z M213.333333,64 C177.987109,64 149.333333,92.653776 149.333333,128 C149.333333,163.346224 177.987109,192 213.333333,192 C248.679557,192 277.333333,163.346224 277.333333,128 C277.333333,92.653776 248.679557,64 213.333333,64 Z"

-                id="Combined-Shape"

-            >

-            </path>

-        </g>

-    </g>

-</svg>

+<svg
+    class={$$props.class}
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <title>user-profile-filled</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <g id="drop" fill="currentColor" transform="translate(42.666667, 42.666667)">
+            <path
+                d="M213.333333,3.55271368e-14 C269.912851,3.55271368e-14 324.175019,22.4761259 364.18278,62.4838867 C404.190541,102.491647 426.666667,156.753816 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 2.84217094e-14,331.15408 2.84217094e-14,213.333333 C2.84217094e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,234.666667 L192,234.666667 C139.18529,234.666667 93.8415802,266.653822 74.285337,312.314895 C105.229171,355.70638 155.977088,384 213.333333,384 C270.689579,384 321.437496,355.70638 352.381644,312.31198 C332.825087,266.653822 287.481377,234.666667 234.666667,234.666667 L234.666667,234.666667 Z M213.333333,64 C177.987109,64 149.333333,92.653776 149.333333,128 C149.333333,163.346224 177.987109,192 213.333333,192 C248.679557,192 277.333333,163.346224 277.333333,128 C277.333333,92.653776 248.679557,64 213.333333,64 Z"
+                id="Combined-Shape"
+            >
+            </path>
+        </g>
+    </g>
+</svg>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index a9c8dd0..a69efc4 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { profileSchema } from "$lib/schemas/profile";
-
+    import { profileSchema } from '$lib/schemas/profile';
 </script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
diff --git a/website/src/routes/login/+page.svelte b/website/src/routes/login/+page.svelte
index 1226799..6e6325d 100644
--- a/website/src/routes/login/+page.svelte
+++ b/website/src/routes/login/+page.svelte
@@ -7,7 +7,6 @@
         url.searchParams.set('provider', provider);
         return url.toString();
     };
-
 </script>
 
 <div
@@ -24,7 +23,8 @@
     <div class="mt-8 space-y-4">
         <a
             href={url('discord')}
-            target="_blank" rel="noopener noreferrer"
+            target="_blank"
+            rel="noopener noreferrer"
             class="group relative flex w-full transform-gpu items-center justify-center rounded-xl border border-gray-900 bg-white px-4 py-3 text-sm font-medium text-gray-900 transition-all duration-200 hover:bg-gray-50 focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:outline-none active:scale-[0.98]"
         >
             <span class="absolute inset-y-0 left-0 flex items-center pl-4">
diff --git a/website/src/routes/welcome/+page.server.ts b/website/src/routes/welcome/+page.server.ts
index 503f361..5a6e024 100644
--- a/website/src/routes/welcome/+page.server.ts
+++ b/website/src/routes/welcome/+page.server.ts
@@ -3,36 +3,53 @@ import type { Actions, PageServerLoad } from './$types';
 import { profileSchema } from '$lib/schemas/profile';
 
 export const actions: Actions = {
-	default: async ({ request, fetch }) => {
-        console.log("hello");
-		const formData = await request.formData();
-		const data = Object.fromEntries(formData);
-
-		// 1. Zod Validation
-		const result = profileSchema.safeParse(data);
-		
-		if (!result.success) {
-			return fail(400, {
-				errors: result.error.flatten().fieldErrors,
-				data: data as Record<string, string>
-			});
-		}
-
-		// 2. Example: Check availability against your backend
-		// Replace this with your actual backend URL
-		const response = await fetch(`/api/check-username?u=${result.data.username}`);
-		const { available } = await response.json();
-
-		if (!available) {
-			return fail(400, {
-				errors: { username: ["This username is already taken"] },
-				data: data as Record<string, string>
-			});
-		}
-
-		// 3. Success: Send to backend to create profile
-		// await fetch('...', { method: 'POST', body: JSON.stringify(result.data) });
-
-		throw redirect(303, '/dashboard');
-	}
+  default: async ({ request, fetch }) => {
+    console.log('hello');
+    const formData = await request.formData();
+    const data = Object.fromEntries(formData);
+
+    const result = profileSchema.safeParse(data);
+
+    if (!result.success) {
+      return fail(400, {
+        errors: result.error.flatten().fieldErrors,
+        data: data as Record<string, string>,
+      });
+    }
+
+    const response = await fetch(`/api/check-username?u=${result.data.username}`);
+    const { available } = await response.json();
+
+    if (!available) {
+      return fail(400, {
+        errors: { username: ['This username is already taken'] },
+        data: data as Record<string, string>,
+      });
+    }
+
+    // 3. Success: Send to backend to create profile
+    // await fetch('...', { method: 'POST', body: JSON.stringify(result.data) });
+
+    throw redirect(303, '/dashboard');
+  },
+};
+
+export const load = async ({ fetch, request }) => {
+  const res = await fetch('http://localhost:2210/me', {
+    headers: {
+      cookie: request.headers.get('cookie') || '',
+    },
+  });
+
+  if (res.status === 401) throw redirect(302, '/login');
+
+  const userData = await res.json();
+
+  // if (userData.is_onboarded) {
+  //     throw redirect(302, '/dashboard');
+  // }
+  //
+  return {
+    user: userData,
+  };
 };
diff --git a/website/src/routes/welcome/+page.svelte b/website/src/routes/welcome/+page.svelte
index 863b69f..ade0837 100644
--- a/website/src/routes/welcome/+page.svelte
+++ b/website/src/routes/welcome/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { enhance } from '$app/forms';
-    import type { ActionData } from './$types';
+    import type { ActionData, PageData } from './$types';
 
     type FormFailure = {
         errors: { username?: string[]; bio?: string[] };
@@ -8,7 +8,7 @@
     };
     const domain = 'sellershut.com';
 
-    let { form }: { form: ActionData } = $props();
+    let { form, data }: { form: ActionData; data: PageData } = $props();
 
     const formError = $derived(form && 'errors' in form ? (form as FormFailure) : null);
     const errors = $derived(formError?.errors);
@@ -30,6 +30,9 @@
     $effect(() => {
         if (formError?.data?.username) username = formError.data.username;
         if (formError?.data?.bio) bio = formError.data.bio;
+        if (data) {
+            username = data.user.username;
+        }
     });
 </script>
 
@@ -128,7 +131,7 @@
                         id="email"
                         name="email"
                         type="email"
-                        value="email@domain.com"
+                        value={data.user.email}
                         readonly
                         tabindex="-1"
                         class="flex-1 cursor-not-allowed border-none bg-transparent py-2.5 pr-4 pl-3 text-sm text-gray-500 outline-none focus:ring-0 md:text-base"