1 files changed, 167 insertions, 0 deletions

diff --git a/fe/src/App.svelte b/fe/src/App.svelte
new file mode 100644
index 0000000..cc4e594
--- /dev/null
+++ b/fe/src/App.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+    import {onMount} from 'svelte';
+    import svelteLogo from './assets/svelte.svg'
+    import viteLogo from '/vite.svg'
+    import Counter from './lib/Counter.svelte'
+    import Table from './lib/Table.svelte'
+    import Card from './lib/Card.svelte'
+    import { UnauthorizedError } from './lib/errors';
+ 
+    let data;
+    let error;
+
+    let user = {
+        username: '',
+        password: ''
+    }
+
+    interface CredentialObject {
+        username: string;
+        password: string;
+    }
+
+    function sleep(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    async function getData() {
+        const res = await fetch('http://localhost:8080/api/v1/stats/');
+        if (res.ok) {
+            await sleep(3000);
+            return await res.json();
+        } else {
+            throw new Error('There was a problem with your request');
+        }
+    }
+
+    function handleClick () {
+      data = getData();
+    } 
+    
+    let authenticated: boolean = false;
+
+    function prepareCredentials ({ username, password }: CredentialObject): string {
+        return btoa(`${username}:${password}`);
+    }
+
+
+    async function onSubmit(e) {
+        if (!user.username || !user.password) {
+            error = 'please enter your username and password';
+            return;
+        }
+       const auth = prepareCredentials(user);
+
+       const response = await fetch('http://localhost:8080/api/v1/auth', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Basic ${auth}`,
+            },
+       });
+
+        if (response.status === 401) {
+            error = "Your username or password is wrong";
+            return;
+        }
+
+        if (response.ok) {
+            const { token } = await response.json();
+            console.log(token);
+            localStorage.user = JSON.stringify(user);
+            localStorage.token = token;
+            authenticated = true;
+        }
+        
+
+        error = null;
+    }
+
+    function logout() {
+        localStorage.removeItem("user");
+        localStorage.removeItem("token");
+        authenticated = false;
+    }
+
+
+    onMount(() => {
+        if (localStorage.token) {
+            authenticated = true;
+        } 
+    });
+</script>
+
+<main>
+    {#if !authenticated}
+        <Card>
+            <form class="form" on:submit|preventDefault={onSubmit}>
+                <div class='form input group'>
+                    <label for="username">Username</label>
+                    <input bind:value={user.username} id="username" name='username' type="text" />
+                </div>
+                <div class='form input group'>
+                    <label for="password">Password</label>
+                    <input bind:value={user.password} id="password" name='password' type="password" />
+                </div>
+                {#if error}
+                    <p class="error">{error}</p>
+                {/if}
+                <button type="submit">Log in</button>
+            </form>
+        </Card>
+    {:else}
+        <div>
+            <button on:click={logout}>Logout</button>
+        </div>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} class="logo" alt="Vite Logo" />
+        </a>
+        <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+          <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+        </a>
+      </div>
+
+      <button on:click={handleClick}>
+        Get Data
+      </button>
+
+      {#await data}
+        <p>...fetching</p>
+      {:then data}
+        {#if data}
+            <p>Status</p>
+            <p>{data.status}</p>
+            <Table />
+            <Table nofooter title="No Footer"/>
+            <Table noheader title="No Header"/>
+        {:else}
+            <p>No data yet</p>
+        {/if}
+      {:catch errror}
+        <p>{error.message}</p>
+      {/await}
+    {/if} 
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+  
+  .error {
+    font-size: 0.75em;
+    color: red;
+  }
+</style>