<template>
    <div class="register">
      <form @submit="login">
        <p>Firstname:</p>
        <input type="text" name="firstname" placeholder="Firstname" v-model="firstname"  required oninvalid="this.setCustomValidity('Firstname cannot be empty.')" oninput="this.setCustomValidity('')">
        <p>Lastname:</p>
        <input type="text" name="lastname" placeholder="Lastname" v-model="lastname"  required oninvalid="this.setCustomValidity('Lastname cannot be empty.')" oninput="this.setCustomValidity('')">
        <p>Username:</p>
        <input type="text" name="username" placeholder="Username" v-model="username"  required oninvalid="this.setCustomValidity('Username cannot be empty.')" oninput="this.setCustomValidity('')">
        <p>Password:</p>
        <input type="password" name="password" placeholder="Password" v-model="password"  required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
        <p>Confirm Password:</p>
        <input type="password" name="passwordC" placeholder="Password" v-model="passwordC"  required oninvalid="this.setCustomValidity('Password cannot be empty.')" oninput="this.setCustomValidity('')">
        <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: "Register",
  data() {
    return {
      firstname: '',
      lastname: '',
      username: '',
      password: '',
      passwordC: ''

    }
  },
  methods: {
    login(e) {
      e.preventDefault();
        if (this.password == this.passwordC) {
          //register
        }else {
          alert("The password confirmation does not match the password");
        }
    }
  }
}

// var password1 = document.getElementsByName('password');
// var password2 = document.getElementsByName('passwordC');
//
// var checkPasswordValidity = function() {
//     if (password1.value != password2.value) {
//         password2.setCustomValidity('Passwörter müssen übereinstimmen!');
//     } else {
//         password2.setCustomValidity('');
//     }
// };
//
// password1.addEventListener('change', checkPasswordValidity);
// password2.addEventListener('change', checkPasswordValidity);

</script>

<style scoped>
  .register{
    color: #EBE7D9;
    font-size: 10px;

  }
  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>
