Settings ui trial

app/components/settings.tsx

@@ -0,0 +1,55 @@
+import { Modal, Button, InputGroup, Input, TextField } from "@heroui/react";
+import type { Dispatch, SetStateAction } from "react";
+import { useAuth } from "~/hooks/auth";
+
+export function Settings({
+    show,
+    setShow,
+}: {
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+}) {
+    const {user, loading, login, logout} = useAuth();
+    return (
+        <div>
+            <Modal isOpen={show}>
+                <Modal.Backdrop
+                    shouldCloseOnInteractOutside={(_element) => {
+                        setShow(false);
+                        return true;
+                    }}
+                >
+                    <Modal.Container>
+                        <Modal.Dialog>
+                            <Modal.CloseTrigger
+                                onPress={() => {
+                                    setShow(false);
+                                }}
+                            />
+                            <Modal.Header>
+                                <Modal.Heading>Account settings</Modal.Heading>
+                            </Modal.Header>
+                            <Modal.Body>
+                                <InputGroup>
+                                    <InputGroup.Prefix>Username</InputGroup.Prefix>
+                                    <InputGroup.Input defaultValue={user?.name}></InputGroup.Input>
+                                </InputGroup>
+                            </Modal.Body>
+                            <Modal.Footer>
+                                <Button
+                                    variant="secondary"
+                                    onPress={() => {
+                                        setShow(false);
+                                    }}
+                                >
+                                    Cancel
+                                </Button>
+                                <Button>Save</Button>
+                            </Modal.Footer>
+                        </Modal.Dialog>
+                    </Modal.Container>
+                </Modal.Backdrop>
+            </Modal>
+        </div>
+    );
+}

app/components/user.tsx

@@ -7,11 +7,15 @@ import {
     Separator,
     Spinner,
 } from "@heroui/react";
-import type { PropsWithChildren } from "react";
+import { useState, type PropsWithChildren } from "react";
 import { useAuth } from "~/hooks/auth";
+import { Settings } from "./settings";
 
 export default function User({ children }: PropsWithChildren) {
     const { user, loading, login, logout } = useAuth();
+    const [showSettings, setShowSettings] = useState(false);
+
+    const toggleSettings = () => {setShowSettings(true)}
 
     if (loading) {
         return (
@@ -30,6 +34,8 @@ export default function User({ children }: PropsWithChildren) {
     }
 
     return (
+        <>
+        <Settings show={showSettings} setShow={setShowSettings}/>
         <Dropdown>
             <Button className="pr-0">
                 {children}
@@ -40,7 +46,7 @@ export default function User({ children }: PropsWithChildren) {
             </Button>
             <Dropdown.Popover>
                 <Dropdown.Menu
-                    onAction={(key) => handleAction(String(key), logout)}
+                    onAction={(key) => handleAction(String(key), logout, toggleSettings)}
                 >
                     <Dropdown.Item id="settings" textValue="Settings">
                         <Label>Settings</Label>
@@ -56,12 +62,13 @@ export default function User({ children }: PropsWithChildren) {
                 </Dropdown.Menu>
             </Dropdown.Popover>
         </Dropdown>
+        </>
     );
 }
 
-function handleAction(key: string, logout: () => Promise<void>) {
+function handleAction(key: string, logout: () => Promise<void>, toggleSettings: () => void) {
     if (key === "settings") {
-        console.log("settings");
+        toggleSettings();
     } else {
         logout();
     }

app/hooks/auth.tsx

@@ -68,18 +68,6 @@ export function AuthProvider({ children }: PropsWithChildren) {
                             10000,
                         );
                     });
-                if (response === "nok") {
-                    notify(
-                        {
-                            type: "danger",
-                            loading: false,
-                            title: "An error occured.",
-                            message:
-                                "An error occured during the information exchange between Steam and Porning.",
-                        },
-                        10000,
-                    );
-                }
             }
 
             let data = await fetch(`${import.meta.env.VITE_BASE_API_URL}/me`, {
@@ -98,18 +86,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
                     );
                 });
 
-            if (data === null) {
+            if (data !== undefined) {
-                notify(
-                    {
-                        type: "danger",
-                        loading: false,
-                        title: "An error occured.",
-                        message:
-                            "An error occured while trying to fetch your user profile. Please contact an administrator.",
-                    },
-                    10000,
-                );
-            } else if (data !== undefined) {
             setUser(data);
             notify(
                     {
@@ -140,7 +117,15 @@ export function AuthProvider({ children }: PropsWithChildren) {
         })
             .then(() => {
                 setUser(null);
-                notify({type: "success", loading: false, title: "Logout successful!", message: ""}, 2000)
+                notify(
+                    {
+                        type: "success",
+                        loading: false,
+                        title: "Logout successful!",
+                        message: "",
+                    },
+                    2000,
+                );
             })
             .catch((e) => {
                 notify(