Skip to content

Commit

Permalink
enhancement of login form
Browse files Browse the repository at this point in the history 
Login Form UI enhancement
  • Loading branch information
@subhamkumarr
subhamkumarr committed Jul 12, 2023
1 parent 4cf36fd commit 65e727c
Show file tree
Hide file tree
Showing 3 changed files with 306 additions and 232 deletions.
147 changes: 85 additions & 62 deletions Public/loginform.html
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,92 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Login Form</title>
<link rel="stylesheet" href="../assets/css/loginform.css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<title>Login and Registration Form in HTML</title>
<link rel="stylesheet" href="../assets/css/loginform.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a href="#" class="form__link" id="linkResetPassword">Forgot your password?</a>
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="reset">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
<form class="form form--hidden" id="resetPassword">
<h1 class="form__title">Reset Password</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="reset">Send reset password instruction</button>
<p class="form__text">
<a class="form__link" href="./" id="linkHome">Go back to previous page</a>
</p>
</form>
</div>
<script src="../assets/Js/loginform.js"></script>
<div class="wrapper">
<div class="title-text">
<div class="title login">
Login Form
</div>
<div class="title signup">
Signup Form
</div>
</div>





<div class="form-container">
<div class="slide-controls">
<input type="radio" name="slide" id="login" checked>
<input type="radio" name="slide" id="signup">
<label for="login" class="slide login">Login</label>
<label for="signup" class="slide signup">Signup</label>
<div class="slider-tab"></div>
</div>




<div class="social-container">
<a href="#" class="social"><i class="fa fa-facebook"></i></a>
<a href="#" class="social"><i class="fa fa-google"></i></a>
<a href="#" class="social"><i class="fa fa-linkedin"></i></a>
<!-- <a href="#" class="social"> <i class="fa fa-twitter"></i> </a> -->
</div>







<div class="form-inner">
<form action="#" class="login">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Login">
</div>
<div class="signup-link">
Not a member? <a href="">Signup now</a>
</div>
</form>
<form action="#" class="signup">
<div class="field">
<input type="text" placeholder="Email Address" required>
</div>
<div class="field">
<input type="password" placeholder="Password" required>
</div>
<div class="field">
<input type="password" placeholder="Confirm password" required>
</div>
<div class="field btn">
<div class="btn-layer"></div>
<input type="submit" value="Signup">
</div>
</form>
</div>
</div>
</div>
<script src="../assets/Js/loginform.js"></script>
</body>

</html>
67 changes: 17 additions & 50 deletions assets/Js/loginform.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,17 @@
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");

messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}

function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
const resetPasswordForm = document.querySelector("#resetPassword");

document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
resetPasswordForm.classList.add("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.add("form--hidden");
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#linkResetPassword").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.remove("form--hidden");
loginForm.classList.add("form--hidden");
createAccountForm.classList.add("form--hidden");
});
document.querySelector("#linkHome").addEventListener("click", e => {
e.preventDefault();
resetPasswordForm.classList.add("form--hidden");
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
inputElement.addEventListener("input", e => {
clearInputError(inputElement);
});
});
const loginText = document.querySelector(".title-text .login");
const loginForm = document.querySelector("form.login");
const loginBtn = document.querySelector("label.login");
const signupBtn = document.querySelector("label.signup");
const signupLink = document.querySelector("form .signup-link a");
signupBtn.onclick = (()=>{
loginForm.style.marginLeft = "-50%";
loginText.style.marginLeft = "-50%";
});
loginBtn.onclick = (()=>{
loginForm.style.marginLeft = "0%";
loginText.style.marginLeft = "0%";
});
signupLink.onclick = (()=>{
signupBtn.click();
return false;
});
Loading

0 comments on commit 65e727c

Please sign in to comment.