material-uiでログイン画面

material-uiでログイン画面を作ってみました。

スタイル

const useStyles = (theme: Theme) => {
    return makeStyles({
        container: {
            flexGrow: 1,
            margin: theme.spacing(2),
        },
        textField: {
            width: "90%",
            height: 100,
        },
        button: {
            width: "100%"
        }
    })
}

名前とパスワードを入れられるようにして、入力判定用にisValid関数を定義しています。
名前とパスワードが入ると送信ボタンが押せるようになるようにcheckSend関数で判定してみました。

const TextInputValidationSample = () => {
    const theme = useTheme()
    const styles = useStyles(theme)()
    const [name, setName] = useState("")
    const [password, setPassword] = useState("")
    const [helperName, setHelperName] = useState("")
    const [helperPassword, setHelperPassword] = useState("")
    const [sendFlag, setSendFlag] = useState(false)
 
    let isValid = (val: string): Boolean => {
        return /^[0-9a-zA-Z]{0,6}$/.test(val)
    }

    let checkSend = (name: string, password: string): boolean => {
        if (name.length === 0) {
            return false
        }
        if (password.length === 0) {
            return false
        }
        if (isValid(password)) {
            return true
        }
        return false
    }

    return (
        <Container>
            <Card>
                <Grid container justify="center" className={styles.container} spacing={1}>
                    <Grid item xs={6} spacing={0}>
                        <TextField
                            className={styles.textField}
                            id="name"
                            label="Name"
                            value={name}
                            placeholder="name"
                            helperText={helperName}
                            autoComplete="username"
                            InputProps={{ name: 'username' }}
                            onChange={e => {
                                const currentName = e.target.value
                                if (isValid(currentName)) {
                                    setName(currentName)
                                    setHelperName("")
                                } else {
                                    setHelperName("invalid Name")
                                }
                                
                                setSendFlag(!checkSend(currentName, password))
                            }}
                        >
                        </TextField>
                    </Grid>
                    <Grid item xs={6} spacing={0}>
                        <TextField
                            className={styles.textField}
                            type="password"
                            id="password"
                            label="Password"
                            placeholder=""
                            value={password}
                            helperText={helperPassword}
                            autoComplete="current-password"
                            onChange={e => {
                                const currentPassword = e.target.value
                                if (isValid(currentPassword)) {
                                    setPassword(currentPassword)
                                    setHelperPassword("")
                                } else {
                                    setHelperPassword("invalid Password")
                                }
                                setSendFlag(!checkSend(name, currentPassword))
                            }}
                        >
                        </TextField>
                    </Grid>
                    <Grid justify="center" item xs={12}>
                        <Button variant="contained"
                            className={styles.button}
                            size="large"
                            disabled={sendFlag}
                        >送信</Button>
                    </Grid>
                </Grid>
            </Card>
        </Container>
    )
}


export default TextInputValidationSample