'use strict';

document.addEventListener("DOMContentLoaded", () => {

	const form = document.querySelector('.js-form');
	const formLogin = document.querySelector('.js-form-login');
	const formPassword = document.querySelector('.js-form-password');
	const formAlerts = document.querySelectorAll('.js-alert');
	const formAlertSuccess = document.querySelector('.js-alert-success');
	const formAlertDanger = document.querySelector('.js-alert-danger');

	// authorization credentials
	const credentials = {
		login: 'admin',
		password: 'qwerty',
	};

	const alertsVisibility = formType => {
		Array.from(formAlerts).forEach(element => {
			element.style.setProperty('display', 'none');
		});
		formType.style.setProperty('display', 'block');
	}

	form.addEventListener('submit', (event) => {
		event.preventDefault();

		if(formLogin.value === credentials.login && formPassword.value === credentials.password) {
			alertsVisibility(formAlertSuccess);
		} else {
			alertsVisibility(formAlertDanger);
		}
	})
});