text: import React, { useState } from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  import { signupUser } from "../api/users"
  function Copyright() {
      return (
          <Typography variant="body2" color="textSecondary" align="center">
              {'Copyright © '}
              <Link color="inherit" href="https://material-ui.com/">
                  Your Website
        </Link>{' '}
              {new Date().getFullYear()}
              {'.'}
          </Typography>
      );
  }
  
  const useStyles = makeStyles((theme) => ({
      paper: {
          marginTop: theme.spacing(8),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
      },
      avatar: {
          margin: theme.spacing(1),
          backgroundColor: theme.palette.secondary.main,
      },
      form: {
          width: '100%', // Fix IE 11 issue.
          marginTop: theme.spacing(3),
      },
      submit: {
          margin: theme.spacing(3, 0, 2),
      },
  }));
  
  export default function SignUp({ history }) {
  
      const [userForm, setuserForm] = useState({
          Email: "",
          Password: "",
          FirstName: "",
          LastName: "",
          City: "",
          Country: "",
          PostalCode: ""
      })
  
      const SubmitChange = async (e) => {
          let Data = {
              email: userForm.Email,
              password: userForm.Password,
              firstname: userForm.FirstName,
              lastname: userForm.LastName,
              address: {
                  city: userForm.City,
                  country: userForm.Country,
                  postalcode: userForm.PostalCode
              }
          }
  
          e.preventDefault()
  
          const resp = await signupUser(Data)
          if (resp == "Created") {
              history.push("/login")
          }
          else {
              alert("username already has signed up ")
          }
      }
  
      const classes = useStyles();
  
      return (
          <Container component="main" maxWidth="xs">
              <CssBaseline />
              <div className={classes.paper}>
                  <Avatar className={classes.avatar}>
                      <LockOutlinedIcon />
                  </Avatar>
                  <Typography component="h1" variant="h5">
                      Sign up
          </Typography>
                  <form className={classes.form} noValidate onSubmit={SubmitChange}>
                      <Grid container spacing={2}>
                          <Grid item xs={12}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, Email: e.target.value })}
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="email"
                                  label="Email"
                                  name="email"
                                  autoComplete="email"
                              />
                          </Grid>
                          <Grid item xs={12}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, Password: e.target.value })}
                                  variant="outlined"
                                  required
                                  fullWidth
                                  name="password"
                                  label="Password"
                                  type="password"
                                  id="password"
                                  autoComplete="current-password"
                              />
                          </Grid>
                          <Grid item xs={12} sm={6}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, FirstName: e.target.value })}
                                  autoComplete="fname"
                                  name="firstName"
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="firstName"
                                  label="First Name"
                                  autoFocus
                              />
                          </Grid>
                          <Grid item xs={12} sm={6}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, LastName: e.target.value })}
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="lastName"
                                  label="Last Name"
                                  name="lastName"
                                  autoComplete="lname"
                              />
                          </Grid>
                          <Grid item xs={12} sm={6}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, City: e.target.value })}
  
                                  autoComplete="city"
                                  name="city"
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="city"
                                  label="City"
                                  autoFocus
                              />
                          </Grid>
                          <Grid item xs={12} sm={6}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, Country: e.target.value })}
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="country"
                                  label="country"
                                  name="country"
                                  autoComplete="country"
                              />
                          </Grid>
                          <Grid item xs={12} sm={6}>
                              <TextField
                                  onChange={e => setuserForm({ ...userForm, PostalCode: e.target.value })}
                                  variant="outlined"
                                  required
                                  fullWidth
                                  id="postal code"
                                  label="Postal Code"
                                  name="postal code"
                                  autoComplete="pcode"
                              />
                          </Grid>
                          <Grid item xs={12}>
                              <FormControlLabel
                                  control={<Checkbox value="allowExtraEmails" color="primary" />}
                                  label="I want to receive inspiration, marketing promotions and updates via email."
                              />
                          </Grid>
                      </Grid>
                      <Button
                          type="submit"
                          fullWidth
                          variant="contained"
                          color="primary"
                          className={classes.submit}
  
                      >
                          Sign Up
                      </Button>
                      <Grid container justify="flex-end">
                          <Grid item>
                              <Link to="/login" variant="body2">
                                  Already have an account? Sign in
                             </Link>
                          </Grid>
                      </Grid>
                  </form>
              </div>
              <Box mt={5}>
                  <Copyright />
              </Box>
          </Container>
      );
  }