Add Firebase authentication for Merchant Sign Up

web/package.json

@@ -16,6 +16,8 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",
+    "autobind-decorator": "^2.4.0",
+    "firebase": "^7.15.2",
     "muicss": "^0.10.2",
     "rc-progress": "^3.0.0",
     "react": "^16.13.1",

web/src/components/common/FormRow.tsx

@@ -47,16 +47,25 @@ const Input = styled.input`
 interface FormRowProps {
   label: string;
   inputType: string;
+  onChange: React.EventHandler<React.FormEvent<HTMLInputElement>>;
 }
 
 /**
  * This is a row in a form, consisting of a label and an input field shown
  * side by side.
  */
-const FormRow: React.FC<FormRowProps> = ({label, inputType}) => (
+const FormRow: React.FC<FormRowProps> = ({label, inputType, onChange}) => (
   <StyledRow>
     <Label>{label}</Label>
-    <Input type={inputType}></Input>
+    <Input
+      type={inputType}
+      name={label
+        .toLowerCase()
+        .replace(/\s(.)/g, a => a.toUpperCase())
+        .replace(/\s/g, '')
+        .replace(/^(.)/, a => a.toLowerCase())}
+      onChange={onChange}
+    />
   </StyledRow>
 );
 

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

@@ -16,8 +16,10 @@
 
 import React from 'react';
 
+import autobind from 'autobind-decorator';
 import FormRow from 'components/common/FormRow';
 import GroupBuyMerchantHeader from 'components/common/GroupBuyMerchantHeader';
+import firebase from 'firebase';
 import Button from 'muicss/lib/react/button';
 import Form from 'muicss/lib/react/form';
 import Row from 'muicss/lib/react/row';
@@ -36,13 +38,18 @@ const CardContainer: React.FC = styled.div`
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
 `;
 
+const StyledForm = styled(Form)`
+  margin: 15px 0;
+`;
+
 const StyledRow = styled(Row)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
+  height: 40px;
+  display: block;
+  line-height: 40px;
+`;
 
-  margin: 15px 0;
+const ErrorContainer = styled.div`
+  color: var(--bright-red);
 `;
 
 const StyledButton = styled(Button)`
@@ -56,31 +63,142 @@ const StyledButton = styled(Button)`
   font-size: 18px;
   font-weight: bolder;
   text-transform: uppercase;
-
-  margin-top: 30px;
+  margin: 0;
 `;
 
+interface SignUpState {
+  name?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+  vpa?: string;
+  errorMessage?: string;
+}
+
 /**
  * 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" />
-      <StyledRow>
-        <StyledButton>Sign Up</StyledButton>
-      </StyledRow>
-    </Form>
-    <div>
-      Already have an account? <Link to="/merchant/sign-in">Sign in</Link> now!
-    </div>
-  </CardContainer>
-);
+@autobind
+class SignUpCard extends React.Component<{}, SignUpState> {
+  constructor(props: Readonly<{}>) {
+    super(props);
+    this.state = {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+      vpa: '',
+      errorMessage: '',
+    };
+  }
+
+  handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const name: string = event.target.name;
+    const value: string = event.target.value;
+
+    this.setState({
+      [name]: value,
+      errorMessage: '',
+    });
+  }
+
+  handleSubmit() {
+    const name: string | undefined = this.state.name;
+    const email: string | undefined = this.state.email;
+    const password: string | undefined = this.state.password;
+    const confirmPassword: string | undefined = this.state.confirmPassword;
+    const vpa: string | undefined = this.state.vpa;
+
+    if (!(name && email && password && confirmPassword && vpa)) {
+      this.setState({
+        errorMessage: 'Please fill in all of the fields.',
+      });
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      this.setState({
+        errorMessage: 'Passwords do not match.',
+      });
+      return;
+    }
+
+    // Add a new user account to Firebase.
+    if (!firebase.apps.length) {
+      firebase.initializeApp({
+        apiKey: process.env.API_KEY,
+        authDomain: process.env.AUTH_DOMAIN,
+      });
+    }
+
+    const setState = this.setState.bind(this);
+    firebase
+      .auth()
+      .createUserWithEmailAndPassword(email, password)
+      .catch(error => {
+        const errorCode = error.code;
+        let errorMessage = error.message;
+        if (errorCode === 'auth/invalid-email') {
+          errorMessage = 'Please input a valid email address.';
+        } else if (errorCode === 'auth/weak-password') {
+          errorMessage = 'Password should be at least 6 characters.';
+        } else if (errorCode === 'auth/email-already-in-use') {
+          errorMessage =
+            'The email address is already in use by another account.';
+        } else if (errorCode === 'auth/operation-not-allowed') {
+          errorMessage = 'Oops, something is wrong. Please try again later!';
+        }
+        setState({
+          errorMessage,
+        });
+      });
+  }
+
+  render() {
+    return (
+      <CardContainer>
+        <GroupBuyMerchantHeader />
+        <StyledForm>
+          <FormRow
+            label="Name"
+            inputType="text"
+            onChange={this.handleInputChange}
+          />
+          <FormRow
+            label="Email"
+            inputType="email"
+            onChange={this.handleInputChange}
+          />
+          <FormRow
+            label="Password"
+            inputType="password"
+            onChange={this.handleInputChange}
+          />
+          <FormRow
+            label="Confirm Password"
+            inputType="password"
+            onChange={this.handleInputChange}
+          />
+          <FormRow
+            label="VPA"
+            inputType="text"
+            onChange={this.handleInputChange}
+          />
+        </StyledForm>
+        <StyledRow>
+          <ErrorContainer>{this.state.errorMessage}</ErrorContainer>
+        </StyledRow>
+        <StyledRow>
+          <StyledButton onClick={this.handleSubmit}>Sign Up</StyledButton>
+        </StyledRow>
+        <StyledRow>
+          Already have an account? <Link to="/merchant/sign-in">Sign in</Link>{' '}
+          now!
+        </StyledRow>
+      </CardContainer>
+    );
+  }
+}
 
 export default SignUpCard;

web/tsconfig.json

@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react",
-    "baseUrl": "./src/"
+    "baseUrl": "./src/",
+    "experimentalDecorators": true
   },
   "include": [
     "src"