@pixygon/auth 1.0.0

package/src/components/ForgotPasswordForm.tsx

@@ -0,0 +1,410 @@
+/**
+ * @pixygon/auth - Forgot Password Form Component
+ * Password reset request form for Pixygon Account
+ */
+
+import { useState, useCallback, type FormEvent } from 'react';
+import { useAuth } from '../hooks';
+import type { ForgotPasswordFormProps, AuthError } from '../types';
+
+export function ForgotPasswordForm({
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = '',
+}: ForgotPasswordFormProps) {
+  const { forgotPassword, isLoading, error } = useAuth();
+
+  const [email, setEmail] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      setLocalError(null);
+
+      if (!email.trim()) {
+        setLocalError('Please enter your email address');
+        return;
+      }
+
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setLocalError('Please enter a valid email address');
+        return;
+      }
+
+      try {
+        await forgotPassword({ email: email.trim().toLowerCase() });
+        setSubmitted(true);
+        onSuccess?.();
+      } catch (err) {
+        const authError = err as AuthError;
+        onError?.(authError);
+      }
+    },
+    [email, forgotPassword, onSuccess, onError]
+  );
+
+  const displayError = localError || error?.message;
+
+  if (submitted) {
+    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-success-icon {
+            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;
+            line-height: 1.5;
+          }
+
+          .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;
+          }
+        `}</style>
+
+        <div className="pixygon-auth-header">
+          <svg
+            className="pixygon-auth-success-icon"
+            viewBox="0 0 100 100"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="50" cy="50" r="45" fill="#22c55e" />
+            <path
+              d="M30 50L45 65L70 35"
+              stroke="white"
+              strokeWidth="6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <h1 className="pixygon-auth-title">Check Your Email</h1>
+          <p className="pixygon-auth-subtitle">
+            We've sent password reset instructions to{' '}
+            <strong>{email}</strong>. Please check your inbox.
+          </p>
+        </div>
+
+        {onNavigateLogin && (
+          <div className="pixygon-auth-footer">
+            <button
+              type="button"
+              className="pixygon-auth-link"
+              onClick={onNavigateLogin}
+            >
+              Back to sign in
+            </button>
+          </div>
+        )}
+
+        {showBranding && (
+          <div className="pixygon-auth-branding">
+            Secured by Pixygon Account
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  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); }
+        }
+      `}</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">Reset Password</h1>
+        <p className="pixygon-auth-subtitle">
+          Enter your email to receive reset instructions
+        </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-forgot-email">
+            Email
+          </label>
+          <input
+            id="pixygon-forgot-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>
+
+        <button
+          type="submit"
+          className="pixygon-auth-button"
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <>
+              <div className="pixygon-auth-spinner" />
+              Sending...
+            </>
+          ) : (
+            'Send Reset Link'
+          )}
+        </button>
+      </form>
+
+      {onNavigateLogin && (
+        <div className="pixygon-auth-footer">
+          Remember your password?{' '}
+          <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>
+  );
+}