feat: reset password in accounts page

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { forgotPasswordAction } from "@/modules/auth/forgot-password/actions";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
@@ -20,6 +22,7 @@ import { Label } from "@/modules/ui/components/label";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslate } from "@tolgee/react";
 import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 import { z } from "zod";
@@ -39,6 +42,7 @@ export const EditProfileDetailsForm = ({ user }: { user: TUser }) => {
 
   const { isSubmitting, isDirty } = form.formState;
   const { t } = useTranslate();
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
 
   const onSubmit: SubmitHandler<TEditProfileNameForm> = async (data) => {
     try {
@@ -53,6 +57,26 @@ export const EditProfileDetailsForm = ({ user }: { user: TUser }) => {
     }
   };
 
+  const handleResetPassword = async () => {
+    if (!user.email) return;
+
+    setIsResettingPassword(true);
+    try {
+      const resetPasswordResponse = await forgotPasswordAction({ email: user.email });
+      if (resetPasswordResponse?.data) {
+        toast.success(t("auth.forgot-password.email-sent.heading"));
+      } else {
+        const errorMessage = getFormattedErrorMessage(resetPasswordResponse);
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      const errorMessage = getFormattedErrorMessage(error);
+      toast.error(errorMessage);
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
   return (
     <FormProvider {...form}>
       <form className="w-full max-w-sm items-center" onSubmit={form.handleSubmit(onSubmit)}>
@@ -122,6 +146,20 @@ export const EditProfileDetailsForm = ({ user }: { user: TUser }) => {
           )}
         />
 
+        <div className="mt-4 space-y-2">
+          <Label htmlFor="reset-password">{t("auth.forgot-password.reset_password")}</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Input type="reset-password" id="reset-password" defaultValue={user.email} disabled />
+            <Button
+              onClick={handleResetPassword}
+              loading={isResettingPassword}
+              disabled={isResettingPassword || !user.email}
+              size="default">
+              {t("auth.forgot-password.reset_password")}
+            </Button>
+          </div>
+        </div>
+
         <Button
           type="submit"
           className="mt-4"