I am trying this code where I can send some data and save it in the localstorage. I tied the below code.

function Login () {

    const uname=useRef()
    const pass = useRef()
    const getEmail = localStorage.getItem("emailData")
    const getPassword = localStorage.getItem("passwordData")
    const handleSubmit=()=>{
        if(uname.current.value==="admin"&&pass.current.value==="admin"){
            localStorage.setItem("emailData","admin")
            localStorage.setItem("passwordData","admin")
        }
    }

  const [values, setValues] = useState({
    email: "",
    pass: "",
    showPass: false,
  });

  const handlePassVisibilty = () => {
    setValues({
      ...values,
      showPass: !values.showPass,
    });
  };


    
  return (
    
    <div>
        {
        getEmail&&getPassword?<Home/>:
    
        
      <Container maxWidth="sm">
        <Grid
          container
          spacing={2}
          direction="column"
          justifyContent="center"
          style={{ minHeight: "100vh" }}
        >
          <Paper elelvation={2} sx={{ padding: 10 }}>
            <h2>Welcome to Employee Management System</h2>
            <form onSubmit={handleSubmit}>
              <Grid container direction="column" spacing={2}>
                <Grid item>
                  <TextField
                    type="text"
                    fullWidth
                    label="Enter your Username"
                    placeholder="Username"
                    variant="outlined"
                    required
                    ref={uname}
                  />    
                </Grid>

                <Grid item>
                  <TextField
                    type={values.showPass ? "text" : "password"}
                    fullWidth
                    label="Enter your Password"
                    placeholder="Password"
                    variant="outlined"
                    required
                    ref={pass}
                    InputProps={{
                      endAdornment: (
                        <InputAdornment position="end">
                          <IconButton
                            onClick={handlePassVisibilty}
                            aria-label="toggle password"
                            edge="end"
                          >
                            {values.showPass ? (
                              <VisibilityOffIcon />
                            ) : (
                              <VisibilityIcon />
                            )}
                          </IconButton>
                        </InputAdornment>
                      ),
                    }}
                  />
                </Grid>

                <Grid item>
                  <Button type="submit" fullWidth variant="contained" >
                    Sign In
                  </Button>
                </Grid>
              </Grid>
            </form>
          </Paper>
        </Grid>
      </Container>
}
    </div>

  );
};

export default Login;

What I am trying to do is that if the localstorage has the correct username and password the login page will redirect to the home page. The problem I am facing is that the data is not stored in the localstorage. Can someone please explain to me what I am doing wrong? Any help is appreciated Thank you.

CodePudding user response：

you need to give type="submit" to button of your form in order to submit form

  <Button fullWidth type="submit" variant="contained">
                Sign In
              </Button>

if it still not working, use state instead

here what I did with your code :

  const getEmail = localStorage.getItem("emailData")
  const getPassword = localStorage.getItem("passwordData")

  const [values, setValues] = useState({
    email: "",
    pass: "",
    showPass: false,
  });

  const handleSubmit=()=>{
      if(values.email ==="admin" && values.pass ==="admin"){
          localStorage.setItem("emailData","admin")
          localStorage.setItem("passwordData","admin")
      }
  }



const handlePassVisibilty = () => {
  setValues({
    ...values,
    showPass: !values.showPass,
  });
};


  
return (
  
  <div>
      {
      getEmail&&getPassword?<Home/>:
  
      
    <Container maxWidth="sm">
      <Grid
        container
        spacing={2}
        direction="column"
        justifyContent="center"
        style={{ minHeight: "100vh" }}
      >
        <Paper elelvation={2} sx={{ padding: 10 }}>
          <h2>Welcome to Employee Management System</h2>
          <form onSubmit={handleSubmit}>
            <Grid container direction="column" spacing={2}>
              <Grid item>
                <TextField
                  type="text"
                  fullWidth
                  label="Enter your Username"
                  placeholder="Username"
                  variant="outlined"
                  required
                  value={values.email}
                  onChange={(e)=>{
                    setValues(prevState=>({...prevState,email:e.target.value}))
                  }}
            
                />    
              </Grid>

              <Grid item>
                <TextField
                  type={values.showPass ? "text" : "password"}
                  fullWidth
                  label="Enter your Password"
                  placeholder="Password"
                  variant="outlined"
                  required
                  value={values.pass}
                  onChange={(e)=>{
                    setValues(prevState=>({...prevState,pass:e.target.value}))
                  }}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton
                          onClick={handlePassVisibilty}
                          aria-label="toggle password"
                          edge="end"
                        >
                          {values.showPass ? (
                            <VisibilityOffIcon />
                          ) : (
                            <VisibilityIcon />
                          )}
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>

              <Grid item>
                <Button type="submit" fullWidth variant="contained" >
                  Sign In
                </Button>
              </Grid>
            </Grid>
          </form>
        </Paper>
      </Grid>
    </Container>
}
  </div>

);