feature: Created the signup react page under the client folder. (#24)

TA-7
* added signup page under client with error checking

Co-authored-by: Nandhakishore K.S <[email protected]>
Co-authored-by: Andrew Qian <[email protected]>

client/package.json

@@ -2,10 +2,12 @@
   "name": "utschub_client_app",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8000",
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

client/src/Signup.jsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import axios from 'axios';
+import './signupLogin.css';
+
+function Signup() {
+
+    const initialValues = { username: "", mailAddress: "", password: "" };
+    const [formValues, setFormValues] = useState(initialValues);
+    const [formErrors, setFormErrors] = useState([]);
+
+    const handleChange = (e) => {
+        // console.log(e.target.value);
+        const { name, value } = e.target;
+        setFormValues({...formValues, [name]: value });
+    }
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setFormErrors(validate(formValues));
+        const body = { name: formValues.username, email: formValues.mailAddress, password: formValues.password };
+        let axiosConfig = {
+            headers: {
+                'Content-Type': 'application/json;charset=UTF-8',
+            }
+        };
+        axios.post('http://localhost:8000/api/users',  body, axiosConfig)
+        .then(res => {
+            console.log(res);
+        }).catch(error => {
+            console.error(error);
+        })
+    }
+
+    const validate = (values) => {
+        const errors = {};
+        const regex = /^[a-zA-Z0-9_.+-][email protected]$/;
+        if(!values.username){
+            errors.username = "Please enter the username";
+        }
+        if(!values.mailAddress){
+            errors.mailAddress = "Please enter your email address";
+        }
+        else if (!regex.test(values.mailAddress)){
+            errors.mailAddress = "Please enter the valid mail address";
+        }
+        if(!values.password){
+            errors.password = "Please enter your password";
+        }
+        return errors;
+    }
+  return (
+    <div className="formContainer">
+        <form onSubmit={(e) => handleSubmit(e)}>
+            <h1>Signup Form</h1>
+            <hr />
+            <div className="uiForm">
+                <div className="formField">
+                    <label>Username</label>
+                    <input 
+                      type="text" 
+                      placeholder="Username" 
+                      name="username" 
+                      onChange={(e) => handleChange(e)}
+                    />
+                </div>
+                <p className="errorMsg">{formErrors.username}</p>
+                <div className="formField">
+                    <label>Mail Address</label>
+                    <input
+                      type="text"
+                      placeholder="Mail Address" 
+                      name="mailAddress"
+                      onChange={(e) => handleChange(e)}
+                    />
+                </div>
+                <p className="errorMsg">{formErrors.mailAddress}</p>
+                <div className="formField">
+                    <label>Password</label>
+                    <input type="text"
+                      placeholder="Password" 
+                      name="password"
+                      onChange={(e) => handleChange(e)}
+                    />
+                </div>
+                <p className="errorMsg">{formErrors.password}</p>
+                <button className="submitButton">Signup</button>
+            </div>
+        </form>
+    </div>
+  );
+}
+
+export default Signup;

client/src/index.js

@@ -1,14 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import Signup from './Signup';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <Signup />
 );
 
 // If you want to start measuring performance in your app, pass a function

client/src/signupLogin.css

@@ -0,0 +1,5 @@
+.errorMsg {
+    color: red;
+    margin: 0;
+    align-self: flex-start;
+}