login kept in memory

www/src/App.svelte

@@ -4,6 +4,7 @@
 
   import Test3D from './pages/test3D.svelte';
   import Login from './pages/Login.svelte';
+  import Profile from './pages/Profile.svelte';
 </script>
 
 <Router>
@@ -13,4 +14,7 @@
   <Route path="/login">
     <Login />
   </Route>
+  <Route path="/profile">
+    <Profile />
+  </Route>
 </Router>

www/src/components/NavBar.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Link } from 'svelte-navigator';
+  import { currentUser } from '../store/user';
+</script>
+
+<nav class="border row">
+  {#if $currentUser === null}
+    <Link to="/" class="col-fill col">
+      <div class="nav-button" id="home" />
+    </Link>
+    <Link to="/login" class="col-fill col">
+      <div class="nav-button" id="login" />
+    </Link>
+  {:else}
+    <Link to="/" class="col-fill col">
+      <div class="nav-button" id="home" />
+    </Link>
+    <Link to="/profile" class="col-fill col">
+      <div class="nav-button" id="profile" />
+    </Link>
+    <Link to="/test" class="col-fill col">
+      <div class="nav-button" id="test" />
+    </Link>
+  {/if}
+</nav>
+
+<style>
+  nav {
+    position: absolute;
+    bottom: 0;
+    margin: 3px;
+    left: 0;
+    right: 0;
+    width: auto;
+  }
+
+  div.nav-button {
+    height: 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  div.nav-button#home {
+    background-image: url('/images/mosaic-of-four-hand-drawn-squares-tiles.png');
+  }
+
+  div.nav-button#login {
+    background-image: url('/images/next-user-hand-drawn-interface-symbol.png');
+  }
+
+  div.nav-button#profile {
+    background-image: url('/images/id-hand-drawn-symbol.png');
+  }
+</style>

www/src/components/navBar.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { Link } from 'svelte-navigator';
-</script>
-
-<nav class="border row">
-  <Link to="/" class="col-fill col">
-    <div class="nav-button" id="home" />
-  </Link>
-  <Link to="/login" class="col-fill col">
-    <div class="nav-button" id="login" />
-  </Link>
-</nav>
-
-<style>
-  nav {
-    position: absolute;
-    bottom: 0;
-    margin: 3px;
-    left: 0;
-    right: 0;
-    width: auto;
-  }
-
-  div.nav-button {
-    height: 50px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  div.nav-button#home {
-    background-image: url('/images/mosaic-of-four-hand-drawn-squares-tiles.png');
-  }
-
-  div.nav-button#login {
-    background-image: url('/images/next-user-hand-drawn-interface-symbol.png');
-  }
-</style>

www/src/functions/localStorage.ts

@@ -0,0 +1,19 @@
+export function save(key: string, data: unknown) {
+  if (data) {
+    localStorage.setItem(key, JSON.stringify(data));
+  } else {
+    remove(key);
+  }
+}
+
+export function remove(key: string) {
+  localStorage.removeItem(key);
+}
+
+export function read<T>(key: string) {
+  const data = localStorage.getItem(key);
+  if (data) {
+    return JSON.parse(data) as T;
+  }
+  return null;
+}

www/src/functions/request.ts

@@ -8,7 +8,10 @@ export async function get<T>(route: string): Promise<T | null> {
   return request<T>('GET', route);
 }
 
-export async function post<T>(route: string, data: unknown): Promise<T | null> {
+export async function post<T>(
+  route: string,
+  data?: unknown,
+): Promise<T | null> {
   return request<T>('POST', route, data);
 }
 
@@ -25,12 +28,13 @@ async function request<T>(
     headers: {
       'content-type': 'application/json',
     },
+    credentials: process.env.CORS ? 'include' : 'same-origin',
     mode: process.env.CORS ? 'cors' : 'same-origin',
     method: method,
     body: data ? JSON.stringify(data) : null,
   });
 
-  if (response.ok) {
+  if (response.ok && response.status !== 204) {
     return response.json() as T;
   }
   return null;

www/src/functions/user.ts

@@ -1,8 +1,22 @@
-import type { LoginUserBody, UserInfo } from '@core';
-import { post } from './request';
+import type { CreateUserBody, LoginUserBody, UserInfo } from '@core';
+import { post, get } from './request';
 import { currentUser } from '../store/user';
 
 export async function login(raw: LoginUserBody) {
   const user = await post<UserInfo>('/user/login', raw);
   currentUser.set(user);
+  return user;
+}
+
+export async function logout() {
+  await post('/user/logout');
+  currentUser.set(null);
+}
+
+export async function read(uuid: string) {
+  const user = await get<UserInfo>(`/user/read/${uuid}`);
+}
+
+export async function create(raw: CreateUserBody) {
+  const user = await post<UserInfo>('/user/create', raw);
 }

www/src/main.ts

@@ -2,7 +2,6 @@ import App from './App.svelte';
 
 const app = new App({
   target: document.body,
-  props: {},
 });
 
 export default app;

www/src/pages/Login.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
   import type { LoginUserBody } from '@core';
-  import NavBar from '../components/navBar.svelte';
+  import NavBar from '../components/NavBar.svelte';
   import { Form, Input, Button } from 'spaper';
   import { login } from '../functions/user';
-  import { currentUser } from '../store/user';
+  import { useNavigate } from 'svelte-navigator';
 
   const user: LoginUserBody = {
     username: '',
     password: '',
   };
+
+  const navigate = useNavigate();
+
+  const loginHandler = async () => {
+    const result = await login(user);
+    if (result) {
+      navigate('/');
+    }
+  };
 </script>
 
 <div class="row" id="container">
@@ -16,25 +25,23 @@
     <Input
       placeholder="username"
       class="row col-8"
+      autocomplete
       bind:value={user.username}
     />
     <Input
       placeholder="password"
       type="password"
+      autocomplete
       class="row col-8"
       bind:value={user.password}
     />
-
     <Button
       type="secondary"
       class="row sm-2 col-4"
       block
-      on:click={() => login(user)}>Sign in</Button
+      on:click={() => loginHandler()}>Sign in</Button
     >
   </Form>
-  {$currentUser?.uuid}
-  {$currentUser?.username}
-  {$currentUser?.role}
 </div>
 <NavBar />
 

www/src/pages/Profile.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import NavBar from '../components/NavBar.svelte';
+  import { currentUser } from '../store/user';
+  import { Button } from 'spaper';
+  import { logout } from '../functions/user';
+  import { useNavigate } from 'svelte-navigator';
+
+  const navigate = useNavigate();
+
+  const logoutHandler = async () => {
+    await logout();
+    navigate('/');
+  };
+</script>
+
+<Button type="danger" block on:click={() => logoutHandler()}>Logout</Button>
+{$currentUser?.uuid}
+{$currentUser?.username}
+{$currentUser?.role}
+<NavBar />
+
+<style>
+</style>

www/src/pages/test3D.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import NavBar from '../components/navBar.svelte';
+  import NavBar from '../components/NavBar.svelte';
   import { beforeUpdate, afterUpdate, onMount, onDestroy } from 'svelte';
   import * as Three from 'three';
 

www/src/store/user.ts

@@ -1,4 +1,8 @@
 import { writable } from 'svelte/store';
 import type { UserInfo } from '@core';
+import { save, read } from '../functions/localStorage';
 
-export const currentUser = writable<UserInfo | null>(null);
+export const currentUser = writable<UserInfo | null>(read<UserInfo>('user'));
+currentUser.subscribe((user) => {
+  save('user', user);
+});