add styling for login form component

react-frontend/package.json

@@ -13,6 +13,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^16.13.1",
+    "react-google-login": "^5.1.20",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",

react-frontend/src/constants/appConstants.js

@@ -1,3 +1,7 @@
 export const REDIRECT_TIMEOUT = 3000;
 
 export const IMG_BASE_PATH = `${process.env.PUBLIC_URL}/assets/images/`;
+
+export const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+
+export const GOOGLE_COOKIE_POLICY = process.env.REACT_APP_GOOGLE_COOKIE_POLICY;

react-frontend/src/login/GoogleLoginButton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import GoogleLogin from "react-google-login";
+
+import { GOOGLE_CLIENT_ID, GOOGLE_COOKIE_POLICY } from "constants/appConstants";
+
+const GoogleLoginButtonComponent = ({
+  responseGoogleOnSuccess,
+  responseGoogleOnFailure,
+  buttonText,
+}) => (
+  <GoogleLogin
+    clientId={GOOGLE_CLIENT_ID}
+    buttonText={buttonText}
+    onSuccess={responseGoogleOnSuccess}
+    onFailure={responseGoogleOnFailure}
+    cookiePolicy={GOOGLE_COOKIE_POLICY}
+  />
+);
+
+GoogleLoginButtonComponent.defaultProps = {
+  buttonText: "Sign in with google",
+};
+
+GoogleLoginButtonComponent.propTypes = {
+  responseGoogleOnSuccess: PropTypes.func.isRequired,
+  responseGoogleOnFailure: PropTypes.func.isRequired,
+  buttonText: PropTypes.string,
+};
+
+export default React.memo(GoogleLoginButtonComponent);

