import React from "react";
import {Button} from 'react-bootstrap'
import {LoginForm} from "./LoginForm";
import "./login_form.css"
import {Input} from "./InputGroup";
export class Login extends React.Component<LoginForm, LoginForm>{

    constructor(props: Readonly<LoginForm>) {
        super(props)
        this.state={
            username:props.username,
            password:props.password
        }
    }

    login(){
        alert("您输入的用户名是"+this.state.username+",您输入的密码是:"+this.state.password);
    }

    render() {
        return (
          <div className="login-form d-flex align-items-center">
            <div className="container">
                <Input name="username" desc="用户名" value={this.state.username} onChange={(value: string)=>{this.setState({username:value})}}/>

                <Input name="password" desc="密码" value={this.state.password}  onChange={(value: string)=>{this.setState({password:value})}}/>

                <Button variant="success" className="mt-3 col-4"  onClick={()=>this.login()}>登录</Button>
            </div>
          </div>
        );
    }
}