@samanhappy/mcphub 0.0.7 → 0.0.9

package/frontend/src/pages/MarketPage.tsx

@@ -1,356 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { MarketServer } from '@/types';
-import { useMarketData } from '@/hooks/useMarketData';
-import { useToast } from '@/contexts/ToastContext';
-import MarketServerCard from '@/components/MarketServerCard';
-import MarketServerDetail from '@/components/MarketServerDetail';
-import Pagination from '@/components/ui/Pagination';
-
-const MarketPage: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { serverName } = useParams<{ serverName?: string }>();
-  const { showToast } = useToast();
-  
-  const {
-    servers,
-    allServers,
-    categories,
-    tags,
-    loading,
-    error,
-    setError,
-    searchServers,
-    filterByCategory,
-    filterByTag,
-    selectedCategory,
-    selectedTag,
-    installServer,
-    fetchServerByName,
-    isServerInstalled,
-    // Pagination
-    currentPage,
-    totalPages,
-    changePage,
-    serversPerPage,
-    changeServersPerPage
-  } = useMarketData();
-
-  const [selectedServer, setSelectedServer] = useState<MarketServer | null>(null);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [installing, setInstalling] = useState(false);
-  const [showTags, setShowTags] = useState(false);
-
-  // Load server details if a server name is in the URL
-  useEffect(() => {
-    const loadServerDetails = async () => {
-      if (serverName) {
-        const server = await fetchServerByName(serverName);
-        if (server) {
-          setSelectedServer(server);
-        } else {
-          // If server not found, navigate back to market page
-          navigate('/market');
-        }
-      } else {
-        setSelectedServer(null);
-      }
-    };
-    
-    loadServerDetails();
-  }, [serverName, fetchServerByName, navigate]);
-
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    searchServers(searchQuery);
-  };
-
-  const handleCategoryClick = (category: string) => {
-    filterByCategory(category);
-  };
-
-  const handleTagClick = (tag: string) => {
-    filterByTag(tag);
-  };
-
-  const handleClearFilters = () => {
-    setSearchQuery('');
-    filterByCategory('');
-    filterByTag('');
-  };
-
-  const handleServerClick = (server: MarketServer) => {
-    navigate(`/market/${server.name}`);
-  };
-
-  const handleBackToList = () => {
-    navigate('/market');
-  };
-
-  const handleInstall = async (server: MarketServer) => {
-    try {
-      setInstalling(true);
-      const success = await installServer(server);
-      if (success) {
-        // Show success message using toast instead of alert
-        showToast(t('market.installSuccess', { serverName: server.display_name }), 'success');
-      }
-    } finally {
-      setInstalling(false);
-    }
-  };
-
-  const handlePageChange = (page: number) => {
-    changePage(page);
-    // Scroll to top of page when changing pages
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  const handleChangeItemsPerPage = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = parseInt(e.target.value, 10);
-    changeServersPerPage(newValue);
-  };
-
-  const toggleTagsVisibility = () => {
-    setShowTags(!showTags);
-  };
-
-  // Render detailed view if a server is selected
-  if (selectedServer) {
-    return (
-      <MarketServerDetail
-        server={selectedServer}
-        onBack={handleBackToList}
-        onInstall={handleInstall}
-        installing={installing}
-        isInstalled={isServerInstalled(selectedServer.name)}
-      />
-    );
-  }
-
-  return (
-    <div>
-      <div className="flex justify-between items-center mb-8">
-        <div>
-          <h1 className="text-2xl font-bold text-gray-900 flex items-center">
-            {t('market.title')}
-            <span className="text-sm text-gray-500 font-normal ml-2">{t('pages.market.title').split(' - ')[1]}</span>
-          </h1>
-        </div>
-      </div>
-
-      {error && (
-        <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
-          <div className="flex items-center justify-between">
-            <p>{error}</p>
-            <button
-              onClick={() => setError(null)}
-              className="text-red-700 hover:text-red-900"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 01.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Search bar at the top */}
-      <div className="bg-white shadow rounded-lg p-6 mb-6">
-        <form onSubmit={handleSearch} className="flex space-x-4 mb-0">
-          <div className="flex-grow">
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder={t('market.searchPlaceholder')}
-              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-            />
-          </div>
-          <button
-            type="submit"
-            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded"
-          >
-            {t('market.search')}
-          </button>
-          {(searchQuery || selectedCategory || selectedTag) && (
-            <button
-              type="button"
-              onClick={handleClearFilters}
-              className="border border-gray-300 text-gray-700 font-medium py-2 px-4 rounded hover:bg-gray-50"
-            >
-              {t('market.clearFilters')}
-            </button>
-          )}
-        </form>
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-6">
-        {/* Left sidebar for filters (without search) */}
-        <div className="md:w-48 flex-shrink-0">
-          <div className="bg-white shadow rounded-lg p-4 mb-6 sticky top-4">
-            {/* Categories */}
-            {categories.length > 0 ? (
-              <div className="mb-6">
-                <div className="flex justify-between items-center mb-3">
-                  <h3 className="font-medium text-gray-900">{t('market.categories')}</h3>
-                  {selectedCategory && (
-                    <span className="text-xs text-blue-600 cursor-pointer hover:underline" onClick={() => filterByCategory('')}>
-                      {t('market.clearCategoryFilter')}
-                    </span>
-                  )}
-                </div>
-                <div className="flex flex-col gap-2">
-                  {categories.map((category) => (
-                    <button
-                      key={category}
-                      onClick={() => handleCategoryClick(category)}
-                      className={`px-3 py-2 rounded text-sm text-left ${selectedCategory === category
-                        ? 'bg-blue-100 text-blue-800 font-medium'
-                        : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
-                        }`}
-                    >
-                      {category}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ) : loading ? (
-              <div className="mb-6">
-                <div className="mb-3">
-                  <h3 className="font-medium text-gray-900">{t('market.categories')}</h3>
-                </div>
-                <div className="flex flex-col gap-2 items-center py-4">
-                  <svg className="animate-spin h-6 w-6 text-blue-500 mb-2" 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>
-                  <p className="text-sm text-gray-600">{t('app.loading')}</p>
-                </div>
-              </div>
-            ) : (
-              <div className="mb-6">
-                <div className="mb-3">
-                  <h3 className="font-medium text-gray-900">{t('market.categories')}</h3>
-                </div>
-                <p className="text-sm text-gray-600 py-2">{t('market.noCategories')}</p>
-              </div>
-            )}
-
-            {/* Tags */}
-            {/* {tags.length > 0 && (
-              <div className="mb-4">
-                <div className="flex justify-between items-center mb-3">
-                  <div className="flex items-center">
-                    <h3 className="font-medium text-gray-900">{t('market.tags')}</h3>
-                    <button
-                      onClick={toggleTagsVisibility}
-                      className="ml-2 p-1 text-gray-600 hover:text-blue-600 hover:bg-gray-100 rounded-full"
-                      aria-label={showTags ? t('market.hideTags') : t('market.showTags')}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" className={`h-5 w-5 transition-transform ${showTags ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
-                        <path fillRule="evenodd" d="M5.293 7.293a1 1 011.414 0L10 10.586l3.293-3.293a1 1 011.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 010-1.414z" clipRule="evenodd" />
-                      </svg>
-                    </button>
-                  </div>
-                  {selectedTag && (
-                    <span className="text-xs text-blue-600 cursor-pointer hover:underline" onClick={() => filterByTag('')}>
-                      {t('market.clearTagFilter')}
-                    </span>
-                  )}
-                </div>
-                {showTags && (
-                  <div className="flex flex-wrap gap-2 max-h-48 overflow-y-auto pr-2">
-                    {tags.map((tag) => (
-                      <button
-                        key={tag}
-                        onClick={() => handleTagClick(tag)}
-                        className={`px-2 py-1 rounded text-xs ${selectedTag === tag
-                            ? 'bg-green-100 text-green-800 font-medium'
-                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                          }`}
-                      >
-                        #{tag}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )} */}
-          </div>
-        </div>
-
-        {/* Main content area */}
-        <div className="flex-grow">
-          {loading ? (
-            <div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
-              <div className="flex flex-col items-center">
-                <svg className="animate-spin h-10 w-10 text-blue-500 mb-4" 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>
-                <p className="text-gray-600">{t('app.loading')}</p>
-              </div>
-            </div>
-          ) : servers.length === 0 ? (
-            <div className="bg-white shadow rounded-lg p-6">
-              <p className="text-gray-600">{t('market.noServers')}</p>
-            </div>
-          ) : (
-            <>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-                {servers.map((server, index) => (
-                  <MarketServerCard
-                    key={index}
-                    server={server}
-                    onClick={handleServerClick}
-                  />
-                ))}
-              </div>
-
-              <div className="flex justify-between items-center mb-4">
-                <div className="text-sm text-gray-500">
-                  {t('market.showing', {
-                    from: (currentPage - 1) * serversPerPage + 1,
-                    to: Math.min(currentPage * serversPerPage, allServers.length),
-                    total: allServers.length
-                  })}
-                </div>
-                <Pagination
-                  currentPage={currentPage}
-                  totalPages={totalPages}
-                  onPageChange={handlePageChange}
-                />
-                <div className="flex items-center space-x-2">
-                  <label htmlFor="perPage" className="text-sm text-gray-600">
-                    {t('market.perPage')}:
-                  </label>
-                  <select
-                    id="perPage"
-                    value={serversPerPage}
-                    onChange={handleChangeItemsPerPage}
-                    className="border rounded p-1 text-sm"
-                  >
-                    <option value="6">6</option>
-                    <option value="9">9</option>
-                    <option value="12">12</option>
-                    <option value="24">24</option>
-                  </select>
-                </div>
-              </div>
-
-              <div className="mt-6">
-
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default MarketPage;

package/frontend/src/pages/ServersPage.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Server } from '@/types';
-import ServerCard from '@/components/ServerCard';
-import AddServerForm from '@/components/AddServerForm';
-import EditServerForm from '@/components/EditServerForm';
-import { useServerData } from '@/hooks/useServerData';
-
-const ServersPage: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { 
-    servers, 
-    error, 
-    setError, 
-    isLoading, 
-    handleServerAdd, 
-    handleServerEdit, 
-    handleServerRemove, 
-    handleServerToggle,
-    triggerRefresh 
-  } = useServerData();
-  const [editingServer, setEditingServer] = useState<Server | null>(null);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-
-  const handleEditClick = async (server: Server) => {
-    const fullServerData = await handleServerEdit(server);
-    if (fullServerData) {
-      setEditingServer(fullServerData);
-    }
-  };
-
-  const handleEditComplete = () => {
-    setEditingServer(null);
-    triggerRefresh();
-  };
-
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    try {
-      triggerRefresh();
-      // Add a slight delay to make the spinner visible
-      await new Promise(resolve => setTimeout(resolve, 500));
-    } finally {
-      setIsRefreshing(false);
-    }
-  };
-
-  return (
-    <div>
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
-        <div className="flex space-x-4">
-          <button
-            onClick={() => navigate('/market')}
-            className="px-4 py-2 bg-emerald-100 text-emerald-800 rounded hover:bg-emerald-200 flex items-center"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z" />
-            </svg>
-            {t('nav.market')}
-          </button>
-          <AddServerForm onAdd={handleServerAdd} />
-          <button
-            onClick={handleRefresh}
-            disabled={isRefreshing}
-            className={`px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center ${isRefreshing ? 'opacity-70 cursor-not-allowed' : ''}`}
-          >
-            {isRefreshing ? (
-              <svg className="animate-spin h-4 w-4 mr-2" 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>
-            ) : (
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
-              </svg>
-            )}
-            {t('common.refresh')}
-          </button>
-        </div>
-      </div>
-
-      {error && (
-        <div className="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-sm">
-          <div className="flex items-center justify-between">
-            <div>
-              <h3 className="text-red-600 text-lg font-medium">{t('app.error')}</h3>
-              <p className="text-gray-600 mt-1">{error}</p>
-            </div>
-            <button
-              onClick={() => setError(null)}
-              className="ml-4 text-gray-500 hover:text-gray-700"
-              aria-label={t('app.closeButton')}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 111.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      )}
-
-      {isLoading ? (
-        <div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
-          <div className="flex flex-col items-center">
-            <svg className="animate-spin h-10 w-10 text-blue-500 mb-4" 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>
-            <p className="text-gray-600">{t('app.loading')}</p>
-          </div>
-        </div>
-      ) : servers.length === 0 ? (
-        <div className="bg-white shadow rounded-lg p-6">
-          <p className="text-gray-600">{t('app.noServers')}</p>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          {servers.map((server, index) => (
-            <ServerCard
-              key={index}
-              server={server}
-              onRemove={handleServerRemove}
-              onEdit={handleEditClick}
-              onToggle={handleServerToggle}
-            />
-          ))}
-        </div>
-      )}
-
-      {editingServer && (
-        <EditServerForm
-          server={editingServer}
-          onEdit={handleEditComplete}
-          onCancel={() => setEditingServer(null)}
-        />
-      )}
-    </div>
-  );
-};
-
-export default ServersPage;

package/frontend/src/pages/SettingsPage.tsx

@@ -1,149 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import ChangePasswordForm from '@/components/ChangePasswordForm';
-import { Switch } from '@/components/ui/ToggleGroup';
-import { useSettingsData } from '@/hooks/useSettingsData';
-import { useToast } from '@/contexts/ToastContext';
-
-const SettingsPage: React.FC = () => {
-  const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
-  const { showToast } = useToast();
-  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
-
-  // Update current language when it changes
-  useEffect(() => {
-    setCurrentLanguage(i18n.language);
-  }, [i18n.language]);
-
-  const {
-    routingConfig,
-    loading,
-    updateRoutingConfig
-  } = useSettingsData();
-
-  const [sectionsVisible, setSectionsVisible] = useState({
-    routingConfig: false,
-    password: false
-  });
-
-  const toggleSection = (section: 'routingConfig' | 'password') => {
-    setSectionsVisible(prev => ({
-      ...prev,
-      [section]: !prev[section]
-    }));
-  };
-
-  const handleRoutingConfigChange = async (key: 'enableGlobalRoute' | 'enableGroupNameRoute', value: boolean) => {
-    await updateRoutingConfig(key, value);
-  };
-
-  const handlePasswordChangeSuccess = () => {
-    setTimeout(() => {
-      navigate('/');
-    }, 2000);
-  };
-
-  const handleLanguageChange = (lang: string) => {
-    localStorage.setItem('i18nextLng', lang);
-    window.location.reload();
-  };
-
-  return (
-    <div className="max-w-4xl mx-auto">
-      <h1 className="text-2xl font-bold text-gray-900 mb-8">{t('pages.settings.title')}</h1>
-
-      {/* Language Settings */}
-      <div className="bg-white shadow rounded-lg p-6 mb-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xl font-semibold text-gray-800">{t('pages.settings.language')}</h2>
-          <div className="flex space-x-3">
-            <button
-              className={`px-3 py-1.5 rounded-md transition-colors text-sm ${
-                currentLanguage.startsWith('en') 
-                  ? 'bg-blue-500 text-white' 
-                  : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
-              }`}
-              onClick={() => handleLanguageChange('en')}
-            >
-              English
-            </button>
-            <button
-              className={`px-3 py-1.5 rounded-md transition-colors text-sm ${
-                currentLanguage.startsWith('zh') 
-                  ? 'bg-blue-500 text-white' 
-                  : 'bg-blue-100 text-blue-800 hover:bg-blue-200'
-              }`}
-              onClick={() => handleLanguageChange('zh')}
-            >
-              中文
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Route Configuration Settings */}
-      <div className="bg-white shadow rounded-lg p-6 mb-6">
-        <div
-          className="flex justify-between items-center cursor-pointer"
-          onClick={() => toggleSection('routingConfig')}
-        >
-          <h2 className="text-xl font-semibold text-gray-800">{t('pages.settings.routeConfig')}</h2>
-          <span className="text-gray-500">
-            {sectionsVisible.routingConfig ? '▼' : '►'}
-          </span>
-        </div>
-
-        {sectionsVisible.routingConfig && (
-          <div className="space-y-4 mt-4">
-            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
-              <div>
-                <h3 className="font-medium text-gray-700">{t('settings.enableGlobalRoute')}</h3>
-                <p className="text-sm text-gray-500">{t('settings.enableGlobalRouteDescription')}</p>
-              </div>
-              <Switch
-                disabled={loading}
-                checked={routingConfig.enableGlobalRoute}
-                onCheckedChange={(checked) => handleRoutingConfigChange('enableGlobalRoute', checked)}
-              />
-            </div>
-
-            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
-              <div>
-                <h3 className="font-medium text-gray-700">{t('settings.enableGroupNameRoute')}</h3>
-                <p className="text-sm text-gray-500">{t('settings.enableGroupNameRouteDescription')}</p>
-              </div>
-              <Switch
-                disabled={loading}
-                checked={routingConfig.enableGroupNameRoute}
-                onCheckedChange={(checked) => handleRoutingConfigChange('enableGroupNameRoute', checked)}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Change Password */}
-      <div className="bg-white shadow rounded-lg p-6 mb-6">
-        <div
-          className="flex justify-between items-center cursor-pointer"
-          onClick={() => toggleSection('password')}
-        >
-          <h2 className="text-xl font-semibold text-gray-800">{t('auth.changePassword')}</h2>
-          <span className="text-gray-500">
-            {sectionsVisible.password ? '▼' : '►'}
-          </span>
-        </div>
-
-        {sectionsVisible.password && (
-          <div className="max-w-lg mt-4">
-            <ChangePasswordForm onSuccess={handlePasswordChangeSuccess} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SettingsPage;