@material-ui/core/#InputAdornment JavaScript Examples

The following examples show how to use @material-ui/core/#InputAdornment. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: LoginForm.js    From to-view-list with MIT License 4 votes vote down vote up 
LoginForm = () => {
  const [credentials, setCredentials] = useState({
    email: '',
    password: '',
  });
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { email, password } = credentials;

  const handleOnChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.login(credentials);
      entryService.setToken(user.token);
      authDispatch(loginUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setCredentials({
        email: '',
        password: '',
      });
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! You're logged in.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError({ message: err.response.data.error, severity: 'error' });
      } else {
        setError({ message: err.message, severity: 'error' });
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleLogin} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Login to your account
        </Typography>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>

        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<ExitToAppIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Logging in' : 'Login'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Don't have an account?{' '}
          <Link component={RouterLink} to="/register">
            Register.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error.message}
            severity={error.severity}
            clearError={() => setError(null)}
            title={error.title}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}
Example #2
Source File: RegisterForm.js    From to-view-list with MIT License 4 votes vote down vote up 
RegisterForm = () => {
  const [userDetails, setUserDetails] = useState({
    displayName: '',
    email: '',
    password: '',
  });
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [showConfirmPass, setShowConfirmPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { displayName, email, password } = userDetails;

  const handleOnChange = (e) => {
    setUserDetails({ ...userDetails, [e.target.name]: e.target.value });
  };

  const handleRegister = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      return setError(`Confirm password failed! Both passwords need to match.`);
    }
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.register(userDetails);
      entryService.setToken(user.token);
      authDispatch(registerUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setUserDetails({
        displayName: '',
        email: '',
        password: '',
      });
      setConfirmPassword('');
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! Your account has been registered.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError(err.response.data.error);
      } else {
        setError(err.message);
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleRegister} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Create an account
        </Typography>
        <div className={classes.input}>
          <PersonIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Display Name"
            value={displayName}
            name="displayName"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <div className={classes.input}>
          <EnhancedEncryptionIcon
            color="secondary"
            className={classes.inputIcon}
          />
          <TextField
            color="secondary"
            required
            type={showConfirmPass ? 'text' : 'password'}
            label="Confirm Password"
            value={confirmPassword}
            name="confirmPassword"
            onChange={({ target }) => setConfirmPassword(target.value)}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowConfirmPass(!showConfirmPass)}
                  >
                    {showConfirmPass ? (
                      <VisibilityOffIcon />
                    ) : (
                      <VisibilityIcon />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<PersonAddIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Registering' : 'Register'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Already have an account?{' '}
          <Link component={RouterLink} to="/login">
            Login.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error}
            severity="error"
            clearError={() => setError(null)}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}