thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

feat: reset password page for self-hosted added (#1221)

Browse Source 
* 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:
Aaryan Khandelwal 2023-06-06 21:36:13 +05:30 committed by GitHub
parent 6f2a38ad66
commit 1f3fdd5d0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 319 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apiserver/templates/emails/auth/forgot_password.html
View File

@ -2,10 +2,10 @@
<html> <html>
<p> <p>
Dear {{first_name}},<br /><br /> Dear {{first_name}},<br /><br />
Welcome! Your account has been created. Here is the link to reset your password.
Verify your email by clicking on the link below <br /> <br />
{{forgot_password_url}} Link: {{forgot_password_url}}
successfully.<br /><br /> <br /><br />
Thank you
</p> </p>
</html> </html>

116
apps/app/components/account/email-password-form.tsx
View File

@ -1,6 +1,4 @@
import React from "react"; import React, { useState } from "react";
import Link from "next/link";
// react hook form // react hook form
import { useForm } from "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"; import authenticationService from "services/authentication.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components
import { EmailResetPasswordForm } from "components/account";
// ui // ui
import { Input, SecondaryButton } from "components/ui"; import { Input, SecondaryButton } from "components/ui";
// types // types
@ -18,7 +18,10 @@ type EmailPasswordFormValues = {
}; };
export const EmailPasswordForm = ({ handleSignIn }: any) => { export const EmailPasswordForm = ({ handleSignIn }: any) => {
const [isResettingPassword, setIsResettingPassword] = useState(false);
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { const {
register, register,
handleSubmit, handleSubmit,
@ -58,59 +61,66 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
}); });
}); });
}; };
return ( return (
<> <>
<form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}> {isResettingPassword ? (
<div> <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
<Input ) : (
id="email" <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
type="email" <div>
name="email" <Input
register={register} id="email"
validations={{ type="email"
required: "Email ID is required", name="email"
validate: (value) => register={register}
/^(([^<>()[\]\\.,;:\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( validations={{
value required: "Email ID is required",
) || "Email ID is not valid", 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(
error={errors.email} value
placeholder="Enter your Email ID" ) || "Email ID is not valid",
/> }}
</div> error={errors.email}
<div className="mt-5"> placeholder="Enter your Email ID"
<Input />
id="password"
type="password"
name="password"
register={register}
validations={{
required: "Password is required",
}}
error={errors.password}
placeholder="Enter your password"
/>
</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">
Forgot your password?
</a>
</Link>
</div> </div>
</div> <div className="mt-5">
<div className="mt-5"> <Input
<SecondaryButton id="password"
type="submit" type="password"
className="w-full text-center" name="password"
disabled={!isValid && isDirty} register={register}
loading={isSubmitting} validations={{
> required: "Password is required",
{isSubmitting ? "Signing in..." : "Sign In"} }}
</SecondaryButton> error={errors.password}
</div> placeholder="Enter your password"
</form> />
</div>
<div className="mt-2 flex items-center justify-between">
<div className="ml-auto text-sm">
<button
type="button"
onClick={() => setIsResettingPassword(true)}
className="font-medium text-brand-accent hover:text-brand-accent"
>
Forgot your password?
</button>
</div>
</div>
<div className="mt-5">
<SecondaryButton
type="submit"
className="w-full text-center"
disabled={!isValid && isDirty}
loading={isSubmitting}
>
{isSubmitting ? "Signing in..." : "Sign In"}
</SecondaryButton>
</div>
</form>
)}
</> </>
); );
}; };

93
apps/app/components/account/email-reset-password-form.tsx Normal file
View 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>
);
};

3
apps/app/components/account/index.ts
View File

@ -1,4 +1,5 @@
export * from "./google-login";
export * from "./email-code-form"; export * from "./email-code-form";
export * from "./email-password-form"; export * from "./email-password-form";
export * from "./email-reset-password-form";
export * from "./github-login-button"; export * from "./github-login-button";
export * from "./google-login";

1
apps/app/components/workspace/create-workspace-form.tsx
View File

@ -36,6 +36,7 @@ const restrictedUrls = [
"invitations", "invitations",
"magic-sign-in", "magic-sign-in",
"onboarding", "onboarding",
"reset-password",
"signin", "signin",
"workspace-member-invitation", "workspace-member-invitation",
"404", "404",

132
apps/app/pages/reset-password.tsx Normal file
View 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;

23
apps/app/services/user.service.ts
View File

@ -92,6 +92,29 @@ class UserService extends APIService {
throw error?.response?.data; 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(); export default new UserService();