From 07dd7c5624558c203e5788bcdc51cc1dbdd3a9b4 Mon Sep 17 00:00:00 2001
From: Ruidy <nemausatpro@gmail.com>
Date: Thu, 14 May 2020 14:18:22 +0200
Subject: [PATCH] Signin (#6)

* install redux and set authSlice

* connect navBar to the sotre

* create User type

* install react-redux-firebase

* bind to firebase

* connect App to firebase auth; display splash screen while loading auth state

* install firestore

* install firestore

* enable interactive form

* signup page functional

* fix navbar bug

* extract useForm hook

* extract Alert component

* sign in page functional

* commenting

* log out function

* add private route
---
 package.json                        |   1 +
 src/components/Alert.tsx            |  15 +
 src/components/NavBar.tsx           |  22 +-
 src/hooks/index.ts                  |  28 ++
 src/models/User.ts                  |  16 +-
 src/pages/SignIn.tsx                | 125 +++++--
 src/pages/SignUp.tsx                | 176 +++++++--
 src/pages/__tests__/SignUp.spec.tsx |   7 +
 src/router/PrivateRoute.tsx         |  48 +++
 src/router/Router.tsx               |  18 +-
 src/static/css/style.min.css        | 548 +---------------------------
 src/static/scss/_utils.scss         |   2 +-
 yarn.lock                           |   7 +
 13 files changed, 395 insertions(+), 618 deletions(-)
 create mode 100644 src/components/Alert.tsx
 create mode 100644 src/hooks/index.ts
 create mode 100644 src/pages/__tests__/SignUp.spec.tsx
 create mode 100644 src/router/PrivateRoute.tsx

diff --git a/package.json b/package.json
index 8b3c84b..31db85a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "moment": "^2.25.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-google-button": "^0.7.1",
     "react-redux": "^7.2.0",
     "react-redux-firebase": "^3.4.0",
     "react-router-dom": "^5.2.0",
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
new file mode 100644
index 0000000..0aa6566
--- /dev/null
+++ b/src/components/Alert.tsx
@@ -0,0 +1,15 @@
+import React, {FC} from 'react';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
+
+interface IProps {
+  text: string;
+}
+
+const Alert: FC<IProps> = ({text}) => (
+  <div className="alert alert-danger">
+    <FontAwesomeIcon icon={faExclamationTriangle} /> {text}
+  </div>
+);
+
+export default Alert;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 9635b0a..d2622be 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,14 +3,17 @@ import React, {FC} from 'react';
 import {Link} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
 //Redux
+import {compose} from '@reduxjs/toolkit';
 import {connect} from 'react-redux';
+import {withFirebase, WithFirebaseProps} from 'react-redux-firebase';
 import {selectProfile} from '../store/firebase';
-// import {selectAuthState} from '../store/auth';
 // Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCode, faSignOutAlt, faUser} from '@fortawesome/free-solid-svg-icons';
+// Typing
+import User from '../models/User';
 
-interface IProps {
+interface IProps extends WithFirebaseProps<User> {
   isEmpty: boolean;
   isLoaded: boolean;
 }
@@ -18,7 +21,7 @@ interface IProps {
 /**
  * Main Navbar serves navigation routes.
  */
-const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
+const NavBar: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
   const publicLinks = (
     <ul data-testid="publicLinks">
       <li>
@@ -58,7 +61,11 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
         </Link>
       </li>
       <li>
-        <Link to={ROUTES.SIGN_IN} data-testid="logoutLink">
+        <Link
+          to={ROUTES.SIGN_IN}
+          data-testid="logoutLink"
+          onClick={() => firebase.logout()}
+        >
           <FontAwesomeIcon icon={faSignOutAlt} />
           <span className="hide-sm"> Log out</span>
         </Link>
@@ -67,7 +74,7 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
   );
 
   /** Display appropriated links after loading given authenticated prop */
-  const RenderLinks = !isLoaded && !isEmpty ? privateLinks : publicLinks;
+  const RenderLinks = isLoaded && !isEmpty ? privateLinks : publicLinks;
 
   return (
     <nav className="navbar bg-dark">
@@ -82,5 +89,6 @@ const NavBar: FC<IProps> = ({isEmpty, isLoaded}) => {
 };
 
 /** connect HOC subscribes to the store */
-export default connect(selectProfile)(NavBar);
-//NavBar;
+
+const enhance = compose<FC>(connect(selectProfile), withFirebase);
+export default enhance(NavBar);
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..84809c3
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,28 @@
+import {useState, ChangeEvent} from 'react';
+
+/**
+ * provide onChange handler and reset function
+ * T is the initFormData object type
+ *
+ * @param initFormData initial state of the form
+ * @returns formData object,
+ * @returns handleChange function to pass to input tag
+ * @returns resetForm function to revert to initFormData
+ * */
+const useForm = <T,>(initFormData: T) => {
+  const [formData, setFormData] = useState<T>(initFormData);
+
+  /** update each input state value onChange */
+  const handleChange = (e: ChangeEvent<HTMLInputElement>): void =>
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+
+  /** clean form after successful submition */
+  const resetForm = () => setFormData(initFormData);
+
+  return {formData, handleChange, resetForm};
+};
+
+export default useForm;
diff --git a/src/models/User.ts b/src/models/User.ts
index 3b89aee..58ddd81 100644
--- a/src/models/User.ts
+++ b/src/models/User.ts
@@ -1,8 +1,20 @@
 interface User {
-  name: string;
+  displayName: string;
   email: string;
-  picture: string;
+  avatarUrl: string;
   createdAt: Date;
 }
 
+/** User constructor */
+export const newUser = (
+  displayName: string,
+  email: string,
+  avatarUrl: string = '',
+): User => ({
+  displayName,
+  email,
+  avatarUrl,
+  createdAt: new Date(),
+});
+
 export default User;
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
index f1c4960..353c66f 100644
--- a/src/pages/SignIn.tsx
+++ b/src/pages/SignIn.tsx
@@ -1,29 +1,112 @@
-import React, {FC} from 'react';
+import React, {FC, useState} from 'react';
+// Redux
+import {compose} from '@reduxjs/toolkit';
+import {connect} from 'react-redux';
+import {WithFirebaseProps, withFirebase} from 'react-redux-firebase';
+import {selectProfile} from '../store/firebase';
+// Routing
+import {Link, Redirect} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
+// Style
+import GoogleButton from 'react-google-button';
 import Header from '../components/Header';
-import {Link} from 'react-router-dom';
+import Alert from '../components/Alert';
+// Typing
+import User from '../models/User';
+// Form
+import useForm from '../hooks';
+
+interface InitFormData {
+  email: string;
+  password: string;
+}
+
+interface IProps extends WithFirebaseProps<User> {
+  isEmpty: boolean;
+  isLoaded: boolean;
+}
 
 /**
  * Sign in form
  */
-const SignIn: FC = () => (
-  <section className="container">
-    <div className="alert alert-danger">Invalid credentials</div>
-    <Header title="Sign In" lead="Sign into your account" />
-    <form action="dashboard.html" className="form">
-      <div className="form-group">
-        <input type="email" placeholder="Email Address" />
-      </div>
-      <div className="form-group">
-        <input type="password" placeholder="Password" minLength={6} />
-      </div>
+const SignIn: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
+  const [error, setError] = useState<any>(null);
 
-      <input type="submit" value="Login" className="btn btn-primary" />
-    </form>
-    <p className="my-1">
-      Don't have an account? <Link to={ROUTES.SIGN_UP}>Sign up</Link>
-    </p>
-  </section>
-);
+  // handle form data
+  const initFormData: InitFormData = {
+    email: '',
+    password: '',
+  };
+  const {formData, handleChange, resetForm} = useForm<InitFormData>(
+    initFormData,
+  );
+  const {email, password} = formData;
 
-export default SignIn;
+  // prevent submitting invalid forms
+  const isDisabled: boolean = email === '' || password === '';
+
+  /** create user with password */
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    firebase
+      .login({email, password})
+      .then(() => resetForm())
+      .catch(err => setError(err));
+  };
+
+  const loginWithGoogle = () =>
+    firebase.login({provider: 'google', type: 'popup'});
+
+  // redirect to dashboard if connected
+  if (isLoaded && !isEmpty) {
+    return <Redirect to={ROUTES.DASHBOARD} />;
+  }
+
+  return (
+    <section className="container">
+      {error && <Alert text={error?.message} />}
+      <Header title="Sign In" lead="Sign into your account" />
+      <GoogleButton type="light" className="my-1" onClick={loginWithGoogle} />
+      <form onSubmit={handleSubmit} className="form">
+        <div className="form-group">
+          <input
+            name="email"
+            value={email}
+            onChange={handleChange}
+            placeholder="Email Address"
+            type="email"
+            required
+            autoFocus
+          />
+        </div>
+        <div className="form-group">
+          <input
+            name="password"
+            value={password}
+            onChange={handleChange}
+            placeholder="Password"
+            type="password"
+            minLength={6}
+            required
+          />
+        </div>
+
+        <input
+          type="submit"
+          value="Login"
+          className="btn btn-primary"
+          disabled={isDisabled}
+        />
+      </form>
+      <p className="my-1">
+        Don't have an account? <Link to={ROUTES.SIGN_UP}>Sign up</Link>
+      </p>
+    </section>
+  );
+};
+
+/** subscribe to store and firebase */
+const enhance = compose<FC<IProps>>(connect(selectProfile), withFirebase);
+
+export default enhance(SignIn);
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 6caa060..35166f7 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,35 +1,145 @@
-import React, {FC} from 'react';
-import {Link} from 'react-router-dom';
-import Header from '../components/Header';
+import React, {FC, useState} from 'react';
+// Routing
+import {Link, Redirect} from 'react-router-dom';
 import * as ROUTES from '../constants/routes';
-/**
- * Sign up form
- */
-const SignUp: FC = () => (
-  <section className="container">
-    <Header title="Sign Up" lead="Create your account" />
-    <form action="dashboard.html" className="form">
-      <div className="form-group">
-        <input type="text" placeholder="Name" required />
-      </div>
-      <div className="form-group">
-        <input type="email" placeholder="Email Address" />
-        <small className="form-text">
-          This site uses Gravatar, so use a Gravatar email.
-        </small>
-      </div>
-      <div className="form-group">
-        <input type="password" placeholder="Password" minLength={6} />
-      </div>
-      <div className="form-group">
-        <input type="password" placeholder="Confirm Password" minLength={6} />
-      </div>
-      <input type="submit" value="Register" className="btn btn-primary" />
-    </form>
-    <p className="my-1">
-      Already have an account? <Link to={ROUTES.SIGN_IN}>Sign in</Link>
-    </p>
-  </section>
-);
+// Redux
+import {compose} from 'redux';
+import {connect} from 'react-redux';
+import {withFirebase, WithFirebaseProps} from 'react-redux-firebase';
+import {selectProfile} from '../store/firebase';
+import User, {newUser} from '../models/User';
+// Style
+import GoogleButton from 'react-google-button';
+import Alert from '../components/Alert';
+import Header from '../components/Header';
+// Form
+import useForm from '../hooks';
 
-export default SignUp;
+// extends withFirebaseProps type to ad profile info
+interface IProps extends WithFirebaseProps<User> {
+  isEmpty: boolean;
+  isLoaded: boolean;
+}
+
+interface InitFormData {
+  name: string;
+  email: string;
+  password: string;
+  password2: string;
+}
+
+/**
+ * Sign up form recieves firebase from withFirebase HOC
+ */
+const SignUp: FC<IProps> = ({firebase, isEmpty, isLoaded}) => {
+  const [error, setError] = useState<any>(null);
+
+  // handle form data
+  const initFormData: InitFormData = {
+    name: '',
+    email: '',
+    password: '',
+    password2: '',
+  };
+
+  const {formData, handleChange, resetForm} = useForm<InitFormData>(
+    initFormData,
+  );
+
+  const {name, email, password, password2} = formData;
+
+  // prevent submitting invalid forms
+  const isDisabled: boolean = name === '' || email === '' || password === '';
+
+  /** create user with password */
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // pass the info to store into the second argument
+    firebase
+      .createUser({email, password}, newUser(name, email))
+      .then(() => resetForm())
+      .catch(err => setError(err));
+  };
+
+  const loginWithGoogle = () =>
+    firebase.login({provider: 'google', type: 'popup'});
+
+  // redirect to dashboard if connected
+  if (isLoaded && !isEmpty) {
+    return <Redirect to={ROUTES.DASHBOARD} />;
+  }
+
+  return (
+    <section className="container">
+      {error && <Alert text={error?.message} />}
+      <Header title="Sign Up" lead="Create your account" />
+      <GoogleButton type="light" className="my-1" onClick={loginWithGoogle} />
+      <form className="form" onSubmit={handleSubmit}>
+        <div className="form-group">
+          <input
+            name="name"
+            value={name}
+            onChange={handleChange}
+            placeholder="Name"
+            type="text"
+            required
+            autoFocus
+          />
+        </div>
+
+        <div className="form-group">
+          <input
+            name="email"
+            value={email}
+            onChange={handleChange}
+            placeholder="Email Address"
+            type="email"
+            required
+          />
+          <small className="form-text">
+            This site uses Gravatar, so use a Gravatar email.
+          </small>
+        </div>
+
+        <div className="form-group">
+          <input
+            name="password"
+            value={password}
+            onChange={handleChange}
+            placeholder="Password"
+            type="password"
+            minLength={6}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <input
+            name="password2"
+            value={password2}
+            onChange={handleChange}
+            placeholder="Confirm Password"
+            type="password"
+            minLength={6}
+            required
+          />
+        </div>
+
+        <input
+          type="submit"
+          value="Register"
+          className="btn btn-primary"
+          disabled={isDisabled}
+        />
+      </form>
+      <p className="my-1">
+        Already have an account? <Link to={ROUTES.SIGN_IN}>Sign in</Link>
+      </p>
+    </section>
+  );
+};
+
+/** subscribe to store and firebase */
+const enhance = compose<FC<IProps>>(connect(selectProfile), withFirebase);
+
+export default enhance(SignUp);
diff --git a/src/pages/__tests__/SignUp.spec.tsx b/src/pages/__tests__/SignUp.spec.tsx
new file mode 100644
index 0000000..62ebaea
--- /dev/null
+++ b/src/pages/__tests__/SignUp.spec.tsx
@@ -0,0 +1,7 @@
+import SignUp from '../SignUp';
+
+describe('Signup Page', () => {
+  it('calls loadUser function', () => {});
+  it('redirects to dashboard if signed up', () => {});
+  it('call signup function on click', () => {});
+});
diff --git a/src/router/PrivateRoute.tsx b/src/router/PrivateRoute.tsx
new file mode 100644
index 0000000..39be7da
--- /dev/null
+++ b/src/router/PrivateRoute.tsx
@@ -0,0 +1,48 @@
+import React, {FC} from 'react';
+// Routing
+import {Route, Redirect} from 'react-router-dom';
+import * as ROUTES from '../constants/routes';
+// Redux
+import {isLoaded, isEmpty} from 'react-redux-firebase';
+import {useSelector} from 'react-redux';
+import {RootState} from '../store';
+
+interface IProps {
+  exact?: boolean;
+  path: string;
+  component: React.FC<any>;
+}
+/**
+ * Redirects to the login screen if you're not authenticated yet or
+ * if auth is not loaded yet
+ */
+const PrivateRoute: FC<IProps> = ({
+  component: Component,
+  exact,
+  path,
+  ...rest
+}) => {
+  const auth = useSelector((state: RootState) => state.firebase.auth);
+  return (
+    <Route
+      exact={exact}
+      path={path}
+      {...rest}
+      render={({location, ...rest}) =>
+        isLoaded(auth) && !isEmpty(auth) ? (
+          <Component {...rest} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: ROUTES.SIGN_IN,
+              state: {from: location},
+            }}
+          />
+        )
+      }
+    />
+  );
+};
+
+/** subscribe to store and firebase */
+export default PrivateRoute;
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index f761958..4863a65 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -13,6 +13,7 @@ import PostPage from '../pages/Post';
 import Posts from '../pages/Posts';
 import NotFound from '../pages/NotFound';
 import * as ROUTES from '../constants/routes';
