forked from github/plane
feat: reset password page for self-hosted added (#1221)
* feat: reset password page for self-hosted added * chore: change reset password workflow * dev: update email template for reset password * chore: updated restricted workspace slugs list --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
This commit is contained in:
parent
6f2a38ad66
commit
1f3fdd5d0a
@ -2,10 +2,10 @@
|
||||
<html>
|
||||
<p>
|
||||
Dear {{first_name}},<br /><br />
|
||||
Welcome! Your account has been created.
|
||||
Verify your email by clicking on the link below <br />
|
||||
{{forgot_password_url}}
|
||||
successfully.<br /><br />
|
||||
Here is the link to reset your password.
|
||||
<br />
|
||||
Link: {{forgot_password_url}}
|
||||
<br /><br />
|
||||
Thank you
|
||||
</p>
|
||||
|
||||
</html>
|
@ -1,6 +1,4 @@
|
||||
import React from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
@ -8,6 +6,8 @@ import { useForm } from "react-hook-form";
|
||||
import authenticationService from "services/authentication.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { EmailResetPasswordForm } from "components/account";
|
||||
// ui
|
||||
import { Input, SecondaryButton } from "components/ui";
|
||||
// types
|
||||
@ -18,7 +18,10 @@ type EmailPasswordFormValues = {
|
||||
};
|
||||
|
||||
export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
||||
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -58,8 +61,12 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isResettingPassword ? (
|
||||
<EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
|
||||
) : (
|
||||
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Input
|
||||
@ -93,11 +100,13 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<div className="ml-auto text-sm">
|
||||
<Link href={"/forgot-password"}>
|
||||
<a className="font-medium text-brand-accent hover:text-brand-accent">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsResettingPassword(true)}
|
||||
className="font-medium text-brand-accent hover:text-brand-accent"
|
||||
>
|
||||
Forgot your password?
|
||||
</a>
|
||||
</Link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
@ -111,6 +120,7 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
93
apps/app/components/account/email-reset-password-form.tsx
Normal file
93
apps/app/components/account/email-reset-password-form.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React from "react";
|
||||
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
// types
|
||||
type Props = {
|
||||
setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
mode: "onChange",
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
const forgotPassword = async (formData: any) => {
|
||||
const payload = {
|
||||
email: formData.email,
|
||||
};
|
||||
|
||||
await userService
|
||||
.forgotPassword(payload)
|
||||
.then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Password reset link has been sent to your email address.",
|
||||
})
|
||||
)
|
||||
.catch((err) => {
|
||||
if (err.status === 400)
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Please check the Email ID entered.",
|
||||
});
|
||||
else
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(forgotPassword)}>
|
||||
<div>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Email ID is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email ID is not valid",
|
||||
}}
|
||||
error={errors.email}
|
||||
placeholder="Enter registered Email ID"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5 flex items-center gap-2">
|
||||
<SecondaryButton
|
||||
className="w-full text-center"
|
||||
onClick={() => setIsResettingPassword(false)}
|
||||
>
|
||||
Go Back
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type="submit" className="w-full text-center" loading={isSubmitting}>
|
||||
{isSubmitting ? "Sending link..." : "Send reset link"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
@ -1,4 +1,5 @@
|
||||
export * from "./google-login";
|
||||
export * from "./email-code-form";
|
||||
export * from "./email-password-form";
|
||||
export * from "./email-reset-password-form";
|
||||
export * from "./github-login-button";
|
||||
export * from "./google-login";
|
||||
|
@ -36,6 +36,7 @@ const restrictedUrls = [
|
||||
"invitations",
|
||||
"magic-sign-in",
|
||||
"onboarding",
|
||||
"reset-password",
|
||||
"signin",
|
||||
"workspace-member-invitation",
|
||||
"404",
|
||||
|
132
apps/app/pages/reset-password.tsx
Normal file
132
apps/app/pages/reset-password.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Image from "next/image";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm } from "react-hook-form";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import userService from "services/user.service";
|
||||
// layouts
|
||||
import DefaultLayout from "layouts/default-layout";
|
||||
// ui
|
||||
import { Input, SecondaryButton } from "components/ui";
|
||||
// icons
|
||||
import Logo from "public/logo.png";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
||||
type FormData = {
|
||||
password: string;
|
||||
confirmPassword: string;
|
||||
};
|
||||
|
||||
const ResetPasswordPage: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { uidb64, token } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<FormData>();
|
||||
|
||||
const onSubmit = async (formData: FormData) => {
|
||||
if (!uidb64 || !token) return;
|
||||
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Passwords do not match.",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
new_password: formData.password,
|
||||
confirm_password: formData.confirmPassword,
|
||||
};
|
||||
|
||||
await userService
|
||||
.resetPassword(uidb64.toString(), token.toString(), payload)
|
||||
.then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Success!",
|
||||
message: "Password reset successfully. You can now login with your new password.",
|
||||
});
|
||||
router.push("/");
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Something went wrong. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<div className="flex h-screen w-full items-center justify-center overflow-auto">
|
||||
<div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
|
||||
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
|
||||
<div className="flex flex-col items-center justify-center gap-10">
|
||||
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
|
||||
<h2 className="text-center text-xl font-medium text-brand-base">
|
||||
Reset your password
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
|
||||
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Password is required",
|
||||
}}
|
||||
error={errors.password}
|
||||
placeholder="Enter new password"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
register={register}
|
||||
validations={{
|
||||
required: "Confirm password is required",
|
||||
}}
|
||||
error={errors.confirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<SecondaryButton
|
||||
type="submit"
|
||||
className="w-full text-center"
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? "Resetting..." : "Reset"}
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPasswordPage;
|
@ -92,6 +92,29 @@ class UserService extends APIService {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async forgotPassword(data: { email: string }): Promise<any> {
|
||||
return this.post(`/api/forgot-password/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async resetPassword(
|
||||
uidb64: string,
|
||||
token: string,
|
||||
data: {
|
||||
new_password: string;
|
||||
confirm_password: string;
|
||||
}
|
||||
): Promise<any> {
|
||||
return this.post(`/api/reset-password/${uidb64}/${token}/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new UserService();
|
||||
|
Loading…
Reference in New Issue
Block a user