<template>
    <div class="login">
      <form @submit="login">
        <p>Username:</p>
        <input type="text" name="username" placeholder="Username" v-model="username"  required="required" oninvalid="this.setCustomValidity('Username cannot be empty.')" >
        <p>Password:</p>
        <input type="password" name="password" placeholder="Password" v-model="password"  required="required" oninvalid="this.setCustomValidity('Password cannot be empty.')">
        <br>
        <input type="submit" value="Submit">
        <p style="font-size: 10px">No account yet? <router-link to="/register"> Register</router-link></p>
      </form>
    </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login(e) {
      e.preventDefault();

    }
  }
}
</script>

<style scoped>
  .login{
    color: #EBE7D9;

  }
  form {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  input[type="text"], input[type=password]  {
    justify-content: center;
    width: 40vw;
    height: 20px;
    background-color: #131313;
    border: 2px solid  #0096ff;
    color: #EBE7D9;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    box-sizing: content-box;
  }
  input[type="submit"] {
    justify-content: center;
    width: 40vw;
    height: 20px;
    border: 2px solid #0096ff ;
    color: #EBE7D9;
    background-color: #131313;
    border-radius: 3px;
    box-sizing: content-box;
    padding: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
  }input[type="submit"]:hover {
    justify-content: center;
    width: 40vw;
    height: 20px;
    border: 2px solid #0096ff ;
    color: #EBE7D9;
    background-color:  #272727;
    border-radius: 3px;
    box-sizing: content-box;
    padding: 0px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
  }

</style>