react-frontend/src/login/GoogleLoginButton.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import GoogleLoginButton from "login/GoogleLoginButton";
+
+test("GoogleLoginButton should pass a snapshot", () => {
+  const responseCheckFunction = () => {
+    return true;
+  };
+
+  const { asFragment } = render(
+    <GoogleLoginButton
+      buttonText="Google Sign in"
+      responseGoogleOnFailure={responseCheckFunction}
+      responseGoogleOnSuccess={responseCheckFunction}
+    />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

react-frontend/src/login/LoginPanel.js

@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import PeerlyTextAndLogo from "shared-components/peerly-logo/PeerlyTextAndLogo";
+import InformativeTextComponent from "login/InformativeTextComponent";
+import { Container } from "core-components/grid/GridComponent";
+import GoogleLoginButton from "login/GoogleLoginButton";
+
+const WrapperContainer = styled(Container)`
+  height: 100vh;
+  background-color: var(--atomic);
+`;
+
+const LoginPanel = ({ responseGoogleOnSuccess, responseGoogleOnFailure }) => (
+  <WrapperContainer
+    className="flex-column justify-content-around d-flex"
+    fluid={true}
+  >
+    <div className="mb-5">
+      <PeerlyTextAndLogo theme="dark" />
+    </div>
+    <div className="text-center mb-3 pb-4">
+      <GoogleLoginButton
+        responseGoogleOnSuccess={responseGoogleOnSuccess}
+        responseGoogleOnFailure={responseGoogleOnFailure}
+        buttonText="Google sign in"
+      ></GoogleLoginButton>
+    </div>
+    <InformativeTextComponent
+      className="d-none d-md-block d-lg-block mt-4"
+      theme="dark"
+      informativeText="Lets Create the Office Positive"
+      encouragementThought="Encouragement Driven"
+    />
+  </WrapperContainer>
+);
+
+LoginPanel.propTypes = {
+  responseGoogleOnSuccess: PropTypes.func.isRequired,
+  responseGoogleOnFailure: PropTypes.func.isRequired,
+};
+
+export default React.memo(LoginPanel);

react-frontend/src/login/LoginPanel.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import LoginPanel from "login/LoginPanel";
+
+test("LoginPanel should pass a snapshot", () => {
+  const responseCheckFunction = () => {
+    return true;
+  };
+
+  const { asFragment } = render(
+    <LoginPanel
+      responseGoogleOnFailure={responseCheckFunction}
+      responseGoogleOnSuccess={responseCheckFunction}
+    />
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

react-frontend/src/login/__snapshots__/GoogleLoginButton.test.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GoogleLoginButton should pass a snapshot 1`] = `
+<DocumentFragment>
+  <button
+    disabled=""
+    style="background-color: rgb(255, 255, 255); display: inline-flex; align-items: center; color: rgba(0, 0, 0, 0.54); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24); padding: 0px; border-radius: 2px; border: 1px solid transparent; font-size: 14px; font-weight: 500; font-family: Roboto, sans-serif; opacity: 0.6;"
+    type="button"
+  >
+    <div
+      style="margin-right: 10px; background: rgb(255, 255, 255); padding: 10px; border-radius: 2px;"
+    >
+      <svg
+        height="18"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill="#000"
+          fill-rule="evenodd"
+        >
+          <path
+            d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
+            fill="#EA4335"
+          />
+          <path
+            d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
+            fill="#4285F4"
+          />
+          <path
+            d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
+            fill="#FBBC05"
+          />
+          <path
+            d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
+            fill="#34A853"
+          />
+          <path
+            d="M0 0h18v18H0z"
+            fill="none"
+          />
+        </g>
+      </svg>
+    </div>
+    <span
+      style="font-weight: 500; padding: 10px 10px 10px 0px;"
+    >
+      Google Sign in
+    </span>
+  </button>
+</DocumentFragment>
+`;

react-frontend/src/login/__snapshots__/LoginPanel.test.js.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoginPanel should pass a snapshot 1`] = `
+<DocumentFragment>
+  .c2 {
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  font-size: 48px;
+  color: var(--white);
+}
+
+.c1 {
+  text-align: center;
+  margin-top: 15px;
+  width: 83px;
+  height: 83px;
+  border: 3px solid var(--white);
+  background-color: var(--atomic);
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.c3 {
+  color: var(--white);
+  background-color: var(--atomic);
+  font-size: 48px;
+}
+
+.c5 {
+  width: 10%;
+  background: var(--white);
+}
+
+.c4 {
+  color: var(--white);
+  background-color: var(--atomic);
+}
+
+.c0 {
+  height: 100vh;
+  background-color: var(--atomic);
+}
+
+<div
+    class="c0 flex-column justify-content-around d-flex container-fluid"
+  >
+    <div
+      class="mb-5"
+    >
+      <div
+        data-testid="peerlyLogoComponent"
+      >
+        <div
+          class="c1 mx-auto"
+          data-testid="Logo"
+        >
+          <div
+            class="c2"
+            data-testid="plusSignText"
+            font-size="48px"
+          >
+            +
+          </div>
+        </div>
+      </div>
+      <div
+        class="text-center"
+      >
+        <div
+          class="c3"
+          data-testid="PeerlyTextComponents"
+          font-size="48px"
+        >
+          Peerly
+        </div>
+      </div>
+    </div>
+    <div
+      class="text-center mb-3 pb-4"
+    >
+      <button
+        disabled=""
+        style="background-color: rgb(255, 255, 255); display: inline-flex; align-items: center; color: rgba(0, 0, 0, 0.54); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .24), 0 0 1px 0 rgba(0, 0, 0, .24); padding: 0px; border-radius: 2px; border: 1px solid transparent; font-size: 14px; font-weight: 500; font-family: Roboto, sans-serif; opacity: 0.6;"
+        type="button"
+      >
+        <div
+          style="margin-right: 10px; background: rgb(255, 255, 255); padding: 10px; border-radius: 2px;"
+        >
+          <svg
+            height="18"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              fill="#000"
+              fill-rule="evenodd"
+            >
+              <path
+                d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
+                fill="#EA4335"
+              />
+              <path
+                d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
+                fill="#4285F4"
+              />
+              <path
+                d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
+                fill="#FBBC05"
+              />
+              <path
+                d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
+                fill="#34A853"
+              />
+              <path
+                d="M0 0h18v18H0z"
+                fill="none"
+              />
+            </g>
+          </svg>
+        </div>
+        <span
+          style="font-weight: 500; padding: 10px 10px 10px 0px;"
+        >
+          Google sign in
+        </span>
+      </button>
+    </div>
+    <div
+      class="c4 text-center d-none d-md-block d-lg-block mt-4"
+      data-testid="info"
+    >
+      <h3>
+        Lets Create the Office Positive
+      </h3>
+      <hr
+        class="c5"
+        data-testid="hrLine"
+      />
+      <h6>
+        Encouragement Driven
+      </h6>
+    </div>
+  </div>
+</DocumentFragment>
+`;