Refactor admin settings page, add ConfirmModal component, and update user management functionality

src/lib/components/ConfirmModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  import { onMount } from "svelte";
+  let modal: HTMLDialogElement;
+
+  export let title: string;
+  export let message: string;
+  export let isWarning: boolean;
+
+  onMount(() => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  });
+
+  function close() {
+    dispatch("close");
+  }
+
+  function confirm() {
+    dispatch("confirm");
+    close();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal {isWarning ? 'bg-warning' : ''}">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">{title}</h3>
+    <p class="py-1 mb-2">{message}</p>
+    <button class="btn btn-sucess mr-2" on:click={confirm}>Confirm</button>
+    <button class="btn btn-neutral" on:click={close}>Close</button>
+  </div>
+</dialog>

src/lib/components/UserCard.svelte

@@ -4,12 +4,14 @@
   export let user: DatabaseUser;
 </script>
 
-<div class="card w-96 bg-base-100 shadow-xl">
+<div class="card w-96 shadow-xl bg-primary-content">
   <div class="card-body">
     <h2 class="card-title">{user.first_name} {user.last_name}</h2>
-    <p>{user.username}</p>
+    <p>{user.username} - {user.icon}</p>
     <p>Last Login: {user.last_login}</p>
     <p>Created: {user.signup_date}</p>
+    <p>{user.role}</p>
+    <p>{user.id}</p>
     <div class="card-actions justify-end">
       <button class="btn btn-primary">Edit User</button>
     </div>

src/routes/settings/admin/+page.server.ts

@@ -14,7 +14,6 @@ export const load: PageServerLoad = async (event) => {
   }
   if (event.locals.user.role === "admin") {
     users = (await db.select().from(userTable).execute()) as DatabaseUser[];
-    console.log(users);
   }
   return {
     users,
@@ -28,7 +27,7 @@ export const actions: Actions = {
         message: "You are not authorized to perform this action",
       });
     } else {
-      console.log("ALL SESSIONS CLEARED");
+      console.log("ALL SESSIONS CLEARED by " + event.locals.user?.username);
       await db.delete(sessionTable).execute();
       return {
         status: 200,

src/routes/settings/admin/+page.svelte

@@ -12,6 +12,27 @@
   let first_name: string = "";
   let last_name: string = "";
   let password: string = "";
+  import ConfirmModal from "$lib/components/ConfirmModal.svelte";
+
+  let isModalOpen = false;
+
+  async function clearAllSessions() {
+    await fetch("?/clearAllSessions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams(),
+    });
+    window.location.reload();
+  }
+
+  function openModal() {
+    isModalOpen = true;
+  }
+  function closeModal() {
+    isModalOpen = false;
+  }
 
   const addUser: SubmitFunction = async ({ formData, action, cancel }) => {
     const response = await fetch(action, {
@@ -95,22 +116,30 @@
   </div>
 {/if}
 
-<h2 class="text-center font-extrabold text-2xl">Session Managment</h2>
+<h2 class="text-center font-extrabold text-2xl mb-2">Session Managment</h2>
 <div class="flex justify-center items-center">
-  <form use:enhance method="POST" action="?/clearAllSessions">
-    <input
-      type="submit"
-      class="btn btn-warning"
-      value="Clear All Users Sessions"
-    />
-  </form>
+  <button on:click={openModal} class="btn btn-warning mb-4"
+    >Clear All Users Sessions</button
+  >
 </div>
 
 <h2 class="text-center font-extrabold text-2xl">User Managment</h2>
-<div class="text-center">
+<div
+  class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+>
   {#each $page.data.users as user}
     <div>
       <UserCard {user} />
     </div>
   {/each}
 </div>
+
+{#if isModalOpen}
+  <ConfirmModal
+    on:close={closeModal}
+    on:confirm={clearAllSessions}
+    title="Clear All Sessions"
+    isWarning={true}
+    message="Are you sure you want to clear all user sessions?"
+  />
+{/if}