feat: implement user management features with add, edit, and delete functionality

2025-12-31 20:00:00 -05:00 · 2025-10-02 15:11:08 +08:00
parent 6b39916909
commit 198ea85225
6 changed files with 700 additions and 2 deletions
--- a/frontend/src/components/EditUserForm.tsx
+++ b/frontend/src/components/EditUserForm.tsx
@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUserData } from '@/hooks/useUserData';
+import { User, UserUpdateData } from '@/types';
+
+interface EditUserFormProps {
+  user: User;
+  onEdit: () => void;
+  onCancel: () => void;
+}
+
+const EditUserForm = ({ user, onEdit, onCancel }: EditUserFormProps) => {
+  const { t } = useTranslation();
+  const { updateUser } = useUserData();
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [formData, setFormData] = useState({
+    isAdmin: user.isAdmin,
+    newPassword: '',
+    confirmPassword: '',
+  });
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate passwords match if changing password
+    if (formData.newPassword && formData.newPassword !== formData.confirmPassword) {
+      setError(t('users.passwordMismatch'));
+      return;
+    }
+
+    if (formData.newPassword && formData.newPassword.length < 6) {
+      setError(t('users.passwordTooShort'));
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const updateData: UserUpdateData = {
+        isAdmin: formData.isAdmin,
+      };
+
+      if (formData.newPassword) {
+        updateData.newPassword = formData.newPassword;
+      }
+
+      const result = await updateUser(user.username, updateData);
+      if (result?.success) {
+        onEdit();
+      } else {
+        setError(result?.message || t('users.updateError'));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('users.updateError'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50">
+      <div className="bg-white p-8 rounded-lg shadow-xl max-w-md w-full mx-4">
+        <form onSubmit={handleSubmit}>
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">
+            {t('users.edit')} - {user.username}
+          </h2>
+
+          {error && (
+            <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-3 mb-4">
+              <p className="text-sm">{error}</p>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <input
+                type="checkbox"
+                id="isAdmin"
+                name="isAdmin"
+                checked={formData.isAdmin}
+                onChange={handleInputChange}
+                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                disabled={isSubmitting}
+              />
+              <label htmlFor="isAdmin" className="ml-2 block text-sm text-gray-700">
+                {t('users.adminRole')}
+              </label>
+            </div>
+
+            <div>
+              <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                {t('users.newPassword')}
+              </label>
+              <input
+                type="password"
+                id="newPassword"
+                name="newPassword"
+                value={formData.newPassword}
+                onChange={handleInputChange}
+                placeholder={t('users.newPasswordPlaceholder')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                disabled={isSubmitting}
+                minLength={6}
+              />
+            </div>
+
+            {formData.newPassword && (
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                  {t('users.confirmPassword')}
+                </label>
+                <input
+                  type="password"
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleInputChange}
+                  placeholder={t('users.confirmPasswordPlaceholder')}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  disabled={isSubmitting}
+                  minLength={6}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end space-x-3 mt-6">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="px-4 py-2 text-gray-700 bg-gray-200 rounded hover:bg-gray-300 transition-colors duration-200"
+              disabled={isSubmitting}
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? t('common.updating') : t('users.update')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditUserForm;