agent-relay 2.0.16 → 2.0.18

package/packages/dashboard/ui/app/complete-profile/page.tsx

@@ -0,0 +1,204 @@
+/**
+ * Complete Profile Page
+ *
+ * Prompts users to provide missing information after GitHub OAuth signup.
+ * Currently used to collect email address for GitHub users whose email
+ * is not publicly available.
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { LogoIcon } from '../../react-components/Logo';
+
+export default function CompleteProfilePage() {
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState('');
+  const [user, setUser] = useState<{
+    githubUsername?: string;
+    avatarUrl?: string;
+    email?: string;
+  } | null>(null);
+
+  // Check if user is logged in and needs email
+  useEffect(() => {
+    const checkSession = async () => {
+      try {
+        const response = await fetch('/api/auth/me', { credentials: 'include' });
+        if (!response.ok) {
+          // Not logged in - redirect to login
+          window.location.href = '/login';
+          return;
+        }
+
+        const data = await response.json();
+
+        // If user already has email, redirect to app
+        if (data.user?.email) {
+          window.location.href = '/app';
+          return;
+        }
+
+        setUser(data.user);
+        setIsLoading(false);
+      } catch (err) {
+        console.error('Error checking session:', err);
+        window.location.href = '/login';
+      }
+    };
+
+    checkSession();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsSubmitting(true);
+
+    try {
+      // Get CSRF token first
+      const csrfResponse = await fetch('/api/auth/session', { credentials: 'include' });
+      const csrfToken = csrfResponse.headers.get('x-csrf-token');
+
+      const response = await fetch('/api/auth/email/set-email', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(csrfToken && { 'x-csrf-token': csrfToken }),
+        },
+        credentials: 'include',
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.error || 'Failed to set email');
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Success - redirect to app
+      window.location.href = '/app';
+    } catch (err) {
+      console.error('Error setting email:', err);
+      setError('Failed to connect. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex flex-col items-center justify-center p-4">
+        <div className="relative z-10 w-full max-w-md">
+          <div className="flex flex-col items-center mb-8">
+            <LogoIcon size={48} withGlow={true} />
+            <h1 className="mt-4 text-2xl font-bold text-white">Agent Relay</h1>
+            <p className="mt-2 text-text-muted">Loading...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#0d1117] to-[#0a0a0f] flex flex-col items-center justify-center p-4">
+      {/* Background grid */}
+      <div className="fixed inset-0 opacity-10">
+        <div
+          className="absolute inset-0"
+          style={{
+            backgroundImage: `linear-gradient(rgba(0, 217, 255, 0.1) 1px, transparent 1px),
+                             linear-gradient(90deg, rgba(0, 217, 255, 0.1) 1px, transparent 1px)`,
+            backgroundSize: '50px 50px',
+          }}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 w-full max-w-md">
+        {/* Logo */}
+        <div className="flex flex-col items-center mb-8">
+          <LogoIcon size={48} withGlow={true} />
+          <h1 className="mt-4 text-2xl font-bold text-white">Almost there!</h1>
+          <p className="mt-2 text-text-muted text-center">
+            Please provide your email to complete your account setup
+          </p>
+        </div>
+
+        {/* Card */}
+        <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8 shadow-xl">
+          {/* User info */}
+          {user && (
+            <div className="flex items-center gap-4 mb-6 pb-6 border-b border-border-subtle">
+              {user.avatarUrl ? (
+                <img
+                  src={user.avatarUrl}
+                  alt={user.githubUsername || 'User'}
+                  className="w-12 h-12 rounded-full"
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-bg-secondary flex items-center justify-center">
+                  <svg className="w-6 h-6 text-text-muted" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                  </svg>
+                </div>
+              )}
+              <div>
+                <p className="font-medium text-white">{user.githubUsername}</p>
+                <p className="text-sm text-text-muted">Connected via GitHub</p>
+              </div>
+            </div>
+          )}
+
+          {error && (
+            <div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
+              <p className="text-error text-sm">{error}</p>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-text-secondary mb-2">
+                Email Address
+              </label>
+              <input
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                disabled={isSubmitting}
+                className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                placeholder="you@example.com"
+              />
+              <p className="mt-2 text-xs text-text-muted">
+                We'll use this email to notify you about important updates and account activity.
+              </p>
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting || !email}
+              className="w-full py-4 px-6 bg-accent-cyan hover:bg-accent-cyan/90 rounded-xl text-black font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? (
+                <>
+                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  <span>Saving...</span>
+                </>
+              ) : (
+                <span>Continue</span>
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/packages/dashboard/ui/app/login/page.tsx

@@ -1,5 +1,5 @@
 /**
- * Login Page - GitHub OAuth via Nango
+ * Login Page - GitHub OAuth via Nango or Email/Password
  *
  * Key: Initialize Nango on page load, not on click.
  * This avoids popup blockers by ensuring openConnectUI is synchronous.
@@ -28,14 +28,21 @@ function LoginLoading() {
   );
 }
 
+type AuthMethod = 'github' | 'email';
+
 // Main login content that uses useSearchParams
 function LoginContent() {
   const searchParams = useSearchParams();
+  const [authMethod, setAuthMethod] = useState<AuthMethod>('github');
   const [isReady, setIsReady] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
   const [authStatus, setAuthStatus] = useState<string>('');
   const [error, setError] = useState('');
-  
+
+  // Email form state
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
   // Get return URL from query params (used by cloud link flow)
   const returnUrl = searchParams.get('return');
 
@@ -56,7 +63,8 @@ function LoginContent() {
         if (!mounted) return;
 
         if (!response.ok || !data.sessionToken) {
-          setError('Failed to initialize. Please refresh the page.');
+          // Don't set error - email login doesn't need Nango
+          setIsReady(true);
           return;
         }
 
@@ -66,7 +74,8 @@ function LoginContent() {
       } catch (err) {
         if (mounted) {
           console.error('Init error:', err);
-          setError('Failed to initialize. Please refresh the page.');
+          // Still allow email login even if Nango fails
+          setIsReady(true);
         }
       }
     };
@@ -75,7 +84,7 @@ function LoginContent() {
     return () => { mounted = false; };
   }, []);
 
-  const checkAuthStatus = async (connectionId: string): Promise<{ ready: boolean; hasRepos?: boolean }> => {
+  const checkAuthStatus = async (connectionId: string): Promise<{ ready: boolean; hasRepos?: boolean; needsEmail?: boolean }> => {
     const response = await fetch(`/api/auth/nango/login-status/${connectionId}`, {
       credentials: 'include',
     });
@@ -103,7 +112,12 @@ function LoginContent() {
         try {
           const result = await checkAuthStatus(connectionId);
           if (result && result.ready) {
-            // Redirect to return URL if provided (e.g., cloud link flow), 
+            // If user needs to provide email, redirect to complete-profile
+            if (result.needsEmail) {
+              window.location.href = '/complete-profile';
+              return;
+            }
+            // Redirect to return URL if provided (e.g., cloud link flow),
             // otherwise to connect-repos if no repos, or to app
             if (returnUrl) {
               window.location.href = returnUrl;
@@ -133,7 +147,7 @@ function LoginContent() {
   // Use nango.auth() instead of openConnectUI to avoid popup blocker issues
   const handleGitHubAuth = async () => {
     if (!nangoRef.current) {
-      setError('Not ready. Please refresh the page.');
+      setError('GitHub login not available. Please use email login or refresh the page.');
       return;
     }
 
@@ -174,6 +188,58 @@ function LoginContent() {
     }
   };
 
+  // Handle email login
+  const handleEmailLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsAuthenticating(true);
+    setAuthStatus('Signing in...');
+
+    try {
+      // Get CSRF token first
+      const csrfResponse = await fetch('/api/auth/session', { credentials: 'include' });
+      const csrfToken = csrfResponse.headers.get('x-csrf-token');
+
+      const response = await fetch('/api/auth/email/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(csrfToken && { 'x-csrf-token': csrfToken }),
+        },
+        credentials: 'include',
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        // If user has GitHub account, suggest that
+        if (data.code === 'GITHUB_ACCOUNT') {
+          setError(data.error);
+          setAuthMethod('github');
+        } else {
+          setError(data.error || 'Login failed');
+        }
+        setIsAuthenticating(false);
+        setAuthStatus('');
+        return;
+      }
+
+      // Success - redirect
+      setAuthStatus('Login successful! Redirecting...');
+      if (returnUrl) {
+        window.location.href = returnUrl;
+      } else {
+        window.location.href = '/app';
+      }
+    } catch (err) {
+      console.error('Email login error:', err);
+      setError('Failed to connect. Please try again.');
+      setIsAuthenticating(false);
+      setAuthStatus('');
+    }
+  };
+
   const isLoading = !isReady || isAuthenticating;
 
   return (
@@ -201,6 +267,32 @@ function LoginContent() {
 
         {/* Login Card */}
         <div className="bg-bg-primary/80 backdrop-blur-sm border border-border-subtle rounded-2xl p-8 shadow-xl">
