diff --git a/app/components/guard.tsx b/app/components/guard.tsx
index c85b6dd..ca4d473 100644
--- a/app/components/guard.tsx
+++ b/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();
diff --git a/app/components/user.tsx b/app/components/user.tsx
index 07b8f3b..4e604f0 100644
--- a/app/components/user.tsx
+++ b/app/components/user.tsx
@@ -16,7 +16,6 @@ export default function User() {
return (
);
}
diff --git a/app/hooks/auth.tsx b/app/hooks/auth.tsx
index 984c0a0..ef542ec 100644
--- a/app/hooks/auth.tsx
+++ b/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 (
+ {loading ? (
+
+
+
+
+
+
+ Logging in...
+
+ Please wait while we log you in and sync your
+ data. This may take a few moments.
+
+
+
+
+ ) : (
+ (!popupShowed &&
+ user !== null && (
+
+
+
+
+ Login sucessful!
+
+
+
+ )) || (!popupShowed && error !== "" && (
+
+
+
+
+ An error occured.
+ {error}
+
+
+
+ ))
+ )}
{children}
);