Fix URLs and paths

ocadotechnology · Aug 30, 2024 · 64d4fe5 · 64d4fe5
1 parent 7e75d3a
commit 64d4fe5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/src/components/GitHubLoginButton.tsx b/src/components/GitHubLoginButton.tsx
@@ -0,0 +1,35 @@
+import { type FC } from "react"
+import GitHubMarkWhiteImage from "../images/github-mark-white.png"
+import { LinkButton } from "codeforlife/components/router"
+
+export interface GitHubLoginButtonProps {}
+
+const GitHubLoginButton: FC<GitHubLoginButtonProps> = () => {
+  return (
+    <LinkButton
+      to="https://github.com/login/oauth/authorize?client_id=Ov23liBErSabQFqROeMg"
+      target="_blank"
+      style={{
+        marginTop: "200px",
+        borderRadius: "5px",
+        padding: "30px 40px",
+        fontSize: "20px",
+        background: "#000000",
+        color: "#FFFFFF",
+        display: "flex",
+        alignItems: "center",
+      }}
+      startIcon={
+        <img
+          src={GitHubMarkWhiteImage}
+          alt="GitHub Logo"
+          style={{ width: "40px", marginRight: "20px" }}
+        />
+      }
+    >
+      Log in with GitHub
+    </LinkButton>
+  )
+}
+
+export default GitHubLoginButton
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -21,8 +21,6 @@ const Home: FC<HomeProps> = () => {
         </Typography>
         <Link to={paths.contributors._}>Contributors list </Link>
         <br></br>
-        <Link to={paths.agreementSignatures._}> Agreement signatures list</Link>
-        <br></br>
         <Link to={paths.login._}> Login with github</Link>
       </pages.Section>
     </pages.Page>

diff --git a/src/pages/login/GitHub.tsx b/src/pages/login/GitHub.tsx
@@ -1,8 +1,7 @@
 import * as pages from "codeforlife/components/page"
 import { type FC, useEffect } from "react"
-import Button from "@mui/material/Button"
 import CflLogoImage from "../../images/cfl_logo.png"
-import GitHubMarkWhiteImage from "../../images/github-mark-white.png"
+import GitHubLoginButton from "../../components/GitHubLoginButton"
 import { Image } from "codeforlife/components"
 import { useLoginWithGitHubMutation } from "../../api/session"
 
@@ -11,23 +10,21 @@ export interface GitHubProps {}
 const GitHub: FC<GitHubProps> = () => {
   const [loginWithGitHub] = useLoginWithGitHubMutation()
 
-  const handleLogin = () => {
-    window.location.href = `https://github.com/login/oauth/authorize?client_id=Ov23liBErSabQFqROeMg`
-  }
-
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search)
     const code = urlParams.get("code")
 
     if (code) {
       urlParams.delete("code")
       window.history.replaceState(null, "", window.location.pathname)
+
       loginWithGitHub({ code })
         .unwrap()
         .then(() => {
           window.location.href = "/agreement-signatures"
         })
         .catch(err => {
+          window.location.href = "/login"
           alert(`Login failed: ${err}`)
         })
     }
@@ -46,26 +43,7 @@ const GitHub: FC<GitHubProps> = () => {
           }}
         >
           <Image src={CflLogoImage} alt="code for life logo" maxWidth="200px" />
-          <Button
-            onClick={handleLogin}
-            style={{
-              marginTop: "200px",
-              borderRadius: "5px",
-              padding: "30px 40px",
-              fontSize: "20px",
-              background: "#000000",
-              color: "#FFFFFF",
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <img
-              src={GitHubMarkWhiteImage}
-              alt="GitHub Logo"
-              style={{ width: "40px", marginRight: "20px" }}
-            />
-            Log in with GitHub
-          </Button>
+          <GitHubLoginButton />
         </div>
       </pages.Section>
     </pages.Page>