+          {/* Auth method tabs */}
+          <div className="flex mb-6 bg-bg-secondary/50 rounded-lg p-1">
+            <button
+              type="button"
+              onClick={() => setAuthMethod('github')}
+              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                authMethod === 'github'
+                  ? 'bg-bg-primary text-white shadow-sm'
+                  : 'text-text-muted hover:text-white'
+              }`}
+            >
+              GitHub
+            </button>
+            <button
+              type="button"
+              onClick={() => setAuthMethod('email')}
+              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${
+                authMethod === 'email'
+                  ? 'bg-bg-primary text-white shadow-sm'
+                  : 'text-text-muted hover:text-white'
+              }`}
+            >
+              Email
+            </button>
+          </div>
+
           <div>
             {error && (
               <div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
@@ -208,37 +300,89 @@ function LoginContent() {
               </div>
             )}
 
-            <button
-              type="button"
-              onClick={handleGitHubAuth}
-              disabled={isLoading}
-              className="w-full py-4 px-6 bg-[#24292e] hover:bg-[#2f363d] border border-[#444d56] rounded-xl text-white font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {!isReady ? (
-                <>
-                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                  </svg>
-                  <span>Loading...</span>
-                </>
-              ) : isAuthenticating ? (
-                <>
-                  <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                  </svg>
-                  <span>{authStatus || 'Connecting...'}</span>
-                </>
-              ) : (
-                <>
-                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                  </svg>
-                  <span>Continue with GitHub</span>
-                </>
-              )}
-            </button>
+            {authMethod === 'github' ? (
+              <button
+                type="button"
+                onClick={handleGitHubAuth}
+                disabled={isLoading}
+                className="w-full py-4 px-6 bg-[#24292e] hover:bg-[#2f363d] border border-[#444d56] rounded-xl text-white font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {!isReady ? (
+                  <>
+                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                    </svg>
+                    <span>Loading...</span>
+                  </>
+                ) : isAuthenticating ? (
+                  <>
+                    <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                    </svg>
+                    <span>{authStatus || 'Connecting...'}</span>
+                  </>
+                ) : (
+                  <>
+                    <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                    </svg>
+                    <span>Continue with GitHub</span>
+                  </>
+                )}
+              </button>
+            ) : (
+              <form onSubmit={handleEmailLogin} className="space-y-4">
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-text-secondary mb-2">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    disabled={isAuthenticating}
+                    className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                    placeholder="you@example.com"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-text-secondary mb-2">
+                    Password
+                  </label>
+                  <input
+                    type="password"
+                    id="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    disabled={isAuthenticating}
+                    className="w-full px-4 py-3 bg-bg-secondary border border-border-subtle rounded-xl text-white placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 focus:border-accent-cyan disabled:opacity-50"
+                    placeholder="Enter your password"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  disabled={isLoading || !email || !password}
+                  className="w-full py-4 px-6 bg-accent-cyan hover:bg-accent-cyan/90 rounded-xl text-black font-medium flex items-center justify-center gap-3 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isAuthenticating ? (
+                    <>
+                      <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                      <span>{authStatus || 'Signing in...'}</span>
+                    </>
+                  ) : (
+                    <span>Sign in with Email</span>
+                  )}
+                </button>
+              </form>
+            )}
 
             <p className="mt-6 text-center text-text-muted text-sm">
               By signing in, you agree to our{' '}