From e1857bd53201136422fa95c87e21869c0f215aa2 Mon Sep 17 00:00:00 2001
From: Dmytro Kondakov <dmytro@attio.com>
Date: Mon, 14 Apr 2025 10:36:55 +0200
Subject: [PATCH] feat(login): implement logout functionality and redirect
 after login

- Added a logout function in the Settings component to clear user session data and redirect to the login page.
- Updated the Login component to redirect to the home page upon successful login.
- Adjusted styling in the Search component for better spacing in the "No results found" message.
---
 frontend/src/Login.tsx    |  8 +++++---
 frontend/src/Search.tsx   |  2 +-
 frontend/src/Settings.tsx | 12 ++++++++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 25d3c46..8704e61 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@kobalte/core/button";
 import { TextField } from "@kobalte/core/text-field";
-import { createSignal, Show, type Component } from "solid-js";
-import { base, postCode, postLogin } from "./network";
-import { isTokenValid } from "./ProtectedRoute";
 import { Navigate } from "@solidjs/router";
+import { type Component, Show, createSignal } from "solid-js";
+import { isTokenValid } from "./ProtectedRoute";
+import { base, postCode, postLogin } from "./network";
 
 export const Login: Component = () => {
     let form: HTMLFormElement | undefined;
@@ -34,6 +34,8 @@ export const Login: Component = () => {
 
             localStorage.setItem("access", access);
             localStorage.setItem("refresh", refresh);
+
+            window.location.href = "/";
         }
     };
 
diff --git a/frontend/src/Search.tsx b/frontend/src/Search.tsx
index 838cc97..64f2a3b 100644
--- a/frontend/src/Search.tsx
+++ b/frontend/src/Search.tsx
@@ -181,7 +181,7 @@ export const Search = () => {
                                 </For>
                             </div>
                         ) : (
-                            <div class="text-center text-lg m-auto text-neutral-700">
+                            <div class="text-center text-lg m-auto mt-6 text-neutral-700">
                                 No results found
                             </div>
                         )}
diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx
index 518b302..995779b 100644
--- a/frontend/src/Settings.tsx
+++ b/frontend/src/Settings.tsx
@@ -3,6 +3,12 @@ import { FolderPicker } from "./components/folder-picker/FolderPicker";
 import { Shortcuts } from "./components/shortcuts/Shortcuts";
 
 export const Settings = () => {
+    const logout = () => {
+        localStorage.removeItem("access");
+        localStorage.removeItem("refresh");
+        window.location.href = "/login";
+    };
+
     return (
         <>
             <main class="container pt-2">
@@ -14,6 +20,12 @@ export const Settings = () => {
 
                     <FolderPicker />
                     <Shortcuts />
+                    <Button
+                        class="p-2 bg-neutral-100 border mt-4 border-neutral-300"
+                        onClick={logout}
+                    >
+                        Logout
+                    </Button>
                 </div>
             </main>
         </>