added choose between github oauth or without

Author: Lina0Elman

nextstep-backend/src/controllers/github_controller.ts

@@ -46,10 +46,16 @@ export const handleGitHubOAuth = async (req: Request, res: Response) => {
 
 export const fetchGitHubRepos = async (req: Request, res: Response) => {
     const { username } = req.params;
+    const { accessToken } = req.query; // Optional access token for authenticated requests
 
     try {
         const apiUrl = `https://api.github.com/users/${username}/repos`;
-        const response = await axios.get(apiUrl) as {data: any, status: number};
+
+        const headers = accessToken
+            ? { Authorization: `Bearer ${accessToken}` }
+            : undefined;
+
+        const response = await axios.get(apiUrl, { headers }) as { data: any, status: number };
 
         if (response.status !== 200) {
             return res.status(400).json({ error: `Error fetching repos: ${response.status}` });

nextstep-frontend/src/handlers/githubAuth.ts

@@ -18,15 +18,15 @@ export const fetchGitHubRepos = async (username: string) => {
 export const connectToGitHub = async (username: string) => {
     if (!username) {
         throw new Error('Username is required to connect to GitHub.');
-    }
+        }
     return await fetchGitHubRepos(username);
 };
 
 // Function to initiate GitHub OAuth login (redirect only)
 export const initiateGitHubOAuth = () => {
     const clientId = import.meta.env.VITE_GITHUB_CLIENT_ID; // Use environment variable
     const redirectUri = import.meta.env.VITE_GITHUB_REDIRECT_URI; // Use environment variable
-    const scope = 'read:repo'; // Only read access to repositories
+    const scope = 'public_repo'; // Only read access to repositories
     const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;
     window.location.href = authUrl; // Redirect the user to GitHub's authorization page
 };

nextstep-frontend/src/pages/MainDashboard.tsx

@@ -43,6 +43,8 @@ const MainDashboard: React.FC = () => {
   const [newSkill, setNewSkill] = useState('');
   const [selectedRole, setSelectedRole] = useState(() => localStorage.getItem('selectedRole') || '');
   const [repos, setRepos] = useState<{ id: number; name: string; html_url: string }[]>([]);
+  const [useOAuth, setUseOAuth] = useState(true); // Toggle for GitHub connection method
+  const [showAuthOptions, setShowAuthOptions] = useState(false); // Toggle for showing auth options
 
   useEffect(() => {
     localStorage.setItem('aboutMe', aboutMe);
@@ -67,10 +69,35 @@ const MainDashboard: React.FC = () => {
   };
 
   const handleGitHubConnect = async () => {
+    if (!showAuthOptions) {
+      setShowAuthOptions(true); // Show auth options first
+      return;
+    }
+
     try {
-      initiateGitHubOAuth();
+      if (useOAuth) {
+        initiateGitHubOAuth();
+      } else {
+        const username = prompt('Enter GitHub username:');
+        if (!username) {
+          alert('GitHub username is required for No Auth connection.');
+          return;
+        }
+        const fetchedRepos = await connectToGitHub(username);
+        setRepos(fetchedRepos);
+
+        // Fetch languages and add them as skills
+        const languagesSet = new Set(skills);
+        for (const repo of fetchedRepos) {
+          const repoLanguages = await fetchRepoLanguages(repo.html_url);
+          Object.keys(repoLanguages).forEach((lang) => languagesSet.add(lang));
+        }
+        setSkills(Array.from(languagesSet));
+      }
     } catch (error) {
-      console.error('Error initiating GitHub OAuth:', error);
+      console.error('Error connecting to GitHub:', error);
+    } finally {
+      setShowAuthOptions(false); // Close auth options after proceeding
     }
   };
 
@@ -203,14 +230,26 @@ const MainDashboard: React.FC = () => {
             >
               Connect to LinkedIn
             </Button>
+            {showAuthOptions && (
+              <FormControl fullWidth sx={{ mb: 2 }}>
+                <InputLabel>GitHub Connection Method</InputLabel>
+                <Select
+                  value={useOAuth ? 'oauth' : 'no-auth'}
+                  onChange={(e) => setUseOAuth(e.target.value === 'oauth')}
+                >
+                  <MenuItem value="oauth">OAuth</MenuItem>
+                  <MenuItem value="no-auth">No Auth</MenuItem>
+                </Select>
+              </FormControl>
+            )}
             <Button
               variant="contained"
               color="secondary"
               startIcon={<GitHub />}
               fullWidth
               onClick={handleGitHubConnect}
             >
-              Connect to GitHub
+              {showAuthOptions ? 'Proceed' : 'Connect to GitHub'}
             </Button>
             {
             repos.length > 0 && <Typography variant="h6" sx={{ mt: 3 }}>
@@ -226,7 +265,7 @@ const MainDashboard: React.FC = () => {
                 </li>
               ))}
             </ul>
-        </Paper>
+          </Paper>
         </Grid>
       </Grid>
     </Container>