Merge pull request #12 from Saagar3690/frontend

Frontend
richieej · Nov 16, 2023 · 397cc47 · 397cc47
2 parents 52a445e + a49bbc6
commit 397cc47
Show file tree

Hide file tree

Showing 10 changed files with 202 additions and 4 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules/
diff --git a/client/README.md b/client/README.md
@@ -6,6 +6,10 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm ci`
+
+Installs packages from the package-lock.json file
+
 ### `npm start`
 
 Runs the app in the development mode.\

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,6 +11,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/client/public/index.html b/client/public/index.html
@@ -24,7 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>EXCQL</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Concert+One&display=swap" rel="stylesheet">
+    <!-- <script src="https://apis.google.com/js/platform.js" async defer></script> -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.js b/client/src/App.js
@@ -3,15 +3,20 @@ import React from "react";
 import { Route, Routes } from "react-router-dom";
  // We import all the components we need in our app
 import Navbar from "./components/navbar";
+import Landing from "./components/landing";
 import RecordList from "./components/recordList";
 import Edit from "./components/edit";
 import Create from "./components/create";
+import Login from "./components/login";
+
  const App = () => {
  return (
    <div>
-     <Navbar />
+     {/* <Navbar /> */}
      <Routes>
        <Route exact path="/" element={<RecordList />} />
+       <Route path = "/landing" element={<Landing/>} />
+       <Route path = "/login" element={<Login/>} />
        <Route path="/edit/:id" element={<Edit />} />
        <Route path="/create" element={<Create />} />
      </Routes>

diff --git a/client/src/components/GoogleSignInButton.js b/client/src/components/GoogleSignInButton.js
@@ -0,0 +1,38 @@
+import React, { useEffect } from 'react';
+
+const GoogleSignInButton = () => {
+    const handleCredentialResponse = (response) => {
+      console.log("Encoded JWT ID token: " + response.credential);
+    };
+
+    useEffect(() => {
+      const initGoogleSignIn = () => {
+        window.google.accounts.id.initialize({
+          client_id: "YOUR_GOOGLE_CLIENT_ID",
+          callback: handleCredentialResponse
+        });
+        window.google.accounts.id.renderButton(
+          document.getElementById("buttonDiv"),
+          { theme: "outline", size: "large" }  // customization attributes
+        );
+        window.google.accounts.id.prompt(); // also display the One Tap dialog
+      };
+
+      if (!window.google || !window.google.accounts || !window.google.accounts.id) {
+        // Load the Google Sign-In API script
+        const script = document.createElement("script");
+        script.src = "https://accounts.google.com/gsi/client";
+        script.async = true;
+        script.onload = initGoogleSignIn;
+        document.body.appendChild(script);
+      } else {
+        initGoogleSignIn();
+      }
+    }, []); // Empty dependency array to run the effect only once on mount
+
+    return (
+      <div id="buttonDiv"></div>
+    );
+  }
+
+  export default GoogleSignInButton;
diff --git a/client/src/components/edit.js b/client/src/components/edit.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router";
- export default function Edit() {
+
+export default function Edit() {
  const [form, setForm] = useState({
    name: "",
    position: "",

diff --git a/client/src/components/landing.js b/client/src/components/landing.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from "react";
+import { Link } from 'react-router-dom';
+import styled from 'styled-components'
+
+const Logo = styled.h1`
+    font-size: 120px;
+    font-family: 'Bungee', sans-serif;
+    color: black;
+    text-align: center;
+    margin: auto;
+    padding-top: 1.5em;
+`
+
+const ButtonContainer = styled.div`
+    display: flex;
+    margin: auto;
+    justify-content: center;
+`
+
+const Button = styled.button `
+    padding: 10px 1em;
+    margin: 2em;
+    width: 20vw;
+    border-radius: 20px;
+    background-color: #f0ada8;
+    font-size: 30px;
+    font-family: 'Concert One', sans-serif;
+`
+
+export default function Landing() {
+    return (
+        <div>
+            <Logo>EXCQL</Logo>
+            <ButtonContainer>
+                <Link to = "/login">
+                    <Button> Login </Button>
+                </Link>
+                <Link to = "/signup">
+                    <Button> New User </Button>
+                </Link>
+            </ButtonContainer>
+        </div>
+    );
+}
diff --git a/client/src/components/login.js b/client/src/components/login.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import GoogleSignInButton from './GoogleSignInButton';
+
+export default function Login() {
+    return (
+        <div>
+            <GoogleSignInButton></GoogleSignInButton>
+            <div>
+                Here
+            </div>
+        </div>
+    )
+}