sourabhrealtime/src/signup-component.js

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';

const SUPABASE_URL = "https://supabase.merai.app";
const SERVICE_ROLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJzZXJ2aWNlX3JvbGUiLAogICAgImlzcyI6ICJzdXBhYmFzZS1kZW1vIiwKICAgICJpYXQiOiAxNjQxNzY5MjAwLAogICAgImV4cCI6IDE3OTk1MzU2MDAKfQ.DaYlNEoUrrEn2Ig7tqibS-PHK5vgusbcbo7X36XVt4Q";

const SignupForm = ({ onSignupSuccess, onBackToLogin }) => {
  const [signupForm, setSignupForm] = useState({
    email: '',
    password: '',
    name: '',
    role: 'editor'
  });
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');

    try {
      const response = await fetch(`${SUPABASE_URL}/auth/v1/admin/users`, {
        method: 'POST',
        headers: {
          'apikey': SERVICE_ROLE_KEY,
          'Authorization': `Bearer ${SERVICE_ROLE_KEY}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          email: signupForm.email,
          password: signupForm.password,
          user_metadata: {
            name: signupForm.name,
            role: signupForm.role
          }
        })
      });

      if (response.ok) {
        setMessage('Account created successfully! You can now login.');
        setTimeout(() => {
          onSignupSuccess();
        }, 2000);
      } else {
        const error = await response.json();
        setMessage(error.message || 'Signup failed');
      }
    } catch (error) {
      setMessage('Signup failed - check connection');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
    }}>
      <div style={{
        background: 'white',
        padding: '40px',
        borderRadius: '20px',
        boxShadow: '0 20px 40px rgba(0,0,0,0.1)',
        width: '400px',
        textAlign: 'center'
      }}>
        <h1 style={{ marginBottom: '30px', color: '#333' }}>🚀 Create Account</h1>
        
        <form onSubmit={handleSignup}>
          <input
            type="text"
            placeholder="Full Name"
            value={signupForm.name}
            onChange={(e) => setSignupForm(prev => ({ ...prev, name: e.target.value }))}
            style={{
              width: '100%',
              padding: '12px',
              margin: '10px 0',
              border: '2px solid #e9ecef',
              borderRadius: '8px',
              fontSize: '16px'
            }}
            required
          />
          
          <input
            type="email"
            placeholder="Email"
            value={signupForm.email}
            onChange={(e) => setSignupForm(prev => ({ ...prev, email: e.target.value }))}
            style={{
              width: '100%',
              padding: '12px',
              margin: '10px 0',
              border: '2px solid #e9ecef',
              borderRadius: '8px',
              fontSize: '16px'
            }}
            required
          />
          
          <input
            type="password"
            placeholder="Password"
            value={signupForm.password}
            onChange={(e) => setSignupForm(prev => ({ ...prev, password: e.target.value }))}
            style={{
              width: '100%',
              padding: '12px',
              margin: '10px 0',
              border: '2px solid #e9ecef',
              borderRadius: '8px',
              fontSize: '16px'
            }}
            required
          />
          
          <select
            value={signupForm.role}
            onChange={(e) => setSignupForm(prev => ({ ...prev, role: e.target.value }))}
            style={{
              width: '100%',
              padding: '12px',
              margin: '10px 0',
              border: '2px solid #e9ecef',
              borderRadius: '8px',
              fontSize: '16px'
            }}
          >
            <option value="editor">Editor</option>
            <option value="admin">Admin</option>
            <option value="super_admin">Super Admin</option>
          </select>
          
          <button
            type="submit"
            disabled={loading}
            style={{
              width: '100%',
              padding: '12px',
              background: loading ? '#6c757d' : '#28a745',
              color: 'white',
              border: 'none',
              borderRadius: '8px',
              fontSize: '16px',
              cursor: loading ? 'not-allowed' : 'pointer',
              marginTop: '10px'
            }}
          >
            {loading ? 'Creating Account...' : 'Create Account'}
          </button>
        </form>
        
        {message && (
          <div style={{
            marginTop: '15px',
            padding: '10px',
            borderRadius: '8px',
            background: message.includes('success') ? '#d4edda' : '#f8d7da',
            color: message.includes('success') ? '#155724' : '#721c24',
            fontSize: '14px'
          }}>
            {message}
          </div>
        )}
        
        <button
          onClick={onBackToLogin}
          style={{
            marginTop: '20px',
            background: 'none',
            border: 'none',
            color: '#007bff',
            cursor: 'pointer',
            textDecoration: 'underline'
          }}
        >
          Back to Login
        </button>
      </div>
    </div>
  );
};

export default SignupForm;