rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a page instead of a dialog for compliance page authentication

Browse Source 
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-01-19 16:42:04 +04:00
parent d92e893bfd
commit 44ff65abb9
10 changed files with 381 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/trust/src/components/AuditRow.tsx
View File

@@ -21,7 +21,6 @@ import { downloadFile, formatError } from "@probo/helpers";
import { type PropsWithChildren, use, useState } from "react";
import { useLocation } from "react-router";
import { Viewer } from "/providers/Viewer";
import { MagicLinkDialog } from "./MagicLinkDialog";
import type { AuditRow_requestAccessMutation } from "./__generated__/AuditRow_requestAccessMutation.graphql";
const requestAccessMutation = graphql`
@@ -150,15 +149,14 @@ export function AuditRow(props: { audit: AuditRowFragment$key }) {
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
) : (
<MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
</MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
to="/connect"
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
</div>
);

18
apps/trust/src/components/DocumentRow.tsx
View File

@@ -14,7 +14,6 @@ import type { DocumentRowDownloadMutation } from "./__generated__/DocumentRowDow
import { useMutationWithToasts } from "/hooks/useMutationWithToast";
import { downloadFile, formatError } from "@probo/helpers";
import { use, useState } from "react";
import { MagicLinkDialog } from "./MagicLinkDialog";
import { Viewer } from "/providers/Viewer";
import type { DocumentRow_requestAccessMutation } from "./__generated__/DocumentRow_requestAccessMutation.graphql";
@@ -135,15 +134,14 @@ export function DocumentRow(props: { document: DocumentRowFragment$key }) {
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
) : (
<MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
</MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
to="/connect"
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
</div>
);

122
apps/trust/src/components/MagicLinkDialog.tsx
View File

@@ -1,122 +0,0 @@
import {
Button,
Dialog,
DialogContent,
DialogFooter,
DialogTitle,
Field,
useDialogRef,
useToast,
} from "@probo/ui";
import { useMutation } from "react-relay";
import { graphql } from "relay-runtime";
import z from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useTranslate } from "@probo/i18n";
import type { MagicLinkDialogMutation } from "./__generated__/MagicLinkDialogMutation.graphql";
import type { PropsWithChildren } from "react";
const sendMagicLinkMutation = graphql`
mutation MagicLinkDialogMutation($input: SendMagicLinkInput!) {
sendMagicLink(input: $input) {
success
}
}
`;
const schema = z.object({
email: z.string().email(),
});
type FormData = z.infer<typeof schema>;
export function MagicLinkDialog(props: PropsWithChildren) {
const { children } = props;
const { __ } = useTranslate();
const { toast } = useToast();
const dialogRef = useDialogRef();
const [sendMagicLink] = useMutation<MagicLinkDialogMutation>(
sendMagicLinkMutation,
);
const {
handleSubmit: handleSubmitWrapper,
register,
formState,
} = useFormWithSchema(schema, {
defaultValues: {
email: "",
},
});
const handleSubmit = ({ 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! Please check your emails to authenticate",
),
variant: "success",
});
dialogRef.current?.close();
},
onError: (error) => {
toast({
title: __("Error"),
description: error.message,
variant: "error",
});
},
});
};
return (
<Dialog
trigger={children}
ref={dialogRef}
className="max-w-[500px] text-txt-primary"
>
<form onSubmit={handleSubmitWrapper(handleSubmit)}>
<DialogTitle className="text-2xl font-semibold mb-4 pt-4 md:pt-8 px-4 md:px-8">
{__("Create account or sign in")}
</DialogTitle>
<DialogContent className="px-4 md:px-8 pb-4 md:pb-8 text-txt-primary">
<p className="text-txt-secondary mb-4">
{__(
"To be able to request access to documents, you need to authenticate. Please enter your email to get a magic link.",
)}
</p>
<Field
label={__("Email")}
placeholder="john.doe@acme.com"
{...register("email")}
type="email"
error={formState.errors.email?.message}
/>
</DialogContent>
<DialogFooter>
<Button disabled={formState.isSubmitting} type="submit">
{__("Continue")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

17
apps/trust/src/components/OrganizationSidebar.tsx
View File

@@ -11,7 +11,6 @@ import { use, type PropsWithChildren } from "react";
import { domain, formatError } from "@probo/helpers";
import { AuditRowAvatar } from "./AuditRow";
import { Viewer } from "/providers/Viewer";
import { MagicLinkDialog } from "./MagicLinkDialog";
import { graphql } from "relay-runtime";
import { useMutation } from "react-relay";
import type { OrganizationSidebar_requestAllAccessesMutation } from "./__generated__/OrganizationSidebar_requestAllAccessesMutation.graphql";
@@ -160,15 +159,15 @@ export function OrganizationSidebar({
{__("Request access")}
</Button>
) : (
<MagicLinkDialog>
<Button variant="primary" icon={IconLock} className="w-full h-10">
{__("Request access")}
</Button>
</MagicLinkDialog>
<Button
variant="primary"
icon={IconLock}
className="w-full h-10"
to="/connect"
>
{__("Request access")}
</Button>
)}
{/* <Button variant="secondary" icon={IconMail} className="w-full h-10">
{__("Subscribe to updates")}
</Button>*/}
</div>
</Card>
);

18
apps/trust/src/components/TrustCenterFileRow.tsx
View File

@@ -15,7 +15,6 @@ import { useMutationWithToasts } from "/hooks/useMutationWithToast";
import { downloadFile, formatError } from "@probo/helpers";
import { use, useState } from "react";
import { Viewer } from "/providers/Viewer";
import { MagicLinkDialog } from "./MagicLinkDialog";
import type { TrustCenterFileRow_requestAccessMutation } from "./__generated__/TrustCenterFileRow_requestAccessMutation.graphql";
const requestAccessMutation = graphql`
@@ -139,15 +138,14 @@ export function TrustCenterFileRow(props: {
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
) : (
<MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
</MagicLinkDialog>
<Button
className="w-full md:w-max"
variant="secondary"
icon={IconLock}
to="/connect"
>
{hasRequested ? __("Access requested") : __("Request access")}
</Button>
)}
</div>
);

