Moved login and primitive error popups to auth hook

app/components/guard.tsx

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from "react";
 import { useNavigate } from "react-router";
 import { useAuth } from "~/hooks/auth";
-import { Button, Modal, Spinner } from "@heroui/react";
+import { useEffect, useState } from "react";
+import { Button, Modal, Spinner, Alert } from "@heroui/react";
 
 export default function Guard({ children }: PropsWithChildren) {
     const { user, loading, login, logout } = useAuth();

app/components/user.tsx

@@ -16,7 +16,6 @@ export default function User() {
         return (
             <Button isPending={true}>
                 <Spinner color="current" size="md" />
-                Loading...
             </Button>
         );
     }

app/hooks/auth.tsx

@@ -1,3 +1,4 @@
+import { Alert, Spinner } from "@heroui/react";
 import {
     useEffect,
     useState,
@@ -32,10 +33,30 @@ export function AuthProvider({ children }: PropsWithChildren) {
     const [user, setUser] = useState(null);
     const [loading, setLoading] = useState(false);
     const [searchParams, setSeachParams] = useSearchParams();
+    const [popupShowed, setPopupShowed] = useState(false);
+    const [error, setError] = useState("");
     const location = useLocation();
 
+    useEffect(() => {
+        if (user !== null && !loading) {
+            const timer = setTimeout(() => {
+                setPopupShowed(true);
+            }, 2000);
+            return () => clearTimeout(timer);
+        } else if (error !== "") {
+            const timer = setTimeout(() => {
+                setPopupShowed(true);
+            }, 10000);
+            return () => clearTimeout(timer);
+        }
+        else {
+            setPopupShowed(false);
+        }
+    }, [user, loading, error]);
+
     useEffect(() => {
         const load = async () => {
+            try {
             if (searchParams.get("openid.ns") !== null) {
                 setLoading(true);
                 let query = searchParams.toString();
@@ -45,7 +66,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
                     { credentials: "include" },
                 ).then((r) => r.text());
                 if (response === "nok") {
-                    // TODO: signal error to user
+                    setError("An error occured during the information exchange between Steam and Porning.")
                 }
             }
 
@@ -53,9 +74,15 @@ export function AuthProvider({ children }: PropsWithChildren) {
                 credentials: "include",
             }).then((r) => r.json());
 
-            console.log(data);
+            if (data === null) {
+                setError("An error occured while trying to fetch your user profile. Please contact an administrator.")
+            }
+
             setUser(data);
             setLoading(false);
+        } catch (_) {
+            setError("An error occured while communicating with the server.")
+        }
         };
 
         load();
@@ -75,6 +102,53 @@ export function AuthProvider({ children }: PropsWithChildren) {
 
     return (
         <AuthContext.Provider value={{ user, loading, login, logout }}>
+            {loading ? (
+                <div className="flex justify-center fixed top-12 w-dvw z-50">
+                    <Alert
+                        className="w-fit h-fit border border-white"
+                        status="accent"
+                    >
+                        <Alert.Indicator>
+                            <Spinner size="sm" />
+                        </Alert.Indicator>
+                        <Alert.Content>
+                            <Alert.Title>Logging in...</Alert.Title>
+                            <Alert.Description>
+                                Please wait while we log you in and sync your
+                                data. This may take a few moments.
+                            </Alert.Description>
+                        </Alert.Content>
+                    </Alert>
+                </div>
+            ) : (
+                (!popupShowed &&
+                user !== null && (
+                    <div className="flex justify-center fixed top-12 w-dvw z-50">
+                        <Alert
+                            className="w-fit h-fit border border-white"
+                            status="success"
+                        >
+                            <Alert.Indicator />
+                            <Alert.Content>
+                                <Alert.Title>Login sucessful!</Alert.Title>
+                            </Alert.Content>
+                        </Alert>
+                    </div>
+                )) || (!popupShowed && error !== "" && (
+                    <div className="flex justify-center fixed top-12 w-dvw z-50">
+                        <Alert
+                            className="w-fit h-fit border border-white"
+                            status="danger"
+                        >
+                            <Alert.Indicator />
+                            <Alert.Content>
+                                <Alert.Title>An error occured.</Alert.Title>
+                                <Alert.Description>{error}</Alert.Description>
+                            </Alert.Content>
+                        </Alert>
+                    </div>
+                ))
+            )}
             {children}
         </AuthContext.Provider>
     );