feat: Signout Button

src/routes/account/+page.server.ts

@@ -0,0 +1,23 @@
+import { fail, redirect } from '@sveltejs/kit';
+
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals: { authReq } }) => {
+  const session = await authReq.validate();
+  if (!session) throw redirect(302, '/login');
+  return {
+    username: session.user.username
+  };
+};
+
+export const actions: Actions = {
+  signout: async ({ locals: { auth, authReq } }) => {
+    const session = await authReq.validate();
+    if (!session) return fail(401);
+
+    await auth.invalidateSession(session.sessionId);
+    authReq.setSession(null); // remove cookie
+
+    throw redirect(302, '/login');
+  }
+};

src/routes/account/+page.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { enhance } from '$app/forms';
+
+  export let data;
+  export let form;
+
+  let currentPassword = '';
+  let newPassword = '';
+  let confirmPassword = '';
+
+  let { username } = data;
+</script>
+
+<svelte:head>
+  <title>Account | Roll With It</title>
+</svelte:head>
+
+<main class="container">
+  <h1>Account</h1>
+  <section>
+    <form method="POST" action="?/updateAccount">
+      {#if form?.type === 'updateAccount'}
+        <small style="color: {form?.success ? 'green' : 'red'}">{form?.message}</small>
+      {/if}
+      <label for="username">
+        Username
+        <input
+          type="text"
+          name="username"
+          placeholder="Username"
+          value={form?.username ?? username}
+          aria-label="Email"
+          autocomplete="email"
+          required
+        />
+      </label>
+
+      <!-- Needed for spacing -->
+      <br />
+
+      <button type="submit">Save Changes</button>
+    </form>
+  </section>
+
+  <section>
+    <form method="POST" action="?/changePassword" use:enhance>
+      {#if form?.type === 'changePassword'}
+        <small style="color: {form?.success ? 'green' : 'red'}">{form.message}</small>
+      {/if}
+      <label for="current-password">
+        Current Password
+        <input
+          type="password"
+          name="current-password"
+          placeholder="Current password"
+          aria-label="Current Password"
+          autocomplete="current-password"
+          bind:value={currentPassword}
+          required
+        />
+      </label>
+
+      <div class="grid">
+        <label for="new-password">
+          New Password
+          <input
+            type="password"
+            name="new-password"
+            placeholder="Leave empty to keep your current password"
+            aria-label="New Password"
+            autocomplete="new-password"
+            bind:value={newPassword}
+            aria-invalid={newPassword.length === 0 ? null : newPassword.length < 8 ? true : false}
+            required
+          />
+        </label>
+        <label for="confirm-password">
+          Confirm New Password
+          <input
+            type="password"
+            name="confirm-password"
+            placeholder="Confirm your new password"
+            aria-label="Confirm Password"
+            autocomplete="new-password"
+            bind:value={confirmPassword}
+            aria-invalid={confirmPassword.length === 0
+              ? null
+              : newPassword !== confirmPassword
+                ? true
+                : false}
+            required
+          />
+        </label>
+      </div>
+
+      <button
+        type="submit"
+        disabled={currentPassword.length === 0 ||
+        newPassword.length < 8 ||
+        newPassword !== confirmPassword
+          ? true
+          : false}
+      >
+        Change Password
+      </button>
+    </form>
+  </section>
+
+  <section>
+    <hgroup>
+      <h3>Billing Information</h3>
+      <h4>Thank you for your support!</h4>
+    </hgroup>
+  </section>
+
+  <form method="POST" action="?/signout" use:enhance>
+    <button class="secondary" type="submit">Logout</button>
+  </form>
+</main>