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>
);

92
apps/trust/src/components/__generated__/MagicLinkDialogMutation.graphql.ts generated
View File

@@ -1,92 +0,0 @@
/**
* @generated SignedSource<<1d6509148442dad28e2af20068216f49>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
export type SendMagicLinkInput = {
email: any;
};
export type MagicLinkDialogMutation$variables = {
input: SendMagicLinkInput;
};
export type MagicLinkDialogMutation$data = {
readonly sendMagicLink: {
readonly success: boolean;
} | null | undefined;
};
export type MagicLinkDialogMutation = {
response: MagicLinkDialogMutation$data;
variables: MagicLinkDialogMutation$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": "MagicLinkDialogMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "MagicLinkDialogMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "d0e02db0cec956d7a21f5ad5a5a69d61",
"id": null,
"metadata": {},
"name": "MagicLinkDialogMutation",
"operationKind": "mutation",
"text": "mutation MagicLinkDialogMutation(\n $input: SendMagicLinkInput!\n) {\n sendMagicLink(input: $input) {\n success\n }\n}\n"
}
};
})();
(node as any).hash = "c1ee1fe3ef7c232fcb43b5cf8e56c2de";
export default node;