[Web] 로그인 페이지 (validateLogin)
포스트 난이도: HOO_Junior
# body: login-container
<style> 부분은 스킵하고 로그인 페이지에 사용할 수 있는 간단한 <body>와 <script>를 아래 예제에서 살펴볼 수 있다. 아래 <body> 예제에서는 login-container라는 class를 만들고 그 안에 이메일, 패스워드를 넣을 수 있는 class를 추가해 줬다. 또한 account와 password를 기억할 수 있는 remember-me-checkbox도 추가해 주고 마지막으로 submit 버튼을 넣어줬다. 추가로 Forgot passsword 와 Create new account 기능을 넣어 resgister-link라는 class로 연결될 수 있도록 만들어줬다. 모든 기능들은 다음 동적 기능으로 연결될 수 있도록 만들 수 있으며 아래 예제 코드에는 해당 기능을 제외한 채 보이는 <body> 부분만 작성되어 있다.
<div class="login-container">
<h1>Younghoo v1</h1>
<form class="login-form" onsubmit="return validateLogin()">
<div class="input-group">
<label for="email">Email</label>
<input type="text" id="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" required>
</div>
<div class="remember-me-checkbox">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<button type="submit">Sign in</button>
<p class="error-message" id="error-message">Incorrect account or password. Please try again.</p>
</form>
<a href="#">Forgot password?</a>
<a href="#" class="register-link">Create new account</a>
</div>
# script: validateLogin()
<script>에는 로그인시 계정과 비밀번호를 검증하여 올바른 계정과 비밀번호일 때는 'dashboard.html' 페이지로 연결되며 아닐 경우 계정 또는 비밀번호가 틀리다는 메시지가 팝업 되도록 동적 기능을 설정하였다. 계정과 비밀번호를 확인하는 방법은 간단하게 const adminEmail과 const adminPassword를 넣어둬서 제대로 페이지 이동이 되는지 확인하였다.
해당은 임시로 작성된 const account and password이며, Cloud database에 저장하여 계정 및 비밀번호를 확인하는 방법이나 public and private key를 통해서 확인 또한 가능하다.
<script>
function validateLogin() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
const adminEmail = 'admin';
const adminPassword = 'admin123';
if (email === adminEmail && password === adminPassword) {
window.location.href = 'dashboard.html'; // Redirect to dashboard.html
return false; // Prevent form submission
} else {
errorMessage.style.display = 'block';
return false; // Prevent form submission
}
}
</script>