Untitled

 avatar
unknown
plain_text
4 years ago
1.7 kB
4
Indexable
import TextInput from "../Component/TextInput";
import Button from "../Component/Button";
import React, {ChangeEvent, FormEvent} from "react";

interface State {
    username: string,
    password: string,
    errors: {
        username?: object,
        password?: object
    }
}

export default class Login extends React.Component<any, State>{
    constructor(props: any) {
        super(props);
        this.state = {
            username: '',
            password: '',
            errors: {
                username: {},
                password: {}
            }
        }
    }

    handleSubmitForm = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();

    }

    handleChangeUsername = (e: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            username: e.target.value
        })
    }
    handleChangePassword = (e: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            password: e.target.value
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmitForm}>
                <TextInput labelName="Username" onChange={this.handleChangeUsername} {...this.state.errors.username} className={"text-input-primary"} typeName="text"/>
                <TextInput labelName="Password" onChange={this.handleChangePassword} {...this.state.errors.password} className={"text-input-primary"} typeName="password"/>
                <a href="#" className="text-align-right">
                    I forgot my password
                </a>
                <Button typeName="submit" valueName="Log In" className={"btn-primary"} />
            </form>
        );
    }
}
Editor is loading...