@samanhappy/mcphub 0.0.9 → 0.0.10

package/frontend/src/components/AddGroupForm.tsx

@@ -0,0 +1,132 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGroupData } from '@/hooks/useGroupData'
+import { useServerData } from '@/hooks/useServerData'
+import { GroupFormData, Server } from '@/types'
+import { ToggleGroup } from './ui/ToggleGroup'
+
+interface AddGroupFormProps {
+  onAdd: () => void
+  onCancel: () => void
+}
+
+const AddGroupForm = ({ onAdd, onCancel }: AddGroupFormProps) => {
+  const { t } = useTranslation()
+  const { createGroup } = useGroupData()
+  const { servers } = useServerData()
+  const [availableServers, setAvailableServers] = useState<Server[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const [formData, setFormData] = useState<GroupFormData>({
+    name: '',
+    description: '',
+    servers: []
+  })
+
+  useEffect(() => {
+    // Filter available servers (enabled only)
+    setAvailableServers(servers.filter(server => server.enabled !== false))
+  }, [servers])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      if (!formData.name.trim()) {
+        setError(t('groups.nameRequired'))
+        setIsSubmitting(false)
+        return
+      }
+
+      const result = await createGroup(formData.name, formData.description, formData.servers)
+      
+      if (!result) {
+        setError(t('groups.createError'))
+        setIsSubmitting(false)
+        return
+      }
+
+      onAdd()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg shadow-lg max-w-md w-full">
+        <div className="p-6">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">{t('groups.addNew')}</h2>
+          
+          {error && (
+            <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
+                {t('groups.name')} *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                placeholder={t('groups.namePlaceholder')}
+                required
+              />
+            </div>
+
+            <ToggleGroup
+              className="mb-6"
+              label={t('groups.servers')}
+              noOptionsText={t('groups.noServerOptions')}
+              values={formData.servers}
+              options={availableServers.map(server => ({
+                value: server.name,
+                label: server.name
+              }))}
+              onChange={(servers) => setFormData(prev => ({ ...prev, servers }))}
+            />
+
+            <div className="flex justify-end space-x-3">
+              <button
+                type="button"
+                onClick={onCancel}
+                className="px-4 py-2 text-gray-600 hover:text-gray-800"
+                disabled={isSubmitting}
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                type="submit"
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? t('common.submitting') : t('common.create')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AddGroupForm

package/frontend/src/components/AddServerForm.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ServerForm from './ServerForm'
+
+interface AddServerFormProps {
+  onAdd: () => void
+}
+
+const AddServerForm = ({ onAdd }: AddServerFormProps) => {
+  const { t } = useTranslation()
+  const [modalVisible, setModalVisible] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const toggleModal = () => {
+    setModalVisible(!modalVisible)
+    setError(null) // Clear any previous errors when toggling modal
+  }
+
+  const handleSubmit = async (payload: any) => {
+    try {
+      setError(null)
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch('/api/servers', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token || ''
+        },
+        body: JSON.stringify(payload),
+      })
+
+      const result = await response.json()
+
+      if (!response.ok) {
+        // Use specific error message from the response if available
+        if (result && result.message) {
+          setError(result.message)
+        } else if (response.status === 400) {
+          setError(t('server.invalidData'))
+        } else if (response.status === 409) {
+          setError(t('server.alreadyExists', { serverName: payload.name }))
+        } else {
+          setError(t('server.addError'))
+        }
+        return
+      }
+
+      setModalVisible(false)
+      onAdd()
+    } catch (err) {
+      console.error('Error adding server:', err)
+
+      // Use friendly error messages based on error type
+      if (!navigator.onLine) {
+        setError(t('errors.network'))
+      } else if (err instanceof TypeError && (
+        err.message.includes('NetworkError') ||
+        err.message.includes('Failed to fetch')
+      )) {
+        setError(t('errors.serverConnection'))
+      } else {
+        setError(t('errors.serverAdd'))
+      }
+    }
+  }
+
+  return (
+    <div>
+      <button
+        onClick={toggleModal}
+        className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
+      >
+        {t('server.addServer')}
+      </button>
+
+      {modalVisible && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+          <ServerForm
+            onSubmit={handleSubmit}
+            onCancel={toggleModal}
+            modalTitle={t('server.addServer')}
+            formError={error}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AddServerForm

package/frontend/src/components/ChangePasswordForm.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChangePasswordCredentials } from '../types';
+import { changePassword } from '../services/authService';
+
+interface ChangePasswordFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+const ChangePasswordForm: React.FC<ChangePasswordFormProps> = ({ onSuccess, onCancel }) => {
+  const { t } = useTranslation();
+  const [formData, setFormData] = useState<ChangePasswordCredentials>({
+    currentPassword: '',
+    newPassword: '',
+  });
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    if (name === 'confirmPassword') {
+      setConfirmPassword(value);
+    } else {
+      setFormData(prev => ({ ...prev, [name]: value }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    
+    // Validate passwords match
+    if (formData.newPassword !== confirmPassword) {
+      setError(t('auth.passwordsNotMatch'));
+      return;
+    }
+    
+    setIsLoading(true);
+    try {
+      const response = await changePassword(formData);
+      
+      if (response.success) {
+        setSuccess(true);
+        if (onSuccess) {
+          onSuccess();
+        }
+      } else {
+        setError(response.message || t('auth.changePasswordError'));
+      }
+    } catch (err) {
+      setError(t('auth.changePasswordError'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-xl font-bold mb-4">{t('auth.changePassword')}</h2>
+      
+      {success ? (
+        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+          {t('auth.changePasswordSuccess')}
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit}>
+          {error && (
+            <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+              {error}
+            </div>
+          )}
+          
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="currentPassword">
+              {t('auth.currentPassword')}
+            </label>
+            <input
+              type="password"
+              id="currentPassword"
+              name="currentPassword"
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={formData.currentPassword}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="newPassword">
+              {t('auth.newPassword')}
+            </label>
+            <input
+              type="password"
+              id="newPassword"
+              name="newPassword"
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={formData.newPassword}
+              onChange={handleChange}
+              required
+              minLength={6}
+            />
+          </div>
+          
+          <div className="mb-6">
+            <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="confirmPassword">
+              {t('auth.confirmPassword')}
+            </label>
+            <input
+              type="password"
+              id="confirmPassword"
+              name="confirmPassword"
+              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+              value={confirmPassword}
+              onChange={handleChange}
+              required
+              minLength={6}
+            />
+          </div>
+          
+          <div className="flex justify-end space-x-2">
+            {onCancel && (
+              <button
+                type="button"
+                onClick={onCancel}
+                disabled={isLoading}
+                className="py-2 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                {t('common.cancel')}
+              </button>
+            )}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              {isLoading ? (
+                <span className="flex items-center">
+                  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  {t('common.save')}
+                </span>
+              ) : (
+                t('common.save')
+              )}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+};
+
+export default ChangePasswordForm;

package/frontend/src/components/EditGroupForm.tsx

@@ -0,0 +1,149 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Group, GroupFormData, Server } from '@/types'
+import { useGroupData } from '@/hooks/useGroupData'
+import { useServerData } from '@/hooks/useServerData'
+import { ToggleGroup } from './ui/ToggleGroup'
+
+interface EditGroupFormProps {
+  group: Group
+  onEdit: () => void
+  onCancel: () => void
+}
+
+const EditGroupForm = ({ group, onEdit, onCancel }: EditGroupFormProps) => {
+  const { t } = useTranslation()
+  const { updateGroup } = useGroupData()
+  const { servers } = useServerData()
+  const [availableServers, setAvailableServers] = useState<Server[]>([])
+  const [error, setError] = useState<string | null>(null)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const [formData, setFormData] = useState<GroupFormData>({
+    name: group.name,
+    description: group.description || '',
+    servers: group.servers || []
+  })
+
+  useEffect(() => {
+    // Filter available servers (enabled only)
+    setAvailableServers(servers.filter(server => server.enabled !== false))
+  }, [servers])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }))
+  }
+
+  const handleServerToggle = (serverName: string) => {
+    setFormData(prev => {
+      const isSelected = prev.servers.includes(serverName)
+      return {
+        ...prev,
+        servers: isSelected 
+          ? prev.servers.filter(name => name !== serverName)
+          : [...prev.servers, serverName]
+      }
+    })
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setError(null)
+
+    try {
+      if (!formData.name.trim()) {
+        setError(t('groups.nameRequired'))
+        setIsSubmitting(false)
+        return
+      }
+
+      const result = await updateGroup(group.id, {
+        name: formData.name,
+        description: formData.description,
+        servers: formData.servers
+      })
+      
+      if (!result) {
+        setError(t('groups.updateError'))
+        setIsSubmitting(false)
+        return
+      }
+
+      onEdit()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <div className="bg-white rounded-lg shadow-lg max-w-md w-full">
+        <div className="p-6">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">{t('groups.edit')}</h2>
+          
+          {error && (
+            <div className="mb-4 p-3 bg-red-100 text-red-700 rounded">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
+                {t('groups.name')} *
+              </label>
+              <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                placeholder={t('groups.namePlaceholder')}
+                required
+              />
+            </div>
+
+            <ToggleGroup
+              className="mb-6"
+              label={t('groups.servers')}
+              noOptionsText={t('groups.noServerOptions')}
+              values={formData.servers}
+              options={availableServers.map(server => ({
+                value: server.name,
+                label: server.name
+              }))}
+              onChange={(servers) => setFormData(prev => ({ ...prev, servers }))}
+            />
+
+            <div className="flex justify-end space-x-3">
+              <button
+                type="button"
+                onClick={onCancel}
+                className="px-4 py-2 text-gray-600 hover:text-gray-800"
+                disabled={isSubmitting}
+              >
+                {t('common.cancel')}
+              </button>
+              <button
+                type="submit"
+                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? t('common.submitting') : t('common.save')}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EditGroupForm

package/frontend/src/components/EditServerForm.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Server } from '@/types'
+import ServerForm from './ServerForm'
+
+interface EditServerFormProps {
+  server: Server
+  onEdit: () => void
+  onCancel: () => void
+}
+
+const EditServerForm = ({ server, onEdit, onCancel }: EditServerFormProps) => {
+  const { t } = useTranslation()
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (payload: any) => {
+    try {
+      setError(null)
+      const token = localStorage.getItem('mcphub_token');
+      const response = await fetch(`/api/servers/${server.name}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-auth-token': token || ''
+        },
+        body: JSON.stringify(payload),
+      })
+
+      const result = await response.json()
+
+      if (!response.ok) {
+        // Use specific error message from the response if available
+        if (result && result.message) {
+          setError(result.message)
+        } else if (response.status === 404) {
+          setError(t('server.notFound', { serverName: server.name }))
+        } else if (response.status === 400) {
+          setError(t('server.invalidData'))
+        } else {
+          setError(t('server.updateError', { serverName: server.name }))
+        }
+        return
+      }
+
+      onEdit()
+    } catch (err) {
+      console.error('Error updating server:', err)
+
+      // Use friendly error messages based on error type
+      if (!navigator.onLine) {
+        setError(t('errors.network'))
+      } else if (err instanceof TypeError && (
+        err.message.includes('NetworkError') ||
+        err.message.includes('Failed to fetch')
+      )) {
+        setError(t('errors.serverConnection'))
+      } else {
+        setError(t('errors.serverUpdate', { serverName: server.name }))
+      }
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+      <ServerForm
+        onSubmit={handleSubmit}
+        onCancel={onCancel}
+        initialData={server}
+        modalTitle={t('server.editTitle', { serverName: server.name })}
+        formError={error}
+      />
+    </div>
+  )
+}
+
+export default EditServerForm