Implement login

snowflake-app · Jan 26, 2021 · 3995024 · 3995024
1 parent 4c9fae6
commit 3995024
Show file tree

Hide file tree

Showing 23 changed files with 751 additions and 70 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,9 +10,14 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "axios": "^0.21.1",
+    "bulma": "^0.9.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-google-login": "^5.2.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "sass": "^1.32.5",
     "typescript": "^4.0.3",
     "web-vitals": "^0.2.4"
   },
@@ -39,5 +44,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "proxy": "http://localhost:5000",
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7"
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,43 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+<head>
+  <meta charset="utf-8"/>
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="theme-color" content="#000000"/>
+  <meta
+          name="description"
+          content="Web site created using create-react-app"
+  />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
+  <title>Snowflake</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
+</body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
diff --git a/frontend/src/components/AlertContainer.module.css b/frontend/src/components/AlertContainer.module.css
@@ -0,0 +1,9 @@
+.container {
+  position: fixed;
+  z-index: 1000;
+  right: 2rem;
+  top: 5rem;
+  width: 25rem;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/frontend/src/components/AlertContainer.tsx b/frontend/src/components/AlertContainer.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {useAlerts} from "../hooks/use-alerts";
+import styles from './AlertContainer.module.css';
+
+export default function AlertContainer() {
+  const {alerts, removeAlert} = useAlerts();
+  return (
+    <div className={styles.container}>
+      {alerts.map(alert =>
+        <div className={`alert notification is-${alert.category || 'primary'}`}>
+          <button className="delete" onClick={() => removeAlert(alert.id)}/>
+          <p>{alert.content}</p>
+        </div>)}
+    </div>
+  );
+}
diff --git a/frontend/src/components/App.module.css b/frontend/src/components/App.module.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/App.test.tsx → frontend/src/components/App.test.tsx b/frontend/src/App.test.tsx → frontend/src/components/App.test.tsx
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import LoginPage from "./LoginPage";
+import HomePage from "./HomePage";
+import ProtectedRoute from "./ProtectedRoute";
+import {BrowserRouter, Route, Switch} from "react-router-dom";
+import {AuthProvider} from "../hooks/use-auth";
+import {AlertProvider} from "../hooks/use-alerts";
+import AlertContainer from "./AlertContainer";
+
+export default function App() {
+  return (
+    <AlertProvider>
+      <AlertContainer/>
+      <AuthProvider>
+        <BrowserRouter>
+          <Switch>
+            <Route path="/login">
+              <LoginPage/>
+            </Route>
+            <ProtectedRoute exact={true} path="/">
+              <HomePage/>
+            </ProtectedRoute>
+          </Switch>
+        </BrowserRouter>
+      </AuthProvider>
+    </AlertProvider>
+  )
+    ;
+}
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function HomePage() {
+  return <h1>Welcome to Snowflake</h1>
+}
diff --git a/frontend/src/components/Loading.module.css b/frontend/src/components/Loading.module.css
@@ -0,0 +1,3 @@
+.loader {
+  max-width: 5rem;
+}
diff --git a/frontend/src/components/Loading.tsx b/frontend/src/components/Loading.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+import styles from './Loading.module.css'
+import loader from "../images/loader.svg";
+
+export default function Loading() {
+  return (
+    <div className="viewport">
+      <img src={loader} alt="Loading..." className={styles.loader}/>
+    </div>);
+
+}
diff --git a/frontend/src/components/LoginPage.module.css b/frontend/src/components/LoginPage.module.css
@@ -0,0 +1,6 @@
+.loginPage {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/frontend/src/components/LoginPage.tsx b/frontend/src/components/LoginPage.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import {GoogleLogin} from 'react-google-login';
+
+import styles from './LoginPage.module.css';
+import {useHistory, useLocation} from "react-router-dom";
+import {useAlerts} from "../hooks/use-alerts";
+import googleLogo from "../images/google-logo.svg";
+import {useAuth} from "../hooks/use-auth";
+
+export default function LoginPage() {
+  const history = useHistory();
+  const location = useLocation();
+
+  const {addAlert} = useAlerts();
+  const {login} = useAuth();
+
+
+  const doLogin = async (data: any) => {
+    console.log(data);
+
+    const idToken = data.getAuthResponse().id_token;
+
+    try {
+      await login(idToken);
+
+      const params = new URLSearchParams(location.search);
+      const next = params.get('next') || '/';
+      history.replace({pathname: next});
+    } catch (e) {
+      addAlert({
+        category: "danger",
+        title: 'Error',
+        content: e.message
+      })
+    }
+  };
+
+  const loginError = (data: any) => {
+    console.log(data);
+    addAlert({
+      category: "danger",
+      title: 'Error',
+      content: 'Error authenticating with Google'
+    });
+  };
+
+  // noinspection CheckTagEmptyBody
+  return (
+    <div className={styles.loginPage}>
+      <div className="box has-text-centered p-6">
+        <p className="is-size-1 mb-4 has-text-primary">
+          <ion-icon name="snow-outline"></ion-icon>
+        </p>
+        <h1 className="title">Welcome to Snowflake!</h1>
+        <p className="subtitle block my-4">You can sign in with SSO, using your work email address</p>
+        <form method="post" className="field mt-6">
+          <div className="control">
+            <GoogleLogin
+              className="button is-large is-light"
+              clientId={'' + process.env.REACT_APP_GOOGLE_CLIENT_ID}
+              onSuccess={doLogin}
+              onFailure={loginError}
+              cookiePolicy="single_host_origin"
+              render={renderProps => (
+                <button className="button is-large is-light" onClick={renderProps.onClick}
+                        disabled={renderProps.disabled}>
+                  <div className="mr-1 p-1">
+                    <img alt="Google logo" src={googleLogo}/>
+                  </div>
+                  Sign in with Google
+                </button>
+              )}
+            />
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import {Redirect, Route, RouteProps} from "react-router-dom";
+import {useAuth} from "../hooks/use-auth";
+
+export default function ProtectedRoute({children, ...rest}: RouteProps) {
+  const {isLoggedIn} = useAuth();
+
+  return (
+    <Route
+      {...rest}
+      render={({location}) => {
+        if (isLoggedIn()) {
+          return (children);
+        }
+
+        return <Redirect
+          to={{
+            pathname: `/login`,
+            search: `?next=${location.pathname}`
+          }}
+        />;
+      }}
+    />
+  );
+}
diff --git a/frontend/src/hooks/use-alerts.tsx b/frontend/src/hooks/use-alerts.tsx
@@ -0,0 +1,64 @@
+import React, {ComponentProps, createContext, useContext, useState} from "react";
+
+type Category = "primary" | "link" | "info" | "success" | "warning" | "danger";
+
+type Alert = {
+  id: string
+  title: string,
+  category?: Category
+  content: string
+}
+
+type AddAlertProps = {
+  id?: string,
+  title: string,
+  category: Category,
+  content: string
+};
+
+type AlertContext = {
+  alerts: Alert[]
+  addAlert: (notification: AddAlertProps) => void,
+  removeAlert: (id: string) => void
+};
+
+const noopAlertContext: AlertContext = {
+  alerts: [],
+  addAlert: _ => {
+  },
+  removeAlert: _ => {
+  }
+};
+
+const notificationContext = createContext<AlertContext>(noopAlertContext);
+
+export function AlertProvider({children}: ComponentProps<any>) {
+  const context = useProvideAlerts();
+  return (<notificationContext.Provider value={context}>{children}</notificationContext.Provider>);
+}
+
+export const useAlerts = () => {
+  return useContext(notificationContext);
+};
+
+function generateRandomId() {
+  return "n_" + Date.now().toString(36)
+}
+
+function useProvideAlerts(): AlertContext {
+
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+
+  const addAlert = (notification: AddAlertProps) => {
+    const id = notification.id || generateRandomId();
+    setAlerts(prevState => [...prevState, {id, ...notification}]);
+    setTimeout(() => removeAlert(id), 10000);
+  };
+
+  const removeAlert = (id: string) => {
+    setAlerts(prevState => prevState.filter(value => value.id !== id))
+  };
+
+  return {alerts, addAlert, removeAlert};
+}
+