import React, { useState } from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

import styles from './LoginPage.module.css';

export default function () {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');



    const handleInputChange = (event) => {
        const { name, value } = event.target;
        if (name === 'username') setUsername(value);
        if (name === 'password') setPassword(value);
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(`Username: ${username}\nPassword: ${password}`);
    };

    return (
        <form className={styles.form} onSubmit={handleSubmit}>
            <TextField
                name="username"
                label="请输入手机号码"
                variant="outlined"
                value={username}
                onChange={handleInputChange}
            />
            <TextField
                name="password"
                label="请输入密码"
                type="password"
                variant="outlined"
                value={password}
                onChange={handleInputChange}
            />
            <Button
                type="submit"
                variant="contained"
                color="primary"
            >
                登录
            </Button>
        </form>
    );
}