Implemented login/logout/username with api

client/src/App.svelte

@@ -1,15 +1,18 @@
 <script>
-import BottomBorder from "./BottomBorder.svelte";
-import CheckNotifications from "./CheckNotifications.svelte";
-import CreateAccount from "./CreateAccount.svelte";
+	import { onMount } from "svelte";
+import { whoami } from "./api";
 
-import Login from "./Login.svelte";
-import MainPage from "./MainPage.svelte";
-import Overlay from "./Overlay.svelte";
-import SendMoney from "./SendMoney.svelte";
-import TopBorder from "./TopBorder.svelte";
+	import BottomBorder from "./BottomBorder.svelte";
+	import CheckNotifications from "./CheckNotifications.svelte";
+	import CreateAccount from "./CreateAccount.svelte";
 
-	let loggedin = true;
+	import Login from "./Login.svelte";
+	import MainPage from "./MainPage.svelte";
+	import Overlay from "./Overlay.svelte";
+	import SendMoney from "./SendMoney.svelte";
+	import TopBorder from "./TopBorder.svelte";
+
+	let loggedin = false;
 	function toggleLoggedIn() {
 		loggedin = !loggedin;
 	}
@@ -75,6 +78,20 @@ import TopBorder from "./TopBorder.svelte";
 				alert(`Unhandled createPopup event: ${eventType}`);
 		}
 	}
+
+	onMount(async function() {
+		const token = sessionStorage.getItem("token");
+		if(token == null){
+			loggedin = false;
+		}else {
+			const result = await whoami(token);
+			if (result.status == "success") {
+				loggedin = true;
+			}else {
+				loggedin = false;
+			}
+		}
+	})
 </script>
 
 <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">

client/src/Login.svelte

@@ -4,6 +4,7 @@
     import CardBG from "./CardBG.svelte";
     import InputField from "./InputField.svelte";
     import {createEventDispatcher} from 'svelte';
+    import {login} from './api.js';
 
     
     const dispatch = createEventDispatcher();
@@ -11,9 +12,15 @@
     let username = "";
     let code = "";
 
-    function checkLogin(){
-        //todo: CHeck here 
-        dispatch("loginSuccess",null);
+    async function checkLogin(){
+        const result = await login(username, code);
+        if(result.status == "success") {
+            sessionStorage.setItem("token", result.token);
+            dispatch("loginSuccess",null);
+        }else{
+            alert(result.code);
+        }
+        
     }
 
 </script>

client/src/MainPage.svelte

@@ -1,15 +1,19 @@
 <script>
     import Icon from '@iconify/svelte';
     import CardBG from "./CardBG.svelte";
-    import {createEventDispatcher} from 'svelte';
+    import {createEventDispatcher, onMount} from 'svelte';
     import AccountCard from './AccountCard.svelte';
     import GreenButton from './GreenButton.svelte';
     import { fade, fly, slide } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
+    import { logout, whoami } from './api';
+
     
     const dispatch = createEventDispatcher();
 
-    let username = "Firstname Lastname";
+    let fullname = "";
+    let username = "";
+    let email = "";
     let code = "";
     let totalbalance = "2455.22";
     let maincurrency = "RON";
@@ -50,6 +54,8 @@
     function dispatchLogout(){
         //todo: CHeck here 
         if (confirm("Log out?")) {
+            logout(sessionStorage.getItem("token"));
+            sessionStorage.removeItem("token");
             dispatch("logOut",null);
         } 
     }
@@ -86,6 +92,16 @@
         });
     }
 
+    onMount( async function() {
+        const token = sessionStorage.getItem("token");
+        const result = await whoami(token);
+        if(result.status == "success") {
+            fullname = result.user.fullname;
+            email = result.user.email;
+            username = result.user.username;
+        }
+    })
+
 </script>
 
 <main class="h-full flex flex-col items-stretch md:flex-row">
@@ -115,9 +131,9 @@
     <div class="flex-shrink md:flex-shrink-0 md:flex-grow"></div>
 
     <div in:fade={{duration:250}}>
-        <CardBG class="flex-shrink flex flex-col items-stretch md:self-start p-6">
+        <CardBG class="flex-shrink flex flex-col min-w-transaction items-stretch md:self-start p-6">
             <div class="flex flex-row"> 
-                <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
+                <h1 class='font-sans flex-grow text-5xl text-gray-50 m-6 border-b-2'>{fullname}</h1>
                 <button on:click={checkNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="36" height="36" /></button>
             </div>
             

client/src/api.js

@@ -0,0 +1,57 @@
+const baseURL = "https://foxbank-api.extras.dcdevelop.xyz";
+
+export async function login(username, code) {
+    try {
+        const result = await fetch(new URL("/login/", baseURL), {
+            method: "POST",
+            body: JSON.stringify({
+                username, code,
+            }),
+            headers: {
+                "Content-Type": "application/json"
+            },
+        });
+
+        return (await result.json());
+    } catch (error) {
+        return {
+            status: "error",
+            code: "request/failure"
+        }
+    }
+}
+
+
+export async function whoami(token) {
+    try {
+        const result = await fetch(new URL("/login/whoami", baseURL), {
+            method: "GET",
+            headers: {
+                "Authorization": "Bearer " + token,
+            },
+        });
+
+        return (await result.json());
+    } catch (error) {
+        return {
+            status: "error",
+            code: "request/failure"
+        }
+    }
+}
+
+export async function logout(token) {
+    try {
+        await fetch(new URL("/login/logout", baseURL), {
+            method: "POST",
+            headers: {
+                "Authorization": "Bearer " + token,
+            },
+        });
+    } catch (error) {
+        return {
+            status: "error",
+            code: "request/failure"
+        }
+    }
+}