Add magic link login for trust center
Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
@@ -1,76 +0,0 @@
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router";
|
||||
import { buildEndpoint } from "/providers/RelayProviders";
|
||||
import { PageError } from "/components/PageError";
|
||||
import { Spinner } from "@probo/ui";
|
||||
|
||||
/**
|
||||
* Page requested with an access token to authenticate the user for the Trust center
|
||||
*/
|
||||
export function AccessPage() {
|
||||
const { __ } = useTranslate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const token = searchParams.get("token");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const isValidRequest = !!token;
|
||||
const [error, setError] = useState<string | null>(() => {
|
||||
if (!token) {
|
||||
return __("Invalid access token");
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
// Initiate an authentication attempt
|
||||
useEffect(() => {
|
||||
if (!isValidRequest) {
|
||||
return;
|
||||
}
|
||||
fetch(buildEndpoint("/api/trust/v1/auth/authenticate"), {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
token,
|
||||
}),
|
||||
})
|
||||
.then((response) => {
|
||||
// For invalid response throw an error
|
||||
if (!response.ok) {
|
||||
const defaultMessage = `HTTP ${response.status}: ${response.statusText}`;
|
||||
return response
|
||||
.json()
|
||||
.then((json) => {
|
||||
throw new Error(json.message ?? defaultMessage);
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error(defaultMessage);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.success) {
|
||||
navigate("/overview");
|
||||
return;
|
||||
}
|
||||
throw new Error(data.message ?? __("Authentication failed"));
|
||||
})
|
||||
.catch((error) => {
|
||||
setError(error.message);
|
||||
});
|
||||
}, [isValidRequest, token, __, navigate]);
|
||||
|
||||
if (error) {
|
||||
return <PageError error={error} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 text-center flex items-center justify-center gap-2">
|
||||
<Spinner size={16} />
|
||||
{__("Redirecting to trust center")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
apps/trust/src/pages/auth/AuthLayout.tsx
Normal file
19
apps/trust/src/pages/auth/AuthLayout.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { Logo } from "@probo/ui";
|
||||
import { Outlet } from "react-router";
|
||||
|
||||
export default function () {
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary">
|
||||
<div className="bg-level-0 flex flex-col items-center justify-center">
|
||||
<div className="w-full max-w-md px-6">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<Logo withPicto className="w-[440px]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
Normal file
119
apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { usePageTitle } from "@probo/hooks";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Button, Field, useToast } from "@probo/ui";
|
||||
import { useSearchParams } from "react-router";
|
||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||
import z from "zod";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { graphql } from "relay-runtime";
|
||||
import { useMutation } from "react-relay";
|
||||
import { formatError } from "@probo/helpers";
|
||||
import type { VerifyMagicLinkPageMutation } from "./__generated__/VerifyMagicLinkPageMutation.graphql";
|
||||
import { getPathPrefix } from "/utils/pathPrefix";
|
||||
|
||||
const verifyMagicLinkMutation = graphql`
|
||||
mutation VerifyMagicLinkPageMutation($input: VerifyMagicLinkInput!) {
|
||||
verifyMagicLink(input: $input) {
|
||||
success
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const verifyMagicLinkSchema = z.object({
|
||||
token: z.string().min(1, "Please enter a magic token"),
|
||||
});
|
||||
|
||||
export default function VerifyMagicLinkPagePageMutation() {
|
||||
const { __ } = useTranslate();
|
||||
const { toast } = useToast();
|
||||
const [searchParams] = useSearchParams();
|
||||
const submittedRef = useRef<boolean>(false);
|
||||
|
||||
usePageTitle(__("Verify Magic Link"));
|
||||
|
||||
const form = useFormWithSchema(verifyMagicLinkSchema, {
|
||||
defaultValues: {
|
||||
token: searchParams.get("token") ?? "",
|
||||
},
|
||||
});
|
||||
|
||||
const [verifyMagicLink] = useMutation<VerifyMagicLinkPageMutation>(
|
||||
verifyMagicLinkMutation,
|
||||
);
|
||||
|
||||
const handleSubmit = form.handleSubmit(async (data) => {
|
||||
verifyMagicLink({
|
||||
variables: {
|
||||
input: {
|
||||
token: data.token.trim(),
|
||||
},
|
||||
},
|
||||
onCompleted: (_, errors) => {
|
||||
if (errors) {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: formatError(__("Failed to connect"), errors),
|
||||
variant: "error",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Your have successfully signed in"),
|
||||
variant: "success",
|
||||
});
|
||||
window.location.href = getPathPrefix();
|
||||
},
|
||||
onError: (err) => {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: err.message,
|
||||
variant: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!submittedRef.current && searchParams.get("token")) {
|
||||
handleSubmit();
|
||||
submittedRef.current = true;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<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">{__("Email Confirmation")}</h1>
|
||||
<p className="text-txt-tertiary">
|
||||
{__("Confirm your email address to complete registration")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Field
|
||||
label={__("Confirmation Token")}
|
||||
type="text"
|
||||
placeholder={__("Enter your confirmation token")}
|
||||
{...form.register("token")}
|
||||
error={form.formState.errors.token?.message}
|
||||
disabled={form.formState.isSubmitting}
|
||||
help={__(
|
||||
"The token has been automatically filled from the URL if available",
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting
|
||||
? __("Confirming...")
|
||||
: __("Confirm Email")}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
apps/trust/src/pages/auth/__generated__/VerifyMagicLinkPageMutation.graphql.ts
generated
Normal file
92
apps/trust/src/pages/auth/__generated__/VerifyMagicLinkPageMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* @generated SignedSource<<5037d9722f3c6cc15c2a323ef954e3d6>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type VerifyMagicLinkInput = {
|
||||
token: string;
|
||||
};
|
||||
export type VerifyMagicLinkPageMutation$variables = {
|
||||
input: VerifyMagicLinkInput;
|
||||
};
|
||||
export type VerifyMagicLinkPageMutation$data = {
|
||||
readonly verifyMagicLink: {
|
||||
readonly success: boolean;
|
||||
} | null | undefined;
|
||||
};
|
||||
export type VerifyMagicLinkPageMutation = {
|
||||
response: VerifyMagicLinkPageMutation$data;
|
||||
variables: VerifyMagicLinkPageMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "VerifyMagicLinkPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "verifyMagicLink",
|
||||
"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": "VerifyMagicLinkPageMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "VerifyMagicLinkPageMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "07cf89de3f37725d847cda46557467f5",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "VerifyMagicLinkPageMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation VerifyMagicLinkPageMutation(\n $input: VerifyMagicLinkInput!\n) {\n verifyMagicLink(input: $input) {\n success\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "074415601c4d50f50d177c06dfab64ef";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user