var checkbox = document.getElementById('click_checkbox')
var show_error = document.getElementById('show_error')
var show_error_2 = document.getElementById('show_error_2')
var btn_click = document.getElementById('btn_create')
var show_pass = document.getElementById('show_pass')
var pass1 = document.getElementById('pass1')
var pass2 = document.getElementById('pass2')
checkbox.addEventListener('click' , () => {
checkbox.classList.toggle('check-box__checked')
checkbox.classList.toggle('fa-check-square')
checkbox.classList.toggle('fa-square')
checkbox.classList.toggle('fa')
checkbox.classList.toggle('far')
})
show_pass.addEventListener('click' , () => {
if (pass1.type === "password" || pass2.type === "password") {
pass1.type = "text";
pass2.type = "text"
} else {
pass1.type = "password";
pass2.type = "password"
}
})
pass1.addEventListener("keypress" , () => {
if (pass1.value.length < 8 )
{
show_error.classList.remove('d-none')
pass1.style.borderColor = "var(--color-error-default)"
}
else
{
show_error.classList.add('d-none')
pass1.style.borderColor = "var(--color-border-default)"
}
})
pass2.addEventListener('keyup' , () => {
if (pass1.value != pass2.value)
{
show_error_2.classList.remove('d-none')
pass2.style.borderColor = "var(--color-error-default)"
}
else
{
show_error_2.classList.add('d-none')
pass2.style.borderColor = "var(--color-border-default)"
}
})
document.addEventListener("keyup" , () => {
if (pass1.value.length >= 8 && pass2.value.length >= 8 && pass1.value == pass2.value)
{
btn_click.disabled = false
}
else
{
btn_click.disabled = true
}
})
btn_click.addEventListener('click' , () => {
if (pass1.value == pass2.value)
{
}
})