173
apps/trust/src/pages/auth/ConnectPage.tsx Normal file
View 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
View 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>
);
}

24
apps/trust/src/components/__generated__/MagicLinkDialogMutation.graphql.ts → apps/trust/src/pages/auth/__generated__/ConnectPageMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<1d6509148442dad28e2af20068216f49>>
* @generated SignedSource<<bcbab3713eaca3141e6dfb8f54a54e7d>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -12,17 +12,17 @@ import { ConcreteRequest } from 'relay-runtime';
export type SendMagicLinkInput = {
email: any;
};
export type MagicLinkDialogMutation$variables = {
export type ConnectPageMutation$variables = {
input: SendMagicLinkInput;
};
export type MagicLinkDialogMutation$data = {
export type ConnectPageMutation$data = {
readonly sendMagicLink: {
readonly success: boolean;
} | null | undefined;
};
export type MagicLinkDialogMutation = {
response: MagicLinkDialogMutation$data;
variables: MagicLinkDialogMutation$variables;
export type ConnectPageMutation = {
response: ConnectPageMutation$data;
variables: ConnectPageMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -64,7 +64,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "MagicLinkDialogMutation",
"name": "ConnectPageMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -73,20 +73,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "MagicLinkDialogMutation",
"name": "ConnectPageMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "d0e02db0cec956d7a21f5ad5a5a69d61",
"cacheID": "95987f897611118fa771a2e54cb43b66",
"id": null,
"metadata": {},
"name": "MagicLinkDialogMutation",
"name": "ConnectPageMutation",
"operationKind": "mutation",
"text": "mutation MagicLinkDialogMutation(\n $input: SendMagicLinkInput!\n) {\n sendMagicLink(input: $input) {\n success\n }\n}\n"
"text": "mutation ConnectPageMutation(\n $input: SendMagicLinkInput!\n) {\n sendMagicLink(input: $input) {\n success\n }\n}\n"
}
};
})();
(node as any).hash = "c1ee1fe3ef7c232fcb43b5cf8e56c2de";
(node as any).hash = "4680fea978582bb020b4613737c14d9a";
export default node;

128
apps/trust/src/pages/auth/__generated__/ConnectPageQuery.graphql.ts generated Normal file
View 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;

4
apps/trust/src/routes.tsx
View File

@@ -31,6 +31,10 @@ function ErrorBoundary({ error: propsError }: { error?: string }) {
}
const routes = [
{
path: "/connect",
Component: lazy(() => import("./pages/auth/ConnectPageLoader.tsx")),
},
{
path: "/verify-magic-link",
Component: lazy(() => import("./pages/auth/VerifyMagicLinkPage.tsx")),