feat(dashboard): logout button and user avatar

EliotAmn · Jan 31, 2025 · 07ce223 · 07ce223
1 parent 9efdf22
commit 07ce223
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/app/api/routes/global_routes.py b/app/api/routes/global_routes.py
@@ -27,11 +27,14 @@ def global_sync_status():
     def get_student(student_id: str):
         student = request.student
 
-        stud = StudentService.get_student_by_id(student_id)
-        if not stud:
-            return {"message": "Student not found"}, 404
-        if not student.is_consent_share or not stud.is_consent_share:
-            return {"message": "Student not found"}, 404
+        if student_id == "myself":
+            stud = student
+        else:
+            stud = StudentService.get_student_by_id(student_id)
+            if not stud:
+                return {"message": "Student not found"}, 404
+            if not student.is_consent_share or not stud.is_consent_share:
+                return {"message": "Student not found"}, 404
 
         return {
             "login": stud.login,

diff --git a/web/src/comps/TopBar.tsx b/web/src/comps/TopBar.tsx
@@ -2,12 +2,14 @@ import {useNavigate} from "react-router";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
     faCalendarCheck, faCheckCircle, faGears,
-    faGraduationCap, faShareNodes,
+    faGraduationCap, faPowerOff, faShareNodes,
     faWarning
 } from "@fortawesome/free-solid-svg-icons";
 import {dateToElapsed} from "../tools/DateString";
 import {useEffect, useState} from "react";
-import {getSyncStatus} from "../api/global.api";
+import {getStudentData, getSyncStatus} from "../api/global.api";
+import StudentData from "../models/StudentData";
+import {vars} from "../api/api";
 
 function NavElement(props: { text: string, icon: any, link: string }) {
     const navigate = useNavigate();
@@ -76,6 +78,40 @@ function SyncStatus() {
         return gen_visual("text-green-500", faCheckCircle, dateToElapsed(last_sync));
 }
 
+function UserComp() {
+    const [user, setUser] = useState<StudentData | null>(null);
+
+    useEffect(() => {
+        getStudentData("myself").then((data) => {
+            setUser(data);
+        }).catch(() => {
+        });
+    }, []);
+
+    if (user === null) return null;
+
+
+    return <div className={"flex flex-row items-center gap-2"}>
+        <div className={"flex flex-row items-center mr-2"}>
+            <img
+                src={`${vars.backend_url}/api/global/picture/${user.login}`}
+                alt={"Profile Picture"}
+                className={"w-8 h-8 rounded-full object-cover mr-2"}
+            />
+
+            <p className={"text-white text-nowrap"}>{user?.name}</p>
+        </div>
+        <div title={"Logout"} className={"text-center bg-black bg-opacity-0 hover:bg-opacity-20 h-full w-10 p-2 cursor-pointer transition"} onClick={() => {
+            if (window.confirm("Are you sure you want to log out?")) {
+                localStorage.removeItem("auth");
+                window.location.reload();
+            }
+        }}>
+            <FontAwesomeIcon icon={faPowerOff} className={"text-red-500"}/>
+        </div>
+    </div>
+}
+
 export default function TopBar(): React.ReactElement {
     return (
         <div className={"flex h-10 flex-row items-center bg-gray-700 overflow-x-auto scroll-container"}>
@@ -97,6 +133,8 @@ export default function TopBar(): React.ReactElement {
                 <NavElement text={"Synchronisation"} link={"/sync"} icon={faCheckCircle}/>
                 <NavElement text={"Settings"} link={"/settings"} icon={faGears}/>
             </div>
+
+            <UserComp/>
         </div>
     );
 }