sourabhrealtime/src/LoginForm.jsx

ROBUST RICH TEXT EDITOR: Single-pane contentEditable with direct text selection formatting, speech features, undo/redo, professional UI - Perfect TipTap alternative

import React, { useState } from 'react';
import { useAuth } from './AuthProvider';

export const LoginForm = ({ onSuccess, showSignup = true }) => {
  const [isLogin, setIsLogin] = useState(true);
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    firstName: '',
    lastName: '',
    confirmPassword: ''
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const { login, signup } = useAuth();

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

    try {
      if (isLogin) {
        const result = await login(formData.email, formData.password);
        if (result.success) {
          onSuccess?.(result.user);
        } else {
          setError(result.error);
        }
      } else {
        if (formData.password !== formData.confirmPassword) {
          setError('Passwords do not match');
          return;
        }

        const result = await signup({
          email: formData.email,
          password: formData.password,
          firstName: formData.firstName,
          lastName: formData.lastName,
          role: 'editor'
        });

        if (result.success) {
          onSuccess?.(result.user);
        } else {
          setError(result.error);
        }
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="sourabhrealtime-auth-container">
      <div className="sourabhrealtime-auth-form">
        <h2>{isLogin ? 'Login' : 'Sign Up'}</h2>
        
        {error && (
          <div className="sourabhrealtime-error">
            {error}
          </div>
        )}

        <form onSubmit={handleSubmit}>
          {!isLogin && (
            <>
              <div className="sourabhrealtime-form-group">
                <label>First Name</label>
                <input
                  type="text"
                  name="firstName"
                  value={formData.firstName}
                  onChange={handleChange}
                  required
                  disabled={loading}
                />
              </div>

              <div className="sourabhrealtime-form-group">
                <label>Last Name</label>
                <input
                  type="text"
                  name="lastName"
                  value={formData.lastName}
                  onChange={handleChange}
                  required
                  disabled={loading}
                />
              </div>
            </>
          )}

          <div className="sourabhrealtime-form-group">
            <label>Email</label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              disabled={loading}
            />
          </div>

          <div className="sourabhrealtime-form-group">
            <label>Password</label>
            <input
              type="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              required
              disabled={loading}
            />
          </div>

          {!isLogin && (
            <div className="sourabhrealtime-form-group">
              <label>Confirm Password</label>
              <input
                type="password"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleChange}
                required
                disabled={loading}
              />
            </div>
          )}

          <button 
            type="submit" 
            className="sourabhrealtime-button sourabhrealtime-button-primary"
            disabled={loading}
          >
            {loading ? 'Please wait...' : (isLogin ? 'Login' : 'Sign Up')}
          </button>
        </form>

        {showSignup && (
          <div className="sourabhrealtime-auth-switch">
            <button
              type="button"
              onClick={() => setIsLogin(!isLogin)}
              className="sourabhrealtime-link-button"
              disabled={loading}
            >
              {isLogin ? "Don't have an account? Sign up" : "Already have an account? Login"}
            </button>
          </div>
        )}

        <div className="sourabhrealtime-demo-credentials">
          <h4>Demo Credentials:</h4>
          <p><strong>Super Admin:</strong> superadmin@example.com / SuperAdmin123!</p>
          <p><strong>Admin:</strong> admin@example.com / Admin123!</p>
        </div>
      </div>
    </div>
  );
};

export default LoginForm;