Admin dashboard med redirect på login

Author: Sigurdomnes

backend/src/main/kotlin/no/nais/cloud/testnais/sandbox/bachelorurlforkorter/UrlForkorterApi.kt

@@ -36,14 +36,14 @@ fun startAppServer(config: Config) {
             path("api") {
                 post("sjekk", UrlForkorterController::sjekk, Rolle.Alle)
                 post("forkort", UrlForkorterController::forkort, Rolle.InternNavInnlogget)
-                post("slett", UrlForkorterController::slett, Rolle.Alle)
-                get("hentalle", UrlForkorterController::hentAlleMedMetadata, Rolle.Alle)
+                post("slett", UrlForkorterController::slett, Rolle.InternNavInnlogget)
+                get("hentalle", UrlForkorterController::hentAlleMedMetadata, Rolle.InternNavInnlogget)
                 post("logginn", Auth::loggInn, Rolle.Alle)
                 get("bruker", Auth::hentInnloggetBruker, Rolle.Alle)
                 post("loggut", Auth::loggUt, Rolle.Alle)
             }
             get("{korturl}") { ctx ->
-                if (ctx.pathParam("korturl") == "index.html") {
+                if (ctx.pathParam("korturl") == "index.html" || ctx.pathParam("korturl") == "dashboard") {
                     val asset =
                         UrlForkorterController::class.java.getResourceAsStream("/public/index.html")
                     if (asset != null) {

frontend/src/App.tsx

@@ -1,9 +1,10 @@
 import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
-import LandingPage from "./pages/LandingPage.tsx"
+import LandingPage from "./pages/LandingPage/LandingPage.tsx"
 import "./App.css"
 import Header from "./components/Header/Header.tsx";
 import {useAuth} from "./util/hooks/useAuth.ts";
 import {ReactNode} from "react";
+import DashboardPage from "./pages/DashboardPage/DashboardPage.tsx";
 
 export default function App() {
 
@@ -12,9 +13,9 @@ export default function App() {
             <Header/>
             <Routes>
                 <Route path={"/"} element={<LandingPage/>}/>
-                <Route path={"/user/:id"} element={
+                <Route path={"/dashboard"} element={
                     <ProtectedRoute>
-                        <div></div>
+                        <DashboardPage/>
                     </ProtectedRoute>
                 }></Route>
             </Routes>
@@ -23,6 +24,9 @@ export default function App() {
 }
 
 function ProtectedRoute({children}: { children: ReactNode }) {
-    const {isLoggedIn} = useAuth();
+    const {isLoggedIn, loading} = useAuth();
+    if (loading) {
+        return <div>Loading...</div>;
+    }
     return isLoggedIn ? children : <Navigate to="/"/>;
 }

frontend/src/components/Header/Header.tsx

@@ -7,12 +7,14 @@ import {useAuth} from "../../util/hooks/useAuth.ts";
 
 export default function Header() {
     const [showLogin, setShowLogin] = useState(false);
-    const {isLoggedIn, user, logout} = useAuth();
+    const {isLoggedIn, user, loading, logout} = useAuth();
 
     return (
         <HeaderContainer>
             <LogoText>n.av</LogoText>
-            {isLoggedIn ? (
+            {loading ? (
+                <DisplayUser>Loading...</DisplayUser>
+            ) : isLoggedIn ? (
                 <div style={{display: "flex", alignItems: "center"}}>
                     <DisplayUser>Velkommen, {user}!</DisplayUser>
                     <Button text="Logg ut" onClick={logout}/>

frontend/src/components/LoginForm/LoginForm.tsx

@@ -2,6 +2,7 @@ import {FormEvent, useState} from "react";
 import { LoginContainer, LoginInput, LoginButton } from "./loginform.style.ts";
 import Link from "../shared/Link/Link.tsx";
 import {apiRequest} from "../../util/api/apiRequest.ts";
+import {useNavigate} from "react-router-dom";
 
 interface LoginFormProps {
     onLogin: () => void;
@@ -11,6 +12,7 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
     const [error, setError] = useState<string | null>(null);
+    const navigate = useNavigate();
 
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
@@ -21,10 +23,11 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
 
         apiRequest<{ token: string }>("logginn", "POST", body).then(() => {
             onLogin();
+            navigate("/dashboard");
         }).catch(error => {
             setError(error.message);
             console.error(error);
-        });
+        })
     };
 
     return (

frontend/src/components/ShowAll/ShowAll.tsx

@@ -24,7 +24,7 @@ interface UrlData {
 
 type SortColumn = "createdAt" | "clicks" | null;
 
-export default function ShowAllUrls() {
+export default function ShowAll() {
     const [urls, setUrls] = useState<UrlData[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);

frontend/src/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,16 @@
+import {} from "./dashboardpage.style.ts";
+import {Main} from "../pages.style.ts";
+import SearchShortUrl from "../../components/SearchShortUrl.tsx";
+import CreateShortUrl from "../../components/CreateShortUrl.tsx";
+import ShowAll from "../../components/ShowAll/ShowAll.tsx";
+
+export default function DashboardPage() {
+
+    return (
+        <Main>
+            <SearchShortUrl/>
+            <CreateShortUrl/>
+            <ShowAll/>
+        </Main>
+    )
+}

frontend/src/pages/DashboardPage/dashboardpage.style.ts

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const WelcomeText = styled.h2`
+    color: var(--theme-color);
+    font-size: 60px;
+`

frontend/src/pages/LandingPage.tsx frontend/src/pages/LandingPage/LandingPage.tsx

@@ -1,5 +1,6 @@
-import {InfoText, LogoText, Main, WelcomeText} from "./pages.style.ts";
-import SearchShortUrl from "../components/SearchShortUrl.tsx";
+import {InfoText, LogoText, WelcomeText} from "./landingpage.style.ts";
+import {Main} from "../pages.style.ts";
+import SearchShortUrl from "../../components/SearchShortUrl.tsx";
 
 export default function LandingPage() {
 

frontend/src/pages/LandingPage/landingpage.style.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const WelcomeText = styled.h2`
+    color: var(--theme-color);
+    font-size: 60px;
+`
+
+export const InfoText = styled.p`
+    color: #222;
+    text-align: center;
+    line-height: 1.4rem;
+`
+
+export const LogoText = styled.span`
+    font-weight: bold;
+    color: var(--theme-color);
+`

frontend/src/pages/pages.style.ts

@@ -7,20 +7,4 @@ export const Main = styled.main`
     flex-direction: column;
     place-items: center;
     place-content: center;
-`
-
-export const WelcomeText = styled.h2`
-    color: var(--theme-color);
-    font-size: 60px;
-`
-
-export const InfoText = styled.p`
-    color: #222;
-    text-align: center;
-    line-height: 1.4rem;
-`
-
-export const LogoText = styled.span`
-    font-weight: bold;
-    color: var(--theme-color);
 `

frontend/src/util/hooks/useAuth.ts

@@ -1,37 +1,45 @@
 import {useState, useEffect} from "react";
 import {apiRequest} from "../api/apiRequest.ts";
+import {useNavigate} from "react-router-dom";
 
 export function useAuth() {
     const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
     const [user, setUser] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+    const navigate = useNavigate();
 
     useEffect(() => {
         checkLoginStatus()
     }, []);
 
     const checkLoginStatus = () => {
+        setLoading(true);
         apiRequest<{ username: string }>("bruker", "GET").then((data) => {
             if (data && data.username) {
                 setIsLoggedIn(true);
                 setUser(data.username);
+                console.log("Logget inn som: " + data.username + isLoggedIn);
             } else {
                 setIsLoggedIn(false);
                 setUser(null);
             }
         }).catch((error) => {
-            console.error("Klarte ikke å hente innloggetstatus:", error.message);
+            console.error("Innloggetstatus:", error.message);
             setIsLoggedIn(false);
             setUser(null);
+        }).finally(() => {
+            setLoading(false);
         });
     }
 
     const logout = async () => {
         apiRequest<void>("loggut", "POST").then(() => {
             setIsLoggedIn(false);
             setUser(null);
+            navigate("/")
         }).catch((error) => {
             console.error("Klarte ikke å logge ut:", error.message);
         });
     }
-    return {isLoggedIn, user, logout};
+    return {isLoggedIn, user, loading, checkLoginStatus, logout};
 }