From a64e6865dc716439bd4b05f1bfb8489e9912d449 Mon Sep 17 00:00:00 2001
From: Alexey Dudarev <24899236+d-alex171@users.noreply.github.com>
Date: Sat, 24 Jan 2026 11:28:05 -0800
Subject: [PATCH 1/4] added change password dialog

---
 .../pages/security-settings-content.tsx       | 199 +++++++++++++++++-
 1 file changed, 197 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/pages/security-settings-content.tsx b/src/components/settings/pages/security-settings-content.tsx
index 05718669..b6e45b26 100644
--- a/src/components/settings/pages/security-settings-content.tsx
+++ b/src/components/settings/pages/security-settings-content.tsx
@@ -1,3 +1,198 @@
+import React, { useState } from 'react';
+import { createAuthClient } from 'better-auth/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { AlertCircle, LogOut, Shield, Lock } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
 export function SecuritySettingsContent() {
-  return <>Security coming soon...</>;
-}
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  
+  const authClient = createAuthClient()
+
+  const handleLogout = async () => {
+    try {
+      setLoading(true);
+      await authClient.signOut();
+      setMessage({ type: 'success', text: 'Successfully logged out' });
+      // Redirect to login page
+      window.location.href = '/login';
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to logout. Please try again.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    try {
+      setLoading(true);
+      await authClient.revokeOtherSessions();
+      setMessage({ type: 'success', text: 'All other sessions have been revoked' });
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to revoke sessions. Please try again.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChangePassword = async () => {
+    setMessage(null);
+
+    if (newPassword !== confirmPassword) {
+      setMessage({ type: 'error', text: 'New passwords do not match' });
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setMessage({ type: 'error', text: 'Password must be at least 8 characters long' });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions: false,
+      });
+      setMessage({ type: 'success', text: 'Password changed successfully' });
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to change password. Please check your current password.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Security</h3>
+        <p className="text-sm text-muted-foreground">
+          Manage your account security and sessions
+        </p>
+      </div>
+      <Separator />
+
+      {message && (
+        <Alert variant={message.type === 'error' ? 'destructive' : 'default'}>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{message.text}</AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Lock className="h-5 w-5" />
+            Change Password
+          </CardTitle>
+          <CardDescription>
+            Update your password to keep your account secure
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="current-password">Current Password</Label>
+              <Input
+                id="current-password"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="new-password">New Password</Label>
+              <Input
+                id="new-password"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirm-password">Confirm New Password</Label>
+              <Input
+                id="confirm-password"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <Button onClick={handleChangePassword} disabled={loading}>
+              {loading ? 'Updating...' : 'Update Password'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Session Management Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Session Management
+          </CardTitle>
+          <CardDescription>
+            Manage your active sessions across all devices
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="text-sm font-medium">Logout from all devices</p>
+              <p className="text-sm text-muted-foreground">
+                End all sessions except the current one
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleRevokeAllSessions}
+              disabled={loading}
+            >
+              Revoke All Sessions
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Logout Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LogOut className="h-5 w-5" />
+            Logout
+          </CardTitle>
+          <CardDescription>
+            Sign out of your account on this device
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button
+            variant="destructive"
+            onClick={handleLogout}
+            disabled={loading}
+            className="w-full sm:w-auto"
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            Logout
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file

From e6b7dd18ba7acbf2c18ed96b1fee32a23716beb9 Mon Sep 17 00:00:00 2001
From: Alexey Dudarev <24899236+d-alex171@users.noreply.github.com>
Date: Sat, 31 Jan 2026 10:39:16 -0800
Subject: [PATCH 2/4] fixed logout button

---
 .../pages/security-settings-content.tsx       | 20 +++++--------------
 src/components/settings/settings-dialog.tsx   |  2 +-
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/settings/pages/security-settings-content.tsx b/src/components/settings/pages/security-settings-content.tsx
index b6e45b26..f0d63fda 100644
--- a/src/components/settings/pages/security-settings-content.tsx
+++ b/src/components/settings/pages/security-settings-content.tsx
@@ -7,6 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Separator } from '@/components/ui/separator';
 import { AlertCircle, LogOut, Shield, Lock } from 'lucide-react';
 import { Alert, AlertDescription } from '@/components/ui/alert';
+import { forceLogout } from "@/lib/auth/logout";
+
 
 export function SecuritySettingsContent() {
   const [currentPassword, setCurrentPassword] = useState('');
@@ -18,18 +20,8 @@ export function SecuritySettingsContent() {
   const authClient = createAuthClient()
 
   const handleLogout = async () => {
-    try {
-      setLoading(true);
-      await authClient.signOut();
-      setMessage({ type: 'success', text: 'Successfully logged out' });
-      // Redirect to login page
-      window.location.href = '/login';
-    } catch (error) {
-      setMessage({ type: 'error', text: 'Failed to logout. Please try again.' });
-    } finally {
-      setLoading(false);
-    }
-  };
+      await forceLogout();
+    };
 
   const handleRevokeAllSessions = async () => {
     try {
@@ -75,7 +67,7 @@ export function SecuritySettingsContent() {
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto px-1">
       <div>
         <h3 className="text-lg font-medium">Security</h3>
         <p className="text-sm text-muted-foreground">
@@ -140,7 +132,6 @@ export function SecuritySettingsContent() {
         </CardContent>
       </Card>
 
-      {/* Session Management Section */}
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
@@ -170,7 +161,6 @@ export function SecuritySettingsContent() {
         </CardContent>
       </Card>
 
-      {/* Logout Section */}
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
diff --git a/src/components/settings/settings-dialog.tsx b/src/components/settings/settings-dialog.tsx
index 6c4a9e03..c1715091 100644
--- a/src/components/settings/settings-dialog.tsx
+++ b/src/components/settings/settings-dialog.tsx
@@ -56,7 +56,7 @@ export const SettingsDialog = NiceModal.create(() => {
     <Dialog open={modal.visible} onOpenChange={modal.hide}>
       <DialogContent
         hideCloseButton
-        className="sm:max-w-[min(calc(100vw-2rem),_42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-hidden"
+        className="sm:max-w-[min(calc(100vw-2rem),_42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-y-auto"
       >
         <Tabs
           defaultValue="profile"

From 8049d83a5edf4f9e9d52e9e2d35acafc525a6819 Mon Sep 17 00:00:00 2001
From: Alexey Dudarev <24899236+d-alex171@users.noreply.github.com>
Date: Fri, 27 Feb 2026 18:39:08 -0800
Subject: [PATCH 3/4] refactored form validation

---
 .../pages/security-settings-content.tsx       | 256 +++++++++++-------
 src/components/settings/settings-dialog.tsx   |   2 +-
 2 files changed, 157 insertions(+), 101 deletions(-)

diff --git a/src/components/settings/pages/security-settings-content.tsx b/src/components/settings/pages/security-settings-content.tsx
index f0d63fda..884495dc 100644
--- a/src/components/settings/pages/security-settings-content.tsx
+++ b/src/components/settings/pages/security-settings-content.tsx
@@ -1,71 +1,98 @@
-import React, { useState } from 'react';
-import { createAuthClient } from 'better-auth/client';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Separator } from '@/components/ui/separator';
-import { AlertCircle, LogOut, Shield, Lock } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { authClient } from "@/lib/auth/client";
 import { forceLogout } from "@/lib/auth/logout";
+import { getBetterAuthErrorMessage } from "@/lib/auth/extensions/get-better-auth-error";
+
+import { FormInputField } from "@/components/form/FormInput";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle, CheckCircle2, LogOut, Shield, Lock } from "lucide-react";
+
+const ChangePasswordSchema = z
+  .object({
+    currentPassword: z.string().nonempty("Please fill out this field."),
+    newPassword: z
+      .string()
+      .nonempty("Please fill out this field.")
+      .min(8, "Password must be at least 8 characters long."),
+    confirmPassword: z.string().nonempty("Please fill out this field."),
+  })
+  .superRefine((val, ctx) => {
+    if (val.newPassword !== val.confirmPassword) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["confirmPassword"],
+        message: "Passwords don't match.",
+      });
+    }
+  });
 
+type ChangePasswordSchemaType = z.infer<typeof ChangePasswordSchema>;
 
 export function SecuritySettingsContent() {
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
-  
-  const authClient = createAuthClient()
-
-  const handleLogout = async () => {
-      await forceLogout();
-    };
+  const [sessionMessage, setSessionMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const [sessionLoading, setSessionLoading] = useState(false);
 
-  const handleRevokeAllSessions = async () => {
-    try {
-      setLoading(true);
-      await authClient.revokeOtherSessions();
-      setMessage({ type: 'success', text: 'All other sessions have been revoked' });
-    } catch (error) {
-      setMessage({ type: 'error', text: 'Failed to revoke sessions. Please try again.' });
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    handleSubmit,
+    setError,
+    control,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<ChangePasswordSchemaType>({
+    resolver: zodResolver(ChangePasswordSchema),
+    mode: "onSubmit",
+    reValidateMode: "onChange",
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  });
 
-  const handleChangePassword = async () => {
-    setMessage(null);
+  const onSubmit = async (data: ChangePasswordSchemaType) => {
+    const { error } = await authClient.changePassword({
+      currentPassword: data.currentPassword,
+      newPassword: data.newPassword,
+      revokeOtherSessions: false,
+    });
 
-    if (newPassword !== confirmPassword) {
-      setMessage({ type: 'error', text: 'New passwords do not match' });
+    if (error) {
+      setError("root", {
+        type: "custom",
+        message: getBetterAuthErrorMessage(error?.code),
+      });
       return;
     }
 
-    if (newPassword.length < 8) {
-      setMessage({ type: 'error', text: 'Password must be at least 8 characters long' });
-      return;
-    }
+    reset();
+    setError("root", { type: "success" } as any);
+  };
 
+  const handleRevokeAllSessions = async () => {
     try {
-      setLoading(true);
-      await authClient.changePassword({
-        currentPassword,
-        newPassword,
-        revokeOtherSessions: false,
-      });
-      setMessage({ type: 'success', text: 'Password changed successfully' });
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
-    } catch (error) {
-      setMessage({ type: 'error', text: 'Failed to change password. Please check your current password.' });
+      setSessionLoading(true);
+      await authClient.revokeOtherSessions();
+      setSessionMessage({ type: "success", text: "All other sessions have been revoked." });
+    } catch {
+      setSessionMessage({ type: "error", text: "Failed to revoke sessions. Please try again." });
     } finally {
-      setLoading(false);
+      setSessionLoading(false);
     }
   };
 
+  const isPasswordSuccess = (errors.root as any)?.type === "success";
+
   return (
     <div className="space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto px-1">
       <div>
@@ -76,13 +103,6 @@ export function SecuritySettingsContent() {
       </div>
       <Separator />
 
-      {message && (
-        <Alert variant={message.type === 'error' ? 'destructive' : 'default'}>
-          <AlertCircle className="h-4 w-4" />
-          <AlertDescription>{message.text}</AlertDescription>
-        </Alert>
-      )}
-
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
@@ -94,41 +114,64 @@ export function SecuritySettingsContent() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="current-password">Current Password</Label>
-              <Input
-                id="current-password"
-                type="password"
-                value={currentPassword}
-                onChange={(e) => setCurrentPassword(e.target.value)}
-                disabled={loading}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="new-password">New Password</Label>
-              <Input
-                id="new-password"
-                type="password"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                disabled={loading}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="confirm-password">Confirm New Password</Label>
-              <Input
-                id="confirm-password"
-                type="password"
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                disabled={loading}
-              />
-            </div>
-            <Button onClick={handleChangePassword} disabled={loading}>
-              {loading ? 'Updating...' : 'Update Password'}
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            noValidate
+            className="space-y-4"
+          >
+            {errors.root?.message && !isPasswordSuccess && (
+              <Alert variant="destructive" role="alert" aria-live="assertive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Couldn't update password</AlertTitle>
+                <AlertDescription>{errors.root.message}</AlertDescription>
+              </Alert>
+            )}
+
+            {isPasswordSuccess && (
+              <Alert variant="success" role="status" aria-live="polite">
+                <CheckCircle2 className="h-4 w-4" />
+                <AlertTitle>Success</AlertTitle>
+                <AlertDescription>Password changed successfully.</AlertDescription>
+              </Alert>
+            )}
+
+            <FormInputField
+              control={control}
+              type="password"
+              name="currentPassword"
+              placeholder="•••••••••••••"
+              label="Current Password"
+              className="gap-1"
+            />
+            <FormInputField
+              control={control}
+              type="password"
+              name="newPassword"
+              autoComplete="new-password"
+              placeholder="•••••••••••••"
+              label="New Password (at least 8 characters)"
+              className="gap-1"
+            />
+            <FormInputField
+              control={control}
+              type="password"
+              name="confirmPassword"
+              autoComplete="new-password"
+              placeholder="•••••••••••••"
+              label="Confirm New Password"
+              className="gap-1"
+            />
+
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? (
+                <>
+                  <Spinner /> Updating...
+                </>
+              ) : (
+                "Update Password"
+              )}
             </Button>
-          </div>
+          </form>
         </CardContent>
       </Card>
 
@@ -143,6 +186,21 @@ export function SecuritySettingsContent() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
+          {sessionMessage && (
+            <Alert
+              variant={sessionMessage.type === "error" ? "destructive" : "default"}
+              role={sessionMessage.type === "error" ? "alert" : "status"}
+              aria-live={sessionMessage.type === "error" ? "assertive" : "polite"}
+            >
+              {sessionMessage.type === "error" ? (
+                <AlertCircle className="h-4 w-4" />
+              ) : (
+                <CheckCircle2 className="h-4 w-4" />
+              )}
+              <AlertDescription>{sessionMessage.text}</AlertDescription>
+            </Alert>
+          )}
+
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
               <p className="text-sm font-medium">Logout from all devices</p>
@@ -153,29 +211,27 @@ export function SecuritySettingsContent() {
             <Button
               variant="outline"
               onClick={handleRevokeAllSessions}
-              disabled={loading}
+              disabled={sessionLoading}
             >
-              Revoke All Sessions
+              {sessionLoading ? <Spinner /> : "Revoke All Sessions"}
             </Button>
           </div>
         </CardContent>
       </Card>
 
+      {/* Logout */}
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <LogOut className="h-5 w-5" />
             Logout
           </CardTitle>
-          <CardDescription>
-            Sign out of your account on this device
-          </CardDescription>
+          <CardDescription>Sign out of your account on this device</CardDescription>
         </CardHeader>
         <CardContent>
           <Button
             variant="destructive"
-            onClick={handleLogout}
-            disabled={loading}
+            onClick={forceLogout}
             className="w-full sm:w-auto"
           >
             <LogOut className="mr-2 h-4 w-4" />
diff --git a/src/components/settings/settings-dialog.tsx b/src/components/settings/settings-dialog.tsx
index c1715091..0837e759 100644
--- a/src/components/settings/settings-dialog.tsx
+++ b/src/components/settings/settings-dialog.tsx
@@ -56,7 +56,7 @@ export const SettingsDialog = NiceModal.create(() => {
     <Dialog open={modal.visible} onOpenChange={modal.hide}>
       <DialogContent
         hideCloseButton
-        className="sm:max-w-[min(calc(100vw-2rem),_42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-y-auto"
+        className="sm:max-w-[min(calc(100vw-2rem),42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-y-auto"
       >
         <Tabs
           defaultValue="profile"

From 96edc2658424d346a8eb7119c100ef7b63beb9b5 Mon Sep 17 00:00:00 2001
From: Alexey Dudarev <24899236+d-alex171@users.noreply.github.com>
Date: Fri, 27 Feb 2026 18:56:34 -0800
Subject: [PATCH 4/4] refactored error handling and minor ux issues

---
 .../settings/pages/security-settings-content.tsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/settings/pages/security-settings-content.tsx b/src/components/settings/pages/security-settings-content.tsx
index 884495dc..30699b95 100644
--- a/src/components/settings/pages/security-settings-content.tsx
+++ b/src/components/settings/pages/security-settings-content.tsx
@@ -37,6 +37,7 @@ const ChangePasswordSchema = z
 type ChangePasswordSchemaType = z.infer<typeof ChangePasswordSchema>;
 
 export function SecuritySettingsContent() {
+  const [passwordSuccess, setPasswordSuccess] = useState(false)
   const [sessionMessage, setSessionMessage] = useState<{
     type: "success" | "error";
     text: string;
@@ -48,7 +49,7 @@ export function SecuritySettingsContent() {
     setError,
     control,
     reset,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isDirty },
   } = useForm<ChangePasswordSchemaType>({
     resolver: zodResolver(ChangePasswordSchema),
     mode: "onSubmit",
@@ -76,7 +77,7 @@ export function SecuritySettingsContent() {
     }
 
     reset();
-    setError("root", { type: "success" } as any);
+    setPasswordSuccess(true);
   };
 
   const handleRevokeAllSessions = async () => {
@@ -94,9 +95,8 @@ export function SecuritySettingsContent() {
   const isPasswordSuccess = (errors.root as any)?.type === "success";
 
   return (
-    <div className="space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto px-1">
+    <div className="space-y-6 px-1">
       <div>
-        <h3 className="text-lg font-medium">Security</h3>
         <p className="text-sm text-muted-foreground">
           Manage your account security and sessions
         </p>
@@ -119,7 +119,7 @@ export function SecuritySettingsContent() {
             noValidate
             className="space-y-4"
           >
-            {errors.root?.message && !isPasswordSuccess && (
+            {errors.root?.message && (
               <Alert variant="destructive" role="alert" aria-live="assertive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle>Couldn't update password</AlertTitle>
@@ -127,7 +127,7 @@ export function SecuritySettingsContent() {
               </Alert>
             )}
 
-            {isPasswordSuccess && (
+            {passwordSuccess && !isDirty  && (
               <Alert variant="success" role="status" aria-live="polite">
                 <CheckCircle2 className="h-4 w-4" />
                 <AlertTitle>Success</AlertTitle>