oidc

services/raggr/raggr-frontend/src/components/LoginScreen.tsx

@@ -1,61 +1,87 @@
 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 [username, setUsername] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
   const [error, setError] = useState<string>("");
   const [isChecking, setIsChecking] = useState<boolean>(true);
+  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
 
   useEffect(() => {
-    // Check if user is already authenticated
-    const checkAuth = async () => {
+    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);
     };
-    checkAuth();
+
+    initAuth();
   }, [setAuthenticated]);
 
-  const handleLogin = async (e?: React.FormEvent) => {
-    e?.preventDefault();
-
-    if (!username || !password) {
-      setError("Please enter username and password");
-      return;
-    }
-
+  const handleOIDCLogin = async () => {
     try {
-      const result = await userService.login(username, password);
-      localStorage.setItem("access_token", result.access_token);
-      localStorage.setItem("refresh_token", result.refresh_token);
-      setAuthenticated(true);
+      setIsLoggingIn(true);
       setError("");
+
+      // Get authorization URL from backend
+      const authUrl = await oidcService.initiateLogin();
+
+      // Redirect to Authelia
+      window.location.href = authUrl;
     } catch (err) {
-      setError("Login failed. Please check your credentials.");
-      console.error("Login error:", err);
+      setError("Failed to initiate login. Please try again.");
+      console.error("OIDC login error:", err);
+      setIsLoggingIn(false);
     }
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      handleLogin();
-    }
-  };
-
-  // Show loading state while checking authentication
-  if (isChecking) {
+  // 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">Checking authentication...</p>
+            <p className="text-lg sm:text-xl">
+              {isLoggingIn ? "Logging in..." : "Checking authentication..."}
+            </p>
           </div>
         </div>
       </div>
@@ -67,7 +93,7 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
       <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-1">
+            <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
@@ -77,42 +103,24 @@ export const LoginScreen = ({ setAuthenticated }: LoginScreenProps) => {
               <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>
-              <label htmlFor="username" className="text-sm sm:text-base">
-                username
-              </label>
-              <input
-                type="text"
-                id="username"
-                name="username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                onKeyPress={handleKeyPress}
-                className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
-              />
-              <label htmlFor="password" className="text-sm sm:text-base">
-                password
-              </label>
-              <input
-                type="password"
-                id="password"
-                name="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                onKeyPress={handleKeyPress}
-                className="border border-s-slate-950 p-3 rounded-md min-h-[44px]"
-              />
+
               {error && (
-                <div className="text-red-600 font-semibold text-sm sm:text-base">
+                <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"
-              onClick={handleLogin}
+              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}
             >
-              login
+              {isLoggingIn ? "Redirecting..." : "Login with Authelia"}
             </button>
           </div>
         </div>