Add account password change functionality

dunaj-dev · claude · dunaj-dev · commit bcfb0f745b88 · 2025-03-31T14:20:14.000+02:00
- Add backend function to update email account passwords - Add API endpoint for password updates (/api/accounts/:email/password) - Create password change modal in Accounts page - Add change password button to email accounts table - Add password update validation - Add translations for all new features - Improve UI with proper button labels and icons 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/backend/dockerMailserver.js b/backend/dockerMailserver.js
@@ -150,6 +150,20 @@ async function addAccount(email, password) {
   }
 }
 
+// Function to update an email account password
+async function updateAccountPassword(email, password) {
+  try {
+    debugLog(`Updating password for account: ${email}`);
+    await execSetup(`email update ${email} ${password}`);
+    debugLog(`Password updated for account: ${email}`);
+    return { success: true, email };
+  } catch (error) {
+    console.error('Error updating account password:', error);
+    debugLog('Account password update error:', error);
+    throw new Error('Unable to update email account password');
+  }
+}
+
 // Function to delete an email account
 async function deleteAccount(email) {
   try {
@@ -310,6 +324,7 @@ function formatMemorySize(bytes) {
 module.exports = {
   getAccounts,
   addAccount,
+  updateAccountPassword,
   deleteAccount,
   getAliases,
   addAlias,
diff --git a/backend/index.js b/backend/index.js
@@ -60,6 +60,26 @@ app.delete('/api/accounts/:email', async (req, res) => {
   }
 });
 
+// Endpoint for updating an email account password
+app.put('/api/accounts/:email/password', async (req, res) => {
+  try {
+    const { email } = req.params;
+    const { password } = req.body;
+    
+    if (!email) {
+      return res.status(400).json({ error: 'Email is required' });
+    }
+    if (!password) {
+      return res.status(400).json({ error: 'Password is required' });
+    }
+    
+    await dockerMailserver.updateAccountPassword(email, password);
+    res.json({ message: 'Password updated successfully', email });
+  } catch (error) {
+    res.status(500).json({ error: 'Unable to update password' });
+  }
+});
+
 // Endpoint for retrieving aliases
 app.get('/api/aliases', async (req, res) => {
   try {
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -33,12 +33,15 @@
     "existingAccounts": "Existing Accounts",
     "email": "Email Address",
     "password": "Password",
+    "newPassword": "New Password",
     "confirmPassword": "Confirm Password",
     "status": "Status",
     "storage": "Storage Usage",
     "aliases": "Aliases",
     "actions": "Actions",
     "addAccount": "Add Account",
+    "changePassword": "Change Password",
+    "updatePassword": "Update Password",
     "noAccounts": "No email accounts. Add your first account.",
     "emailRequired": "Email is required",
     "invalidEmail": "Invalid email format",
@@ -47,8 +50,10 @@
     "passwordsNotMatch": "Passwords do not match",
     "accountCreated": "Account created successfully!",
     "accountDeleted": "Account deleted successfully!",
+    "passwordUpdated": "Password updated successfully!",
     "cannotCreateAccount": "Unable to create account. Please try again.",
     "cannotDeleteAccount": "Unable to delete account. Please try again.",
+    "cannotUpdatePassword": "Unable to update password. Please try again.",
     "confirmDelete": "Are you sure you want to delete account {{email}}?",
     "status": {
       "active": "Active",
@@ -93,14 +98,16 @@
   "common": {
     "loading": "Loading...",
     "error": "Error",
-    "success": "Success"
+    "success": "Success",
+    "cancel": "Cancel"
   },
   "api": {
     "errors": {
       "fetchServerStatus": "Error fetching server status",
       "fetchAccounts": "Error fetching accounts",
       "addAccount": "Error adding account",
       "deleteAccount": "Error deleting account",
+      "updatePassword": "Error updating password",
       "fetchAliases": "Error fetching aliases",
       "addAlias": "Error adding alias",
       "deleteAlias": "Error deleting alias"
diff --git a/frontend/src/locales/pl/translation.json b/frontend/src/locales/pl/translation.json
@@ -33,12 +33,15 @@
     "existingAccounts": "Istniejące Konta",
     "email": "Adres Email",
     "password": "Hasło",
+    "newPassword": "Nowe Hasło",
     "confirmPassword": "Potwierdź Hasło",
     "status": "Status",
     "storage": "Użycie Dysku",
     "aliases": "Aliasy",
     "actions": "Akcje",
     "addAccount": "Dodaj Konto",
+    "changePassword": "Zmień Hasło",
+    "updatePassword": "Aktualizuj Hasło",
     "noAccounts": "Brak kont email. Dodaj pierwsze konto.",
     "emailRequired": "Email jest wymagany",
     "invalidEmail": "Nieprawidłowy format email",
@@ -47,8 +50,10 @@
     "passwordsNotMatch": "Hasła nie są takie same",
     "accountCreated": "Konto zostało pomyślnie utworzone!",
     "accountDeleted": "Konto zostało pomyślnie usunięte!",
+    "passwordUpdated": "Hasło zostało pomyślnie zaktualizowane!",
     "cannotCreateAccount": "Nie można utworzyć konta. Spróbuj ponownie.",
     "cannotDeleteAccount": "Nie można usunąć konta. Spróbuj ponownie.",
+    "cannotUpdatePassword": "Nie można zaktualizować hasła. Spróbuj ponownie.",
     "confirmDelete": "Czy na pewno chcesz usunąć konto {{email}}?",
     "status": {
       "active": "Aktywne",
@@ -93,14 +98,16 @@
   "common": {
     "loading": "Ładowanie...",
     "error": "Błąd",
-    "success": "Sukces"
+    "success": "Sukces",
+    "cancel": "Anuluj"
   },
   "api": {
     "errors": {
       "fetchServerStatus": "Błąd podczas pobierania statusu serwera",
       "fetchAccounts": "Błąd podczas pobierania kont",
       "addAccount": "Błąd podczas dodawania konta",
       "deleteAccount": "Błąd podczas usuwania konta",
+      "updatePassword": "Błąd podczas aktualizacji hasła",
       "fetchAliases": "Błąd podczas pobierania aliasów",
       "addAlias": "Błąd podczas dodawania aliasu",
       "deleteAlias": "Błąd podczas usuwania aliasu"
diff --git a/frontend/src/pages/Accounts.js b/frontend/src/pages/Accounts.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getAccounts, addAccount, deleteAccount } from '../services/api';
+import { getAccounts, addAccount, deleteAccount, updateAccountPassword } from '../services/api';
 import { 
   AlertMessage, 
   Button,
@@ -22,6 +22,15 @@ const Accounts = () => {
   });
   const [formErrors, setFormErrors] = useState({});
   const [successMessage, setSuccessMessage] = useState('');
+  
+  // State for password change modal
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const [selectedAccount, setSelectedAccount] = useState(null);
+  const [passwordFormData, setPasswordFormData] = useState({
+    newPassword: '',
+    confirmPassword: ''
+  });
+  const [passwordFormErrors, setPasswordFormErrors] = useState({});
 
   useEffect(() => {
     fetchAccounts();
@@ -116,6 +125,78 @@ const Accounts = () => {
       }
     }
   };
+  
+  // Open password change modal for an account
+  const handleChangePassword = (account) => {
+    setSelectedAccount(account);
+    setPasswordFormData({
+      newPassword: '',
+      confirmPassword: ''
+    });
+    setPasswordFormErrors({});
+    setShowPasswordModal(true);
+  };
+  
+  // Close password change modal
+  const handleClosePasswordModal = () => {
+    setShowPasswordModal(false);
+    setSelectedAccount(null);
+  };
+  
+  // Handle input changes for password change form
+  const handlePasswordInputChange = (e) => {
+    const { name, value } = e.target;
+    setPasswordFormData({
+      ...passwordFormData,
+      [name]: value
+    });
+    
+    // Clear the error for this field while typing
+    if (passwordFormErrors[name]) {
+      setPasswordFormErrors({
+        ...passwordFormErrors,
+        [name]: null
+      });
+    }
+  };
+  
+  // Validate password change form
+  const validatePasswordForm = () => {
+    const errors = {};
+    
+    if (!passwordFormData.newPassword) {
+      errors.newPassword = 'accounts.passwordRequired';
+    } else if (passwordFormData.newPassword.length < 8) {
+      errors.newPassword = 'accounts.passwordLength';
+    }
+    
+    if (passwordFormData.newPassword !== passwordFormData.confirmPassword) {
+      errors.confirmPassword = 'accounts.passwordsNotMatch';
+    }
+    
+    setPasswordFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+  
+  // Submit password change
+  const handleSubmitPasswordChange = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSuccessMessage('');
+    
+    if (!validatePasswordForm()) {
+      return;
+    }
+    
+    try {
+      await updateAccountPassword(selectedAccount.email, passwordFormData.newPassword);
+      setSuccessMessage('accounts.passwordUpdated');
+      handleClosePasswordModal(); // Close the modal
+    } catch (err) {
+      console.error(t('api.errors.updatePassword'), err);
+      setError('api.errors.updatePassword');
+    }
+  };
 
   // Column definitions for accounts table
   const columns = [
@@ -139,12 +220,23 @@ const Accounts = () => {
     },
     { key: 'actions', label: 'accounts.actions',
       render: (account) => (
-        <Button
-          variant="danger"
-          size="sm"
-          icon="trash"
-          onClick={() => handleDelete(account.email)}
-        />
+        <div className="d-flex">
+          <Button
+            variant="primary"
+            size="sm"
+            icon="key"
+            title={t('accounts.changePassword')}
+            onClick={() => handleChangePassword(account)}
+            className="me-2"
+          />
+          <Button
+            variant="danger"
+            size="sm"
+            icon="trash"
+            title={t('accounts.confirmDelete', { email: account.email })}
+            onClick={() => handleDelete(account.email)}
+          />
+        </div>
       )
     }
   ];
@@ -215,6 +307,69 @@ const Accounts = () => {
           </Card>
         </div>
       </div>
+      
+      {/* Password Change Modal */}
+      {showPasswordModal && selectedAccount && (
+        <div className="modal show d-block" tabIndex="-1">
+          <div className="modal-dialog">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">
+                  {t('accounts.changePassword')} - {selectedAccount.email}
+                </h5>
+                <button 
+                  type="button" 
+                  className="btn-close" 
+                  onClick={handleClosePasswordModal} 
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div className="modal-body">
+                <form onSubmit={handleSubmitPasswordChange}>
+                  <FormField
+                    type="password"
+                    id="newPassword"
+                    name="newPassword"
+                    label="accounts.newPassword"
+                    value={passwordFormData.newPassword}
+                    onChange={handlePasswordInputChange}
+                    error={passwordFormErrors.newPassword}
+                    required
+                  />
+                  
+                  <FormField
+                    type="password"
+                    id="confirmPasswordModal"
+                    name="confirmPassword"
+                    label="accounts.confirmPassword"
+                    value={passwordFormData.confirmPassword}
+                    onChange={handlePasswordInputChange}
+                    error={passwordFormErrors.confirmPassword}
+                    required
+                  />
+                  
+                  <div className="modal-footer">
+                    <button 
+                      type="button" 
+                      className="btn btn-secondary" 
+                      onClick={handleClosePasswordModal}
+                    >
+                      {t('common.cancel')}
+                    </button>
+                    <button 
+                      type="submit" 
+                      className="btn btn-primary"
+                    >
+                      {t('accounts.updatePassword')}
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div className="modal-backdrop show"></div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
