frontend auth

.idea/inventory-promotion-react.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/inventory-promotion-react.iml" filepath="$PROJECT_DIR$/.idea/inventory-promotion-react.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/shelf/Uncommitted_changes_before_Checkout_at_5_12_21,_11_41_AM_[Default_Changelist]/shelved.patch

+Index: package-lock.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package-lock.json b/package-lock.json
+--- a/package-lock.json	(revision 7d32de398b464649bcb5423b66d848f7da2d3f88)
++++ b/package-lock.json	(date 1620844182946)
+@@ -16,6 +16,7 @@
+         "react": "^17.0.2",
+         "react-bootstrap": "^1.5.2",
+         "react-dom": "^17.0.2",
++        "react-google-login": "^5.2.2",
+         "react-hook-form": "^7.4.1",
+         "react-router": "^5.2.0",
+         "react-router-dom": "^5.2.0",
+@@ -14626,6 +14627,19 @@
+       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+     },
++    "node_modules/react-google-login": {
++      "version": "5.2.2",
++      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
++      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
++      "dependencies": {
++        "@types/react": "*",
++        "prop-types": "^15.6.0"
++      },
++      "peerDependencies": {
++        "react": "^16 || ^17",
++        "react-dom": "^16 || ^17"
++      }
++    },
+     "node_modules/react-hook-form": {
+       "version": "7.4.1",
+       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
+@@ -31867,6 +31881,15 @@
+       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+     },
++    "react-google-login": {
++      "version": "5.2.2",
++      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
++      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
++      "requires": {
++        "@types/react": "*",
++        "prop-types": "^15.6.0"
++      }
++    },
+     "react-hook-form": {
+       "version": "7.4.1",
+       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
+Index: package.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+>{\n  \"name\": \"inventory-promotions-frontend\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.11.4\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\",\n    \"axios\": \"^0.21.1\",\n    \"bootstrap\": \"^5.0.0\",\n    \"react\": \"^17.0.2\",\n    \"react-bootstrap\": \"^1.5.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-hook-form\": \"^7.4.1\",\n    \"react-router\": \"^5.2.0\",\n    \"react-router-dom\": \"^5.2.0\",\n    \"react-scripts\": \"4.0.3\",\n    \"semantic-ui-css\": \"^2.4.1\",\n    \"semantic-ui-react\": \"^2.0.3\",\n    \"web-vitals\": \"^1.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package.json b/package.json
+--- a/package.json	(revision 7d32de398b464649bcb5423b66d848f7da2d3f88)
++++ b/package.json	(date 1620844182946)
+@@ -11,6 +11,7 @@
+     "react": "^17.0.2",
+     "react-bootstrap": "^1.5.2",
+     "react-dom": "^17.0.2",
++    "react-google-login": "^5.2.2",
+     "react-hook-form": "^7.4.1",
+     "react-router": "^5.2.0",
+     "react-router-dom": "^5.2.0",

.idea/shelf/Uncommitted_changes_before_Checkout_at_5_12_21__11_41_AM__Default_Changelist_.xml

+<changelist name="Uncommitted_changes_before_Checkout_at_5_12_21,_11_41_AM_[Default_Changelist]" date="1620844900240" recycled="true" deleted="true">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_5_12_21,_11_41_AM_[Default_Changelist]/shelved.patch" />
+  <option name="DESCRIPTION" value="Uncommitted changes before Checkout at 5/12/21, 11:41 AM [Default Changelist]" />
+</changelist>
\ No newline at end of file

.idea/shelf/Uncommitted_changes_before_Update_at_5_12_21,_11_42_AM_[Default_Changelist]/shelved.patch

+Index: package-lock.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package-lock.json b/package-lock.json
+--- a/package-lock.json	(revision 7d32de398b464649bcb5423b66d848f7da2d3f88)
++++ b/package-lock.json	(date 1620844900145)
+@@ -16,6 +16,7 @@
+         "react": "^17.0.2",
+         "react-bootstrap": "^1.5.2",
+         "react-dom": "^17.0.2",
++        "react-google-login": "^5.2.2",
+         "react-hook-form": "^7.4.1",
+         "react-router": "^5.2.0",
+         "react-router-dom": "^5.2.0",
+@@ -14626,6 +14627,19 @@
+       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+     },
++    "node_modules/react-google-login": {
++      "version": "5.2.2",
++      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
++      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
++      "dependencies": {
++        "@types/react": "*",
++        "prop-types": "^15.6.0"
++      },
++      "peerDependencies": {
++        "react": "^16 || ^17",
++        "react-dom": "^16 || ^17"
++      }
++    },
+     "node_modules/react-hook-form": {
+       "version": "7.4.1",
+       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
+@@ -31867,6 +31881,15 @@
+       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+     },
++    "react-google-login": {
++      "version": "5.2.2",
++      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.2.2.tgz",
++      "integrity": "sha512-JUngfvaSMcOuV0lFff7+SzJ2qviuNMQdqlsDJkUM145xkGPVIfqWXq9Ui+2Dr6jdJWH5KYdynz9+4CzKjI5u6g==",
++      "requires": {
++        "@types/react": "*",
++        "prop-types": "^15.6.0"
++      }
++    },
+     "react-hook-form": {
+       "version": "7.4.1",
+       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.4.1.tgz",
+Index: package.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+>{\n  \"name\": \"inventory-promotions-frontend\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.11.4\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\",\n    \"axios\": \"^0.21.1\",\n    \"bootstrap\": \"^5.0.0\",\n    \"react\": \"^17.0.2\",\n    \"react-bootstrap\": \"^1.5.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-hook-form\": \"^7.4.1\",\n    \"react-router\": \"^5.2.0\",\n    \"react-router-dom\": \"^5.2.0\",\n    \"react-scripts\": \"4.0.3\",\n    \"semantic-ui-css\": \"^2.4.1\",\n    \"semantic-ui-react\": \"^2.0.3\",\n    \"web-vitals\": \"^1.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package.json b/package.json
+--- a/package.json	(revision 7d32de398b464649bcb5423b66d848f7da2d3f88)
++++ b/package.json	(date 1620844900149)
+@@ -11,6 +11,7 @@
+     "react": "^17.0.2",
+     "react-bootstrap": "^1.5.2",
+     "react-dom": "^17.0.2",
++    "react-google-login": "^5.2.2",
+     "react-hook-form": "^7.4.1",
+     "react-router": "^5.2.0",
+     "react-router-dom": "^5.2.0",

.idea/shelf/Uncommitted_changes_before_Update_at_5_12_21__11_42_AM__Default_Changelist_.xml

+<changelist name="Uncommitted_changes_before_Update_at_5_12_21,_11_42_AM_[Default_Changelist]" date="1620844923266" recycled="false" toDelete="true">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_5_12_21,_11_42_AM_[Default_Changelist]/shelved.patch" />
+  <option name="DESCRIPTION" value="Uncommitted changes before Update at 5/12/21, 11:42 AM [Default Changelist]" />
+</changelist>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/workspace.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="782be151-5ffb-4bb8-9cbe-39bce549aa91" name="Default Changelist" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_BRANCH_BY_REPOSITORY">
+      <map>
+        <entry key="$PROJECT_DIR$" value="AFP-6" />
+      </map>
+    </option>
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="1s6VjxITkLhRTITrUtKzJtqAnzS" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="782be151-5ffb-4bb8-9cbe-39bce549aa91" name="Default Changelist" comment="" />
+      <created>1620193165194</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1620193165194</updated>
+    </task>
+    <servers />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State>
+              <option name="FILTERS">
+                <map>
+                  <entry key="branch">
+                    <value>
+                      <list>
+                        <option value="AFP-6" />
+                      </list>
+                    </value>
+                  </entry>
+                </map>
+              </option>
+            </State>
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+</project>
\ No newline at end of file

src/App.js

@@ -5,20 +5,43 @@ import AuthRoute from "./component/AuthRoute";
 import { Switch } from "react-router";
 import Login from "./component/Login";
 import 'semantic-ui-css/semantic.min.css'
+import React, { useState, createContext, useEffect } from 'react';
+
+
+export const AuthContext = createContext();
+
 
 function App() {
+  const[isLoggedIn, setIsLoggedIn] = useState(false);
+  const[user, setUser] = useState(null);
+
+  const state = {
+    user,
+    setUser,
+    isLoggedIn,
+    setIsLoggedIn
+  }
+
+  useEffect(()=>{
+
+    localStorage.setItem("loggedIn", isLoggedIn)
+
+  }, [isLoggedIn])
+
   return (
-    <div>
-      <Switch>
-        <AuthRoute path="/login">
-          <Login />
-        </AuthRoute>
-        <AuthRoute>
-          <Header />
-          <Main />
-        </AuthRoute>
-      </Switch>
-    </div>
+    <AuthContext.Provider value={state}>
+      <div>
+        <Switch>
+          <AuthRoute path="/login">
+            <Login />
+          </AuthRoute>
+          <AuthRoute>
+            <Header />
+            <Main />
+          </AuthRoute>
+        </Switch>
+      </div>
+    </AuthContext.Provider>
   );
 }
 

src/component/AuthRoute.jsx

+import {useEffect, useContext} from "react";
 import React from "react";
 import { Redirect, Route } from "react-router";
+import {AuthContext} from '../App';
+
+export default function AuthRoute({children, ...rest}) {
+
+  const { isLoggedIn } = useContext(AuthContext)
+
 
-export default function AuthRoute({ children, ...rest }) {
-  // TODO: replace with actual Auth data from redux later
-  const auth = true;
   return (
     <Route
       {...rest}
       render={({ location }) => {
-        console.log(location);
-        if (auth) {
+        if (isLoggedIn) {
           if (location.pathname === "/login") {
             return <Redirect to="/" />;
           } else {

src/component/Header.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import Search from "./Search";
+import LogoutButton from "./session/LogoutButton";
 
-const Header = () => {
+const Header = ({login, setLogin}) => {
   const [show, setShow] = useState(false);
 
   return (
@@ -40,6 +41,7 @@ const Header = () => {
             </li>
           </ul>
         <Search />
+        <LogoutButton/>
         </div>
       </div>
     </nav>

src/component/Login.jsx

 import React from 'react'
+import LoginButton from './session/LoginButton'
 
-export default function Login() {
+export default function Login({}) {
   return (
     <div>
-      LOGIN
+      <LoginButton />
     </div>
   )
 }

src/component/session/LoginButton.jsx

+import React, {useContext} from 'react';
+import {GoogleLogin} from 'react-google-login';
+import "./LoginButtonPage.css";
+import {AuthContext} from "../../App";
+
+const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+const clientId = `${google_ClientID}.apps.googleusercontent.com`;
+
+function LoginButton({}){
+
+    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
+
+    const onSuccessLogin = (res) =>{
+        setIsLoggedIn(true);
+        const { tokenId, profileObj } = res;    
+    };
+
+    const onFailure = (res) =>{
+        setIsLoggedIn(false);
+    };
+
+
+    return(
+        <div>
+            <div className="loginContainer">
+                <h1>Welcome to Ascend Inventory</h1>
+                <h3>Please Login with Google credentials</h3>
+            
+            <GoogleLogin 
+                clientId= {clientId}
+                buttonText="Sign-in with Google"
+                onSuccess= {onSuccessLogin}
+                onFailure= {onFailure}
+                cookiePolicy={'single_host_origin'}
+            />
+            </div>
+        </div>
+    );
+}
+
+export default LoginButton;
\ No newline at end of file

src/component/session/LoginButtonPage.css

+.loginContainer{
+    padding: 50px;
+    justify-content: center;
+
+}
\ No newline at end of file

src/component/session/LogoutButton.jsx

+import React, {useContext} from 'react';
+import {GoogleLogout} from 'react-google-login';
+import {AuthContext} from "../../App";
+
+const google_ClientID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+const clientId = `${google_ClientID}.apps.googleusercontent.com`;
+
+function LogoutButton(){
+
+    const { isLoggedIn, setIsLoggedIn } = useContext(AuthContext);
+
+    const onSuccessLogout= (res) =>{
+        setIsLoggedIn(false);
+    }
+
+    return(
+        <div>
+            <GoogleLogout
+                clientId= {clientId}
+                buttonText="Logout"
+                onLogoutSuccess={onSuccessLogout}
+            />
+        </div>
+    );
+}
+
+export default LogoutButton;

src/config.js

 class Config {
     static inventoryUrl = "http://localhost:8080/api/products";
     static promotionsUrl = "http://localhost:8081/api/promos";
+    static sessionUrl = "http://localhost:8080//api/sessions";
 }
 
 export default Config;

src/index.js

@@ -6,6 +6,9 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 
+const storage = window.localStorage;
+storage.setItem("loggedIn", "false");
+
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>