reorganization

2026-01-31 17:13:27 -05:00
parent 1fd2e860b2
commit ad39904dda
87 changed files with 1019 additions and 237 deletions
--- a/raggr-frontend/src/components/LoginScreen.tsx
+++ b/raggr-frontend/src/components/LoginScreen.tsx
@@ -0,0 +1,130 @@
+import { useState, useEffect } from "react";
+import { userService } from "../api/userService";
+import { oidcService } from "../api/oidcService";
+
+type LoginScreenProps = {
+  setAuthenticated: (isAuth: boolean) => void;
+};
+
+export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
+  const [error, setError] = useState<string>("");
+  const [isChecking, setIsChecking] = useState<boolean>(true);
+  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
+
+  useEffect(() => {
+    const initAuth = async () => {
+      // First, check for OIDC callback parameters
+      const callbackParams = oidcService.getCallbackParamsFromURL();
+
+      if (callbackParams) {
+        // Handle OIDC callback
+        try {
+          setIsLoggingIn(true);
+          const result = await oidcService.handleCallback(
+            callbackParams.code,
+            callbackParams.state
+          );
+
+          // Store tokens
+          localStorage.setItem("access_token", result.access_token);
+          localStorage.setItem("refresh_token", result.refresh_token);
+
+          // Clear URL parameters
+          oidcService.clearCallbackParams();
+
+          setAuthenticated(true);
+          setIsChecking(false);
+          return;
+        } catch (err) {
+          console.error("OIDC callback error:", err);
+          setError("Login failed. Please try again.");
+          oidcService.clearCallbackParams();
+          setIsLoggingIn(false);
+          setIsChecking(false);
+          return;
+        }
+      }
+
+      // Check if user is already authenticated
+      const isValid = await userService.validateToken();
+      if (isValid) {
+        setAuthenticated(true);
+      }
+      setIsChecking(false);
+    };
+
+    initAuth();
+  }, [setAuthenticated]);
+
+  const handleOIDCLogin = async () => {
+    try {
+      setIsLoggingIn(true);
+      setError("");
+
+      // Get authorization URL from backend
+      const authUrl = await oidcService.initiateLogin();
+
+      // Redirect to Authelia
+      window.location.href = authUrl;
+    } catch (err) {
+      setError("Failed to initiate login. Please try again.");
+      console.error("OIDC login error:", err);
+      setIsLoggingIn(false);
+    }
+  };
+
+  // Show loading state while checking authentication or processing callback
+  if (isChecking || isLoggingIn) {
+    return (
+      <div className="h-screen bg-opacity-20">
+        <div className="bg-white/85 h-screen flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-lg sm:text-xl">
+              {isLoggingIn ? "Logging in..." : "Checking authentication..."}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-opacity-20">
+      <div className="bg-white/85 h-screen">
+        <div className="flex flex-row justify-center py-4">
+          <div className="flex flex-col gap-4 w-full px-4 sm:w-11/12 sm:max-w-2xl lg:max-w-4xl sm:px-0">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-grow justify-center w-full bg-amber-400 p-2">
+                <h1 className="text-base sm:text-xl font-bold text-center">
+                  I AM LOOKING FOR A DESIGNER. THIS APP WILL REMAIN UGLY UNTIL A
+                  DESIGNER COMES.
+                </h1>
+              </div>
+              <header className="flex flex-row justify-center gap-2 grow sticky top-0 z-10 bg-white">
+                <h1 className="text-2xl sm:text-3xl">ask simba!</h1>
+              </header>
+
+              {error && (
+                <div className="text-red-600 font-semibold text-sm sm:text-base bg-red-50 p-3 rounded-md">
+                  {error}
+                </div>
+              )}
+
+              <div className="text-center text-sm sm:text-base text-gray-600 py-2">
+                Click below to login with Authelia
+              </div>
+            </div>
+
+            <button
+              className="p-3 sm:p-4 min-h-[44px] border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow text-sm sm:text-base font-semibold"
+              onClick={handleOIDCLogin}
+              disabled={isLoggingIn}
+            >
+              {isLoggingIn ? "Redirecting..." : "Login with Authelia"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};