Refactor sign-in page and IAM service lifecycle
Redesign the sign-in page to show email/password form inline with OIDC provider buttons (with vendor icons) instead of separate pages. Extract OIDCProvider type to its own file. Replace errgroup with sync.WaitGroup + WithCancelCause for graceful shutdown in IAM services. Refactor garbage collectors to use functional options and time.Ticker instead of time.After to avoid repeated allocations. Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
@@ -1,13 +1,33 @@
|
||||
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Button } from "@probo/ui";
|
||||
import { Suspense } from "react";
|
||||
import { useLazyLoadQuery } from "react-relay";
|
||||
import { Link, useLocation } from "react-router";
|
||||
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, useLocation, matchPath } 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";
|
||||
|
||||
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`
|
||||
query SignInPageQuery {
|
||||
oidcProviders {
|
||||
@@ -17,6 +37,17 @@ 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();
|
||||
@@ -29,88 +60,158 @@ function OIDCButtons() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{data.oidcProviders.map((provider) => (
|
||||
<Button
|
||||
key={provider.name}
|
||||
variant="secondary"
|
||||
className="w-xs h-10 mx-auto"
|
||||
onClick={() => {
|
||||
window.location.href =
|
||||
provider.loginURL +
|
||||
"?continue=" +
|
||||
encodeURIComponent(safeContinueUrl.pathname + safeContinueUrl.search);
|
||||
}}
|
||||
>
|
||||
{__("Continue with %s", provider.name.charAt(0).toUpperCase() + provider.name.slice(1))}
|
||||
</Button>
|
||||
))}
|
||||
{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",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6 w-full max-w-md mx-auto pt-8">
|
||||
<h1 className="text-center text-2xl font-bold">
|
||||
{__("Login to your account")}
|
||||
<div className="w-full max-w-sm mx-auto pt-8">
|
||||
<h1 className="text-2xl font-bold">
|
||||
{__("Sign in to your account")}
|
||||
</h1>
|
||||
<p className="text-center text-txt-tertiary mt-1 mb-6">
|
||||
{__("Choose your login method")}
|
||||
</p>
|
||||
|
||||
<Button
|
||||
className="w-xs h-10 mx-auto"
|
||||
to={{ pathname: "/auth/password-login", search: location.search }}
|
||||
>
|
||||
{__("Login with Email")}
|
||||
</Button>
|
||||
<form className="mt-6 space-y-4" onSubmit={handleSubmit}>
|
||||
<Field
|
||||
required
|
||||
name="email"
|
||||
type="email"
|
||||
label={__("Email")}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<OIDCButtons />
|
||||
</Suspense>
|
||||
<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>
|
||||
|
||||
<div className="relative my-6 w-full">
|
||||
<div className="w-xs border-t border-border-mid mx-auto" />
|
||||
<span
|
||||
className="px-4 text-xs uppercase text-txt-secondary bg-level-0 absolute top-0 left-1/2 -translate-1/2"
|
||||
<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>
|
||||
|
||||
<Suspense fallback={null}>
|
||||
<OIDCButtons />
|
||||
</Suspense>
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-full h-10"
|
||||
to={{ pathname: "/auth/sso-login", search: location.search }}
|
||||
>
|
||||
{__("Or")}
|
||||
</span>
|
||||
{__("Sign in with SSO")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="w-xs h-10 mx-auto"
|
||||
to={{ pathname: "/auth/sso-login", search: location.search }}
|
||||
>
|
||||
{__("Login with SSO")}
|
||||
</Button>
|
||||
|
||||
<div className="text-center mt-6 text-sm text-txt-secondary">
|
||||
{__("Don't have an account ?")}
|
||||
<p className="mt-8 text-center text-sm text-txt-secondary">
|
||||
{__("New to Probo?")}
|
||||
{" "}
|
||||
<Link
|
||||
to={{ pathname: "/auth/register", search: location.search }}
|
||||
className="underline hover:text-txt-primary"
|
||||
>
|
||||
{__("Register")}
|
||||
{__("Create account")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-txt-secondary">
|
||||
{__("Forgot password?")}
|
||||
{" "}
|
||||
<Link
|
||||
to="/auth/forgot-password"
|
||||
className="underline hover:text-txt-primary"
|
||||
>
|
||||
{__("Reset password")}
|
||||
</Link>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user