Add: Register Form

src/routes/(login)/register/+page.server.js

@@ -1,3 +1,5 @@
+import { registerUser } from '$lib/server/db/user';
+
 /** @type {import('./$types').PageServerLoad} */
 export function load({ cookies }) {
   // coo
@@ -6,3 +8,21 @@ export function load({ cookies }) {
     
   };
 }
+
+/** @type {import('./$types').Action} */
+async function POST({ request }) {
+  const data = await request.formData();
+  const username = data.get('username')?.toString();
+  const password = data.get('password')?.toString();
+
+  if (!username || !password) {
+    return;
+  }
+
+  registerUser(username, password);
+}
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+  default: POST
+};

src/routes/(login)/register/+page.svelte

@@ -1,11 +1,64 @@
-<style>
+<script>
+  import Glowfx from "$comp/fx/glowfx.svelte";
 
+  /** @type {string} */
+  let password;
+  /** @type {string} */
+  let repeatPassword;
+
+  function submitForm(/** @type {SubmitEvent} */ e) {
+    if (password != repeatPassword) {
+      console.log('Passwords do not match!');
+      e.preventDefault();
+    }
+  }
+</script>
+
+<style>
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  .items {
+    display: flex;
+    flex-flow: column nowrap;
+    width: 100%;
+    gap: 32px;
+  }
+
+  .pair {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    width: 100%;
+  }
+
+  button {
+    font-size: 1.3rem;
+    letter-spacing: 0.2em;
+  }
 </style>
 
-<form action="/register" method="post">
-  <h1 class="typeTitle">Register</h1>
-  <input type="text" name="username" id="username" autocomplete="username">
-  <input type="password" name="password" id="password" autocomplete="new-password">
-  <input type="password" name="repeatPassword" id="repeatPassword" autocomplete="new-password">
-  <button class="button" type="submit">go!</button>
+<form class="entryForm" action="/register" method="post" on:submit={submitForm}>
+  <h1 class="typeHead noSelect">Register</h1>
+  <div class="items">
+    <div class="pair">
+      <label class="noSelect" for="username">Username</label>
+      <input type="text" name="username" id="username" autocomplete="username" required>
+    </div>
+    
+    <div class="pair">
+      <label class="noSelect" for="password">Password</label>
+      <input type="password" name="password" id="password" autocomplete="new-password" required bind:value={password}>
+    </div>
+    
+    <div class="pair">
+      <label class="noSelect" for="repeatPassword">Repeat Password</label>
+      <input type="password" id="repeatPassword" autocomplete="new-password" required bind:value={repeatPassword}>
+    </div>
+  </div>
+
+  <Glowfx borderRadius={4}>
+    <button class="button typeTitle noSelect" type="submit">GO!</button>
+  </Glowfx>
 </form>