Address PR review feedback for OIDC sign-in pages

- Remove inline password form from SignInPage (use PasswordSignInPage)
- Extract Divider and OIDCButtons to _components folder
- Move OIDC providers into page queries instead of lazy-loaded queries
- Create useSafeContinueUrl hook for trust app using getPathPrefix
- Use safeContinueUrl.toString() for continue URL parameter
- Fix wg.Go style in IAM service Run method

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

apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx

@@ -1,34 +1,15 @@
-import { formatError, type GraphQLError } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { Button, Field, Google, Microsoft, useToast } from "@probo/ui";
-import { type ComponentProps, type FormEventHandler, Suspense } from "react";
-import { useLazyLoadQuery, useMutation } from "react-relay";
-import { Link, matchPath, useLocation } from "react-router";
+import { Button } from "@probo/ui";
+import { useLazyLoadQuery } 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 { OIDCButtons } from "./_components/OIDCButtons";
 
-const providerIcons: Record<
-  string,
-  (props: ComponentProps<"svg">) => React.ReactNode
-> = {
-  google: Google,
-  microsoft: Microsoft,
-};
-
-const signInMutation = graphql`
-  mutation SignInPageMutation($input: SignInInput!) {
-    signIn(input: $input) {
-      session {
-        id
-      }
-    }
-  }
-`;
-
-const oidcProvidersQuery = graphql`
+const signInPageQuery = graphql`
   query SignInPageQuery {
     oidcProviders {
       name
@@ -37,114 +18,12 @@ const oidcProvidersQuery = graphql`
   }
 `;
 
-function Divider({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="relative my-6 w-full">
-      <div className="border-t border-border-mid" />
-      <span className="px-4 text-xs uppercase text-txt-secondary bg-level-0 absolute top-0 left-1/2 -translate-1/2">
-        {children}
-      </span>
-    </div>
-  );
-}
-
-function OIDCButtons() {
-  const { __ } = useTranslate();
-  const safeContinueUrl = useSafeContinueUrl();
-
-  const data = useLazyLoadQuery<SignInPageQuery>(oidcProvidersQuery, {});
-
-  if (data.oidcProviders.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      {data.oidcProviders.map((provider) => {
-        const Icon = providerIcons[provider.name];
-        return (
-          <Button
-            key={provider.name}
-            variant="secondary"
-            className="w-full h-10"
-            onClick={() => {
-              window.location.href
-                = provider.loginURL
-                  + "?continue="
-                  + encodeURIComponent(
-                    safeContinueUrl.pathname + safeContinueUrl.search,
-                  );
-            }}
-          >
-            <span className="flex items-center gap-2">
-              {Icon && <Icon width={18} height={18} />}
-              {__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
-            </span>
-          </Button>
-        );
-      })}
-    </>
-  );
-}
-
 export default function SignInPage() {
   const { __ } = useTranslate();
-  const { toast } = useToast();
   const location = useLocation();
   const safeContinueUrl = useSafeContinueUrl();
 
-  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",
-        });
-      },
-    });
-  };
+  const data = useLazyLoadQuery<SignInPageQuery>(signInPageQuery, {});
 
   return (
     <div className="w-full max-w-sm mx-auto pt-8">
@@ -152,46 +31,23 @@ export default function SignInPage() {
         {__("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 className="mt-6 space-y-4">
+        <OIDCButtons
+          providers={data.oidcProviders}
+          safeContinueUrl={safeContinueUrl}
         />
 
-        <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>
+        {data.oidcProviders.length > 0 && (
+          <Divider>{__("Or")}</Divider>
+        )}
 
-        <Button className="w-full h-10" disabled={isSigningIn}>
-          {isSigningIn ? __("Signing in...") : __("Sign in")}
+        <Button
+          variant="secondary"
+          className="w-full h-10"
+          to={{ pathname: "/auth/password-login", search: location.search }}
+        >
+          {__("Sign in with Email")}
         </Button>
-      </form>
-
-      <div className="mt-6 space-y-4">
-        <Divider>{__("Or")}</Divider>
-
-        <Suspense fallback={null}>
-          <OIDCButtons />
-        </Suspense>
 
         <Button
           variant="secondary"

apps/console/src/pages/iam/auth/sign-in/_components/Divider.tsx

@@ -0,0 +1,10 @@
+export function Divider({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative my-6 w-full">
+      <div className="border-t border-border-mid" />
+      <span className="px-4 text-xs uppercase text-txt-secondary bg-level-0 absolute top-0 left-1/2 -translate-1/2">
+        {children}
+      </span>
+    </div>
+  );
+}

apps/console/src/pages/iam/auth/sign-in/_components/OIDCButtons.tsx

@@ -0,0 +1,51 @@
+import { useTranslate } from "@probo/i18n";
+import { Button, Google, Microsoft } from "@probo/ui";
+import type { ComponentProps } from "react";
+
+const providerIcons: Record<
+  string,
+  (props: ComponentProps<"svg">) => React.ReactNode
+> = {
+  google: Google,
+  microsoft: Microsoft,
+};
+
+export function OIDCButtons({
+  providers,
+  safeContinueUrl,
+}: {
+  providers: ReadonlyArray<{ readonly name: string; readonly loginURL: string }>;
+  safeContinueUrl: URL;
+}) {
+  const { __ } = useTranslate();
+
+  if (providers.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {providers.map((provider) => {
+        const Icon = providerIcons[provider.name];
+        return (
+          <Button
+            key={provider.name}
+            variant="secondary"
+            className="w-full h-10"
+            onClick={() => {
+              window.location.href
+                = provider.loginURL
+                  + "?continue="
+                  + encodeURIComponent(safeContinueUrl.toString());
+            }}
+          >
+            <span className="flex items-center gap-2">
+              {Icon && <Icon width={18} height={18} />}
+              {__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
+            </span>
+          </Button>
+        );
+      })}
+    </>
+  );
+}