Merge branch 'logins' into 'master'

feat: logins and toggleable admin mode

See merge request gk1623/drp-48!15

src/lib/components/Button.svelte

@@ -5,29 +5,50 @@
         onclick?: (event: MouseEvent) => void;
         disabled?: boolean;
         type?: "button" | "submit" | "reset";
+        style?: "normal" | "red";
+        formaction?: string;
         children?: Snippet;
     }
-    const { children, ...rest }: Props = $props();
+    interface LinkProps {
+        href: string;
+        type: "link";
+        style?: "normal" | "red";
+        children?: Snippet;
+    }
+    const { children, type, style = "normal", ...rest }: Props | LinkProps = $props();
 </script>
 
-<button {...rest}>
+{#if type === "link"}
-    {@render children?.()}
+    <a {...rest} class="button {style}">
-</button>
+        {@render children?.()}
+    </a>
+{:else}
+    <button class="button {style}" {type} {...rest}>
+        {@render children?.()}
+    </button>
+{/if}
 
 <style>
-    button {
+    .button {
         padding: 0.5rem 1rem;
         border-radius: 0.5rem;
-        background: linear-gradient(-83deg, #3fb095, #49bd85);
         box-shadow: 0rem 0rem 0.5rem #182125;
         color: #eaffeb;
         border: none;
         cursor: pointer;
+        text-decoration: none;
+        text-align: center;
     }
-    button:focus {
+    .normal {
+        background: linear-gradient(-83deg, #3fb095, #49bd85);
+    }
+    .red {
+        background-color: #bd4949;
+    }
+    .button:focus {
         outline: 2px solid #007bff;
     }
-    button:disabled {
+    .button:disabled {
         background: linear-gradient(-18deg, #66697b, #4e4e5e);
         cursor: not-allowed;
     }

src/lib/components/inputs/Text.svelte

@@ -5,12 +5,13 @@
         value?: string | null;
         placeholder?: string;
         required?: boolean;
+        type?: "text" | "password" | "email" | "number";
     }
 
     let { inputElem = $bindable(), value = $bindable(), name, ...rest }: Props = $props();
 </script>
 
-<input type="text" id={name} {name} bind:value bind:this={inputElem} {...rest} />
+<input id={name} {name} bind:value bind:this={inputElem} {...rest} />
 
 <style>
     input {

src/lib/database.d.ts

@@ -140,6 +140,27 @@ export type Database = {
         }
         Relationships: []
       }
+      users: {
+        Row: {
+          created_at: string
+          id: string
+          is_admin: boolean
+          updated_at: string
+        }
+        Insert: {
+          created_at?: string
+          id: string
+          is_admin?: boolean
+          updated_at?: string
+        }
+        Update: {
+          created_at?: string
+          id?: string
+          is_admin?: boolean
+          updated_at?: string
+        }
+        Relationships: []
+      }
     }
     Views: {
       [_ in never]: never
@@ -269,4 +290,3 @@ export const Constants = {
     Enums: {},
   },
 } as const
-

src/routes/+layout.server.ts

@@ -1,9 +1,29 @@
 import type { LayoutServerLoad } from "./$types";
 
-export const load: LayoutServerLoad = async ({ locals: { safeGetSession }, cookies }) => {
+export const load: LayoutServerLoad = async ({
+    locals: { safeGetSession, supabase },
+    cookies,
+    depends
+}) => {
+    depends("supabase:auth");
     const { session } = await safeGetSession();
+    let adminMode = false;
+    if (session) {
+        const { data: userData, error: userError } = await supabase
+            .from("users")
+            .select("*")
+            .eq("id", session.user.id)
+            .single();
+        if (userError) {
+            console.error("Failed to fetch user data:", userError);
+        }
+        if (userData?.is_admin) {
+            adminMode = true;
+        }
+    }
     return {
         session,
+        adminMode,
         cookies: cookies.getAll()
     };
 };

src/routes/+layout.svelte

@@ -2,14 +2,22 @@
     import posthog from "posthog-js";
     import logoUrl from "$lib/assets/logo.svg";
     import { onMount } from "svelte";
+    import { invalidate } from "$app/navigation";
 
-    const { children } = $props();
+    let { data, children } = $props();
+    let { session, supabase } = $derived(data);
 
     onMount(() => {
         posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
             api_host: "https://eu.i.posthog.com",
             person_profiles: "always"
         });
+        const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
+            if (newSession?.expires_at !== session?.expires_at) {
+                invalidate("supabase:auth");
+            }
+        });
+        return () => data.subscription.unsubscribe();
     });
 </script>
 

src/routes/+layout.ts

@@ -40,5 +40,5 @@ export const load: LayoutLoad = async ({ data, depends, fetch }) => {
         data: { user }
     } = await supabase.auth.getUser();
 
-    return { session, supabase, user };
+    return { session, supabase, user, adminMode: data.adminMode };
 };

src/routes/+page.svelte

@@ -4,9 +4,10 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
     import { allTags, volumeTags, wifiTags, powerOutletTags } from "$lib";
+    import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
-    const { studySpaces, supabase } = $derived(data);
+    const { studySpaces, supabase, session, adminMode } = $derived(data);
 
     let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
@@ -66,13 +67,19 @@
 </script>
 
 <Navbar>
-    <a href="/space/new/edit">
+    {#if session}
-        <img src={crossUrl} alt="new" class="new-space" />
+        <a href="/space/new/edit">
-    </a>
+            <img src={crossUrl} alt="new" class="new-space" />
+        </a>
+    {/if}
 </Navbar>
 
 <main>
-    <a href="/space/reports" class="checkReports">Check Reports</a>
+    {#if adminMode}
+        <div class="checkReports">
+            <Button href="/space/reports" type="link" style="red">Check Reports</Button>
+        </div>
+    {/if}
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -141,6 +148,14 @@
     {/each}
 </main>
 
+<footer>
+    {#if session}
+        <Button onclick={() => supabase.auth.signOut()}>Signout</Button>
+    {:else}
+        <Button href="/auth" type="link">Login / Signup</Button>
+    {/if}
+</footer>
+
 <style>
     main {
         display: grid;
@@ -153,6 +168,15 @@
         margin: 0 auto;
     }
 
+    footer {
+        display: flex;
+        flex-direction: column;
+        max-width: 600px;
+        width: 100%;
+        padding: 1rem;
+        margin: 0 auto;
+    }
+
     .new-space {
         transform: rotate(45deg);
     }
@@ -161,16 +185,14 @@
         grid-column: 1 / -1;
         display: flex;
         justify-content: center;
-        margin-bottom: 1rem;
+        padding: 0.5rem;
     }
 
     form {
         display: flex;
         flex-direction: column;
-        padding: 1.5rem;
         gap: 0.5rem;
         max-width: 32rem;
-        margin: 0 auto;
     }
 
     .tagDisplay {
@@ -253,14 +275,9 @@
     }
     .checkReports {
         grid-column: 1 / -1;
-        display: block;
+        display: flex;
-        text-align: center;
+        flex-direction: column;
-        color: #ffeaea;
         font-size: 1.2rem;
-        text-decoration: none;
-        padding: 0.5rem;
-        background-color: #bd4949;
-        border-radius: 0.5rem;
     }
 
     @media (max-width: 20rem) {

src/routes/auth/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Navbar from "$lib/components/Navbar.svelte";
+    import crossUrl from "$lib/assets/cross.svg";
+
+    const { children } = $props();
+</script>
+
+<Navbar>
+    <a href="/">
+        <img src={crossUrl} alt="close" />
+    </a>
+</Navbar>
+
+{@render children?.()}

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

@@ -0,0 +1,30 @@
+import { redirect, error } from "@sveltejs/kit";
+
+import type { Actions } from "./$types";
+
+export const actions: Actions = {
+    signup: async ({ request, locals: { supabase } }) => {
+        const formData = await request.formData();
+        const email = formData.get("email") as string;
+        const password = formData.get("password") as string;
+
+        const { error: authError } = await supabase.auth.signUp({ email, password });
+        if (authError) {
+            error(400, "Failed to sign up: " + authError.message);
+        } else {
+            redirect(303, "/");
+        }
+    },
+    login: async ({ request, locals: { supabase } }) => {
+        const formData = await request.formData();
+        const email = formData.get("email") as string;
+        const password = formData.get("password") as string;
+
+        const { error: authError } = await supabase.auth.signInWithPassword({ email, password });
+        if (authError) {
+            error(400, "Failed to log in: " + authError.message);
+        } else {
+            redirect(303, "/");
+        }
+    }
+};

src/routes/auth/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import Button from "$lib/components/Button.svelte";
+    import Text from "$lib/components/inputs/Text.svelte";
+</script>
+
+<form method="POST" action="?/login">
+    <label for="email">Email</label>
+    <Text type="email" name="email" placeholder="your@email.com" />
+
+    <label for="password">Password</label>
+    <Text type="password" name="password" placeholder="*********" />
+
+    <div class="actions">
+        <Button type="submit">Login</Button>
+        <Button formaction="?/signup">Signup</Button>
+    </div>
+</form>
+
+<style>
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        max-width: 600px;
+        margin: 1rem auto;
+    }
+    label {
+        margin-top: 0.5rem;
+    }
+    .actions {
+        display: grid;
+        margin-top: 0.5rem;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+    }
+</style>

src/routes/space/[id]/+page.svelte

@@ -8,11 +8,10 @@
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
     import { gmapsLoader } from "$lib";
+    import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
-    const { space, supabase } = $derived(data);
+    const { space, supabase, adminMode } = $derived(data);
-
-    let adminMode = $state(true);
 
     const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
@@ -109,20 +108,18 @@
         class="feedbackButton"
         onclick={() => {
             isFeedbackPromptVisible = true;
-        }}>Review the study space?</button
+        }}
     >
+        Help categorise this space
+    </button>
 
-    {#if adminMode}
+    <div class="actions">
-        <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
+        {#if adminMode}
-    {:else}
+            <Button href="/space/{space.id}/edit" type="link">Edit</Button>
-        <button
+        {:else}
-            type="button"
+            <Button onclick={() => (isReportVisible = true)} style="red">Report</Button>
-            class="reportButton"
+        {/if}
-            onclick={() => {
+    </div>
-                isReportVisible = true;
-            }}>Report</button
-        >
-    {/if}
 </main>
 
 <style>
@@ -221,17 +218,6 @@
         border-radius: 0.5rem;
         border: 2px solid #eaffeb;
     }
-    .reportButton {
-        width: 100%;
-        padding: 0.4rem;
-        border-radius: 0.5rem;
-        border: none;
-        background-color: #bd4949;
-        color: #ffffff;
-        font-size: 1rem;
-        cursor: pointer;
-        margin-top: 1rem;
-    }
     .feedbackButton {
         width: 100%;
         padding: 0.7rem;
@@ -244,17 +230,9 @@
         margin-top: 1rem;
         text-align: center;
     }
-    .editButton {
+    .actions {
-        width: 100%;
+        display: flex;
-        padding: 0.4rem;
+        flex-direction: column;
-        border-radius: 0.5rem;
+        padding-top: 1rem;
-        border: none;
-        background-color: #49bd85;
-        color: #ffffff;
-        font-size: 1rem;
-        cursor: pointer;
-        margin-top: 1rem;
-        text-decoration: none;
-        text-align: center;
     }
 </style>

supabase/migrations/20250612104310_users-admin.sql

@@ -0,0 +1,28 @@
+CREATE TABLE users (
+    id uuid PRIMARY KEY REFERENCES auth.users ON DELETE CASCADE,
+    is_admin boolean NOT NULL DEFAULT false,
+    created_at timestamp with time zone NOT NULL DEFAULT now(),
+    updated_at timestamp with time zone NOT NULL DEFAULT now()
+);
+
+CREATE TRIGGER users_handle_updated_at
+AFTER UPDATE ON users
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
+
+-- Auto-create users when auth.users are created
+CREATE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+    SECURITY DEFINER
+    SET search_path = ''
+AS $$
+BEGIN
+    INSERT INTO public.users (id, contact_email)
+    VALUES (NEW.id, NEW.email);
+    RETURN NEW;
+END;
+$$;
+
+CREATE TRIGGER users_handle_new_user 
+AFTER INSERT ON auth.users
+FOR EACH ROW EXECUTE FUNCTION handle_new_user();

supabase/schemas/0001_users.sql

@@ -0,0 +1,28 @@
+CREATE TABLE users (
+    id uuid PRIMARY KEY REFERENCES auth.users ON DELETE CASCADE,
+    is_admin boolean NOT NULL DEFAULT false,
+    created_at timestamp with time zone NOT NULL DEFAULT now(),
+    updated_at timestamp with time zone NOT NULL DEFAULT now(),
+);
+
+CREATE TRIGGER users_handle_updated_at
+AFTER UPDATE ON users
+FOR EACH ROW EXECUTE FUNCTION handle_updated_at();
+
+-- Auto-create users when auth.users are created
+CREATE FUNCTION handle_new_user()
+RETURNS trigger
+LANGUAGE plpgsql
+    SECURITY DEFINER
+    SET search_path = ''
+AS $$
+BEGIN
+    INSERT INTO public.users (id, contact_email)
+    VALUES (NEW.id, NEW.email);
+    RETURN NEW;
+END;
+$$;
+
+CREATE TRIGGER users_handle_new_user 
+AFTER INSERT ON auth.users
+FOR EACH ROW EXECUTE FUNCTION handle_new_user();