Fix missing confirmation email page
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
120
apps/console/src/pages/auth/ConfirmInvitationPage.tsx
Normal file
120
apps/console/src/pages/auth/ConfirmInvitationPage.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import { Link, useNavigate } from "react-router";
|
||||||
|
import { Button, Field, useToast } from "@probo/ui";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||||
|
import { usePageTitle } from "@probo/hooks";
|
||||||
|
import { buildEndpoint } from "/providers/RelayProviders";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
token: z.string(),
|
||||||
|
password: z.string().min(8),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function ConfirmInvitationPage() {
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { register, handleSubmit, formState, setValue } = useFormWithSchema(
|
||||||
|
schema,
|
||||||
|
{
|
||||||
|
defaultValues: {
|
||||||
|
token: "",
|
||||||
|
password: "",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSubmit = handleSubmit(async (data) => {
|
||||||
|
const response = await fetch(
|
||||||
|
buildEndpoint("/api/console/v1/auth/invitation"),
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Registration failed
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json().catch(() => ({}));
|
||||||
|
toast({
|
||||||
|
title: __("Confirmation failed"),
|
||||||
|
description: errorData.message || __("Confirmation failed"),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast({
|
||||||
|
title: __("Success"),
|
||||||
|
description: __("Invitation confirmed successfully"),
|
||||||
|
variant: "success",
|
||||||
|
});
|
||||||
|
navigate("/", { replace: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
usePageTitle(__("Confirm invitation"));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const searchParams = new URLSearchParams(location.search);
|
||||||
|
const urlToken = searchParams.get("token");
|
||||||
|
|
||||||
|
if (urlToken) {
|
||||||
|
setValue("token", urlToken);
|
||||||
|
}
|
||||||
|
}, [location.search, setValue]);
|
||||||
|
|
||||||
|
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">{__("Sign up")}</h1>
|
||||||
|
<p className="text-txt-tertiary">
|
||||||
|
{__("Enter your information to create an account")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={onSubmit} className="space-y-4">
|
||||||
|
<Field
|
||||||
|
label={__("Token")}
|
||||||
|
type="text"
|
||||||
|
placeholder={__("Enter your token")}
|
||||||
|
{...register("token")}
|
||||||
|
required
|
||||||
|
error={formState.errors.token?.message}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
label={__("Password")}
|
||||||
|
type="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
{...register("password")}
|
||||||
|
required
|
||||||
|
error={formState.errors.password?.message}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full" disabled={formState.isLoading}>
|
||||||
|
{formState.isLoading
|
||||||
|
? __("Confirming invitation...")
|
||||||
|
: __("Confirm invitation")}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-txt-tertiary">
|
||||||
|
{__("Already have an account?")}{" "}
|
||||||
|
<Link
|
||||||
|
to="/login"
|
||||||
|
className="underline text-txt-primary hover:text-txt-secondary"
|
||||||
|
>
|
||||||
|
{__("Log in here")}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -66,6 +66,10 @@ const routes = [
|
|||||||
path: "confirm-email",
|
path: "confirm-email",
|
||||||
Component: lazy(() => import("./pages/auth/ConfirmEmailPage")),
|
Component: lazy(() => import("./pages/auth/ConfirmEmailPage")),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "confirm-invitation",
|
||||||
|
Component: lazy(() => import("./pages/auth/ConfirmInvitationPage")),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -713,7 +713,7 @@ func (s Service) InviteUser(
|
|||||||
confirmationInvitationUrl := url.URL{
|
confirmationInvitationUrl := url.URL{
|
||||||
Scheme: "https",
|
Scheme: "https",
|
||||||
Host: s.hostname,
|
Host: s.hostname,
|
||||||
Path: "/confirm-invitation",
|
Path: "/auth/confirm-invitation",
|
||||||
RawQuery: url.Values{
|
RawQuery: url.Values{
|
||||||
"token": []string{confirmationToken},
|
"token": []string{confirmationToken},
|
||||||
}.Encode(),
|
}.Encode(),
|
||||||
|
|||||||
Reference in New Issue
Block a user