Changes from "Created the button and title for landing page"

.gitignore

@@ -157,3 +157,6 @@ cython_debug/
 nextjs/.next/
 nextjs/node_modules/
 nextjs/next-env.d.ts
+
+# Secrets
+secrets.sh

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.4",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

frontend/src/App.js

@@ -1,7 +1,7 @@
 import './App.css';
 import { createClient } from '@supabase/supabase-js';
-import { useEffect, useState } from 'react';
-import axios from 'axios';
+import Title from './components/Title';
+import Button from './components/PrimaryButton';
 
 
 
@@ -17,40 +17,7 @@ const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS
 const supabase = createClient(supabaseUrl, supabaseKey)
 
 
-
 function App() {
-  return (
-    <div className="App">
-        <h1>
-          Auto Repo Resurrection
-
-        </h1>
-
-        <p>
-          Just type in a Github URL, and get a working development environment back!
-        </p>
-        <Github />
-    </div>
-  );
-}
-
-
-export function Github() {
-  const [ sessionData, setLoggedIn ] =  useState(null);
-  useEffect(() => {
-     supabase.auth.onAuthStateChange(
-      (event, session) => {
-        // Handle session updates
-        if (event === 'SIGNED_IN') {
-          console.log('signed in')
-        }
-        if (session !== null) {
-          setLoggedIn(session)
-        }
-        console.log(event, session)
-      }
-    )
-  }, [setLoggedIn])
 
   const signInWithGithub = async () => {
     const { data, error } = await supabase.auth.signInWithOAuth({
@@ -67,76 +34,19 @@ export function Github() {
     }
   }
 
-
-  if (sessionData) {
-    return (
-      <div>
-        <SetGithubUrl accessToken={sessionData.access_token} email={sessionData.user.email} />
-        <SignOut />
+  return (
+    <div className="grid grid-cols-2 p-4 h-screen">
+      <div className="flex flex-col justify-center">
+        <Title title="reposurrection." subtitle="breathe a second life into your dead repos." className="px-12" />
       </div>
-    );
-
-
-  } else {
-    return (
-      <button onClick={signInWithGithub}>
-        Sign in with GitHub
-      </button>
-    )
-  }
-}
-
-function SetGithubUrl(props) {
-  const [ githubRepoUrl, setGithubRepoUrl ] = useState(null);
-  const [ triggeredGithubUrl, setTriggeredGithubUrl ] = useState(null);
-
-  function createDevEnvironment(githubRepoUrl) {
-    axios.post(backendUrl + "/create-dev-environment", {"githubRepoUrl": githubRepoUrl, "githubAccessToken": props.accessToken, "email": props.email }).then((response) => {
-      setTriggeredGithubUrl(githubRepoUrl);
-    })
-  }
-
-  var triggeredGithubUrlText = null;
-
-  if (triggeredGithubUrl) {
-    triggeredGithubUrlText = (
-      <p>
-        Setting up dev environment for {triggeredGithubUrl}! You'll get an email when this completes.
-      </p>
-    )
-  }
-
+      <div className="flex flex-col h-full w-full justify-center items-center">
 
-  return (
-    <div>
-      <input type="text" placeholder='github repo url' value={githubRepoUrl} onChange={e => setGithubRepoUrl(e.target.value)} />
-      <button onClick={() => createDevEnvironment(githubRepoUrl)}>
-        Set Github URL
-      </button>
-      {triggeredGithubUrlText}
+        {/* Note: the onClick functionality is the same as the previous GitHub button. */}
+        <Button text="sign in with GitHub" onClick={signInWithGithub} className="w-1/2 bg-gray-300 hover:bg-blue-700 text-black text-2xl font-medium py-7 px-6 rounded rounded-xl mx-12" />
+      </div>
     </div>
-  )
+  );
 }
 
 
-
-function SignOut() {
-  const signOut = async () => {
-    const { error } = await supabase.auth.signOut()
-
-    if (error) {
-      console.log('Error signing out:', error.message)
-    }
-  }
-
-  return (
-    <p>
-      <button onClick={signOut}>
-        Sign out
-      </button>
-    </p>
-
-  )
-} 
-
 export default App;

frontend/src/components/GitHubLogin/index.jsx

@@ -0,0 +1,123 @@
+import { useState, useEffect } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import axios from 'axios';
+
+
+const isDevelopment = false;
+
+var backendUrl = "http://localhost:8000";
+
+if (isDevelopment) {
+  backendUrl = "http://localhost:8000"
+}
+const supabaseUrl = 'https://jkohjbndimwjcyobeuaf.supabase.co'
+const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imprb2hqYm5kaW13amN5b2JldWFmIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODUyNTcxODIsImV4cCI6MjAwMDgzMzE4Mn0.bICKR1hSTyppYMPx8cEgocdY4IaStBlcIJdlQ1Iymg4'
+const supabase = createClient(supabaseUrl, supabaseKey)
+
+
+function GitHubLogin() {
+    const [ sessionData, setLoggedIn ] =  useState(null);
+    useEffect(() => {
+       supabase.auth.onAuthStateChange(
+        (event, session) => {
+          // Handle session updates
+          if (event === 'SIGNED_IN') {
+            console.log('signed in')
+          }
+          if (session !== null) {
+            setLoggedIn(session)
+          }
+          console.log(event, session)
+        }
+      )
+    }, [setLoggedIn])
+
+    const signInWithGithub = async () => {
+      const { data, error } = await supabase.auth.signInWithOAuth({
+        provider: 'github',
+        options: {
+          scopes: "codespace,repo",
+        }
+      })
+
+      console.log(data);
+
+      if (error) {
+        console.log('Error signing in with GitHub:', error.message)
+      }
+    }
+
+
+    if (sessionData) {
+      return (
+        <div>
+          <SetGithubUrl accessToken={sessionData.access_token} email={sessionData.user.email} />
+          <SignOut />
+        </div>
+      );
+
+
+    } else {
+      return (
+        <button onClick={signInWithGithub}>
+          Sign in with GitHub
+        </button>
+      )
+    }
+}
+
+function SetGithubUrl(props) {
+    const [ githubRepoUrl, setGithubRepoUrl ] = useState(null);
+    const [ triggeredGithubUrl, setTriggeredGithubUrl ] = useState(null);
+
+    function createDevEnvironment(githubRepoUrl) {
+      axios.post(backendUrl + "/create-dev-environment", {"githubRepoUrl": githubRepoUrl, "githubAccessToken": props.accessToken, "email": props.email }).then((response) => {
+        setTriggeredGithubUrl(githubRepoUrl);
+      })
+    }
+
+    var triggeredGithubUrlText = null;
+
+    if (triggeredGithubUrl) {
+      triggeredGithubUrlText = (
+        <p>
+          Setting up dev environment for {triggeredGithubUrl}! You'll get an email when this completes.
+        </p>
+      )
+    }
+
+
+    return (
+      <div>
+        <input type="text" placeholder='github repo url' value={githubRepoUrl} onChange={e => setGithubRepoUrl(e.target.value)} />
+        <button onClick={() => createDevEnvironment(githubRepoUrl)}>
+          Set Github URL
+        </button>
+        {triggeredGithubUrlText}
+      </div>
+    )
+  }
+
+
+
+  function SignOut() {
+    const signOut = async () => {
+      const { error } = await supabase.auth.signOut()
+
+      if (error) {
+        console.log('Error signing out:', error.message)
+      }
+    }
+
+    return (
+      <p>
+        <button onClick={signOut}>
+          Sign out
+        </button>
+      </p>
+
+    )
+  } 
+
+
+export default GitHubLogin;

frontend/src/components/PrimaryButton/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+
+const Button = ({ text, onClick, className }) => {
+
+    const classes = classNames('text-center', 'justify-center', 'hover:cursor-pointer', 'hover:bg-black', 'hover:text-gray-300', className);
+
+    return (
+        <div className={classes} onClick={onClick}>
+            <h1>{text}</h1>
+        </div>
+    );
+};
+
+export default Button;

frontend/src/components/Title/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+
+const Title = ({ title, subtitle, className }) => {
+
+  const classes = classNames('flex', 'flex-col', 'text-left', 'justify-center', 'font-sans', className);
+
+  return (
+    <div className={classes}>
+      <h1 className="text-6xl font-medium">{title}</h1>
+      <h2 className="text-2xl font-thin">{subtitle}</h2>
+    </div>
+  );
+};
+
+export default Title;

frontend/src/index.css

@@ -5,12 +5,16 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: rgb(2,0,36);
-  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
-  color: white;
+  /* background: rgb(2,0,36);
+  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
+  color: black;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}