@mui/material#InputBase JavaScript Examples

The following examples show how to use @mui/material#InputBase. 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: Login.js    From admin-web with GNU Affero General Public License v3.0 5 votes vote down vote up 
render() {
    const { classes, t, auth } = this.props;
    const { user, pass, loading } = this.state;
    return (
      <div className={classes.root}>
        <Paper elevation={3} className={classes.loginForm} component="form" onSubmit={this.handleLogin} >
          <div className={classes.logoContainer}>
            <img src={logo} width="300" height={68} alt="grommunio"/>
          </div>
          <Paper className={classes.inputContainer}>
            <AccountCircle className={classes.inputAdornment}/>
            <InputBase
              fullWidth
              autoFocus
              error={!!auth.error}
              className={classes.input}
              placeholder={t("Username")}
              value={user}
              onChange={this.handleTextinput('user')}
              name="username"
              id="username"
              autoComplete="username"
            />
          </Paper>
          <Paper className={classes.inputContainer}>
            <Key className={classes.inputAdornment}/>
            <InputBase
              fullWidth
              type="password"
              className={classes.input}
              error={!!auth.error}
              placeholder={t("Password")}
              value={pass}
              onChange={this.handleTextinput('pass')}
              name="password"
              id="password"
              autoComplete="currect-password"
            />
          </Paper>
          {auth.error && <MuiAlert elevation={6} variant="filled" severity="error" className={classes.errorMessage}>
            {auth.error || t("Failed to login. Incorrect password or username")}
          </MuiAlert>}
          <Paper className={classes.inputContainer}>
            <Button
              className={classes.button}
              type="submit"
              variant="contained"
              color="primary"
              onClick={this.handleLogin}
              disabled={!user || !pass}
            >
              {loading ? <CircularProgress size={24}  color="inherit" className={classes.loader}/> :
                <Typography>{t('Login')}</Typography>}
            </Button>
          </Paper>
        </Paper>
        <div className={classes.background}></div>
      </div>
    );
  }