From 01b24ea084e9996d60e823e0cfb655bccf3461f8 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 31 Oct 2025 15:16:44 +0800
Subject: [PATCH] feat: add forgot password on reset password form

- Replaced Button component with a styled button in AuthProviderButton for improved styling.
- Updated button properties to use 'disabled' instead of 'isLoading' for better UX.
- Added a link to the "Forget Password" page in the UpdateExistingPasswordForm for enhanced user navigation.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/modules/profile/account-management.tsx      | 13 ++++++++-----
 .../src/modules/profile/update-password-form.tsx    | 11 ++++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/profile/account-management.tsx b/apps/desktop/layer/renderer/src/modules/profile/account-management.tsx
index d6b0c2893..6e4f12ded 100644
--- a/apps/desktop/layer/renderer/src/modules/profile/account-management.tsx
+++ b/apps/desktop/layer/renderer/src/modules/profile/account-management.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@follow/components/ui/button/index.js"
+import { styledButtonVariant } from "@follow/components/ui/button/variants.js"
 import { authProvidersConfig } from "@follow/constants"
 import { IN_ELECTRON } from "@follow/shared/constants"
 import { cn } from "@follow/utils/utils"
@@ -32,9 +32,12 @@ function AuthProviderButton({ provider }: { provider: string }) {
   if (!account && IN_ELECTRON) return null
 
   return (
-    <Button
+    <button
+      type="button"
       key={provider}
-      variant={"outline"}
+      className={styledButtonVariant({
+        variant: "outline",
+      })}
       onClick={() => {
         if (!account) {
           linkSocial({
@@ -44,7 +47,7 @@ function AuthProviderButton({ provider }: { provider: string }) {
         }
         unlinkAccountMutation.mutate()
       }}
-      isLoading={unlinkAccountMutation.isPending}
+      disabled={unlinkAccountMutation.isPending}
     >
       <div className="flex items-center gap-2">
         <i className={cn("text-xl", authProvidersConfig[provider]?.iconClassName)} />
@@ -55,7 +58,7 @@ function AuthProviderButton({ provider }: { provider: string }) {
         </span>
         {account && <i className="i-mgc-delete-2-cute-re" />}
       </div>
-    </Button>
+    </button>
   )
 }
 
diff --git a/apps/desktop/layer/renderer/src/modules/profile/update-password-form.tsx b/apps/desktop/layer/renderer/src/modules/profile/update-password-form.tsx
index 76e2065ea..501688ed1 100644
--- a/apps/desktop/layer/renderer/src/modules/profile/update-password-form.tsx
+++ b/apps/desktop/layer/renderer/src/modules/profile/update-password-form.tsx
@@ -36,6 +36,8 @@ const updatePasswordFormSchema = z
 const UpdateExistingPasswordForm = () => {
   const { t } = useTranslation("settings")
 
+  const { t: tApp } = useTranslation("app")
+
   const form = useForm<z.infer<typeof updatePasswordFormSchema>>({
     resolver: zodResolver(updatePasswordFormSchema),
     defaultValues: {
@@ -119,7 +121,14 @@ const UpdateExistingPasswordForm = () => {
             </FormItem>
           )}
         />
-        <div className="text-right">
+        <div className="flex items-center justify-between pl-2">
+          <a
+            href={`${env.VITE_WEB_URL}/forget-password`}
+            className="text-sm duration-200 hover:text-accent hover:underline"
+            target="_blank"
+          >
+            {tApp("login.forget_password.note")}
+          </a>
           <Button type="submit" isLoading={updateMutation.isPending}>
             {t("profile.submit")}
           </Button>