zopassport 0.1.0

package/app/src/components/ZoAuth.tsx

@@ -0,0 +1,320 @@
+// src/components/ZoAuth.tsx
+// Complete phone OTP authentication flow component
+
+import React, { useState, useEffect } from 'react';
+import { PhoneInput } from './PhoneInput';
+import { OTPInput } from './OTPInput';
+
+import type { ZoUser } from '../lib/types';
+
+export interface ZoAuthProps {
+  /** Callback when auth is successful */
+  onSuccess: (userId: string, user: any) => void;
+  /** Callback to close modal */
+  onClose?: () => void;
+  /** Send OTP function (from SDK) */
+  sendOTP: (countryCode: string, phoneNumber: string) => Promise<{ success: boolean; message: string }>;
+  /** Verify OTP function (from SDK) */
+  verifyOTP: (countryCode: string, phoneNumber: string, otp: string) => Promise<{ success: boolean; user?: ZoUser; error?: string }>;
+  /** Default country code (default: '91') */
+  defaultCountryCode?: string;
+  /** Show close button */
+  showCloseButton?: boolean;
+  /** Additional CSS class */
+  className?: string;
+}
+
+type Step = 'phone' | 'otp';
+
+export const ZoAuth: React.FC<ZoAuthProps> = ({
+  onSuccess,
+  onClose,
+  sendOTP,
+  verifyOTP,
+  defaultCountryCode = '91',
+  showCloseButton = true,
+  className = '',
+}) => {
+  const [step, setStep] = useState<Step>('phone');
+  const [countryCode, setCountryCode] = useState(defaultCountryCode);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [otp, setOtp] = useState<string[]>(['', '', '', '', '', '']);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [resendCooldown, setResendCooldown] = useState(0);
+
+  // Resend cooldown timer
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+
+  const handleSendOTP = async () => {
+    if (!phoneNumber || phoneNumber.length < 10) {
+      setError('Please enter a valid phone number');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await sendOTP(countryCode, phoneNumber);
+
+      if (result.success) {
+        setStep('otp');
+        setResendCooldown(60);
+      } else {
+        setError(result.message || 'Failed to send OTP');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to send verification code');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleVerifyOTP = async (otpString: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await verifyOTP(countryCode, phoneNumber, otpString);
+
+      if (result.success && result.user) {
+        onSuccess(result.user.id || '', result.user);
+      } else {
+        setError(result.error || 'Invalid verification code');
+        setOtp(['', '', '', '', '', '']);
+      }
+    } catch (err: any) {
+      setError(err.message || 'Invalid verification code');
+      setOtp(['', '', '', '', '', '']);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleResendOTP = async () => {
+    if (resendCooldown > 0) return;
+    await handleSendOTP();
+  };
+
+  const containerStyle: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    maxWidth: '400px',
+    backgroundColor: 'rgba(0, 0, 0, 0.95)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: '24px',
+    padding: '24px 32px',
+    fontFamily: 'Rubik, system-ui, sans-serif',
+  };
+
+  return (
+    <div className={`zo-auth ${className}`} style={containerStyle}>
+      {/* Close Button */}
+      {showCloseButton && onClose && (
+        <button
+          onClick={onClose}
+          style={{
+            position: 'absolute',
+            top: '16px',
+            right: '16px',
+            width: '32px',
+            height: '32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            color: 'rgba(255, 255, 255, 0.6)',
+          }}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
+
+      {/* Step 1: Phone Input */}
+      {step === 'phone' && (
+        <div>
+          {/* Icon */}
+          <div
+            style={{
+              width: '64px',
+              height: '64px',
+              margin: '0 auto 16px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              borderRadius: '50%',
+            }}
+          >
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+            </svg>
+          </div>
+
+          {/* Title */}
+          <h2
+            style={{
+              textAlign: 'center',
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 800,
+              marginBottom: '8px',
+              fontFamily: 'Syne, system-ui, sans-serif',
+            }}
+          >
+            Enter Your Phone Number
+          </h2>
+          <p
+            style={{
+              textAlign: 'center',
+              color: 'rgba(255, 255, 255, 0.6)',
+              fontSize: '14px',
+              marginBottom: '24px',
+            }}
+          >
+            We'll send you a verification code
+          </p>
+
+          {/* Phone Input */}
+          <PhoneInput
+            value={phoneNumber}
+            countryCode={countryCode}
+            onChange={setPhoneNumber}
+            onCountryChange={setCountryCode}
+            disabled={isLoading}
+            error={error || undefined}
+          />
+
+          {/* Send Button */}
+          <button
+            onClick={handleSendOTP}
+            disabled={isLoading || phoneNumber.length < 10}
+            style={{
+              width: '100%',
+              marginTop: '16px',
+              padding: '16px',
+              backgroundColor: 'black',
+              border: '2px solid rgba(255, 255, 255, 0.2)',
+              borderRadius: '12px',
+              color: 'white',
+              fontWeight: 500,
+              fontSize: '16px',
+              cursor: isLoading || phoneNumber.length < 10 ? 'not-allowed' : 'pointer',
+              opacity: isLoading || phoneNumber.length < 10 ? 0.5 : 1,
+            }}
+          >
+            {isLoading ? 'Sending Code...' : 'Send Code'}
+          </button>
+        </div>
+      )}
+
+      {/* Step 2: OTP Input */}
+      {step === 'otp' && (
+        <div>
+          {/* Icon */}
+          <div
+            style={{
+              width: '64px',
+              height: '64px',
+              margin: '0 auto 16px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              borderRadius: '50%',
+            }}
+          >
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+          </div>
+
+          {/* Title */}
+          <h2
+            style={{
+              textAlign: 'center',
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 800,
+              marginBottom: '8px',
+              fontFamily: 'Syne, system-ui, sans-serif',
+            }}
+          >
+            Enter Verification Code
+          </h2>
+          <p
+            style={{
+              textAlign: 'center',
+              color: 'rgba(255, 255, 255, 0.6)',
+              fontSize: '14px',
+              marginBottom: '24px',
+            }}
+          >
+            We sent a code to +{countryCode} {phoneNumber}
+          </p>
+
+          {/* OTP Input */}
+          <OTPInput
+            value={otp}
+            onChange={setOtp}
+            onComplete={handleVerifyOTP}
+            disabled={isLoading}
+            error={error || undefined}
+          />
+
+          {/* Verify Button */}
+          <button
+            onClick={() => handleVerifyOTP(otp.join(''))}
+            disabled={isLoading || otp.some(d => !d)}
+            style={{
+              width: '100%',
+              marginTop: '16px',
+              padding: '16px',
+              backgroundColor: 'black',
+              border: '2px solid rgba(255, 255, 255, 0.2)',
+              borderRadius: '12px',
+              color: 'white',
+              fontWeight: 500,
+              fontSize: '16px',
+              cursor: isLoading || otp.some(d => !d) ? 'not-allowed' : 'pointer',
+              opacity: isLoading || otp.some(d => !d) ? 0.5 : 1,
+            }}
+          >
+            {isLoading ? 'Verifying...' : 'Verify'}
+          </button>
+
+          {/* Resend Link */}
+          <div style={{ textAlign: 'center', marginTop: '16px' }}>
+            <button
+              onClick={handleResendOTP}
+              disabled={resendCooldown > 0}
+              style={{
+                backgroundColor: 'transparent',
+                border: 'none',
+                color: 'rgba(255, 255, 255, 0.6)',
+                fontSize: '14px',
+                cursor: resendCooldown > 0 ? 'not-allowed' : 'pointer',
+                opacity: resendCooldown > 0 ? 0.5 : 1,
+              }}
+            >
+              {resendCooldown > 0
+                ? `Resend code in ${resendCooldown}s`
+                : "Didn't receive? Resend code"}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+

package/app/src/components/ZoAvatar.tsx

@@ -0,0 +1,87 @@
+// src/components/ZoAvatar.tsx
+// Avatar display component with fallback
+
+import React, { useState } from 'react';
+
+export interface ZoAvatarProps {
+  /** Avatar image URL */
+  src?: string;
+  /** User name (for alt text and fallback) */
+  name?: string;
+  /** Size in pixels (default: 120) */
+  size?: number;
+  /** Fallback image URL */
+  fallbackUrl?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+// Default fallback avatar
+const DEFAULT_FALLBACK = '/images/rank1.jpeg';
+
+export const ZoAvatar: React.FC<ZoAvatarProps> = ({
+  src,
+  name = 'User',
+  size = 120,
+  fallbackUrl = DEFAULT_FALLBACK,
+  className = '',
+}) => {
+  const [imgSrc, setImgSrc] = useState(src || fallbackUrl);
+  const [hasError, setHasError] = useState(false);
+
+  const handleError = () => {
+    if (!hasError) {
+      setHasError(true);
+      setImgSrc(fallbackUrl);
+    }
+  };
+
+  // Generate initials for text fallback
+  const initials = name
+    .split(' ')
+    .map(n => n[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+
+  return (
+    <div
+      className={`zo-avatar ${className}`}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        overflow: 'hidden',
+        backgroundColor: '#1a1a1a',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {imgSrc ? (
+        <img
+          src={imgSrc}
+          alt={name}
+          onError={handleError}
+          style={{
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+          }}
+        />
+      ) : (
+        <span
+          style={{
+            fontSize: size * 0.4,
+            fontWeight: 700,
+            color: '#ffffff',
+            fontFamily: 'Rubik, system-ui, sans-serif',
+          }}
+        >
+          {initials}
+        </span>
+      )}
+    </div>
+  );
+};
+

package/app/src/components/ZoLanding.tsx

@@ -0,0 +1,231 @@
+// src/components/ZoLanding.tsx
+// Landing page component with video background
+
+import React, { useState } from 'react';
+import { ZoAuth } from './ZoAuth';
+
+export interface ZoLandingProps {
+  /** Callback when user successfully authenticates */
+  onAuthSuccess: (userId: string, user: any) => void;
+  /** Send OTP function (from SDK) */
+  sendOTP: (countryCode: string, phoneNumber: string) => Promise<{ success: boolean; message: string }>;
+  /** Verify OTP function (from SDK) */
+  verifyOTP: (countryCode: string, phoneNumber: string, otp: string) => Promise<{ success: boolean; error?: string }>;
+  /** Video background URL */
+  videoUrl?: string;
+  /** Zo logo URL */
+  logoUrl?: string;
+  /** Title text */
+  title?: string;
+  /** Subtitle lines */
+  subtitles?: string[];
+  /** Button text */
+  buttonText?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const ZoLanding: React.FC<ZoLandingProps> = ({
+  onAuthSuccess,
+  sendOTP,
+  verifyOTP,
+  videoUrl = '/videos/loading-screen-background.mp4',
+  logoUrl = '/figma-assets/landing-zo-logo.png',
+  title = 'ZOHMMM!',
+  subtitles = [
+    'Welcome to Zo World',
+    'A parallel reality where you live your best life, by following your heart.',
+    'Are you ready to tune in, Anon?',
+  ],
+  buttonText = 'Tune into Zo World',
+  className = '',
+}) => {
+  const [showAuth, setShowAuth] = useState(false);
+
+  const containerStyle: React.CSSProperties = {
+    position: 'fixed',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: 'black',
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
+    fontFamily: 'Rubik, system-ui, sans-serif',
+  };
+
+  return (
+    <div className={`zo-landing ${className}`} style={containerStyle}>
+      {/* Video Background */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        style={{
+          position: 'fixed',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover',
+          zIndex: 1,
+          pointerEvents: 'none',
+        }}
+      >
+        <source src={videoUrl} type="video/mp4" />
+      </video>
+
+      {/* Gradient Overlay */}
+      <div
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'linear-gradient(to bottom, transparent 50%, black)',
+          zIndex: 2,
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* Zo Logo */}
+      <img
+        src={logoUrl}
+        alt="Zo"
+        style={{
+          position: 'absolute',
+          left: '24px',
+          top: '40px',
+          width: '40px',
+          height: '40px',
+          objectFit: 'cover',
+          zIndex: 10,
+        }}
+      />
+
+      {/* Main Content */}
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 10,
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '24px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            maxWidth: '800px',
+            gap: '32px',
+          }}
+        >
+          {/* Header */}
+          <div style={{ textAlign: 'center' }}>
+            <h1
+              style={{
+                fontFamily: 'Syne, system-ui, sans-serif',
+                fontSize: 'clamp(32px, 8vw, 72px)',
+                fontWeight: 800,
+                color: 'white',
+                lineHeight: 1.1,
+                letterSpacing: '0.32px',
+                textTransform: 'uppercase',
+                margin: 0,
+              }}
+            >
+              {title}
+            </h1>
+
+            <div
+              style={{
+                marginTop: '16px',
+                fontSize: 'clamp(16px, 3vw, 24px)',
+                color: 'white',
+                lineHeight: 1.5,
+              }}
+            >
+              {subtitles.map((text, i) => (
+                <p key={i} style={{ margin: '8px 0' }}>
+                  {text}
+                </p>
+              ))}
+            </div>
+          </div>
+
+          {/* CTA Button */}
+          <button
+            onClick={() => setShowAuth(true)}
+            style={{
+              backgroundColor: 'black',
+              border: '2px solid rgba(255, 255, 255, 0.2)',
+              borderRadius: '12px',
+              padding: '16px 20px',
+              width: '100%',
+              maxWidth: '400px',
+              height: '64px',
+              cursor: 'pointer',
+              transition: 'all 0.3s',
+            }}
+          >
+            <span
+              style={{
+                fontFamily: 'Rubik, system-ui, sans-serif',
+                fontSize: '18px',
+                fontWeight: 500,
+                color: 'white',
+              }}
+            >
+              {buttonText}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Auth Modal */}
+      {showAuth && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 10000,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px',
+          }}
+        >
+          {/* Backdrop */}
+          <div
+            onClick={() => setShowAuth(false)}
+            style={{
+              position: 'absolute',
+              inset: 0,
+              backgroundColor: 'rgba(0, 0, 0, 0.8)',
+              backdropFilter: 'blur(4px)',
+            }}
+          />
+          {/* Auth Component */}
+          <div style={{ position: 'relative', zIndex: 1 }}>
+            <ZoAuth
+              onSuccess={(userId, user) => {
+                setShowAuth(false);
+                onAuthSuccess(userId, user);
+              }}
+              onClose={() => setShowAuth(false)}
+              sendOTP={sendOTP}
+              verifyOTP={verifyOTP}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+