// I lengthened the passwords of bob and jon ...
// because you seemed like you wanted a valid password to be at least 6 characters
const USERS = [
    {
        name: "anka",
        password: "H2X835"
    }, {
        name: "bob",
        password: "bob123"
    }, {
        name: "jon",
        password: "jon321"
    }
]
var maxAttempts = 3

const $form = document.querySelector('.login .form')
const $username = $form.querySelector('#username')
const $password = $form.querySelector('#password')
const $usernameHint = $form.querySelectorAll('.form-hint')[0]
const $passwordHint = $form.querySelectorAll('.form-hint')[1]
const $feedback = document.querySelector('.feedback')
const $feedbackMsg = $feedback.querySelector('.feedback-msg')

$form.addEventListener('submit', function(event) {
    event.preventDefault()

    // A dirty, nasty, despicable way of denying access
    if (maxAttempts <= 0) {
        document.write('ACCESS DENIED!!!')
        alert('WHOA! YOU\'VE MAXED OUT YOUR 3 ATTEMPTS!')
    }

    const username = $username.value.toLowerCase()
    const password = $password.value.toLowerCase()

    // Is username empty?
    if (!username) {
        $usernameHint.classList.remove('is-hidden')
        maxAttempts--;
        return false
    } else {
        $usernameHint.classList.add('is-hidden')
    }

    // Is password empty or less than six characters?
    if (!password || password.length < 6) {
        $passwordHint.classList.remove('is-hidden')
        maxAttempts--;
        return false
    } else {
        $passwordHint.classList.add('is-hidden')
    }

    // A more-inutitive method of filtering an array
    const isValidUser = USERS.filter(function(user) {
        return user.name === username && user.password === password
    })

    // Does a user by that username and password exist?
    if (isValidUser.length) {
        $feedback.classList.remove('is-hidden')
        $feedbackMsg.classList.remove('is-error')
        $feedbackMsg.classList.add('is-success')
        $feedbackMsg.textContent = 'Login Successful! Welcome, ' + isValidUser[0].name.toUpperCase() + '!'
    } else {
        $feedback.classList.remove('is-hidden')
        $feedbackMsg.classList.add('is-error')
        $feedbackMsg.classList.remove('is-success')
        $feedbackMsg.textContent = 'Sorry! There is no user named ' + username.toUpperCase() + ' with that password!'
        maxAttempts--
    }
})