Émile Ré
92
apps/console/src/__generated__/iam/ForgotPasswordPageMutation.graphql.ts
generated
Normal file
92
apps/console/src/__generated__/iam/ForgotPasswordPageMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<a089ede7865d3d5f828ac7df7d3a2286>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
|
export type ForgotPasswordInput = {
|
||||||
|
email: string;
|
||||||
|
};
|
||||||
|
export type ForgotPasswordPageMutation$variables = {
|
||||||
|
input: ForgotPasswordInput;
|
||||||
|
};
|
||||||
|
export type ForgotPasswordPageMutation$data = {
|
||||||
|
readonly forgotPassword: {
|
||||||
|
readonly success: boolean;
|
||||||
|
} | null | undefined;
|
||||||
|
};
|
||||||
|
export type ForgotPasswordPageMutation = {
|
||||||
|
response: ForgotPasswordPageMutation$data;
|
||||||
|
variables: ForgotPasswordPageMutation$variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ConcreteRequest = (function(){
|
||||||
|
var v0 = [
|
||||||
|
{
|
||||||
|
"defaultValue": null,
|
||||||
|
"kind": "LocalArgument",
|
||||||
|
"name": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
v1 = [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": [
|
||||||
|
{
|
||||||
|
"kind": "Variable",
|
||||||
|
"name": "input",
|
||||||
|
"variableName": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"concreteType": "ForgotPasswordPayload",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "forgotPassword",
|
||||||
|
"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": "ForgotPasswordPageMutation",
|
||||||
|
"selections": (v1/*: any*/),
|
||||||
|
"type": "Mutation",
|
||||||
|
"abstractKey": null
|
||||||
|
},
|
||||||
|
"kind": "Request",
|
||||||
|
"operation": {
|
||||||
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
|
"kind": "Operation",
|
||||||
|
"name": "ForgotPasswordPageMutation",
|
||||||
|
"selections": (v1/*: any*/)
|
||||||
|
},
|
||||||
|
"params": {
|
||||||
|
"cacheID": "bb493ef26d51e7d560857008669c2ec5",
|
||||||
|
"id": null,
|
||||||
|
"metadata": {},
|
||||||
|
"name": "ForgotPasswordPageMutation",
|
||||||
|
"operationKind": "mutation",
|
||||||
|
"text": "mutation ForgotPasswordPageMutation(\n $input: ForgotPasswordInput!\n) {\n forgotPassword(input: $input) {\n success\n }\n}\n"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "de03243068e655c7f48b7e96e145a617";
|
||||||
|
|
||||||
|
export default node;
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
import { Link } 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 { useState } from "react";
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
email: z.string().email(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function ForgotPasswordPage() {
|
|
||||||
const { __ } = useTranslate();
|
|
||||||
const { toast } = useToast();
|
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
const { register, handleSubmit, formState } = useFormWithSchema(schema, {
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = handleSubmit(async (data) => {
|
|
||||||
const response = await fetch("/connect/forget-password", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
toast({
|
|
||||||
title: __("Request failed"),
|
|
||||||
description:
|
|
||||||
errorData.message || __("Failed to send reset instructions"),
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
toast({
|
|
||||||
title: __("Success"),
|
|
||||||
description: __("Password reset instructions sent to your email"),
|
|
||||||
variant: "success",
|
|
||||||
});
|
|
||||||
setIsSubmitted(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
usePageTitle(__("Forgot Password"));
|
|
||||||
|
|
||||||
if (isSubmitted) {
|
|
||||||
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">{__("Check your email")}</h1>
|
|
||||||
<p className="text-txt-tertiary">
|
|
||||||
{__("We've sent password reset instructions to your email address")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-sm text-txt-tertiary">
|
|
||||||
{__("Didn't receive the email?")}{" "}
|
|
||||||
<button
|
|
||||||
onClick={() => setIsSubmitted(false)}
|
|
||||||
className="underline text-txt-primary hover:text-txt-secondary"
|
|
||||||
>
|
|
||||||
{__("Try again")}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-sm text-txt-tertiary">
|
|
||||||
{__("Remember your password?")}{" "}
|
|
||||||
<Link
|
|
||||||
to="/auth/login"
|
|
||||||
className="underline text-txt-primary hover:text-txt-secondary"
|
|
||||||
>
|
|
||||||
{__("Back to login")}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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">{__("Forgot Password")}</h1>
|
|
||||||
<p className="text-txt-tertiary">
|
|
||||||
{__(
|
|
||||||
"Enter your email address and we'll send you instructions to reset your password"
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form onSubmit={onSubmit} className="space-y-4">
|
|
||||||
<Field
|
|
||||||
label={__("Email")}
|
|
||||||
type="email"
|
|
||||||
placeholder={__("name@example.com")}
|
|
||||||
{...register("email")}
|
|
||||||
required
|
|
||||||
error={formState.errors.email?.message}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button type="submit" className="w-full" disabled={formState.isLoading}>
|
|
||||||
{formState.isLoading
|
|
||||||
? __("Sending instructions...")
|
|
||||||
: __("Send reset instructions")}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-sm text-txt-tertiary">
|
|
||||||
{__("Remember your password?")}{" "}
|
|
||||||
<Link
|
|
||||||
to="/auth/login"
|
|
||||||
className="underline text-txt-primary hover:text-txt-secondary"
|
|
||||||
>
|
|
||||||
{__("Back to login")}
|
|
||||||
</Link>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
142
apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
Normal file
142
apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
import { usePageTitle } from "@probo/hooks";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { Button, Field, useToast } from "@probo/ui";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||||
|
import z from "zod";
|
||||||
|
import { graphql } from "relay-runtime";
|
||||||
|
import { useMutation } from "react-relay";
|
||||||
|
import type { ForgotPasswordPageMutation } from "/__generated__/iam/ForgotPasswordPageMutation.graphql";
|
||||||
|
|
||||||
|
const sendInstructionsMutation = graphql`
|
||||||
|
mutation ForgotPasswordPageMutation($input: ForgotPasswordInput!) {
|
||||||
|
forgotPassword(input: $input) {
|
||||||
|
success
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
email: z.string().email(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function ForgotPasswordPage() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
|
||||||
|
usePageTitle(__("Forgot Password"));
|
||||||
|
|
||||||
|
const [instructionsSent, setInstructionsSent] = useState<boolean>();
|
||||||
|
const { register, handleSubmit, formState } = useFormWithSchema(schema, {
|
||||||
|
defaultValues: {
|
||||||
|
email: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [sendInstructions] = useMutation<ForgotPasswordPageMutation>(
|
||||||
|
sendInstructionsMutation,
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSubmit = handleSubmit(async ({ email }) => {
|
||||||
|
sendInstructions({
|
||||||
|
variables: {
|
||||||
|
input: { email },
|
||||||
|
},
|
||||||
|
onError: (e: Error) => {
|
||||||
|
toast({
|
||||||
|
title: __("Request failed"),
|
||||||
|
description: e.message || __("Failed to send reset instructions"),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCompleted: () => {
|
||||||
|
toast({
|
||||||
|
title: __("Success"),
|
||||||
|
description: __("Password reset instructions sent to your email"),
|
||||||
|
variant: "success",
|
||||||
|
});
|
||||||
|
setInstructionsSent(true);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return instructionsSent ? (
|
||||||
|
<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">{__("Check your email")}</h1>
|
||||||
|
<p className="text-txt-tertiary">
|
||||||
|
{__("We've sent password reset instructions to your email address")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-txt-tertiary">
|
||||||
|
{__("Didn't receive the email?")}{" "}
|
||||||
|
<button
|
||||||
|
onClick={() => setInstructionsSent(false)}
|
||||||
|
className="underline text-txt-primary hover:text-txt-secondary"
|
||||||
|
>
|
||||||
|
{__("Try again")}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-txt-tertiary">
|
||||||
|
{__("Remember your password?")}{" "}
|
||||||
|
<Link
|
||||||
|
to="/auth/login"
|
||||||
|
className="underline text-txt-primary hover:text-txt-secondary"
|
||||||
|
>
|
||||||
|
{__("Back to login")}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<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">{__("Forgot Password")}</h1>
|
||||||
|
<p className="text-txt-tertiary">
|
||||||
|
{__(
|
||||||
|
"Enter your email address and we'll send you instructions to reset your password",
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={onSubmit} className="space-y-4">
|
||||||
|
<Field
|
||||||
|
label={__("Email")}
|
||||||
|
type="email"
|
||||||
|
placeholder={__("name@example.com")}
|
||||||
|
{...register("email")}
|
||||||
|
required
|
||||||
|
error={formState.errors.email?.message}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full"
|
||||||
|
disabled={formState.isSubmitting}
|
||||||
|
>
|
||||||
|
{formState.isSubmitting
|
||||||
|
? __("Sending instructions...")
|
||||||
|
: __("Send reset instructions")}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-txt-tertiary">
|
||||||
|
{__("Remember your password?")}{" "}
|
||||||
|
<Link
|
||||||
|
to="/auth/login"
|
||||||
|
className="underline text-txt-primary hover:text-txt-secondary"
|
||||||
|
>
|
||||||
|
{__("Back to login")}
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -93,7 +93,7 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "forgot-password",
|
path: "forgot-password",
|
||||||
Component: lazy(() => import("./pages/auth/ForgotPasswordPage")),
|
Component: lazy(() => import("./pages/iam/auth/ForgotPasswordPage")),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "reset-password",
|
path: "reset-password",
|
||||||
|
|||||||
Reference in New Issue
Block a user