From 87c7552a35c501ae9ce968939d733edf2dbc4ed4 Mon Sep 17 00:00:00 2001
From: Bryan Frimin <bryan@getprobo.com>
Date: Mon, 23 Mar 2026 14:08:54 +0100
Subject: [PATCH] Replace inline password form with link to dedicated sign-in
 page

The SignInPage now shows OIDC, SSO, and email buttons instead of
embedding the email/password form directly. Users clicking "Sign in
with email" are taken to the existing PasswordSignInPage.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
---
 .../src/pages/iam/auth/sign-in/SignInPage.tsx | 121 ++----------------
 1 file changed, 13 insertions(+), 108 deletions(-)

diff --git a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
index f1cb2ff5f..92237ce0b 100644
--- a/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
+++ b/apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx
@@ -1,28 +1,14 @@
-import { formatError, type GraphQLError } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { Button, Field, useToast } from "@probo/ui";
-import type { FormEventHandler } from "react";
-import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
-import { Link, matchPath, useLocation } from "react-router";
+import { Button } from "@probo/ui";
+import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
+import { Link, useLocation } from "react-router";
 import { graphql } from "relay-runtime";
 
-import type { SignInPageMutation } from "#/__generated__/iam/SignInPageMutation.graphql";
 import type { SignInPageQuery } from "#/__generated__/iam/SignInPageQuery.graphql";
-import { useSafeContinueUrl } from "#/hooks/useSafeContinueUrl";
 
 import { Divider } from "./_components/Divider";
 import { OIDCButton } from "./_components/OIDCButton";
 
-const signInMutation = graphql`
-  mutation SignInPageMutation($input: SignInInput!) {
-    signIn(input: $input) {
-      session {
-        id
-      }
-    }
-  }
-`;
-
 export const signInPageQuery = graphql`
   query SignInPageQuery {
     oidcProviders {
@@ -37,108 +23,17 @@ type Props = {
 
 export default function SignInPage(props: Props) {
   const { __ } = useTranslate();
-  const { toast } = useToast();
   const location = useLocation();
-  const safeContinueUrl = useSafeContinueUrl();
 
   const data = usePreloadedQuery<SignInPageQuery>(signInPageQuery, props.queryRef);
 
-  const [signIn, isSigningIn]
-    = useMutation<SignInPageMutation>(signInMutation);
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const email = (formData.get("email") as string) ?? "";
-    const password = (formData.get("password") as string) ?? "";
-
-    if (!email || !password) return;
-
-    const match = matchPath(
-      {
-        path: "/organizations/:organizationId",
-        caseSensitive: false,
-        end: false,
-      },
-      safeContinueUrl.pathname,
-    );
-
-    signIn({
-      variables: {
-        input: {
-          email,
-          password,
-          organizationId: match?.params.organizationId ?? null,
-        },
-      },
-      onCompleted: (_, error) => {
-        if (error) {
-          toast({
-            title: __("Error"),
-            description: formatError(
-              __("Failed to sign in"),
-              error as GraphQLError,
-            ),
-            variant: "error",
-          });
-          return;
-        }
-
-        window.location.href = safeContinueUrl.href;
-      },
-      onError: (e) => {
-        toast({
-          title: __("Error"),
-          description: e.message,
-          variant: "error",
-        });
-      },
-    });
-  };
-
   return (
     <div className="w-full max-w-sm mx-auto pt-8">
       <h1 className="text-2xl font-bold">
         {__("Sign in to your account")}
       </h1>
 
-      <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
-        <Field
-          required
-          name="email"
-          type="email"
-          label={__("Email")}
-          autoFocus
-        />
-
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <label className="text-sm font-medium" htmlFor="password">
-              {__("Password")}
-            </label>
-            <Link
-              to="/auth/forgot-password"
-              className="text-sm text-txt-secondary hover:text-txt-primary"
-            >
-              {__("Forgot your password?")}
-            </Link>
-          </div>
-          <Field
-            required
-            name="password"
-            id="password"
-            type="password"
-          />
-        </div>
-
-        <Button className="w-full h-10" disabled={isSigningIn}>
-          {isSigningIn ? __("Signing in...") : __("Sign in")}
-        </Button>
-      </form>
-
       <div className="mt-6 space-y-4">
-        <Divider>{__("Or")}</Divider>
-
         {data.oidcProviders.map((providerRef, index) => (
           <OIDCButton key={index} providerRef={providerRef} />
         ))}
@@ -150,6 +45,16 @@ export default function SignInPage(props: Props) {
         >
           {__("Sign in with SSO")}
         </Button>
+
+        <Divider>{__("Or")}</Divider>
+
+        <Button
+          variant="secondary"
+          className="w-full h-10"
+          to={{ pathname: "/auth/password-login", search: location.search }}
+        >
+          {__("Sign in with email")}
+        </Button>
       </div>
 
       <p className="mt-8 text-center text-sm text-txt-secondary">