Feature user signin

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/api/index.js

@@ -1,38 +1,35 @@
-const signInUser = async (email, password) => {
-    try {
-        const response = await fetch('https://lmel2.wiremockapi.cloud/json/1', {
-            method: 'POST',
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ email, password })
-        });
-        const responseJson = await response.json()
-        return responseJson
-    } catch(e) {
-        console.log('error occurred', e)
-        return false
-    }
-}
+const createUserAccount = async ({ email, password }) => {
+  try {
+    const response = await fetch("https://lmel2.wiremockapi.cloud/json/1", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password }),
+    });
+    const responseJson = await response.json();
+    return responseJson;
+  } catch (e) {
+    console.log("error occurred", e);
+    return false;
+  }
+};
 
 const signUpUser = async ({ email, password }) => {
-    try {
-        const response = await fetch('https://lmel2.wiremockapi.cloud/json/1', {
-            method: 'POST',
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ email, password })
-        });
-        const responseJson = await response.json()
-        return responseJson
-    } catch(e) {
-        console.log('error occurred', e)
-        return false
-    }
-}
+  try {
+    const response = await fetch("https://lmel2.wiremockapi.cloud/json/1", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password }),
+    });
+    const responseJson = await response.json();
+    return responseJson;
+  } catch (e) {
+    console.log("error occurred", e);
+    return false;
+  }
+};
 
-export {
-    signInUser,
-    signUpUser
-}
+export { createUserAccount, signUpUser };

src/components/CustomCheckbox.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Checkbox from '@mui/material/Checkbox';
+
+const label = { inputProps: { 'aria-label': 'Checkbox label' } };
+
+export default function CustomCheckbox(props) {
+  const onChange = (e) => {
+    props.onChange(props.name, e.target.checked)
+  }
+
+  return (
+    <div>
+      <Checkbox 
+        {...label} 
+        className={props.className}
+        checked={props.checked}
+        onChange={onChange}
+      />
+      {props.text}
+    </div>
+  )
+}

src/components/CustomSelect.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import h from '../helper/index'
+import { InputLabel } from '@mui/material';
+
+export default function CustomSelect(props) {
+    const onChange = (e) => {
+        props.onChange(props.name, e.target.value)
+    }
+
+    return <>
+        <InputLabel id={props.name + '-label'}>{h.capitalizeFirst(props.name)}</InputLabel>
+        <Select
+            labelId={props.name + '-label'}
+            onBlur={props.onBlur}
+            size="small"
+            id={props.name}
+            name={props.name}
+            error={props.error}
+            helperText={props.helperText}
+            value={props.value}
+            label={h.capitalizeFirst(props.name)}
+            onChange={onChange}
+        >
+            {props.options.map(({ label, value }) => {
+                return <MenuItem value={value}>{label}</MenuItem>    
+            })}
+        </Select>
+    </>
+}

src/components/CustomTextField.js

@@ -15,12 +15,13 @@ export default function CustomTextField(props) {
             id={props.name}
             name={props.name}
             onChange={onChange}
-            defaultValue={props.defaultValue || ''}
             value={props.value}
             label={h.capitalizeFirst(props.name)}
             variant="outlined"
             error={props.error}
             helperText={props.helperText}
+            type={props.type}
+            InputProps={props.inputProps}
         />
     );
 }

src/components/Signup.css

@@ -1,22 +1,26 @@
 .signup-input {
-    margin: 10px 0px !important;
+  margin: 10px 0px !important;
 }
 
 .dialog {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    padding: 20px 35px;
-    border-radius: 10px;
-    width: 240px;
-    height: fit-content;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding: 20px 35px;
+  border-radius: 10px;
+  width: 240px;
+  height: fit-content;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .dialog-header {
-    color: #2d842d;
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    text-align: center;
-}
+  color: #2d842d;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.anonymous-input {
+  margin-left: -10px !important;
+}

src/components/Signup.js

@@ -1,8 +1,17 @@
 import * as React from "react";
-import { signUpUser } from "../api/index";
+import { createUserAccount } from "../api/index";
 import "./Signup.css";
 import CustomTextField from "./CustomTextField";
-import h from '../helper/index';
+import h from "../helper/index";
+
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import CustomSelect from "./CustomSelect";
+import CustomCheckbox from "./CustomCheckbox";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
 
 const defaultUser = {
   username: "",
@@ -20,20 +29,27 @@ const defaultUser = {
 const SignUp = (props) => {
   const [user, setUser] = React.useState(defaultUser);
   const [errors, setErrors] = React.useState(defaultUser);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [saving, setSaving] = React.useState(null);
+
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (e) => e.preventDefault();
 
-  const onChangeOfValue = (key, value) => {
-    setUser({ ...user, [key]: value });
+  const onChangeOfValue = (key, value) => setUser({ ...user, [key]: value });
+
+  const createUser = async () => {
+    setSaving(true);
+    const response = await createUserAccount(user);
+    console.log("----", response);
+    setSaving(false);
   };
 
-  const onBlur = () => {
-    setErrors(h.validator(user))
-  }
+  const onBlur = () => setErrors(h.validator(user));
 
   return (
     <div className="dialog">
-        <div className="dialog-header">
-          Sign up here!
-        </div>
+      <div className="dialog-header">Sign up here!</div>
       <CustomTextField
         onBlur={onBlur}
         error={errors.username.helperText}
@@ -71,32 +87,71 @@ const SignUp = (props) => {
         error={errors.password.helperText}
         helperText={errors.password.helperText}
         name="password"
+        type={showPassword ? "text" : "password"}
         value={user.password}
         onChange={onChangeOfValue}
+        inputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                onMouseDown={handleMouseDownPassword}
+                edge="end"
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
       />
-      <CustomTextField
+      <CustomSelect
         onBlur={onBlur}
         error={errors.gender.helperText}
         helperText={errors.gender.helperText}
         name="gender"
         value={user.gender}
         onChange={onChangeOfValue}
+        options={[
+          {
+            label: "MALE",
+            value: "MALE",
+          },
+          {
+            label: "FEMALE",
+            value: "FEMALE",
+          },
+          {
+            label: "OTHER",
+            value: "OTHER",
+          },
+        ]}
       />
-      <CustomTextField 
+      <CustomTextField
         onBlur={onBlur}
         error={errors.age.helperText}
         helperText={errors.age.helperText}
-        name="age" 
-        value={user.age} 
+        name="age"
+        value={user.age}
         onChange={onChangeOfValue}
-    />
-      <CustomTextField
+      />
+      <CustomSelect
         onBlur={onBlur}
         error={errors.role.helperText}
         helperText={errors.role.helperText}
         name="role"
         value={user.role}
         onChange={onChangeOfValue}
+        options={[
+          {
+            label: "LISTENER",
+            value: "LISTENER",
+          },
+          {
+            label: "SEEKER",
+            value: "SEEKER",
+          },
+        ]}
       />
       <CustomTextField
         onBlur={onBlur}
@@ -114,6 +169,24 @@ const SignUp = (props) => {
         value={user.state}
         onChange={onChangeOfValue}
       />
+      <CustomCheckbox
+        className="anonymous-input"
+        name="isAnonymous"
+        checked={user.isAnonymous}
+        onChange={onChangeOfValue}
+        text={"Stay anonymous"}
+      />
+      <Button
+        onClick={createUser}
+        variant={saving ? "outlined" : "contained"}
+        color="success"
+      >
+        {saving ? (
+          <CircularProgress size={25} color="success" />
+        ) : (
+          "Create account"
+        )}
+      </Button>
     </div>
   );
 };