Skip to content

Commit

Permalink
Merge pull request #123 from mansiruhil13/revert-122-main
Browse files Browse the repository at this point in the history 
Revert "Fixed Login UI #104"
  • Loading branch information
@vimistify
vimistify authored Oct 4, 2024
2 parents 0c0eea4 + 91b049f commit 5e0ad90
Show file tree
Hide file tree
Showing 2 changed files with 260 additions and 273 deletions.
187 changes: 92 additions & 95 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<title>Register & Login</title>

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<!-- Boxicons -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Custom CSS -->
<link rel="stylesheet" href="src/css/login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- EmailJS -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js" type="text/javascript"></script>
</head>

<body>
<div class="login-container">
<h1>Login</h1>
<form id="loginForm" onsubmit="return loginUser(event)">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required oninput="check()">
<i class="fas fa-eye toggle-password" id="togglePassword" onclick="togglePassword()"></i>

<!-- Navbar Start -->
<div class="fixed-navbar">
<nav class="navbar">
<a href="index.html" class="logo"><i class="fa-solid fa-truck-medical"></i> Ambulance Tracking System</a>
<div class="navbar-nav">
<a href="roles.html" class="nav-link">Home</a>
<a href="#" class="nav-link">About Us</a>
<a href="#" class="nav-link">Contact</a>
<a href="login.html" class="nav-link">Login</a>
</div>
</nav>
</div>
<!-- Navbar End -->

<!-- Login Form -->
<div class="wrapper">
<span class="rotate-bg"></span>
<span class="rotate-bg2"></span>

<div class="form-box login" style="padding-top: 60px;">
<h2 class="title animation" style="--i:0; --j:21">Login</h2>
<form id="loginForm">
<div class="input-box animation" style="--i:1; --j:22">
<input type="text" id="loginUsername" required>
<label>Username</label>
<i class='bx bxs-user'></i>
</div>
<div id="checks">
<div id="checkTitle">The password must:</div>
<div id="check0">
<i class="far fa-check-circle"></i><span> be atleast 8 characters long.</span></div>
<div id="check1">
<i class="far fa-check-circle"></i><span> contain atleast one lowercase letter.</span></div>

<div id="check2">
<i class="far fa-check-circle"></i><span> contain atleast one uppercase letter.</span></div>

<div id="check3">
<i class="far fa-check-circle"></i><span> contain atleast one number.</span></div>

<div id="check4">
<i class="far fa-check-circle"></i><span> contain atleast one special character.</span></div>

</div>

<button id="loginButton" type="submit" disabled>Login</button>
</form>
<p>Don't have an account? <a href="up.html">Sign Up</a></p>
<div class="input-box animation" style="--i:2; --j:23">
<input type="password" id="loginPassword" required>
<label>Password</label>
<i class='bx bxs-lock-alt'></i>
<i class="fas fa-eye toggle-password" id="togglePassword" onclick="togglePassword()"></i>
</div>
<button type="submit" class="btn animation" style="--i:3; --j:24">Login</button>
<div class="linkTxt animation" style="--i:5; --j:25">
<p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p>
</div>
</form>
</div>



</div>

<script>
const togglePassword = () => {
const password = document.getElementById('password');
// Toggle password visibility
function togglePassword() {
const password = document.getElementById('loginPassword');
const togglePassword = document.getElementById('togglePassword');

if (password.type === 'password') {
Expand All @@ -59,70 +87,39 @@ <h1>Login</h1>
}
}

function check(){
let passed=0;
let password=document.getElementById('password').value;
password=password.trim()
document.getElementById('password').value=password;
if(password.length>=8){
document.getElementById('check0').style.color="green";
passed++;
}else{
document.getElementById('check0').style.color="red";
}
if(/\d/.test(password)){
document.getElementById('check3').style.color="green";
passed++;
}else{
document.getElementById('check3').style.color="red";
}
if(/(?=.*?[A-Z]).*/.test(password)){
document.getElementById('check2').style.color="green";
passed++;
}else{
document.getElementById('check2').style.color="red";
}
if(/(?=.*?[a-z]).*/.test(password)){
document.getElementById('check1').style.color="green";
passed++;
}else{
document.getElementById('check1').style.color="red";
}
if(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(password)){
document.getElementById('check4').style.color="green";
passed++;
}else{
document.getElementById('check4').style.color="red";
}
const loginButton = document.getElementById('loginButton');
if (passed === 5) {
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
}
function loginUser(event) {
event.preventDefault();
// Handle form submission
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent form submission

const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const loginUsername = document.getElementById('loginUsername').value;
const loginPassword = document.getElementById('loginPassword').value;


// Retrieve stored user data (mocked with localStorage for demonstration)
const storedUser = JSON.parse(localStorage.getItem('user'));

// Get registered credentials from localStorage (for demo purposes only)
const registeredUsername = localStorage.getItem('registeredUsername');
const registeredPassword = localStorage.getItem('registeredPassword');

// Check if credentials match
if (username === registeredUsername && password === registeredPassword) {
// Set login status
localStorage.setItem('isLoggedIn', 'true');
alert('Login successful!');
window.location.href = 'ambtracker.html'; // Redirect to tracker page
// Validate credentials
if (storedUser && loginUsername === storedUser.username && loginPassword === storedUser.password) {
alert('Login successful! Redirecting to home page...');
localStorage.setItem('currentUser', loginUsername);
window.location.href = "index.html"; // Redirect to home page
} else {
alert('Invalid login details');
alert('Invalid username or password.');
}
}
});

// Handle registration link click
document.querySelector('.register-link').addEventListener('click', function () {
document.querySelector('.form-box.login').style.display = 'none';
document.querySelector('.form-box.register').style.display = 'block';
});

// Handle login link click
document.querySelector('.login-link').addEventListener('click', function () {
document.querySelector('.form-box.register').style.display = 'none';
document.querySelector('.form-box.login').style.display = 'block';
});
</script>

</body>

</html>
Loading

0 comments on commit 5e0ad90

Please sign in to comment.