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.
This commit is contained in:
2025-04-14 10:36:55 +02:00
parent cd5dd347d3
commit 5a530b2e39
3 changed files with 18 additions and 4 deletions

View File

@ -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 = "/";
}
};

View File

@ -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>
)}

View File

@ -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>
</>