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>
2023-06-06 21:36:13 +05:30 · 2023-06-06 21:36:13 +05:30 · 1f3fdd5d0a
commit 1f3fdd5d0a
parent 6f2a38ad66
7 changed files with 319 additions and 59 deletions
--- a/apiserver/templates/emails/auth/forgot_password.html
+++ b/apiserver/templates/emails/auth/forgot_password.html
@ -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>
--- a/apps/app/components/account/email-password-form.tsx
+++ b/apps/app/components/account/email-password-form.tsx
@ -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,59 +61,66 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
        });
      });
  };
+
  return (
    <>
-      <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
-        <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 your Email ID"
-          />
-        </div>
-        <div className="mt-5">
-          <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>
+      {isResettingPassword ? (
+        <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
+      ) : (
+        <form className="mt-5 py-5 px-5" onSubmit={handleSubmit(onSubmit)}>
+          <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 your Email ID"
+            />
          </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>
+          <div className="mt-5">
+            <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">
+              <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>
+      )}
    </>
  );
 };
--- a/apps/app/components/account/email-reset-password-form.tsx
+++ b/apps/app/components/account/email-reset-password-form.tsx
@ -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>
+  );
+};
--- a/apps/app/components/account/index.ts
+++ b/apps/app/components/account/index.ts
@ -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";
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@ -36,6 +36,7 @@ const restrictedUrls = [
  "invitations",
  "magic-sign-in",
  "onboarding",
+  "reset-password",
  "signin",
  "workspace-member-invitation",
  "404",
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@ -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;
--- a/apps/app/services/user.service.ts
+++ b/apps/app/services/user.service.ts
@ -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();