✨ Logout

view/src/index.tsx

@@ -1,3 +1,5 @@
+import "solid-devtools";
+
 /* @refresh reload */
 import { render } from "solid-js/web";
 

view/src/layouts/RootLayout.tsx

@@ -1,5 +1,5 @@
 import Navbar from "./shared/Navbar.tsx";
-import { readProfiles } from "../stores/userinfo.ts";
+import { readProfiles, UserinfoProvider } from "../stores/userinfo.tsx";
 import { createSignal, Show } from "solid-js";
 
 export default function RootLayout(props: any) {
@@ -15,11 +15,11 @@ export default function RootLayout(props: any) {
         </div>
       </div>
     }>
-      <div>
+      <UserinfoProvider>
         <Navbar />
 
         <main class="h-[calc(100vh-68px)]">{props.children}</main>
-      </div>
+      </UserinfoProvider>
     </Show>
   );
 }

view/src/layouts/shared/Navbar.tsx

@@ -1,5 +1,6 @@
-import { For, Show } from "solid-js";
-import { userinfo } from "../../stores/userinfo.ts";
+import { For, Match, Switch } from "solid-js";
+import { clearUserinfo, useUserinfo } from "../../stores/userinfo.tsx";
+import { useNavigate } from "@solidjs/router";
 
 interface MenuItem {
   label: string;
@@ -9,6 +10,14 @@ interface MenuItem {
 export default function Navbar() {
   const nav: MenuItem[] = [{ label: "Dashboard", href: "/" }];
 
+  const userinfo = useUserinfo();
+  const navigate = useNavigate();
+
+  function logout() {
+    clearUserinfo();
+    navigate("/auth/login");
+  }
+
   return (
     <div class="navbar bg-base-100 shadow-md px-5">
       <div class="navbar-start">
@@ -58,9 +67,14 @@ export default function Navbar() {
         </ul>
       </div>
       <div class="navbar-end pe-5">
-        <Show when={!userinfo.isLoggedIn}>
-          <a href="/auth/login" class="btn btn-sm btn-primary">Login</a>
-        </Show>
+        <Switch>
+          <Match when={userinfo?.isLoggedIn}>
+            <button type="button" class="btn btn-sm btn-ghost" onClick={() => logout()}>Logout</button>
+          </Match>
+          <Match when={!userinfo?.isLoggedIn}>
+            <a href="/auth/login" class="btn btn-sm btn-primary">Login</a>
+          </Match>
+        </Switch>
       </div>
     </div>
   );

view/src/pages/auth/login.tsx

@@ -1,9 +1,9 @@
-import { readProfiles } from "../../stores/userinfo.ts";
+import { readProfiles } from "../../stores/userinfo.tsx";
 import { useNavigate } from "@solidjs/router";
 import { createSignal, For, Match, Show, Switch } from "solid-js";
 import Cookie from "universal-cookie";
 
-export default function Login() {
+export default function LoginPage() {
   const [title, setTitle] = createSignal("Sign in");
   const [subtitle, setSubtitle] = createSignal("Via your Goatpass account");
 

view/src/pages/auth/register.tsx

@@ -0,0 +1,3 @@
+export default function RegisterPage() {
+
+}

view/src/pages/dashboard.tsx

@@ -1,10 +1,12 @@
-import { userinfo } from "../stores/userinfo.ts";
+import { useUserinfo } from "../stores/userinfo.tsx";
+
+export default function DashboardPage() {
+  const userinfo = useUserinfo();
 
-export default function Dashboard() {
   return (
     <div class="container mx-auto pt-12">
-      <h1 class="text-2xl font-bold">Welcome, {userinfo.displayName}</h1>
+      <h1 class="text-2xl font-bold">Welcome, {userinfo?.displayName}</h1>
       <p>What's a nice day!</p>
     </div>
-  )
+  );
 }

view/src/stores/userinfo.tsx

@@ -1,16 +1,24 @@
-import { createStore } from "solid-js/store";
 import Cookie from "universal-cookie";
+import { createContext, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
 
-const [userinfo, setUserinfo] = createStore({
+export interface Userinfo {
+  isLoggedIn: boolean,
+  displayName: string,
+  profiles: any,
+  meta: any
+}
+
+const UserinfoContext = createContext<Userinfo>();
+
+const defaultUserinfo: Userinfo = {
   isLoggedIn: false,
   displayName: "Citizen",
   profiles: null,
   meta: null
-});
+};
 
-function checkLoggedIn(): boolean {
-  return new Cookie().get("access_token");
-}
+const [userinfo, setUserinfo] = createStore<Userinfo>(structuredClone(defaultUserinfo));
 
 export function getAtk(): string {
   return new Cookie().get("access_token");
@@ -36,6 +44,10 @@ export async function refreshAtk() {
   }
 }
 
+function checkLoggedIn(): boolean {
+  return new Cookie().get("access_token");
+}
+
 export async function readProfiles() {
   if (!checkLoggedIn()) return;
 
@@ -59,4 +71,20 @@ export async function readProfiles() {
   });
 }
 
-export { userinfo };
+export function clearUserinfo() {
+  new Cookie().remove("access_token", { path: "/" });
+  new Cookie().remove("refresh_token", { path: "/" });
+  setUserinfo(defaultUserinfo);
+}
+
+export function UserinfoProvider(props: any) {
+  return (
+    <UserinfoContext.Provider value={userinfo}>
+      {props.children}
+    </UserinfoContext.Provider>
+  );
+}
+
+export function useUserinfo() {
+  return useContext(UserinfoContext);
+}