@pixygon/auth 1.0.0

package/src/components/LoginForm.tsx

@@ -0,0 +1,323 @@
+/**
+ * @pixygon/auth - Login Form Component
+ * Branded login form for Pixygon Account
+ */
+
+import { useState, useCallback, type FormEvent } from 'react';
+import { useAuth } from '../hooks';
+import type { LoginFormProps, AuthError } from '../types';
+
+export function LoginForm({
+  onSuccess,
+  onError,
+  onNavigateRegister,
+  onNavigateForgotPassword,
+  showBranding = true,
+  className = '',
+}: LoginFormProps) {
+  const { login, isLoading, error } = useAuth();
+
+  const [userName, setUserName] = useState('');
+  const [password, setPassword] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      setLocalError(null);
+
+      if (!userName.trim()) {
+        setLocalError('Please enter your username or email');
+        return;
+      }
+
+      if (!password) {
+        setLocalError('Please enter your password');
+        return;
+      }
+
+      try {
+        const response = await login({ userName: userName.trim(), password });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err as AuthError;
+        onError?.(authError);
+      }
+    },
+    [userName, password, login, onSuccess, onError]
+  );
+
+  const displayError = localError || error?.message;
+
+  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-forgot-password {
+          text-align: right;
+          margin-top: -0.5rem;
+        }
+      `}</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">Welcome back</h1>
+        <p className="pixygon-auth-subtitle">Sign in to your Pixygon Account</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-login-username">
+            Username or Email
+          </label>
+          <input
+            id="pixygon-login-username"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="text"
+            value={userName}
+            onChange={(e) => setUserName(e.target.value)}
+            placeholder="Enter your username or email"
+            autoComplete="username"
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="pixygon-auth-input-group">
+          <label className="pixygon-auth-label" htmlFor="pixygon-login-password">
+            Password
+          </label>
+          <input
+            id="pixygon-login-password"
+            className={`pixygon-auth-input ${displayError ? 'error' : ''}`}
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Enter your password"
+            autoComplete="current-password"
+            disabled={isLoading}
+          />
+        </div>
+
+        {onNavigateForgotPassword && (
+          <div className="pixygon-auth-forgot-password">
+            <button
+              type="button"
+              className="pixygon-auth-link"
+              onClick={onNavigateForgotPassword}
+            >
+              Forgot password?
+            </button>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          className="pixygon-auth-button"
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <>
+              <div className="pixygon-auth-spinner" />
+              Signing in...
+            </>
+          ) : (
+            'Sign in'
+          )}
+        </button>
+      </form>
+
+      {onNavigateRegister && (
+        <div className="pixygon-auth-footer">
+          Don't have an account?{' '}
+          <button
+            type="button"
+            className="pixygon-auth-link"
+            onClick={onNavigateRegister}
+          >
+            Create one
+          </button>
+        </div>
+      )}
+
+      {showBranding && (
+        <div className="pixygon-auth-branding">
+          Secured by Pixygon Account
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/PixygonAuth.tsx

@@ -0,0 +1,170 @@
+/**
+ * @pixygon/auth - Pixygon Auth Component
+ * Unified auth component with all forms and mode switching
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import type { PixygonAuthProps, User, AuthError } from '../types';
+import { LoginForm } from './LoginForm';
+import { RegisterForm } from './RegisterForm';
+import { VerifyForm } from './VerifyForm';
+import { ForgotPasswordForm } from './ForgotPasswordForm';
+
+type AuthMode = PixygonAuthProps['mode'];
+
+export function PixygonAuth({
+  mode: initialMode,
+  onSuccess,
+  onError,
+  onModeChange,
+  userName: initialUserName,
+  showBranding = true,
+  theme = 'dark',
+  className = '',
+}: PixygonAuthProps) {
+  const [mode, setMode] = useState<AuthMode>(initialMode);
+  const [userName, setUserName] = useState(initialUserName || '');
+
+  // Sync mode with prop changes
+  useEffect(() => {
+    setMode(initialMode);
+  }, [initialMode]);
+
+  const handleModeChange = useCallback(
+    (newMode: AuthMode) => {
+      setMode(newMode);
+      onModeChange?.(newMode);
+    },
+    [onModeChange]
+  );
+
+  const handleLoginSuccess = useCallback(
+    (user: User) => {
+      if (!user.isVerified) {
+        setUserName(user.userName);
+        handleModeChange('verify');
+      } else {
+        onSuccess?.(user);
+      }
+    },
+    [handleModeChange, onSuccess]
+  );
+
+  const handleRegisterSuccess = useCallback(
+    (user: User) => {
+      setUserName(user.userName);
+      handleModeChange('verify');
+    },
+    [handleModeChange]
+  );
+
+  const handleVerifySuccess = useCallback(
+    (user: User) => {
+      onSuccess?.(user);
+    },
+    [onSuccess]
+  );
+
+  const handleForgotPasswordSuccess = useCallback(() => {
+    // Stay on forgot password page with success message
+    // or navigate to login
+  }, []);
+
+  const handleError = useCallback(
+    (error: AuthError) => {
+      onError?.(error);
+    },
+    [onError]
+  );
+
+  const containerClassName = `pixygon-auth-wrapper ${theme === 'light' ? 'light' : ''} ${className}`;
+
+  return (
+    <div className={containerClassName}>
+      <style>{`
+        .pixygon-auth-wrapper {
+          width: 100%;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-container {
+          background: #ffffff;
+          color: #0f0f0f;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-input {
+          background: #f5f5f5;
+          border-color: #e5e5e5;
+          color: #0f0f0f;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-input:focus {
+          border-color: #6366f1;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-label {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-subtitle {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-footer {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-branding {
+          color: #a3a3a3;
+        }
+      `}</style>
+
+      {mode === 'login' && (
+        <LoginForm
+          onSuccess={handleLoginSuccess}
+          onError={handleError}
+          onNavigateRegister={() => handleModeChange('register')}
+          onNavigateForgotPassword={() => handleModeChange('forgot-password')}
+          showBranding={showBranding}
+        />
+      )}
+
+      {mode === 'register' && (
+        <RegisterForm
+          onSuccess={handleRegisterSuccess}
+          onError={handleError}
+          onNavigateLogin={() => handleModeChange('login')}
+          showBranding={showBranding}
+        />
+      )}
+
+      {mode === 'verify' && (
+        <VerifyForm
+          userName={userName}
+          onSuccess={handleVerifySuccess}
+          onError={handleError}
+          onNavigateLogin={() => handleModeChange('login')}
+          showBranding={showBranding}
+        />
+      )}
+
+      {mode === 'forgot-password' && (
+        <ForgotPasswordForm
+          onSuccess={handleForgotPasswordSuccess}
+          onError={handleError}
+          onNavigateLogin={() => handleModeChange('login')}
+          showBranding={showBranding}
+        />
+      )}
+
+      {mode === 'recover-password' && (
+        // Recovery form would go here - handled via email link typically
+        <ForgotPasswordForm
+          onSuccess={handleForgotPasswordSuccess}
+          onError={handleError}
+          onNavigateLogin={() => handleModeChange('login')}
+          showBranding={showBranding}
+        />
+      )}
+    </div>
+  );
+}