From c74fa7eb4bd7e964a1fb0a8291a889ae1a901872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stef=20Oss=C3=A9?= <stef.osse@ugent.be>
Date: Sun, 10 Mar 2024 20:36:05 +0100
Subject: [PATCH] start login

---
 frontend/src/hooks/Token.tsx               | 30 ++++++++++++++++++++
 frontend/src/hooks/User.tsx                | 33 ++++++++++++++++++++++
 frontend/src/main.tsx                      |  4 +++
 frontend/src/pages/login/LoginScreen.tsx   | 24 ++++++++++++----
 frontend/src/pages/login/LogoutScreen.tsx  | 10 +++++++
 frontend/src/pages/student/HomeStudent.tsx |  9 ++++--
 6 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/hooks/Token.tsx
 create mode 100644 frontend/src/hooks/User.tsx
 create mode 100644 frontend/src/pages/login/LogoutScreen.tsx

diff --git a/frontend/src/hooks/Token.tsx b/frontend/src/hooks/Token.tsx
new file mode 100644
index 00000000..a5da3089
--- /dev/null
+++ b/frontend/src/hooks/Token.tsx
@@ -0,0 +1,30 @@
+import {useCookies} from "react-cookie";
+import {useEffect, useState} from "react";
+
+const useToken = () => {
+    const queryParams: URLSearchParams = new URLSearchParams(location.search);
+    const ticket: string | null = queryParams.get('ticket');
+    const [cookies, setCookies] = useCookies(['token']);
+    const [token, setToken] = useState(cookies['token']);
+    useEffect(() => {
+        if (ticket !== null) {
+            const url: string = 'https://localhost:8080/api/login?ticket=' + ticket;
+            fetch(url, {headers: {credentials: "include"}})
+                .then(async (data) => {
+                    const response: string = await data.text();
+                    if (data.status == 200) {
+                        setCookies("token", response);
+                        setToken(response)
+                    }
+                })
+                .catch(error => {
+                    // TODO error logging
+                    console.log(error);
+
+                });
+        }
+    }, [setToken, setCookies, ticket]);
+    return [token]
+}
+
+export default useToken
\ No newline at end of file
diff --git a/frontend/src/hooks/User.tsx b/frontend/src/hooks/User.tsx
new file mode 100644
index 00000000..191e83c5
--- /dev/null
+++ b/frontend/src/hooks/User.tsx
@@ -0,0 +1,33 @@
+import {useEffect, useState} from "react";
+
+const useUser = () => {
+    const [user, setUser] = useState(undefined)
+    useEffect(() => {
+        if (user == null) {
+            fetch("https://localhost:8080/api/user", {
+                headers: {
+                    credentials: "include",
+                }
+            })
+                .then(async response => {
+                        if (response.status == 200) {
+                            const text: string = await response.text();
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                            const user_json = JSON.parse(text);
+                            if (user_json != null) {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-comment,@typescript-eslint/no-unsafe-argument
+                                setUser(user_json)
+                            }
+                        } else if (response.status == 401) {
+                            console.log("Unauthorized Caught!")
+                        }
+                    }
+                ).catch(error => {
+                // TODO error handling
+                console.log(error)
+            })
+        }
+    }, [setUser, user]);
+    return [user]
+}
+export default useUser;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 3467c88e..040cc440 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -32,6 +32,10 @@ const router = createBrowserRouter([
     {
         path: "/teacher",
         element: <HomeTeacher/>
+    },
+    {
+        path: "/logout",
+        element: <LogoutScreen/>
     }
 ]);
 ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/frontend/src/pages/login/LoginScreen.tsx b/frontend/src/pages/login/LoginScreen.tsx
index b109f9af..28591794 100644
--- a/frontend/src/pages/login/LoginScreen.tsx
+++ b/frontend/src/pages/login/LoginScreen.tsx
@@ -1,7 +1,21 @@
-import {JSX} from "react";
+import useToken from "../../hooks/Token.tsx";
+import {Navigate} from "react-router-dom";
 
-export default function LoginScreen(): JSX.Element {
+
+function LoginScreen(): JSX.Element {
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const [token] = useToken()
+    if (token !== undefined){
+        return (<Navigate to={"/"}/>)
+    }
     return (
-        <>Login screen</>
-    )
-}
\ No newline at end of file
+        <div>
+            <p> Please log in!</p>
+            <a href="https://login.ugent.be/login?service=https://localhost:8080/login">Log in</a>
+        {token && <Navigate to={"/"}/>}
+        </div>
+    );
+}
+
+export default LoginScreen
diff --git a/frontend/src/pages/login/LogoutScreen.tsx b/frontend/src/pages/login/LogoutScreen.tsx
new file mode 100644
index 00000000..45ce1fb7
--- /dev/null
+++ b/frontend/src/pages/login/LogoutScreen.tsx
@@ -0,0 +1,10 @@
+function LogoutScreen(): JSX.Element {
+    return (
+        <div>
+            <p>Click the link below to logout</p>
+            <a href="https://login.ugent.be/logout">Log out</a>
+        </div>
+    );
+}
+
+export default LogoutScreen
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
index 47d6c2a0..32c37406 100644
--- a/frontend/src/pages/student/HomeStudent.tsx
+++ b/frontend/src/pages/student/HomeStudent.tsx
@@ -1,8 +1,11 @@
 import {JSX} from "react";
 import {Header} from "../../components/Header.tsx";
 import {Sidebar} from "../../components/Sidebar.tsx";
+import useUser from "../../hooks/User.tsx";
 
 export default function HomeStudent(): JSX.Element {
+    const [user] = useUser()
+
     return (
         <>
             <div className={"main-header"}>
@@ -12,9 +15,9 @@ export default function HomeStudent(): JSX.Element {
                 <div className={"side-bar is-flex is-justify-content-center"}>
                     <Sidebar/>
                 </div>
-                <div>
-                    <>Homescreen for a student</>
-                </div>
+                {user && <div>
+                    <>Homescreen for a student {user["name"]}</>
+                </div>}
             </div>
         </>
     )