import React, {Component} from 'react'
import "./Screen.css"
import "./LoginScreen.css"

/**
 * Экран логина
 * @extends Component
 */

class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.loginRef = null;
    this.passwordRef = null;
  }

  render() {
    return(
      <div class="screen login_screen">
        <div class="content">
          <div>
            <h1 align="center">Вход</h1>
            <div class="inputFieldLabel">Логин</div>
            <input class="inputField" ref={ref => this.loginRef = ref} />
            <div class="inputFieldLabel">Пароль</div>
            <input class="inputField" type="password" ref={ref => this.passwordRef = ref} />
            <button class="button" onClick={(e)=>{
              console.log(`login: ${this.loginRef.value}, password: ${this.passwordRef.value}`)
            }}>Войти</button>
          </div>
        </div>
      </div>
    )
  }

}

export default LoginScreen