From c0a26057f0cf32ec74b4a79648c8fb282b3a18ca Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 2 Feb 2025 09:43:58 +1030
Subject: [PATCH] feat: add current password input for API key reset
 functionality

---
 .../settings/general/GeneralContainer.jsx     | 54 +++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/settings/general/GeneralContainer.jsx b/frontend/src/components/settings/general/GeneralContainer.jsx
index 86d1449..39d65f2 100644
--- a/frontend/src/components/settings/general/GeneralContainer.jsx
+++ b/frontend/src/components/settings/general/GeneralContainer.jsx
@@ -17,6 +17,8 @@ const GeneralContainer = () => {
     const [showCurrentPassword, setShowCurrentPassword] = useState(false);
     const [showUsernameCurrentPassword, setShowUsernameCurrentPassword] =
         useState(false);
+    const [showApiKeyCurrentPassword, setShowApiKeyCurrentPassword] =
+        useState(false);
     const [copySuccess, setCopySuccess] = useState(false);
     const [formData, setFormData] = useState({
         apiKey: '',
@@ -25,7 +27,8 @@ const GeneralContainer = () => {
         password: '',
         confirmPassword: '',
         currentPassword: '',
-        currentUsername: ''
+        currentUsername: '',
+        apiKeyCurrentPassword: ''
     });
 
     useEffect(() => {
@@ -44,7 +47,8 @@ const GeneralContainer = () => {
                 usernameCurrentPassword: '',
                 password: '',
                 confirmPassword: '',
-                currentPassword: ''
+                currentPassword: '',
+                apiKeyCurrentPassword: ''
             }));
         } catch (error) {
             console.error('Error fetching settings:', error);
@@ -60,16 +64,26 @@ const GeneralContainer = () => {
     };
 
     const handleResetApiKey = async () => {
+        if (!formData.apiKeyCurrentPassword) {
+            Alert.error(
+                'Please enter your current password to reset the API key.'
+            );
+            return;
+        }
+
         const confirmed = window.confirm(
             'Are you sure you want to reset your API key? This action cannot be undone and your current key will stop working immediately.'
         );
 
         if (confirmed) {
             try {
-                const response = await resetApiKey(formData.currentPassword);
+                const response = await resetApiKey(
+                    formData.apiKeyCurrentPassword
+                );
                 setFormData(prev => ({
                     ...prev,
-                    apiKey: response.api_key
+                    apiKey: response.api_key,
+                    apiKeyCurrentPassword: ''
                 }));
             } catch (error) {
                 console.error('Error resetting API key:', error);
@@ -113,6 +127,13 @@ const GeneralContainer = () => {
         }));
     };
 
+    const handleApiKeyCurrentPasswordChange = e => {
+        setFormData(prev => ({
+            ...prev,
+            apiKeyCurrentPassword: e.target.value
+        }));
+    };
+
     const handleSaveUsername = async () => {
         try {
             await updateUsername(
@@ -210,6 +231,31 @@ const GeneralContainer = () => {
                             <RefreshCw size={18} />
                         </button>
                     </div>
+
+                    <div className='relative flex-1'>
+                        <input
+                            type={
+                                showApiKeyCurrentPassword ? 'text' : 'password'
+                            }
+                            value={formData.apiKeyCurrentPassword}
+                            onChange={handleApiKeyCurrentPasswordChange}
+                            placeholder='Enter current password to reset API key'
+                            className='w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-gray-100'
+                        />
+                        <button
+                            onClick={() =>
+                                setShowApiKeyCurrentPassword(
+                                    !showApiKeyCurrentPassword
+                                )
+                            }
+                            className='absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300 w-6 h-6 flex items-center justify-center'>
+                            {showApiKeyCurrentPassword ? (
+                                <EyeOff size={18} />
+                            ) : (
+                                <Eye size={18} />
+                            )}
+                        </button>
+                    </div>
                 </div>
             </div>