@pixygon/auth 1.0.0

package/src/components/VerifyForm.tsx

@@ -0,0 +1,411 @@
+/**
+ * @pixygon/auth - Verify Form Component
+ * Email verification form for Pixygon Account
+ */
+
+import { useState, useCallback, useRef, useEffect, type FormEvent, type KeyboardEvent, type ClipboardEvent } from 'react';
+import { useAuth } from '../hooks';
+import type { VerifyFormProps, AuthError } from '../types';
+
+export function VerifyForm({
+  userName,
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = '',
+}: VerifyFormProps) {
+  const { verify, resendVerification, isLoading, error } = useAuth();
+
+  const [code, setCode] = useState(['', '', '', '', '', '']);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [resendSuccess, setResendSuccess] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  // Focus first input on mount
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  // Resend cooldown timer
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+
+  const handleChange = useCallback(
+    (index: number, value: string) => {
+      if (!/^\d*$/.test(value)) return; // Only allow digits
+
+      const newCode = [...code];
+      newCode[index] = value.slice(-1); // Only keep last digit
+      setCode(newCode);
+
+      // Auto-focus next input
+      if (value && index < 5) {
+        inputRefs.current[index + 1]?.focus();
+      }
+
+      // Auto-submit when all filled
+      if (newCode.every((digit) => digit) && value) {
+        handleSubmitCode(newCode.join(''));
+      }
+    },
+    [code]
+  );
+
+  const handleKeyDown = useCallback(
+    (index: number, e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Backspace' && !code[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [code]
+  );
+
+  const handlePaste = useCallback(
+    (e: ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
+      if (pasted.length === 6) {
+        const newCode = pasted.split('');
+        setCode(newCode);
+        inputRefs.current[5]?.focus();
+        handleSubmitCode(pasted);
+      }
+    },
+    []
+  );
+
+  const handleSubmitCode = useCallback(
+    async (verificationCode: string) => {
+      setLocalError(null);
+      setResendSuccess(false);
+
+      try {
+        const response = await verify({ userName, verificationCode });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err as AuthError;
+        onError?.(authError);
+        // Clear code on error
+        setCode(['', '', '', '', '', '']);
+        inputRefs.current[0]?.focus();
+      }
+    },
+    [userName, verify, onSuccess, onError]
+  );
+
+  const handleSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      const verificationCode = code.join('');
+      if (verificationCode.length !== 6) {
+        setLocalError('Please enter the complete 6-digit code');
+        return;
+      }
+      handleSubmitCode(verificationCode);
+    },
+    [code, handleSubmitCode]
+  );
+
+  const handleResend = useCallback(async () => {
+    if (resendCooldown > 0) return;
+
+    setLocalError(null);
+    setResendSuccess(false);
+
+    try {
+      await resendVerification({ userName });
+      setResendSuccess(true);
+      setResendCooldown(60); // 60 second cooldown
+    } catch (err) {
+      const authError = err as AuthError;
+      setLocalError(authError.message);
+    }
+  }, [userName, resendVerification, resendCooldown]);
+
+  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: 1.5rem;
+        }
+
+        .pixygon-auth-code-container {
+          display: flex;
+          gap: 0.5rem;
+          justify-content: center;
+        }
+
+        .pixygon-auth-code-input {
+          width: 3rem;
+          height: 3.5rem;
+          text-align: center;
+          font-size: 1.5rem;
+          font-weight: 600;
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-code-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-code-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;
+        }
+
+        .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-success {
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid #22c55e;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #86efac;
+          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-link:disabled {
+          color: #737373;
+          cursor: not-allowed;
+        }
+
+        .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-resend {
+          text-align: center;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+      `}</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">Verify Email</h1>
+        <p className="pixygon-auth-subtitle">
+          Enter the 6-digit code sent to your email
+        </p>
+      </div>
+
+      <form className="pixygon-auth-form" onSubmit={handleSubmit}>
+        {displayError && (
+          <div className="pixygon-auth-error">{displayError}</div>
+        )}
+
+        {resendSuccess && (
+          <div className="pixygon-auth-success">
+            Verification code sent! Check your email.
+          </div>
+        )}
+
+        <div className="pixygon-auth-code-container">
+          {code.map((digit, index) => (
+            <input
+              key={index}
+              ref={(el) => (inputRefs.current[index] = el)}
+              className={`pixygon-auth-code-input ${displayError ? 'error' : ''}`}
+              type="text"
+              inputMode="numeric"
+              maxLength={1}
+              value={digit}
+              onChange={(e) => handleChange(index, e.target.value)}
+              onKeyDown={(e) => handleKeyDown(index, e)}
+              onPaste={handlePaste}
+              disabled={isLoading}
+              aria-label={`Digit ${index + 1}`}
+            />
+          ))}
+        </div>
+
+        <button
+          type="submit"
+          className="pixygon-auth-button"
+          disabled={isLoading || code.some((d) => !d)}
+        >
+          {isLoading ? (
+            <>
+              <div className="pixygon-auth-spinner" />
+              Verifying...
+            </>
+          ) : (
+            'Verify Email'
+          )}
+        </button>
+
+        <div className="pixygon-auth-resend">
+          Didn't receive the code?{' '}
+          <button
+            type="button"
+            className="pixygon-auth-link"
+            onClick={handleResend}
+            disabled={resendCooldown > 0}
+          >
+            {resendCooldown > 0 ? `Resend in ${resendCooldown}s` : 'Resend code'}
+          </button>
+        </div>
+      </form>
+
+      {onNavigateLogin && (
+        <div className="pixygon-auth-footer">
+          Wrong account?{' '}
+          <button
+            type="button"
+            className="pixygon-auth-link"
+            onClick={onNavigateLogin}
+          >
+            Sign in with a different account
+          </button>
+        </div>
+      )}
+
+      {showBranding && (
+        <div className="pixygon-auth-branding">
+          Secured by Pixygon Account
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,40 @@
+/**
+ * @pixygon/auth/components
+ * Branded authentication components for Pixygon Account
+ *
+ * Usage:
+ * ```tsx
+ * import { PixygonAuth, LoginForm } from '@pixygon/auth/components';
+ *
+ * // All-in-one component
+ * <PixygonAuth
+ *   mode="login"
+ *   onSuccess={(user) => console.log('Logged in:', user)}
+ *   onModeChange={(mode) => router.push(`/auth/${mode}`)}
+ * />
+ *
+ * // Or individual forms
+ * <LoginForm
+ *   onSuccess={(user) => console.log('Logged in:', user)}
+ *   onNavigateRegister={() => router.push('/register')}
+ * />
+ * ```
+ */
+
+// Main component
+export { PixygonAuth } from './PixygonAuth';
+
+// Individual forms
+export { LoginForm } from './LoginForm';
+export { RegisterForm } from './RegisterForm';
+export { VerifyForm } from './VerifyForm';
+export { ForgotPasswordForm } from './ForgotPasswordForm';
+
+// Re-export types for convenience
+export type {
+  PixygonAuthProps,
+  LoginFormProps,
+  RegisterFormProps,
+  VerifyFormProps,
+  ForgotPasswordFormProps,
+} from '../types';