+import PrivateRoute from './PrivateRoute';
 
 /** Register navigation paths accessible */
 const Router: FC = () => (
@@ -22,13 +23,16 @@ const Router: FC = () => (
     <Route exact path={ROUTES.SIGN_IN} component={SignIn} />
     <Route exact path={ROUTES.DEVELOPERS} component={Developers} />
     <Route exact path={ROUTES.PROFILE} component={Profile} />
-    <Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
-    <Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
-    <Route exact path={ROUTES.ADD_EXPERIENCE} component={AddExperience} />
-    <Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
-    <Route exact path={ROUTES.POST} component={PostPage} />
-    <Route exact path={ROUTES.POSTS} component={Posts} />
-    <Route exact path={ROUTES.POSTS} component={Posts} />
+    <PrivateRoute exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
+    <PrivateRoute exact path={ROUTES.DASHBOARD} component={Dashboard} />
+    <PrivateRoute
+      exact
+      path={ROUTES.ADD_EXPERIENCE}
+      component={AddExperience}
+    />
+    <PrivateRoute exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
+    <PrivateRoute exact path={ROUTES.POST} component={PostPage} />
+    <PrivateRoute exact path={ROUTES.POSTS} component={Posts} />
     <Route component={NotFound} />
   </Switch>
 );
diff --git a/src/static/css/style.min.css b/src/static/css/style.min.css
index e6d5d3e..9847217 100644
--- a/src/static/css/style.min.css
+++ b/src/static/css/style.min.css
@@ -1,547 +1 @@
-.m-1 {
-  margin: 1rem;
-}
-.my-1 {
-  margin: 1rem 0;
-}
-.p-1 {
-  padding: 1rem;
-}
-.py-1 {
-  padding: 1rem 0;
-}
-.m-2 {
-  margin: 2rem;
-}
-.my-2 {
-  margin: 2rem 0;
-}
-.p-2 {
-  padding: 2rem;
-}
-.py-2 {
-  padding: 2rem 0;
-}
-.m-3 {
-  margin: 3rem;
-}
-.my-3 {
-  margin: 3rem 0;
-}
-.p-3 {
-  padding: 3rem;
-}
-.py-3 {
-  padding: 3rem 0;
-}
-.m-4 {
-  margin: 4rem;
-}
-.my-4 {
-  margin: 4rem 0;
-}
-.p-4 {
-  padding: 4rem;
-}
-.py-4 {
-  padding: 4rem 0;
-}
-.m-5 {
-  margin: 5rem;
-}
-.my-5 {
-  margin: 5rem 0;
-}
-.p-5 {
-  padding: 5rem;
-}
-.py-5 {
-  padding: 5rem 0;
-}
-.m-1 {
-  margin: 1rem;
-}
-.my-1 {
-  margin: 1rem 0;
-}
-.p-1 {
-  padding: 1rem;
-}
-.py-1 {
-  padding: 1rem 0;
-}
-.m-2 {
-  margin: 2rem;
-}
-.my-2 {
-  margin: 2rem 0;
-}
-.p-2 {
-  padding: 2rem;
-}
-.py-2 {
-  padding: 2rem 0;
-}
-.m-3 {
-  margin: 3rem;
-}
-.my-3 {
-  margin: 3rem 0;
-}
-.p-3 {
-  padding: 3rem;
-}
-.py-3 {
-  padding: 3rem 0;
-}
-.m-4 {
-  margin: 4rem;
-}
-.my-4 {
-  margin: 4rem 0;
-}
-.p-4 {
-  padding: 4rem;
-}
-.py-4 {
-  padding: 4rem 0;
-}
-.m-5 {
-  margin: 5rem;
-}
-.my-5 {
-  margin: 5rem 0;
-}
-.p-5 {
-  padding: 5rem;
-}
-.py-5 {
-  padding: 5rem 0;
-}
-.bg-primary {
-  background-color: #17a2b8;
-  color: #fff;
-}
-.bg-light {
-  background-color: #f4f4f4;
-  color: #333;
-  border: #ccc 1px solid;
-}
-.bg-dark {
-  background-color: #343a40;
-  color: #fff;
-}
-.bg-danger {
-  background-color: #dc3545;
-  color: #fff;
-}
-.bg-success {
-  background-color: #28a745;
-  color: #fff;
-}
-.bg-white {
-  background-color: #fff;
-  color: #333;
-  border: #ccc 1px solid;
-}
-.dark-overlay {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-}
-.x-large {
-  font-size: 4rem;
-  line-height: 1.2;
-  margin-bottom: 1rem;
-}
-.large {
-  font-size: 3rem;
-  line-height: 1.2;
-  margin-bottom: 1rem;
-}
-.lead {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
-}
-.text-primary {
-  color: #17a2b8;
-}
-.btn {
-  display: inline-block;
-  background-color: #f4f4f4;
-  color: #333;
-  padding: 0.4rem 1.3rem;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-right: 0.5rem;
-  outline: none;
-  transition: all 0.3s ease-in;
-}
-.btn.btn-primary {
-  background-color: #17a2b8;
-  color: #fff;
-}
-.btn.btn-primary:hover {
-  background: #1ab6cf;
-}
-.btn.btn-dark {
-  background-color: #343a40;
-  color: #fff;
-}
-.btn.btn-dark:hover {
-  background: #3f474e;
-}
-.btn.btn-light {
-  background-color: #f4f4f4;
-  color: #333;
-}
-.btn.btn-light:hover {
-  background: #626d78;
-  color: white;
-}
-.btn.btn-danger {
-  background-color: #dc3545;
-  color: #fff;
-}
-.btn.btn-danger:hover {
-  background: #e04b59;
-}
-.btn.btn-success {
-  background-color: #28a745;
-  color: #fff;
-}
-.btn.btn-success:hover {
-  background: #2dbc4e;
-}
-.container {
-  max-width: 1100px;
-  margin: auto;
-  overflow: hidden;
-  padding: 0 2rem;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
-}
-.alert {
-  padding: 0.8rem;
-  margin: 1rem;
-  opacity: 0.9;
-  background-color: #f4f4f4;
-  color: #333;
-}
-.alert.alert-primary {
-  background-color: #17a2b8;
-  color: #fff;
-}
-.alert.alert-dark {
-  background-color: #343a40;
-  color: #fff;
-}
-.alert.alert-success {
-  background-color: #28a745;
-  color: #fff;
-}
-.alert.alert-danger {
-  background-color: #dc3545;
-  color: #fff;
-}
-.round-img {
-  border-radius: 50%;
-}
-.line {
-  height: 1px;
-  background: #ccc;
-  margin: 1.5rem 0;
-}
-.badge {
-  font-size: 0.8rem;
-  padding: 0.1rem;
-  text-align: center;
-  margin: 0.3rem;
-  background: #f4f4f4;
-  color: #333;
-  border-radius: 1rem;
-}
-.badge.badge-primary {
-  background-color: #17a2b8;
-  color: #fff;
-}
-.badge.badge-dark {
-  background-color: #343a40;
-  color: #fff;
-}
-.badge.badge-success {
-  background-color: #28a745;
-  color: #fff;
-}
-.badge.badge-danger {
-  background-color: #dc3545;
-  color: #fff;
-}
-.table th,
-.table td {
-  padding: 1rem;
-  text-align: left;
-}
-.table th {
-  background: #f4f4f4;
-}
-.form-group {
-  margin: 1.2rem 0;
-}
-.form-text {
-  display: block;
-  margin-top: 0.3rem;
-  color: #888;
-}
-.form input[type='text'],
-.form input[type='email'],
-.form input[type='password'],
-.form input[type='date'],
-.form select,
-.form textarea {
-  display: block;
-  width: 100%;
-  padding: 0.4rem;
-  font-size: 1.2rem;
-  border: 1px solid #ccc;
-  border-radius: 0.3rem;
-}
-.form input[type='submit'] {
-  font: inherit;
-}
-.form .social-input {
-  display: flex;
-}
-.form .social-input svg {
-  padding: 0.5rem;
-  width: 3rem;
-}
-.form .social-input svg.fa-twitter {
-  color: #38a1f3;
-}
-.form .social-input svg.fa-facebook {
-  color: #3b5998;
-}
-.form .social-input svg.fa-instagram {
-  color: #3f729b;
-}
-.form .social-input svg.fa-youtube {
-  color: #c4302b;
-}
-.form .social-input svg.fa-linkedin {
-  color: #0077b5;
-}
-@media (max-width: 700px) {
-  .hide-sm {
-    display: none;
-  }
-  .container {
-    margin-top: 8rem;
-  }
-  .x-large {
-    font-size: 3rem;
-  }
-  .large {
-    font-size: 2rem;
-  }
-  .lead {
-    font-size: 1rem;
-  }
-  .navbar {
-    flex-direction: column;
-    text-align: center;
-  }
-  .navbar ul {
-    text-align: center;
-    justify-content: center;
-  }
-  .navbar h1 {
-    margin-bottom: 1rem;
-  }
-  .dash-buttons a {
-    display: block;
-    width: 100%;
-    margin-bottom: 0.2rem;
-  }
-  .profile {
-    grid-template-columns: 1fr;
-    text-align: center;
-  }
-  .profile ul {
-    display: none;
-  }
-  .profile-grid {
-    grid-template-areas: 'top' 'about' 'exp' 'edu' 'github';
-  }
-  .profile-about .skills {
-    flex-direction: column;
-  }
-  .post {
-    grid-template-columns: 1fr;
-  }
-  .post a,
-  .post button {
-    padding: 0.3rem 0.4rem;
-  }
-}
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: 'Raleway', sans-serif;
-  font-size: 1rem;
-  line-height: 1.6;
-  background-color: white;
-  color: #333;
-}
-a {
-  text-decoration: none;
-  color: #17a2b8;
-}
-ul {
-  list-style: none;
-}
-img {
-  width: 100%;
-}
-.navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.7rem 2rem;
-  position: fixed;
-  z-index: 1;
-  width: 100%;
-  top: 0;
-  border-bottom: solid 1px #17a2b8;
-  opacity: 0.9;
-}
-.navbar ul {
-  display: flex;
-}
-.navbar a {
-  color: white;
-  padding: 0.45rem;
-  margin: 0 0.25rem;
-}
-.navbar a:hover {
-  color: #17a2b8;
-}
-.landing {
-  position: relative;
-  background: url('../img/showcase.jpg') no-repeat center center/cover;
-  height: 100vh;
-}
-.landing-inner {
-  color: white;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 80%;
-  margin: auto;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-.profile {
-  display: grid;
-  grid-template-columns: 2fr 4fr 2fr;
-  grid-gap: 2rem;
-  padding: 1rem;
-  line-height: 1.8;
-  margin-bottom: 1rem;
-  align-items: center;
-}
-.profile-grid {
-  display: grid;
-  grid-template-areas: 'top top' 'about about' 'exp edu' 'github github';
-  grid-gap: 1rem;
-}
-.profile-grid .profile-top {
-  grid-area: top;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-.profile-grid .profile-top img {
-  width: 250px;
-}
-.profile-grid .profile-top .icons a {
-  color: white;
-  margin: 0 0.3rem;
-}
-.profile-grid .profile-top .icons a:hover {
-  color: #343a40;
-}
-.profile-grid .profile-about {
-  grid-area: about;
-  text-align: center;
-}
-.profile-grid .profile-about .skills {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-.profile-grid .profile-exp {
-  grid-area: exp;
-}
-.profile-grid .profile-edu {
-  grid-area: edu;
-}
-.profile-grid .profile-exp > div,
-.profile-grid .profile-edu > div {
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: #ccc 1px dotted;
-}
-.profile-grid .profile-exp > div:last-child,
-.profile-grid .profile-edu > div:last-child {
-  border: none;
-}
-.profile-grid .profile-exp > div p,
-.profile-grid .profile-edu > div p {
-  margin: 0.5rem 0;
-}
-.profile-grid .profile-github {
-  grid-area: github;
-}
-.profile-grid .profile-github .repo {
-  display: flex;
-}
-.profile-grid .profile-github .repo > div:first-child {
-  flex: 7;
-  flex-basis: 70%;
-}
-.profile-grid .profile-github .repo > div:last-child {
-  flex: 3;
-  flex-basis: 30%;
-}
-.post-form-header {
-  padding: 0.5rem;
-}
-.post {
-  display: grid;
-  grid-template-columns: 1fr 4fr;
-  grid-gap: 2rem;
-  align-items: center;
-}
-.post > div:first-child {
-  text-align: center;
-}
-.post img {
-  width: 150px;
-}
-.not-found {
-  position: relative;
-  background: url('../img/404.jpg') no-repeat center center/cover;
-  height: 100vh;
-}
+.m-1{margin:1rem}.my-1{margin:1rem 0}.p-1{padding:1rem}.py-1{padding:1rem 0}.m-2{margin:2rem}.my-2{margin:2rem 0}.p-2{padding:2rem}.py-2{padding:2rem 0}.m-3{margin:3rem}.my-3{margin:3rem 0}.p-3{padding:3rem}.py-3{padding:3rem 0}.m-4{margin:4rem}.my-4{margin:4rem 0}.p-4{padding:4rem}.py-4{padding:4rem 0}.m-5{margin:5rem}.my-5{margin:5rem 0}.p-5{padding:5rem}.py-5{padding:5rem 0}.m-1{margin:1rem}.my-1{margin:1rem 0}.p-1{padding:1rem}.py-1{padding:1rem 0}.m-2{margin:2rem}.my-2{margin:2rem 0}.p-2{padding:2rem}.py-2{padding:2rem 0}.m-3{margin:3rem}.my-3{margin:3rem 0}.p-3{padding:3rem}.py-3{padding:3rem 0}.m-4{margin:4rem}.my-4{margin:4rem 0}.p-4{padding:4rem}.py-4{padding:4rem 0}.m-5{margin:5rem}.my-5{margin:5rem 0}.p-5{padding:5rem}.py-5{padding:5rem 0}.bg-primary{background-color:#17a2b8;color:#fff}.bg-light{background-color:#f4f4f4;color:#333;border:#ccc 1px solid}.bg-dark{background-color:#343a40;color:#fff}.bg-danger{background-color:#dc3545;color:#fff}.bg-success{background-color:#28a745;color:#fff}.bg-white{background-color:#fff;color:#333;border:#ccc 1px solid}.dark-overlay{height:100%;width:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.7)}.x-large{font-size:4rem;line-height:1.2;margin-bottom:1rem}.large{font-size:3rem;line-height:1.2;margin-bottom:1rem}.lead{font-size:1.5rem;margin-bottom:1rem}.text-primary{color:#17a2b8}.btn{display:inline-block;background-color:#f4f4f4;color:#333;padding:0.4rem 1.3rem;border:none;cursor:pointer;font-size:1rem;margin-right:0.5rem;outline:none;transition:all 0.3s ease-in}.btn:disabled{background-color:#333}.btn.btn-primary{background-color:#17a2b8;color:#fff}.btn.btn-primary:hover{background:#1ab6cf}.btn.btn-dark{background-color:#343a40;color:#fff}.btn.btn-dark:hover{background:#3f474e}.btn.btn-light{background-color:#f4f4f4;color:#333}.btn.btn-light:hover{background:#626d78;color:white}.btn.btn-danger{background-color:#dc3545;color:#fff}.btn.btn-danger:hover{background:#e04b59}.btn.btn-success{background-color:#28a745;color:#fff}.btn.btn-success:hover{background:#2dbc4e}.container{max-width:1100px;margin:auto;overflow:hidden;padding:0 2rem;margin-top:5rem;margin-bottom:3rem}.alert{padding:0.8rem;margin:1rem;opacity:0.9;background-color:#f4f4f4;color:#333}.alert.alert-primary{background-color:#17a2b8;color:#fff}.alert.alert-dark{background-color:#343a40;color:#fff}.alert.alert-success{background-color:#28a745;color:#fff}.alert.alert-danger{background-color:#dc3545;color:#fff}.round-img{border-radius:50%}.line{height:1px;background:#ccc;margin:1.5rem 0}.badge{font-size:0.8rem;padding:0.1rem;text-align:center;margin:0.3rem;background:#f4f4f4;color:#333;border-radius:1rem}.badge.badge-primary{background-color:#17a2b8;color:#fff}.badge.badge-dark{background-color:#343a40;color:#fff}.badge.badge-success{background-color:#28a745;color:#fff}.badge.badge-danger{background-color:#dc3545;color:#fff}.table th,.table td{padding:1rem;text-align:left}.table th{background:#f4f4f4}.form-group{margin:1.2rem 0}.form-text{display:block;margin-top:0.3rem;color:#888}.form input[type='text'],.form input[type='email'],.form input[type='password'],.form input[type='date'],.form select,.form textarea{display:block;width:100%;padding:0.4rem;font-size:1.2rem;border:1px solid #ccc;border-radius:0.3rem}.form input[type='submit']{font:inherit}.form .social-input{display:flex}.form .social-input svg{padding:0.5rem;width:3rem}.form .social-input svg.fa-twitter{color:#38a1f3}.form .social-input svg.fa-facebook{color:#3b5998}.form .social-input svg.fa-instagram{color:#3f729b}.form .social-input svg.fa-youtube{color:#c4302b}.form .social-input svg.fa-linkedin{color:#0077b5}@media (max-width: 700px){.hide-sm{display:none}.container{margin-top:8rem}.x-large{font-size:3rem}.large{font-size:2rem}.lead{font-size:1rem}.navbar{flex-direction:column;text-align:center}.navbar ul{text-align:center;justify-content:center}.navbar h1{margin-bottom:1rem}.dash-buttons a{display:block;width:100%;margin-bottom:0.2rem}.profile{grid-template-columns:1fr;text-align:center}.profile ul{display:none}.profile-grid{grid-template-areas:"top" "about" "exp" "edu" "github"}.profile-about .skills{flex-direction:column}.post{grid-template-columns:1fr}.post a,.post button{padding:0.3rem 0.4rem}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Raleway', sans-serif;font-size:1rem;line-height:1.6;background-color:white;color:#333}a{text-decoration:none;color:#17a2b8}ul{list-style:none}img{width:100%}.navbar{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 2rem;position:fixed;z-index:1;width:100%;top:0;border-bottom:solid 1px #17a2b8;opacity:0.9}.navbar ul{display:flex}.navbar a{color:white;padding:0.45rem;margin:0 0.25rem}.navbar a:hover{color:#17a2b8}.landing{position:relative;background:url("../img/showcase.jpg") no-repeat center center/cover;height:100vh}.landing-inner{color:white;height:100%;display:flex;flex-direction:column;width:80%;margin:auto;align-items:center;justify-content:center;text-align:center}.profile{display:grid;grid-template-columns:2fr 4fr 2fr;grid-gap:2rem;padding:1rem;line-height:1.8;margin-bottom:1rem;align-items:center}.profile-grid{display:grid;grid-template-areas:'top top' 'about about' 'exp edu' 'github github';grid-gap:1rem}.profile-grid .profile-top{grid-area:top;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.profile-grid .profile-top img{width:250px}.profile-grid .profile-top .icons a{color:white;margin:0 0.3rem}.profile-grid .profile-top .icons a:hover{color:#343a40}.profile-grid .profile-about{grid-area:about;text-align:center}.profile-grid .profile-about .skills{display:flex;justify-content:center;align-items:center;text-align:center}.profile-grid .profile-exp{grid-area:exp}.profile-grid .profile-edu{grid-area:edu}.profile-grid .profile-exp>div,.profile-grid .profile-edu>div{margin-bottom:1rem;padding-bottom:1rem;border-bottom:#ccc 1px dotted}.profile-grid .profile-exp>div:last-child,.profile-grid .profile-edu>div:last-child{border:none}.profile-grid .profile-exp>div p,.profile-grid .profile-edu>div p{margin:0.5rem 0}.profile-grid .profile-github{grid-area:github}.profile-grid .profile-github .repo{display:flex}.profile-grid .profile-github .repo>div:first-child{flex:7;flex-basis:70%}.profile-grid .profile-github .repo>div:last-child{flex:3;flex-basis:30%}.post-form-header{padding:0.5rem}.post{display:grid;grid-template-columns:1fr 4fr;grid-gap:2rem;align-items:center}.post>div:first-child{text-align:center}.post img{width:150px}.not-found{position:relative;background:url("../img/404.jpg") no-repeat center center/cover;height:100vh}
diff --git a/src/static/scss/_utils.scss b/src/static/scss/_utils.scss
index f8efe6d..821a924 100644
--- a/src/static/scss/_utils.scss
+++ b/src/static/scss/_utils.scss
@@ -1,4 +1,4 @@
-@import "_config";
+@import '_config';
 
 // Backgrounds
 
diff --git a/yarn.lock b/yarn.lock
index ac8c167..8522ce0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9558,6 +9558,13 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-google-button@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/react-google-button/-/react-google-button-0.7.1.tgz#e84b4ce270a66e345489dc86e47235e877fcc81a"
+  integrity sha512-FN8/9Va6oAGKL561yddNzcjz0iGlt2GZFwiDPczEu0fDVnR21/nBrPs7Y5x97V1S4//nvtkvv6ohfwtxIHpbfg==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"