Add Firebase authentication for Merchant Sign Up

web/app.yaml

@@ -12,3 +12,8 @@ handlers:
   - url: /.*
     static_files: build/index.html
     upload: build/index.html
+
+env_variables:
+  # Replace with API key and authentication domain before deployment
+  REACT_APP_API_KEY: '<API_KEY>'
+  REACT_APP_AUTH_DOMAIN: '<AUTH_DOMAIN>'

web/package.json

@@ -16,14 +16,18 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",
+    "@types/to-camel-case": "^1.0.0",
+    "firebase": "^7.15.2",
     "muicss": "^0.10.2",
     "rc-progress": "^3.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-feather": "^2.0.8",
+    "react-hook-form": "^5.7.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.1",
+    "to-camel-case": "^1.0.0",
     "typescript": "~3.7.2"
   },
   "scripts": {

web/src/components/common/FormRow.tsx

@@ -14,28 +14,45 @@
  * limitations under the License.
  */
 
+import {Component, ReactElement} from 'react';
 import React from 'react';
 
+import Col from 'muicss/lib/react/col';
 import Row from 'muicss/lib/react/row';
 import styled from 'styled-components';
+import toCamelCase from 'to-camel-case';
 
 const StyledRow = styled(Row)`
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: top;
   justify-content: center;
 
-  margin: 20px 0;
+  margin: 5px 0;
+`;
+
+const StyledCol = styled(Col)`
+  display: flex;
+  flex-direction: column;
+  align-items: left;
 `;
 
 const Label = styled.label`
   width: 100px;
-  font-size: 14px;
+  height: 30px;
   margin-right: 20px;
+
+  font-size: 14px;
+  vertical-align: middle;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 `;
 
 const Input = styled.input`
   height: 30px;
+  width: 350px;
   font-size: 14px;
   padding: 0 15px;
 
@@ -44,19 +61,57 @@ const Input = styled.input`
   box-shadow: 4px 2px 4px rgba(0, 0, 0, 0.25);
 `;
 
+const ErrorContainer = styled.div`
+  height: 12px;
+  margin-left: 15px;
+  margin-top: 5px;
+
+  font-size: 12px;
+  line-height: 10px;
+  color: var(--bright-red);
+`;
+
+type ReactHookFormErrorMessage =
+  | string
+  | React.ReactElement<
+      any,
+      | string
+      | ((
+          props: any
+        ) => React.ReactElement<
+          any,
+          string | any | (new (props: any) => React.Component<any, any, any>)
+        > | null)
+      | (new (props: any) => React.Component<any, any, any>)
+    >
+  | undefined;
+
 interface FormRowProps {
   label: string;
   inputType: string;
+  forwardedRef: (ref: HTMLInputElement) => void;
+  error: ReactHookFormErrorMessage;
 }
 
 /**
  * This is a row in a form, consisting of a label and an input field shown
- * side by side.
+ * side by side. This also contains a container for error message which is
+ * displayed below the input field where applicable.
  */
-const FormRow: React.FC<FormRowProps> = ({label, inputType}) => (
+const FormRow: React.FC<FormRowProps> = ({
+  label,
+  inputType,
+  forwardedRef,
+  error,
+}) => (
   <StyledRow>
-    <Label>{label}</Label>
-    <Input type={inputType}></Input>
+    <StyledCol>
+      <Label>{label}</Label>
+    </StyledCol>
+    <StyledCol>
+      <Input type={inputType} name={toCamelCase(label)} ref={forwardedRef} />
+      <ErrorContainer>{error}</ErrorContainer>
+    </StyledCol>
   </StyledRow>
 );
 

web/src/components/common/GroupBuyMerchantHeader.tsx

@@ -27,13 +27,13 @@ const HeaderContainer = styled.div`
 `;
 
 const Logo = styled(GPayLogo)`
-  width: 80px;
+  width: 70px;
 `;
 
 const Header = styled.h1`
-  font-size: 32px;
+  font-size: 28px;
   font-weight: normal;
-  line-height: 48px;
+  line-height: 42px;
   margin: 0;
   text-align: center;
 `;

web/src/components/merchant/sign-up/SignUpCard.tsx

@@ -16,10 +16,8 @@
 
 import React from 'react';
 
-import FormRow from 'components/common/FormRow';
 import GroupBuyMerchantHeader from 'components/common/GroupBuyMerchantHeader';
-import Button from 'muicss/lib/react/button';
-import Form from 'muicss/lib/react/form';
+import SignUpForm from 'components/merchant/sign-up/SignUpForm';
 import Row from 'muicss/lib/react/row';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
@@ -37,50 +35,26 @@ const CardContainer: React.FC = styled.div`
 `;
 
 const StyledRow = styled(Row)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  margin: 15px 0;
-`;
-
-const StyledButton = styled(Button)`
   height: 40px;
-  width: 200px;
-  border-radius: 20px;
-  border: none;
-
-  background: var(--dark-gray);
-  color: white;
-  font-size: 18px;
-  font-weight: bolder;
-  text-transform: uppercase;
-
-  margin-top: 30px;
+  display: block;
+  line-height: 40px;
 `;
 
 /**
  * This is the card containing the sign up form for the Merchant app.
  * It is displayed in the Sign Up page.
  */
-const SignUpCard: React.FC = () => (
-  <CardContainer>
-    <GroupBuyMerchantHeader />
-    <Form>
-      <FormRow label="Name" inputType="text" />
-      <FormRow label="Email" inputType="email" />
-      <FormRow label="Password" inputType="password" />
-      <FormRow label="Confirm Password" inputType="password" />
-      <FormRow label="VPA" inputType="email" />
+const SignUpCard: React.FC = () => {
+  return (
+    <CardContainer>
+      <GroupBuyMerchantHeader />
+      <SignUpForm />
       <StyledRow>
-        <StyledButton>Sign Up</StyledButton>
+        Already have an account? <Link to="/merchant/sign-in">Sign in</Link>{' '}
+        now!
       </StyledRow>
-    </Form>
-    <div>
-      Already have an account? <Link to="/merchant/sign-in">Sign in</Link> now!
-    </div>
-  </CardContainer>
-);
+    </CardContainer>
+  );
+};
 
 export default SignUpCard;

web/src/components/merchant/sign-up/SignUpForm.tsx

@@ -0,0 +1,86 @@
+/**
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import FormRow from 'components/common/FormRow';
+import useSignUpForm from 'components/merchant/sign-up/hooks/useSignUpForm';
+import Button from 'muicss/lib/react/button';
+import Form from 'muicss/lib/react/form';
+import styled from 'styled-components';
+
+const StyledForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledButton = styled(Button)`
+  height: 40px;
+  width: 200px;
+  border-radius: 20px;
+  border: none;
+
+  background: var(--dark-gray);
+  color: white;
+  font-size: 18px;
+  font-weight: bolder;
+  text-transform: uppercase;
+  margin-top: 20px;
+`;
+
+const SignUpForm = () => {
+  const {disabled, errors, onSubmit, validations} = useSignUpForm();
+  return (
+    <StyledForm>
+      <FormRow
+        label="Name"
+        inputType="text"
+        forwardedRef={validations.name}
+        error={errors?.name?.message}
+      />
+      <FormRow
+        label="Email"
+        inputType="email"
+        forwardedRef={validations.email}
+        error={errors?.email?.message}
+      />
+      <FormRow
+        label="Password"
+        inputType="password"
+        forwardedRef={validations.password}
+        error={errors?.password?.message}
+      />
+      <FormRow
+        label="Confirm Password"
+        inputType="password"
+        forwardedRef={validations.confirmPassword}
+        error={errors?.confirmPassword?.message}
+      />
+      <FormRow
+        label="VPA"
+        inputType="text"
+        forwardedRef={validations.vpa}
+        error={errors?.vpa?.message}
+      />
+      <StyledButton onClick={onSubmit} disabled={disabled}>
+        Sign Up
+      </StyledButton>
+    </StyledForm>
+  );
+};
+
+export default SignUpForm;