ddd

Author: Myst-Blazeio

src/components/GitHubAuthModal.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
-import { Github, X, User } from 'lucide-react';
+import { Github, X } from 'lucide-react';
 
 interface GitHubAuthModalProps {
   isOpen: boolean;
@@ -9,22 +9,51 @@ interface GitHubAuthModalProps {
 }
 
 export function GitHubAuthModal({ isOpen, onClose, onAuth }: GitHubAuthModalProps) {
-  const [username, setUsername] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const hasFetched = useRef(false); // Prevents duplicate API calls with the same code
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!username.trim()) return;
-
+  // Function to initiate the GitHub OAuth flow
+  const handleGitHubLogin = () => {
     setIsLoading(true);
-    // Simulate authentication delay
-    setTimeout(() => {
-      onAuth(username.trim());
-      setIsLoading(false);
-      setUsername('');
-    }, 1500);
+    const clientId = 'CLIENT_ID_HERE'; // Replace with your GitHub OAuth App Client ID
+    const redirectUri = 'http://localhost:3000/github/callback'; 
+    const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=read:user`;
+
+    window.location.href = githubAuthUrl;
   };
 
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code && !hasFetched.current) {
+      hasFetched.current = true; // Mark as fetched immediately
+      setIsLoading(true);
+
+      fetch('http://localhost:5000/github/callback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code }),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.user) {
+            console.log('GitHub Login Success:', data);
+            // This triggers the handleAuth logic in your App.tsx
+            onAuth(data.user.login);
+            
+            // Clean the URL so the code doesn't stay in the address bar
+            window.history.replaceState({}, document.title, "/");
+          }
+        })
+        .catch((err) => {
+          console.error('GitHub Login Error:', err);
+          hasFetched.current = false; // Allow retry on error
+        })
+        .finally(() => setIsLoading(false));
+    }
+  }, [onAuth]);
+
   return (
     <AnimatePresence>
       {isOpen && (
@@ -64,65 +93,43 @@ export function GitHubAuthModal({ isOpen, onClose, onAuth }: GitHubAuthModalProp
                   Sign in with GitHub
                 </h2>
                 <p className="text-gray-400">
-                  Enter your GitHub username to start your career
+                  Authenticate to start your career and save your progress.
                 </p>
               </div>
 
-              {/* Form */}
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div>
-                  <label htmlFor="username" className="block text-sm text-gray-300 mb-2">
-                    GitHub Username
-                  </label>
-                  <div className="relative">
-                    <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
-                    <input
-                      id="username"
-                      type="text"
-                      value={username}
-                      onChange={(e) => setUsername(e.target.value)}
-                      placeholder="your-username"
-                      className="w-full pl-12 pr-4 py-3 bg-black/50 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white placeholder-gray-500 transition-colors"
-                      required
-                      autoFocus
-                      disabled={isLoading}
+              {/* GitHub Login Button */}
+              <motion.button
+                onClick={handleGitHubLogin}
+                disabled={isLoading}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-500 hover:to-purple-500 transition-all duration-300 shadow-[0_0_20px_rgba(59,130,246,0.5)] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-white font-medium"
+              >
+                {isLoading ? (
+                  <>
+                    <motion.div
+                      animate={{ rotate: 360 }}
+                      transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                      className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
                     />
-                  </div>
-                </div>
-
-                <motion.button
-                  type="submit"
-                  disabled={isLoading || !username.trim()}
-                  whileHover={{ scale: 1.02 }}
-                  whileTap={{ scale: 0.98 }}
-                  className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg hover:from-blue-500 hover:to-purple-500 transition-all duration-300 shadow-[0_0_20px_rgba(59,130,246,0.5)] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-                >
-                  {isLoading ? (
-                    <>
-                      <motion.div
-                        animate={{ rotate: 360 }}
-                        transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-                        className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full"
-                      />
-                      Authenticating...
-                    </>
-                  ) : (
-                    <>
-                      <Github className="w-5 h-5" />
-                      Continue with GitHub
-                    </>
-                  )}
-                </motion.button>
-              </form>
+                    Authenticating...
+                  </>
+                ) : (
+                  <>
+                    <Github className="w-5 h-5" />
+                    Continue with GitHub
+                  </>
+                )}
+              </motion.button>
 
               {/* Note */}
               <p className="text-xs text-gray-500 text-center mt-6">
-                This is a demo authentication. In production, this would use real GitHub OAuth.
+                This will redirect you to GitHub for authentication.
               </p>
             </div>
           </motion.div>
         </>
       )}
     </AnimatePresence>
   );
-}
+}