Use a page instead of a dialog for compliance page authentication
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
173
apps/trust/src/pages/auth/ConnectPage.tsx
Normal file
173
apps/trust/src/pages/auth/ConnectPage.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Button, Field, useToast } from "@probo/ui";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import z from "zod";
|
||||
import { graphql } from "relay-runtime";
|
||||
import {
|
||||
useMutation,
|
||||
usePreloadedQuery,
|
||||
type PreloadedQuery,
|
||||
} from "react-relay";
|
||||
import { AuthLayout } from "./AuthLayout";
|
||||
import type { ConnectPageMutation } from "./__generated__/ConnectPageMutation.graphql";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { ConnectPageQuery } from "./__generated__/ConnectPageQuery.graphql";
|
||||
|
||||
export const connectPageQuery = graphql`
|
||||
query ConnectPageQuery {
|
||||
currentTrustCenter @required(action: THROW) {
|
||||
organization @required(action: THROW) {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const sendMagicLinkMutation = graphql`
|
||||
mutation ConnectPageMutation($input: SendMagicLinkInput!) {
|
||||
sendMagicLink(input: $input) {
|
||||
success
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
const timerDurationSeconds = 60;
|
||||
|
||||
export function ConnectPage(props: {
|
||||
queryRef: PreloadedQuery<ConnectPageQuery>;
|
||||
}) {
|
||||
const { queryRef } = props;
|
||||
|
||||
const { __ } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const [magicLinkSent, setMagicLinkSent] = useState<boolean>(false);
|
||||
const interval = useRef<NodeJS.Timeout>(undefined);
|
||||
const [timer, setTimer] = useState<number>(timerDurationSeconds);
|
||||
|
||||
const {
|
||||
currentTrustCenter: { organization },
|
||||
} = usePreloadedQuery<ConnectPageQuery>(connectPageQuery, queryRef);
|
||||
|
||||
useEffect(() => {
|
||||
if (!magicLinkSent && interval.current) {
|
||||
clearInterval(interval.current);
|
||||
interval.current = undefined;
|
||||
setTimer(timerDurationSeconds);
|
||||
}
|
||||
if (magicLinkSent) {
|
||||
clearInterval(interval.current);
|
||||
interval.current = setInterval(() => {
|
||||
setTimer((timer) => Math.max(timer - 1, 0));
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
clearInterval(interval.current);
|
||||
};
|
||||
}, [magicLinkSent]);
|
||||
|
||||
usePageTitle(__("Connect to Probo"));
|
||||
|
||||
const {
|
||||
handleSubmit: handleSubmitWrapper,
|
||||
register,
|
||||
formState,
|
||||
} = useFormWithSchema(schema, {
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
const [sendMagicLink] = useMutation<ConnectPageMutation>(
|
||||
sendMagicLinkMutation,
|
||||
);
|
||||
|
||||
const handleSubmit = handleSubmitWrapper(({ email }: FormData) => {
|
||||
sendMagicLink({
|
||||
variables: {
|
||||
input: {
|
||||
email,
|
||||
},
|
||||
},
|
||||
onCompleted: (_, errors) => {
|
||||
if (errors?.length) {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: __("Cannot send magic link"),
|
||||
variant: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Magic link sent!"),
|
||||
variant: "success",
|
||||
});
|
||||
setTimer(timerDurationSeconds);
|
||||
setMagicLinkSent(true);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: error.message,
|
||||
variant: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<div className="space-y-6 w-full max-w-md mx-auto">
|
||||
<div className="space-y-2 text-center">
|
||||
<h1 className="text-3xl font-bold">
|
||||
{__(`Connect to ${organization.name}'s compliance page`)}
|
||||
</h1>
|
||||
<p className="text-txt-tertiary">
|
||||
{__(
|
||||
"Enter your email address to connect with a magic link and start requesting access to documents",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Field
|
||||
label={__("Email")}
|
||||
placeholder="john.doe@acme.com"
|
||||
{...register("email")}
|
||||
type="email"
|
||||
error={formState.errors.email?.message}
|
||||
/>
|
||||
|
||||
{magicLinkSent && (
|
||||
<p className="text-txt-primary text-sm">
|
||||
{__(
|
||||
"Magic Link Sent! Check your emails and use the link to connect.",
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={formState.isSubmitting || (magicLinkSent && timer !== 0)}
|
||||
>
|
||||
{magicLinkSent
|
||||
? timer === 0
|
||||
? __("Resend Link")
|
||||
: `${__("Resend Link in")} ${timer}s`
|
||||
: __("Send Magic Link")}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
32
apps/trust/src/pages/auth/ConnectPageLoader.tsx
Normal file
32
apps/trust/src/pages/auth/ConnectPageLoader.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { useQueryLoader } from "react-relay";
|
||||
import { ConnectPage, connectPageQuery } from "./ConnectPage";
|
||||
import { Suspense, useEffect } from "react";
|
||||
import { RelayProvider } from "/providers/RelayProviders";
|
||||
import type { ConnectPageQuery } from "./__generated__/ConnectPageQuery.graphql";
|
||||
|
||||
function ConnectPageLoader() {
|
||||
const [queryRef, loadQuery] =
|
||||
useQueryLoader<ConnectPageQuery>(connectPageQuery);
|
||||
|
||||
useEffect(() => {
|
||||
if (!queryRef) {
|
||||
loadQuery({});
|
||||
}
|
||||
});
|
||||
|
||||
if (!queryRef) return null;
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<ConnectPage queryRef={queryRef} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<RelayProvider>
|
||||
<ConnectPageLoader />
|
||||
</RelayProvider>
|
||||
);
|
||||
}
|
||||
92
apps/trust/src/pages/auth/__generated__/ConnectPageMutation.graphql.ts
generated
Normal file
92
apps/trust/src/pages/auth/__generated__/ConnectPageMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* @generated SignedSource<<bcbab3713eaca3141e6dfb8f54a54e7d>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type SendMagicLinkInput = {
|
||||
email: any;
|
||||
};
|
||||
export type ConnectPageMutation$variables = {
|
||||
input: SendMagicLinkInput;
|
||||
};
|
||||
export type ConnectPageMutation$data = {
|
||||
readonly sendMagicLink: {
|
||||
readonly success: boolean;
|
||||
} | null | undefined;
|
||||
};
|
||||
export type ConnectPageMutation = {
|
||||
response: ConnectPageMutation$data;
|
||||
variables: ConnectPageMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "SendMagicLinkPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "sendMagicLink",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "success",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "ConnectPageMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "ConnectPageMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "95987f897611118fa771a2e54cb43b66",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "ConnectPageMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation ConnectPageMutation(\n $input: SendMagicLinkInput!\n) {\n sendMagicLink(input: $input) {\n success\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "4680fea978582bb020b4613737c14d9a";
|
||||
|
||||
export default node;
|
||||
128
apps/trust/src/pages/auth/__generated__/ConnectPageQuery.graphql.ts
generated
Normal file
128
apps/trust/src/pages/auth/__generated__/ConnectPageQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* @generated SignedSource<<e5b8bb2d5acbfd1eec7c746bfe201bde>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type ConnectPageQuery$variables = Record<PropertyKey, never>;
|
||||
export type ConnectPageQuery$data = {
|
||||
readonly currentTrustCenter: {
|
||||
readonly organization: {
|
||||
readonly name: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type ConnectPageQuery = {
|
||||
response: ConnectPageQuery$data;
|
||||
variables: ConnectPageQuery$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
v1 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "ConnectPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"kind": "RequiredField",
|
||||
"field": {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "currentTrustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"kind": "RequiredField",
|
||||
"field": {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
"action": "THROW"
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
"action": "THROW"
|
||||
}
|
||||
],
|
||||
"type": "Query",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Operation",
|
||||
"name": "ConnectPageQuery",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "TrustCenter",
|
||||
"kind": "LinkedField",
|
||||
"name": "currentTrustCenter",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
},
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "c0fceafb8e47a9434fb90040efcac8d7",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "ConnectPageQuery",
|
||||
"operationKind": "query",
|
||||
"text": "query ConnectPageQuery {\n currentTrustCenter {\n organization {\n name\n id\n }\n id\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "bc5ac3e0b5b3560f9e9240fe79032c6b";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user