nurulhasni/login.html

## login.html
<!DOCTYPE html>
<html>
    <head>
        <title>Log In</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h2>Login</h2>
        <form id="form" method="POST">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <span id="username-error" style="color: red; margin-left: 5px;"></span>
            <br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <span id="password-error" style="color: red; margin-left: 5px;"></span>
            <br>
            <button type="submit">Login</button>
        </form>

        <script src="js/login.js"></script>
    </body>
</html>

## login.js

function main(e) {
    let components = {
        form: document.querySelector("#form"),
        username: document.querySelector("#username"),
        password: document.querySelector("#password"),
        button: document.querySelector("button[type='submit']")
    };

    components.form.addEventListener("submit", function (e) {
        e.preventDefault();

        if (validate(components)) {
            submitForm(components);
        }
    });

    components.username.addEventListener("input", function () {
        clearErrorMessage(components.username);
    });

    components.password.addEventListener("input", function () {
        clearErrorMessage(components.password);
    });
}

function validate(components) {
    let username = components.username.value;
    let password = components.password.value;

    clearErrorMessages(components);

    let isValid = true;

    if (!username) {
        showErrorMessage(components.username, 'Username harus diisi.');
        isValid = false;
    } else if (username.length < 3 || username.length > 50) {
        showErrorMessage(components.username, 'Username harus antara 3 dan 50 karakter.');
        isValid = false;
    } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
        showErrorMessage(components.username, 'Username hanya boleh mengandung huruf, angka, dan underscore.');
        isValid = false;
    }

    if (!password) {
        showErrorMessage(components.password, 'Password harus diisi.');
        isValid = false;
    } else if (password.length < 8) {
        showErrorMessage(components.password, 'Password minimal 8 karakter.');
        isValid = false;
    }


    return isValid;
}

function clearErrorMessages(components) {
    clearErrorMessage(components.username);
    clearErrorMessage(components.password);
}

function clearErrorMessage(inputElement) {
    let errorSpanId = inputElement.id + "-error";
    let errorSpan = document.getElementById(errorSpanId);
    errorSpan.textContent = "";
    errorSpan.style.display = "none";
}

function showErrorMessage(inputElement, message) {

    let errorSpanId = inputElement.id + "-error";
    let errorSpan = document.getElementById(errorSpanId);
    errorSpan.textContent = message;
    errorSpan.style.display = "inline";
}

function submitForm(components) {
    let username = components.username.value;
    let password = components.password.value;

    let usernameX = document.createElement('div');
    usernameX.textContent = username;
    username = usernameX.textContent;

    let passwordX = document.createElement('div');
    passwordX.textContent = password;
    password = passwordX.textContent;

    components.username.value = username;
    components.password.value = password;


    fetch('user.json')
        .then(response => response.json())
        .then(users => {
            const user = users.find(u => u.username === username && u.password === password);
            if (user) {
                alert('Selamat datang, ' + user.username + '!');

            } else {
                alert('Login gagal. Username atau password salah.');
            }
        })
        .catch(error => {
            alert('Terjadi kesalahan: ' + error.message);
        })


}

document.addEventListener("DOMContentLoaded", main);

## user.json
[
    { "username": "user", "password": "password" },
    { "username": "admin", "password": "adminpassword" }
]
	<!DOCTYPE html>
	<html>
	<head>
	<title>Log In</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
	<h2>Login</h2>
	<form id="form" method="POST">
	<label for="username">Username:</label>
	<input type="text" id="username" name="username">
	<span id="username-error" style="color: red; margin-left: 5px;"></span>
	<br>
	<label for="password">Password:</label>
	<input type="password" id="password" name="password">
	<span id="password-error" style="color: red; margin-left: 5px;"></span>
	<br>
	<button type="submit">Login</button>
	</form>

	<script src="js/login.js"></script>
	</body>
	</html>

	function main(e) {
	let components = {
	form: document.querySelector("#form"),
	username: document.querySelector("#username"),
	password: document.querySelector("#password"),
	button: document.querySelector("button[type='submit']")
	};

	components.form.addEventListener("submit", function (e) {
	e.preventDefault();

	if (validate(components)) {
	submitForm(components);
	}
	});

	components.username.addEventListener("input", function () {
	clearErrorMessage(components.username);
	});

	components.password.addEventListener("input", function () {
	clearErrorMessage(components.password);
	});
	}

	function validate(components) {
	let username = components.username.value;
	let password = components.password.value;

	clearErrorMessages(components);

	let isValid = true;

	if (!username) {
	showErrorMessage(components.username, 'Username harus diisi.');
	isValid = false;
	} else if (username.length < 3 \|\| username.length > 50) {
	showErrorMessage(components.username, 'Username harus antara 3 dan 50 karakter.');
	isValid = false;
	} else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
	showErrorMessage(components.username, 'Username hanya boleh mengandung huruf, angka, dan underscore.');
	isValid = false;
	}

	if (!password) {
	showErrorMessage(components.password, 'Password harus diisi.');
	isValid = false;
	} else if (password.length < 8) {
	showErrorMessage(components.password, 'Password minimal 8 karakter.');
	isValid = false;
	}



	return isValid;
	}

	function clearErrorMessages(components) {
	clearErrorMessage(components.username);
	clearErrorMessage(components.password);
	}

	function clearErrorMessage(inputElement) {
	let errorSpanId = inputElement.id + "-error";
	let errorSpan = document.getElementById(errorSpanId);
	errorSpan.textContent = "";
	errorSpan.style.display = "none";
	}

	function showErrorMessage(inputElement, message) {

	let errorSpanId = inputElement.id + "-error";
	let errorSpan = document.getElementById(errorSpanId);
	errorSpan.textContent = message;
	errorSpan.style.display = "inline";
	}

	function submitForm(components) {
	let username = components.username.value;
	let password = components.password.value;

	let usernameX = document.createElement('div');
	usernameX.textContent = username;
	username = usernameX.textContent;

	let passwordX = document.createElement('div');
	passwordX.textContent = password;
	password = passwordX.textContent;

	components.username.value = username;
	components.password.value = password;


	fetch('user.json')
	.then(response => response.json())
	.then(users => {
	const user = users.find(u => u.username === username && u.password === password);
	if (user) {
	alert('Selamat datang, ' + user.username + '!');

	} else {
	alert('Login gagal. Username atau password salah.');
	}
	})
	.catch(error => {
	alert('Terjadi kesalahan: ' + error.message);
	})


	}

	document.addEventListener("DOMContentLoaded", main);
	[
	{ "username": "user", "password": "password" },
	{ "username": "admin", "password": "adminpassword" }
	]