check cookie

src/lib/api.js

@@ -44,4 +44,54 @@ export async function login(email, password) {
     //cookie.set("check", "check",  { expires: 7 })
     console.log(data)
     return data;
-}
+}
+
+export const logout = async (event) => {
+    //destroy cookie sessionID
+    const sessionID = event.cookies.get("sessionID");
+    console.log("SessionID: ", sessionID);
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const res = await fetch(apiUrl + '/logout', {
+        method: 'POST',
+        headers: {
+        },
+    });
+};
+
+export const getFromAPI = async (event, endpoint, data) => {
+    const sessionID = event.cookies.get("sessionID");
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const res = await fetch(apiUrl + endpoint, {
+        method: 'GET',
+        headers: {
+            'Authorization': 'Bearer ' + sessionID,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+    });   
+    if (res.ok) {
+        const data = await res.json();
+        return data;
+    } else {
+        return null;
+    }
+};
+
+export const postToAPI = async (event, endpoint, data) => {
+    const sessionID = event.cookies.get("sessionID");
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const res = await fetch(apiUrl + endpoint, {
+        method: 'POST',
+        headers: {
+            'Authorization': 'Bearer ' + sessionID,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data)
+    });   
+    if (res.ok) {
+        const data = await res.json();
+        return data;
+    } else {
+        return null;
+    }
+};

src/lib/store.js

@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+
+// Create a writable store with initial value of null
+export const user = writable(null);
+
+// Function to set user data
+export const setUserData = async (sessionID) => {
+    const userID = await getUserID(sessionID); // your function to fetch user ID based on session ID
+    user.set({ sessionID, userID });
+};
+
+getUserID = async (sessionID) => {
+    console.log("SessionID: ", sessionID);
+    return 1234;
+};

src/routes/+layout.server.js

@@ -0,0 +1,21 @@
+console.log("Hello from layout.server.js");
+
+export const load = async (event) => {
+    const sessionID = event.cookies.get("sessionID");
+    console.log("SessionID: ", sessionID);
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const res = await fetch(apiUrl + '/edible', {
+        method: 'GET',
+        headers: {
+            'Authorization': 'Bearer ' + sessionID
+        }
+    });
+
+    if (res.ok) {
+        const data = await res.json();
+        const userID = data.userID;
+        console.log("UserID: ", userID); // Here's the userID
+    } else {
+        console.log("Invalid session or other error.");
+    }
+};

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 
 <script>
     import Header from '$components/Header.svelte';
+    import Footer from '$components/Footer.svelte';
     let text = '';
     const apiUrl = import.meta.env.VITE_API_URL;
 
@@ -67,6 +68,8 @@
 
 </main>
 
+<Footer/>
+
 <style>
 ul li {
     max-width: 300px;

src/routes/login/+page.server.js

@@ -1,13 +1,12 @@
 import { redirect } from "@sveltejs/kit";
-import { login } from '$lib/api';
 
 export const load = async (event) => {
     console.log("hello from backend")
-    const sessionID = event.cookies.get('sessionID');
+    //const sessionID = event.cookies.get('sessionID');
     
-    if (sessionID) {
-        throw redirect('/profile');
-    }
+    //if (sessionID) {
+    //    throw redirect('/profile');
+    //}
 };
 
 export const actions = {
@@ -16,7 +15,6 @@ export const actions = {
         const email = formData.get('email');
         const password = formData.get('password');
 
-
         const apiUrl = import.meta.env.VITE_API_URL;
 
         const res = await fetch(apiUrl + '/login', {
@@ -32,16 +30,20 @@ export const actions = {
         });
 
         if (res.ok) {
-            console.log("ok")
-            return redirect('/profile');
-        } else {
-            console.log("not ok")
-            const error = await res.json();
-            return {
-                status: 400,
-                redirect: '/login',
-                body: { error }
-            };
+            const sessionID = res.headers.get('Authorization').substring(7);
+            event.cookies.set('sessionID', sessionID, {
+                httpOnly: true,
+                maxAge: 60 * 60 * 24 * 7, // 1 week
+                path: '/',
+            });
+
+            throw redirect(301,'/profile');
+        } 
+        const error = await res.json();
+
+        if (error){
+            const encodedMessage = encodeURIComponent(error.error);
+            throw redirect(301,'/login?error='+ encodedMessage);
         }
         
     },

src/routes/login/+page.svelte

@@ -3,37 +3,30 @@
 </svelte:head>
 
 <script>
-    import { login } from '$lib/api';
-    import { isValidEmail } from '$lib/utils';
     import Modal from '$components/Modal.svelte';
     import Header from '$components/Header.svelte';
     import Footer from '$components/Footer.svelte';
-    import { navigate } from 'svelte-navigator';
+    import { onMount } from 'svelte';
 
+    let errorMessage = '';
     let showModal = false;
     let modalMessage = 'Test message';
 
+    onMount(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        
+        if (urlParams.has('error')) {
+            errorMessage = decodeURIComponent(urlParams.get('error'));
+            showModal = true;
+            modalMessage = errorMessage;
+        } else {
+            showModal = false;
+        }
+    });
+
     let email = '';
     let password = '';
 
-    async function handleLogin() {
-        return;
-        if (!isValidEmail(email)){
-            modalMessage = "Please enter the email address you used to sign up.";
-            showModal = true;
-            return;
-        }
-        try {
-            const user = await login(email, password);
-            navigate('/profile');
-            //reload the page
-            location.reload();
-        } catch (err) {
-            modalMessage = err;
-            showModal = true;
-        }
-    }
-
     function closeModal() {
         showModal = false;
     }
@@ -45,16 +38,9 @@
 
 <main>
 
-<form class="colonel" on:submit={handleLogin}>
-    <input type="email" placeholder="Email" bind:value={email} required>
-    <input type="password" placeholder="P@s5word" bind:value={password} required>
-
-    <button type="submit" class="btn-fly">Log in</button>
-</form>
-
 <form class="colonel" method="POST">
-    <input type="email" name="email" placeholder="Email" bind:value={email} required>
-    <input type="password" name="password" placeholder="P@s5word" bind:value={password} required>
+    <input class="valid" type="email" name="email" placeholder="Email" bind:value={email} required>
+    <input class="valid" type="password" name="password" placeholder="P@s5word" bind:value={password} required>
 
     <button type="submit" class="btn-fly">Log in</button>
 </form>

src/routes/profile/+page.server.js

@@ -0,0 +1,23 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async (event) => {
+    const sessionID = event.cookies.get("sessionID");
+    console.log("SessionID: ", sessionID);
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const res = await fetch(apiUrl + '/edible', {
+        method: 'GET',
+        headers: {
+            'Authorization': 'Bearer ' + sessionID
+        }
+    });
+ 
+    if (res.ok) {
+        const responseBody = await res.json();
+        console.log(responseBody); // log the entire response body
+        const { userID } = responseBody;
+        console.log(userID);
+
+    } else {
+        throw redirect(301,'/login?error='+ encodeURIComponent("You must be logged in to view this page."));
+    }
+};

src/routes/profile/+page.svelte

@@ -1,15 +1,15 @@
 <script>
-    import { onMount } from 'svelte';
-    //import { getUserData } from '$lib/api';  // This function should send a request to your server to get the user's data.
-
-    //let user;
-
-    //onMount(async () => {
-    //    user = await getUserData();
-    //});
+    import Header from '$components/Header.svelte';
+    import Footer from '$components/Footer.svelte';
 </script>
 
-<h2>Profile</h2>
+<Header />
+
+<main>
+    <h2>Profile</h2>
+</main>
+
+<Footer />
 <!-- Path: src/routes/profile/+page.svelte 
 {#if user}
     <h1>Welcome, {user.name}!</h1>