Add SAML support

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

apps/console/src/pages/auth/ConfirmEmailPage.tsx

@@ -111,7 +111,7 @@ export default function ConfirmEmailPage() {
           <p className="text-green-600 dark:text-green-400">
             {__("Your email has been confirmed successfully!")}
           </p>
-          <Button onClick={() => navigate("/auth/login")} className="w-full">
+          <Button onClick={() => navigate("/authentication/login")} className="w-full">
             {__("Proceed to Login")}
           </Button>
         </div>
@@ -141,7 +141,7 @@ export default function ConfirmEmailPage() {
         {!isConfirmed && (
           <p className="text-sm text-txt-tertiary">
             <Link
-              to="/auth/login"
+              to="/authentication/login"
               className="underline text-txt-primary hover:text-txt-secondary"
             >
               {__("Back to Login")}

apps/console/src/pages/auth/ForgotPasswordPage.tsx

@@ -23,7 +23,7 @@ export default function ForgotPasswordPage() {
 
   const onSubmit = handleSubmit(async (data) => {
     const response = await fetch(
-      buildEndpoint("/api/console/v1/auth/forget-password"),
+      buildEndpoint("/auth/forget-password"),
       {
         method: "POST",
         headers: {
@@ -81,7 +81,7 @@ export default function ForgotPasswordPage() {
           <p className="text-sm text-txt-tertiary">
             {__("Remember your password?")}{" "}
             <Link
-              to="/auth/login"
+              to="/authentication/login"
               className="underline text-txt-primary hover:text-txt-secondary"
             >
               {__("Back to login")}
@@ -124,7 +124,7 @@ export default function ForgotPasswordPage() {
         <p className="text-sm text-txt-tertiary">
           {__("Remember your password?")}{" "}
           <Link
-            to="/auth/login"
+            to="/authentication/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
             {__("Back to login")}

apps/console/src/pages/auth/LoginPage.tsx

@@ -1,81 +1,261 @@
 import { useTranslate } from "@probo/i18n";
-import { Button, Field, useToast } from "@probo/ui";
+import { Button, Field, IconChevronLeft, useToast } from "@probo/ui";
 import type { FormEventHandler } from "react";
-import { Link } from "react-router";
+import { useState } from "react";
+import { Link, useSearchParams } from "react-router";
 import { buildEndpoint } from "/providers/RelayProviders";
 
 export default function LoginPage() {
   const { __ } = useTranslate();
   const { toast } = useToast();
+  const [searchParams] = useSearchParams();
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+  const authMethod = searchParams.get("method");
+  const initialMode = authMethod === "password" ? "password" : authMethod === "sso" ? "sso" : "default";
+
+  const [mode, setMode] = useState<"default" | "password" | "sso">(initialMode);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+
+  const handlePasswordLogin: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const email = formData.get("email")?.toString();
-    const password = formData.get("password")?.toString();
+    const emailValue = formData.get("email")?.toString();
+    const passwordValue = formData.get("password")?.toString();
 
-    fetch(buildEndpoint("/api/console/v1/auth/login"), {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ email, password }),
-    })
-      .then(async (res) => {
-        if (!res.ok) {
-          const error = await res.json();
-          throw new Error(error.message || __("Failed to login"));
-        }
-        window.location.href = "/";
-      })
-      .catch((e) => {
-        toast({
-          title: __("Error"),
-          description: e.message as string,
-          variant: "error",
-        });
+    if (!emailValue || !passwordValue) return;
+
+    setIsLoading(true);
+
+    try {
+      const res = await fetch(buildEndpoint("/auth/login"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email: emailValue, password: passwordValue }),
       });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.message || __("Failed to login"));
+      }
+
+      window.location.href = "/";
+    } catch (e: any) {
+      toast({
+        title: __("Error"),
+        description: e.message as string,
+        variant: "error",
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  const handleSSOLogin: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const emailValue = formData.get("email")?.toString();
+
+    if (!emailValue) return;
+
+    setIsChecking(true);
+
+    try {
+      const res = await fetch(buildEndpoint("/auth/check-sso"), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email: emailValue }),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.message || __("SSO not available for this email domain"));
+      }
+
+      const data = await res.json();
+
+      if (data.ssoAvailable && data.samlConfigId) {
+        window.location.href = buildEndpoint(
+          `/auth/saml/login/${data.samlConfigId}`
+        );
+      } else {
+        throw new Error(__("SSO not available for this email domain"));
+      }
+    } catch (e: any) {
+      toast({
+        title: __("Error"),
+        description: e.message as string,
+        variant: "error",
+      });
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  const handleBack = () => {
+    setMode("default");
+  };
+
+  if (mode === "default") {
+    return (
+      <div className="space-y-4">
+        <h1 className="text-center text-2xl font-bold">
+          {__("Login to your account")}
+        </h1>
+        <p className="text-center text-txt-tertiary mt-1 mb-6">
+          {__("Choose your login method")}
+        </p>
+
+        <Button
+          className="w-full"
+          onClick={() => setMode("password")}
+        >
+          {__("Login with Email")}
+        </Button>
+
+        <div className="relative my-6">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-border"></div>
+          </div>
+          <div className="relative flex justify-center">
+            <span
+              className="px-4 text-xs uppercase text-txt-secondary"
+              style={{ backgroundColor: "var(--color-level-0)" }}
+            >
+              {__("Or")}
+            </span>
+          </div>
+        </div>
+
+        <Button
+          variant="secondary"
+          className="w-full"
+          onClick={() => setMode("sso")}
+        >
+          {__("Login with SSO")}
+        </Button>
+
+        <div className="text-center mt-6 text-sm text-txt-secondary">
+          {__("Don't have an account ?")}{" "}
+          <Link to="/authentication/register" className="underline hover:text-txt-primary">
+            {__("Register")}
+          </Link>
+        </div>
+
+        <div className="text-center text-sm text-txt-secondary">
+          {__("Forgot password?")}{" "}
+          <Link
+            to="/authentication/forgot-password"
+            className="underline hover:text-txt-primary"
+          >
+            {__("Reset password")}
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (mode === "password") {
+    return (
+      <form className="space-y-4" onSubmit={handlePasswordLogin}>
+        <button
+          type="button"
+          onClick={handleBack}
+          className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
+        >
+          <IconChevronLeft size={20} />
+          <span className="text-sm">{__("Back")}</span>
+        </button>
+
+        <h1 className="text-center text-2xl font-bold">
+          {__("Login with Email")}
+        </h1>
+        <p className="text-center text-txt-tertiary mt-1 mb-6">
+          {__("Enter your email and password")}
+        </p>
+
+        <Field
+          required
+          placeholder={__("Email")}
+          name="email"
+          type="email"
+          label={__("Email")}
+          autoFocus
+        />
+
+        <Field
+          required
+          placeholder={__("Password")}
+          name="password"
+          type="password"
+          label={__("Password")}
+        />
+
+        <Button className="w-full" disabled={isLoading}>
+          {isLoading ? __("Logging in...") : __("Login")}
+        </Button>
+
+        <div className="text-center mt-6 text-sm text-txt-secondary">
+          {__("Don't have an account ?")}{" "}
+          <Link to="/authentication/register" className="underline hover:text-txt-primary">
+            {__("Register")}
+          </Link>
+        </div>
+
+        <div className="text-center text-sm text-txt-secondary">
+          {__("Forgot password?")}{" "}
+          <Link
+            to="/authentication/forgot-password"
+            className="underline hover:text-txt-primary"
+          >
+            {__("Reset password")}
+          </Link>
+        </div>
+      </form>
+    );
+  }
+
   return (
-    <form className="space-y-4" onSubmit={handleSubmit}>
+    <form className="space-y-4" onSubmit={handleSSOLogin}>
+      <button
+        type="button"
+        onClick={handleBack}
+        className="flex items-center gap-2 text-txt-secondary hover:text-txt-primary transition-colors mb-4"
+      >
+        <IconChevronLeft size={20} />
+        <span className="text-sm">{__("Back")}</span>
+      </button>
+
       <h1 className="text-center text-2xl font-bold">
-        {__("Login to your account")}
+        {__("Login with SSO")}
       </h1>
       <p className="text-center text-txt-tertiary mt-1 mb-6">
-        {__("Enter your email below to login to your account")}
+        {__("Enter your work email to continue with SSO")}
       </p>
+
       <Field
         required
-        placeholder={__("Email")}
+        placeholder={__("Work Email")}
         name="email"
         type="email"
-        label={__("Email")}
+        label={__("Work Email")}
+        autoFocus
       />
-      <Field
-        required
-        placeholder={__("Password")}
-        name="password"
-        type="password"
-        label={__("Password")}
-      />
-      <Button className="w-full">{__("Login")}</Button>
+
+      <Button className="w-full" disabled={isChecking}>
+        {isChecking ? __("Checking...") : __("Continue with SSO")}
+      </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
         {__("Don't have an account ?")}{" "}
-        <Link to="/auth/register" className="underline hover:text-txt-primary">
+        <Link to="/authentication/register" className="underline hover:text-txt-primary">
           {__("Register")}
         </Link>
       </div>
-      <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Forgot password?")}{" "}
-        <Link
-          to="/auth/forgot-password"
-          className="underline hover:text-txt-primary"
-        >
-          {__("Reset password")}
-        </Link>
-      </div>
     </form>
   );
 }

apps/console/src/pages/auth/RegisterPage.tsx

@@ -26,7 +26,7 @@ export default function RegisterPage() {
 
   const onSubmit = handleSubmit(async (data) => {
     const response = await fetch(
-      buildEndpoint("/api/console/v1/auth/register"),
+      buildEndpoint("/auth/register"),
       {
         method: "POST",
         headers: {
@@ -106,7 +106,7 @@ export default function RegisterPage() {
         <p className="text-sm text-txt-tertiary">
           {__("Already have an account?")}{" "}
           <Link
-            to="/auth/login"
+            to="/authentication/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
             {__("Log in here")}

apps/console/src/pages/auth/ResetPasswordPage.tsx

@@ -44,7 +44,7 @@ export default function ResetPasswordPage() {
     }
 
     const response = await fetch(
-      buildEndpoint("/api/console/v1/auth/reset-password"),
+      buildEndpoint("/auth/reset-password"),
       {
         method: "POST",
         headers: {
@@ -74,7 +74,7 @@ export default function ResetPasswordPage() {
       description: __("Password reset successfully"),
       variant: "success",
     });
-    navigate("/auth/login", { replace: true });
+    navigate("/authentication/login", { replace: true });
   });
 
   usePageTitle(__("Reset password"));
@@ -118,7 +118,7 @@ export default function ResetPasswordPage() {
         <p className="text-sm text-txt-tertiary">
           {__("Remember your password?")}{" "}
           <Link
-            to="/auth/login"
+            to="/authentication/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
             {__("Log in here")}

apps/console/src/pages/auth/SignupFromInvitationPage.tsx

@@ -51,7 +51,7 @@ export default function SignupFromInvitationPage() {
     }
 
     const response = await fetch(
-      buildEndpoint("/api/console/v1/auth/signup-from-invitation"),
+      buildEndpoint("/auth/signup-from-invitation"),
       {
         method: "POST",
         headers: {
@@ -125,7 +125,7 @@ export default function SignupFromInvitationPage() {
         <p className="text-sm text-txt-tertiary">
           {__("Already have an account?")}{" "}
           <Link
-            to="/auth/login"
+            to="/authentication/login"
             className="underline text-txt-primary hover:text-txt-secondary"
           >
             {__("Log in here")}