@pixygon/auth 1.0.0

package/src/components/RegisterForm.tsx

@@ -0,0 +1,463 @@
+/**
+ * @pixygon/auth - Register Form Component
+ * Branded registration form for Pixygon Account
+ */
+
+import { useState, useCallback, type FormEvent } from 'react';
+import { useAuth } from '../hooks';
+import type { RegisterFormProps, AuthError } from '../types';
+
+export function RegisterForm({
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = '',
+}: RegisterFormProps) {
+  const { register, isLoading, error } = useAuth();
+
+  const [userName, setUserName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const validateForm = useCallback(() => {
+    if (!userName.trim()) {
+      setLocalError('Please enter a username');
+      return false;
+    }
+
+    if (userName.length < 3) {
+      setLocalError('Username must be at least 3 characters');
+      return false;
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(userName)) {
+      setLocalError('Username can only contain letters, numbers, underscores, and hyphens');
+      return false;
+    }
+
+    if (!email.trim()) {
+      setLocalError('Please enter your email');
+      return false;
+    }
+
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setLocalError('Please enter a valid email address');
+      return false;
+    }
+
+    if (!password) {
+      setLocalError('Please enter a password');
+      return false;
+    }
+
+    if (password.length < 6) {
+      setLocalError('Password must be at least 6 characters');
+      return false;
+    }
+
+    if (password !== confirmPassword) {
+      setLocalError('Passwords do not match');
+      return false;
+    }
+
+    return true;
+  }, [userName, email, password, confirmPassword]);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      setLocalError(null);
+
+      if (!validateForm()) return;
+
+      try {
+        const response = await register({
+          userName: userName.trim(),
+          email: email.trim().toLowerCase(),
+          password,
+          confirmPassword,
+        });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err as AuthError;
+        onError?.(authError);
+      }
+    },
+    [userName, email, password, confirmPassword, register, validateForm, onSuccess, onError]
+  );
+
+  const displayError = localError || error?.message;
+
+  // Password strength indicator
+  const getPasswordStrength = (pwd: string): { level: number; label: string } => {
+    if (!pwd) return { level: 0, label: '' };
+    let strength = 0;
+    if (pwd.length >= 6) strength++;
+    if (pwd.length >= 10) strength++;
+    if (/[A-Z]/.test(pwd)) strength++;
+    if (/[0-9]/.test(pwd)) strength++;
+    if (/[^A-Za-z0-9]/.test(pwd)) strength++;
+
+    if (strength <= 2) return { level: 1, label: 'Weak' };
+    if (strength <= 3) return { level: 2, label: 'Fair' };
+    if (strength <= 4) return { level: 3, label: 'Good' };
+    return { level: 4, label: 'Strong' };
+  };
+
+  const passwordStrength = getPasswordStrength(password);
+
+  return (
+    <div className={`pixygon-auth-container ${className}`}>
+      <style>{`
+        .pixygon-auth-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #0f0f0f;
+          color: #ffffff;
+          padding: 2rem;
+          border-radius: 1rem;
+          max-width: 400px;
+          width: 100%;
+          margin: 0 auto;
+        }
+
+        .pixygon-auth-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .pixygon-auth-logo {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 1rem;
+          display: block;
+        }
+
+        .pixygon-auth-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0 0 0.5rem;
+        }
+
+        .pixygon-auth-subtitle {
+          font-size: 0.875rem;
+          color: #a3a3a3;
+          margin: 0;
+        }
+
+        .pixygon-auth-form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .pixygon-auth-input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 0.375rem;
+        }
+
+        .pixygon-auth-label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-input {
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          font-size: 1rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-input.error {
+          border-color: #ef4444;
+        }
+
+        .pixygon-auth-button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-button:hover:not(:disabled) {
+          background: #4f46e5;
+        }
+
+        .pixygon-auth-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid #ef4444;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #fca5a5;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-link {
+          color: #6366f1;
+          text-decoration: none;
+          font-size: 0.875rem;
+          cursor: pointer;
+          background: none;
+          border: none;
+          padding: 0;
+          font-family: inherit;
+        }
+
+        .pixygon-auth-link:hover {
+          color: #818cf8;
+          text-decoration: underline;
+        }
+
+        .pixygon-auth-footer {
+          text-align: center;
+          margin-top: 1.5rem;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-branding {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1.5rem;
+          font-size: 0.75rem;
+          color: #737373;
+        }
+
+        .pixygon-auth-spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: pixygon-spin 0.8s linear infinite;
+        }
+
+        @keyframes pixygon-spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .pixygon-auth-password-strength {
+          display: flex;
+          gap: 0.25rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-password-strength-bar {
+          flex: 1;
+          height: 4px;
+          border-radius: 2px;
+          background: #404040;
+          transition: background 0.3s;
+        }
+
+        .pixygon-auth-password-strength-bar.active {
+          background: #6366f1;
+        }
+
+        .pixygon-auth-password-strength-bar.weak {
+          background: #ef4444;
+        }
+
+        .pixygon-auth-password-strength-bar.fair {
+          background: #f59e0b;
+        }
+
+        .pixygon-auth-password-strength-bar.good {
+          background: #22c55e;
+        }
+
+        .pixygon-auth-password-strength-bar.strong {
+          background: #10b981;
+        }
+
+        .pixygon-auth-password-label {
+          font-size: 0.75rem;
+          color: #737373;
+          margin-top: 0.25rem;
+        }
+      `}</style>
+
+      <div className="pixygon-auth-header">
+        <svg
+          className="pixygon-auth-logo"
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="50" cy="50" r="45" fill="#6366f1" />
+          <path
+            d="M30 45L45 30L70 55L55 70L30 45Z"
+            fill="white"
+            fillOpacity="0.9"
+          />
+          <path
+            d="M35 55L50 70L45 75L30 60L35 55Z"
+            fill="white"
+            fillOpacity="0.7"
+          />
+        </svg>
+        <h1 className="pixygon-auth-title">Create Account</h1>
+        <p className="pixygon-auth-subtitle">Join Pixygon to access all apps</p>
+      </div>
+
+      <form className="pixygon-auth-form" onSubmit={handleSubmit}>
+        {displayError && (
+          <div className="pixygon-auth-error">{displayError}</div>
+        )}
+
+        <div className="pixygon-auth-input-group">
+          <label className="pixygon-auth-label" htmlFor="pixygon-register-username">
+            Username
+          </label>
+          <input
+            id="pixygon-register-username"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="text"
+            value={userName}
+            onChange={(e) => setUserName(e.target.value)}
+            placeholder="Choose a username"
+            autoComplete="username"
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="pixygon-auth-input-group">
+          <label className="pixygon-auth-label" htmlFor="pixygon-register-email">
+            Email
+          </label>
+          <input
+            id="pixygon-register-email"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Enter your email"
+            autoComplete="email"
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="pixygon-auth-input-group">
+          <label className="pixygon-auth-label" htmlFor="pixygon-register-password">
+            Password
+          </label>
+          <input
+            id="pixygon-register-password"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Create a password"
+            autoComplete="new-password"
+            disabled={isLoading}
+          />
+          {password && (
+            <>
+              <div className="pixygon-auth-password-strength">
+                {[1, 2, 3, 4].map((level) => (
+                  <div
+                    key={level}
+                    className={`pixygon-auth-password-strength-bar ${
+                      level <= passwordStrength.level
+                        ? passwordStrength.level === 1
+                          ? 'weak'
+                          : passwordStrength.level === 2
+                          ? 'fair'
+                          : passwordStrength.level === 3
+                          ? 'good'
+                          : 'strong'
+                        : ''
+                    }`}
+                  />
+                ))}
+              </div>
+              <div className="pixygon-auth-password-label">
+                Password strength: {passwordStrength.label}
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="pixygon-auth-input-group">
+          <label className="pixygon-auth-label" htmlFor="pixygon-register-confirm">
+            Confirm Password
+          </label>
+          <input
+            id="pixygon-register-confirm"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            placeholder="Confirm your password"
+            autoComplete="new-password"
+            disabled={isLoading}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="pixygon-auth-button"
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <>
+              <div className="pixygon-auth-spinner" />
+              Creating account...
+            </>
+          ) : (
+            'Create Account'
+          )}
+        </button>
+      </form>
+
+      {onNavigateLogin && (
+        <div className="pixygon-auth-footer">
+          Already have an account?{' '}
+          <button
+            type="button"
+            className="pixygon-auth-link"
+            onClick={onNavigateLogin}
+          >
+            Sign in
+          </button>
+        </div>
+      )}
+
+      {showBranding && (
+        <div className="pixygon-auth-branding">
+          Secured by Pixygon Account
+        </div>
+      )}
+    </div>
+  );
+}