front/src/components/SecurityManagementCard.jsx - main - TimurIsm/OpenEyes

front/src/components/SecurityManagementCard.jsx
160 строк10 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React from 'react';

const SecurityManagementCard = ({ 
    activeAction,
    setActiveAction,
    isLoading,
    user,
    isVerified,
    onPasswordChangeConfirm,
    onDeleteAccountConfirm
}) => {
    return (
        <div className="bg-white border border-gray-300 rounded-lg shadow-md p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-6 pb-2 border-b border-gray-300">
                Безопасность и управление
            </h3>
            
            <div className="flex flex-col sm:flex-row gap-3 mb-8">
                <button
                    onClick={() => setActiveAction(activeAction === 'change-password' ? null : 'change-password')}
                    disabled={isLoading}
                    className={`flex items-center justify-center gap-2 px-4 py-3 border rounded-lg font-medium text-sm transition-all duration-200
                        ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
                        ${activeAction === 'change-password' ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400'}
                    `}
                >
                    <svg 
                        className={`w-5 h-5 ${activeAction === 'change-password' ? 'text-blue-600' : 'text-gray-500'}`} 
                        fill="currentColor" 
                        viewBox="0 0 20 20"
                    >
                        <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
                    </svg>
                    Смена пароля
                </button>
                
                <button
                    onClick={() => setActiveAction(activeAction === 'delete-account' ? null : 'delete-account')}
                    disabled={isLoading}
                    className={`flex items-center justify-center gap-2 px-4 py-3 border rounded-lg font-medium text-sm transition-all duration-200
                        ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
                        ${activeAction === 'delete-account' ? 'border-red-500 bg-red-50 text-red-700' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400'}
                    `}
                >
                    <svg 
                        className={`w-5 h-5 ${activeAction === 'delete-account' ? 'text-red-600' : 'text-gray-500'}`} 
                        fill="currentColor" 
                        viewBox="0 0 20 20"
                    >
                        <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
                    </svg>
                    Удаление аккаунта
                </button>
            </div>

            {activeAction === 'change-password' && (
                <div className="space-y-4 animate-fadeIn">
                    <div className="space-y-4">
                        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <div className="flex items-start">
                                <svg className="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                                </svg>
                                <div>
                                    <p className="font-medium text-blue-800 mb-2">Важно:</p>
                                    <ul className="text-sm text-blue-700 space-y-1 list-disc pl-4">
                                        <li>На ваш email будет отправлена ссылка для изменения пароля</li>
                                        <li>Ссылка действительна 1 час</li>
                                        <li>После отправки запроса вы будете автоматически выведены из системы</li>
                                        <li>При переходе по ссылке вы попадёте на страницу создания нового пароля</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">
                                Email для отправки ссылки
                            </label>
                            <div className="p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-700">
                                {user?.email || 'Не указан'}
                            </div>
                            <p className="text-xs text-gray-500">
                                Ссылка для смены пароля будет отправлена на email вашего аккаунта
                            </p>
                        </div>
                        
                        <div className="flex justify-center pt-4">
                            <button
                                onClick={onPasswordChangeConfirm}
                                disabled={isLoading}
                                className="flex items-center justify-center gap-2 px-6 py-3 border rounded-lg font-medium text-sm transition-all duration-200
                                    border-blue-500 bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {isLoading ? 'Обработка...' : 'Отправить запрос на изменение пароля'}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {activeAction === 'delete-account' && (
                <div className="space-y-4 animate-fadeIn">
                    <div className="space-y-4">
                        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                            <div className="flex items-start">
                                <svg className="w-5 h-5 text-red-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                                </svg>
                                <div>
                                    <p className="font-medium text-red-800 mb-2">Важно:</p>
                                    <ul className="text-sm text-red-700 space-y-1 list-disc pl-4">
                                        <li>На ваш email будет отправлена ссылка для подтверждения удаления</li>
                                        <li>Ссылка для удаления действительна 24 часа</li>
                                        <li>Ваша учетная запись и все связанные с ней данные будут удалены безвозвратно</li>
                                        <li>Восстановление аккаунта невозможно</li>
                                        <li>После отправки запроса вы будете автоматически выведены из системы</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div className="space-y-2">
                            <label className="block text-sm font-medium text-gray-700">
                                Email для отправки ссылки
                            </label>
                            <div className="p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-700">
                                {user?.email || 'Не указан'}
                            </div>
                            <p className="text-xs text-gray-500">
                                Ссылка для подтверждения удаления будет отправлена на email вашего аккаунта
                            </p>
                        </div>
                        
                        <div className="flex justify-center pt-2">
                            <button
                                onClick={onDeleteAccountConfirm}
                                disabled={isLoading}
                                className={`flex items-center justify-center gap-2 px-6 py-3 border rounded-lg font-medium text-sm transition-all duration-200
                                    ${isLoading ? 'opacity-50 cursor-not-allowed' : ''} border-blue-500 bg-blue-600 text-white hover:bg-blue-700`}
                            >
                                {isLoading ? 'Обработка...' : 'Отправить запрос на удаление'}
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {!activeAction && (
                <div className="text-center py-8 text-gray-500">
                    <svg className="w-16 h-16 mx-auto mb-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                    </svg>
                </div>
            )}
        </div>
    );
};

export default SecurityManagementCard;