src/Index2.jsx - master - prost0nekit/MyMail

src/Index2.jsx
140 строк4 KB
cxlevi
Initial commit — MyMail project
09 июн 2026, 17:14
09 июн 2026, 17:149e6cd7e
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { supabase } from './supabaseClient';
import bcrypt from 'bcryptjs';
import './index2.css';

function Index2() {
  const navigate = useNavigate();
  
  const [formData, setFormData] = useState({
    username: '',
    name: '',
    password: '',
    confirm_password: ''
  });

  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    if (formData.password !== formData.confirm_password) {
      setError('Пароли не совпадают!');
      setLoading(false);
      return;
    }

    if (formData.password.length < 6) {
      setError('Пароль должен быть не менее 6 символов');
      setLoading(false);
      return;
    }

    try {
      const fullEmail = `${formData.username}@myservice.com`;
      const hashedPassword = await bcrypt.hash(formData.password, 10);

      const { data, error } = await supabase
        .from('users')
        .insert([
          {
            email: fullEmail,
            name: formData.name,
            password: hashedPassword
          }
        ]);

      if (error) {
        if (error.code === '23505') {
          setError('Пользователь с таким логином уже существует!');
        } else {
          setError('Ошибка: ' + error.message);
        }
      } else {
        alert(`Регистрация успешна!\nВаш email: ${fullEmail}`);
        navigate('/');
      }
    } catch (err) {
      setError('Произошла ошибка при регистрации');
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div className="reg-container">
      <div className="reg-card">
        <h2 className="reg-title">Регистрация</h2>
        
        {error && <div className="reg-error">{error}</div>}
        
        <form onSubmit={handleSubmit} className="reg-form">
          <input 
            type="text" 
            name="username"
            className="reg-input" 
            placeholder="Введите логин:"
            value={formData.username}
            onChange={handleChange}
            required
          />
          
          <input 
            type="text" 
            name="name"
            className="reg-input" 
            placeholder="Введите имя:"
            value={formData.name}
            onChange={handleChange}
            required
          />
          
          <input 
            type="password" 
            name="password"
            className="reg-input" 
            placeholder="Введите пароль:"
            value={formData.password}
            onChange={handleChange}
            required
          />
          
          <input 
            type="password" 
            name="confirm_password"
            className="reg-input" 
            placeholder="Введите повторно пароль:"
            value={formData.confirm_password}
            onChange={handleChange}
            required
          />
          
          <button 
            type="submit" 
            className="reg-btn"
            disabled={loading}
          >
            {loading ? 'Регистрация...' : 'Зарегистрироваться'}
          </button>
          
          <Link to="/login" className="reg-link">
            Вернуться к авторизации
          </Link>
        </form>
      </div>
    </div>
  );
}

export default Index2;