add sign out boi.

svelte-ui/src/App.svelte

@@ -2,6 +2,10 @@
 	import { Router, Link, Route } from "svelte-routing";
 	import { onMount } from "svelte";
 	
+	import authStore from "./stores/auth";
+	import Boi from "./components/Boi.svelte";
+	import { signOut } from "./clients/amplify";
+
 	import FrontPage from "./pages/FrontPage.svelte";
 	import ProjectPage from "./pages/ProjectPage.svelte";
 	import LogsPage from "./pages/LogsPage.svelte";
@@ -21,7 +25,10 @@
 	import FocusHandler from "./components/FocusHandler.svelte";
 	import Menu from "./components/Menu.svelte";
 
-	import authStore from "./stores/auth";
+	async function logout() {
+		await signOut();
+		await authStore.check();
+	}
 
 	onMount(() => {
 		authStore.check()
@@ -40,26 +47,30 @@
 				<Route path="/questlog/" component={QlPage} />
 				<Route path="/logs/" component={LogsPage} />
 				<Route path="/items/" component={GroupPage} />
+
+				<footer>
+					<Boi compact tiny on:click={logout}>Sign out</Boi>
+				</footer>
 			</main>
 		</Router>
-		<ModalRoute name="log.add"> <LogForm creation/> </ModalRoute>
-		<ModalRoute name="log.edit"> <LogForm/> </ModalRoute>
-		<ModalRoute name="log.delete"> <LogForm deletion/> </ModalRoute>
-		<ModalRoute name="task.add"> <TaskForm creation/> </ModalRoute>
-		<ModalRoute name="task.edit"> <TaskForm/> </ModalRoute>
-		<ModalRoute name="task.delete"> <TaskForm deletion/> </ModalRoute>
-		<ModalRoute name="project.add"> <ProjectForm creation/> </ModalRoute>
-		<ModalRoute name="project.edit"> <ProjectForm/> </ModalRoute>
-		<ModalRoute name="project.delete"> <ProjectForm deletion/> </ModalRoute>
-		<ModalRoute name="item.add"> <ItemForm creation/> </ModalRoute>
-		<ModalRoute name="item.edit"> <ItemForm/> </ModalRoute>
-		<ModalRoute name="item.delete"> <ItemForm deletion/> </ModalRoute>
-		<ModalRoute name="group.add"> <GroupForm creation/> </ModalRoute>
-		<ModalRoute name="group.edit"> <GroupForm/> </ModalRoute>
-		<ModalRoute name="group.delete"> <GroupForm deletion/> </ModalRoute>
-		<ModalRoute name="goal.add"> <GoalForm creation/> </ModalRoute>
-		<ModalRoute name="goal.edit"> <GoalForm/> </ModalRoute>
-		<ModalRoute name="goal.delete"> <GoalForm deletion/> </ModalRoute>
+		<ModalRoute name="log.add"> <LogForm creation /></ModalRoute>
+		<ModalRoute name="log.edit"> <LogForm /></ModalRoute>
+		<ModalRoute name="log.delete"> <LogForm deletion /></ModalRoute>
+		<ModalRoute name="task.add"> <TaskForm creation /></ModalRoute>
+		<ModalRoute name="task.edit"> <TaskForm /></ModalRoute>
+		<ModalRoute name="task.delete"> <TaskForm deletion /></ModalRoute>
+		<ModalRoute name="project.add"> <ProjectForm creation /></ModalRoute>
+		<ModalRoute name="project.edit"> <ProjectForm /></ModalRoute>
+		<ModalRoute name="project.delete"> <ProjectForm deletion /></ModalRoute>
+		<ModalRoute name="item.add"> <ItemForm creation /></ModalRoute>
+		<ModalRoute name="item.edit"> <ItemForm /></ModalRoute>
+		<ModalRoute name="item.delete"> <ItemForm deletion /></ModalRoute>
+		<ModalRoute name="group.add"> <GroupForm creation /></ModalRoute>
+		<ModalRoute name="group.edit"> <GroupForm /></ModalRoute>
+		<ModalRoute name="group.delete"> <GroupForm deletion /></ModalRoute>
+		<ModalRoute name="goal.add"> <GoalForm creation /></ModalRoute>
+		<ModalRoute name="goal.edit"> <GoalForm /></ModalRoute>
+		<ModalRoute name="goal.delete"> <GoalForm deletion /></ModalRoute>
 	{:else}
 		<LoginForm />
 	{/if}
@@ -70,7 +81,14 @@
 		text-align: left;
 		max-width: 99.5%;
 		margin: 1em auto;
-		padding-bottom: 4em;
 	}
 
+	footer {
+		text-align: left;
+		width: 920px;
+		max-width: 99.5%;
+		margin: 1em auto;
+		padding-bottom: 4em;
+		text-align: center;
+	}
 </style>

svelte-ui/src/components/Boi.svelte

@@ -6,6 +6,7 @@
   export let open: ModalData = {name: "none"};
   export let disabled: boolean = false;
   export let compact: boolean = false;
+  export let tiny: boolean = false;
 
   const dispatch = createEventDispatcher();
   
@@ -18,7 +19,7 @@
   }
 </script>
 
-<div class="boi" class:disabled class:compact on:click={handleClick}><slot></slot></div>
+<div class="boi" class:disabled class:compact class:tiny on:click={handleClick}><slot></slot></div>
 
 <style>
   div.boi {
@@ -50,4 +51,11 @@
     border-width: 4px;
     padding: 0.25em;
   }
+
+  div.boi.tiny {
+    display: inline-block;
+    margin: auto;
+    font-size: 1em;
+    border-width: 3px;
+  }
 </style>