HOW TO USE THIS ALL TUTORIAL AVAILABLE IN YOUTUBE CHANNEL
[ CLASS 59 OFFICIAL ]
LOGIN <html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>User Registration & Login</title>
<style>
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
background-color: #ffffff; /* Set background color for input fields */
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.switch-section {
text-align: center;
margin-top: 20px;
}
.switch-section a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<!-- Registration Section -->
<div id="registrationSection">
<form id="registrationForm">
<label for="regName">Name:</label>
<input id="regLastName" name="regLastName" required="" type="text" />
<label for="regName">Last Name:</label>
<input id="regName" name="regName" required="" type="text" />
<label for="regName">Email:</label>
<input id="regemail" name="regemail" required="" type="text" />
<label for="regUsername">Username:</label>
<input id="regUsername" name="regUsername" required="" type="text" />
<label for="regPassword">Password:</label>
<input id="regPassword" name="regPassword" required="" type="password" />
<input type="submit" value="Register" />
</form>
<div class="switch-section">
Already registered? <a href="#" id="showLogin">Login here</a>
</div>
</div>
<!-- Login Section -->
<div id="loginSection" style="display: none;">
<h2>User Login</h2>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input id="loginUsername" name="loginUsername" required="" type="text" />
<label for="loginPassword">Password:</label>
<input id="loginPassword" name="loginPassword" required="" type="password" />
<input type="submit" value="Login" />
</form>
<div class="switch-section">
Not registered yet? <a href="#" id="showRegistration">Register here</a>
</div>
</div>
</div>
<script>
// Show Registration Section and Hide Login Section
document.getElementById('showRegistration').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('registrationSection').style.display = 'block';
document.getElementById('loginSection').style.display = 'none';
});
// Show Login Section and Hide Registration Section
document.getElementById('showLogin').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('registrationSection').style.display = 'none';
document.getElementById('loginSection').style.display = 'block';
});
// Registration form submission
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
var regUsername = document.getElementById('regUsername').value;
var regPassword = document.getElementById('regPassword').value;
// Retrieve registered users' list from localStorage or initialize an empty array
var registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || [];
// Add the new user to the registered users' list
registeredUsers.push({ username: regUsername, password: regPassword });
// Save the updated list back to localStorage
localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
alert('Registration successful! You can now login.');
// Show the login section and hide the registration section
document.getElementById('registrationSection').style.display = 'none';
document.getElementById('loginSection').style.display = 'block';
});
// Login form submission
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var loginUsername = document.getElementById('loginUsername').value;
var loginPassword = document.getElementById('loginPassword').value;
// Retrieve registered users' list from localStorage
var registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || [];
// Check if the entered username and password match any of the registered users' credentials
var isValid = registeredUsers.some(function(user) {
return user.username === loginUsername && user.password === loginPassword;
});
if (isValid) {
alert('Login successful!');
// Redirect to the dashboard or desired page after successful login
window.location.href = '/';
} else {
alert('Invalid username or password. Please try again.');
}
});
</script>
</body>
</html>
REGISTER
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration & Login</title>
<style>
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
background-color: #ffffff; /* Set background color for input fields */
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.switch-section {
text-align: center;
margin-top: 20px;
}
.switch-section a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<!-- Registration Section -->
<div id="registrationSection">
<form id="registrationForm">
<label for="regName">Name:</label>
<input type="text" id="regLastName" name="regLastName" required>
<label for="regName">Last Name:</label>
<input type="text" id="regName" name="regName" required>
<label for="regName">Email:</label>
<input type="text" id="regemail" name="regemail" required>
<label for="regUsername">Username:</label>
<input type="text" id="regUsername" name="regUsername" required>
<label for="regPassword">Password:</label>
<input type="password" id="regPassword" name="regPassword" required>
<input type="submit" value="Register">
</form>
<div class="switch-section">
Already registered? <a href="#" id="showLogin">Login here</a>
</div>
</div>
<!-- Login Section -->
<div id="loginSection" style="display: none;">
<h2>User Login</h2>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="loginUsername" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword" required>
<input type="submit" value="Login">
</form>
<div class="switch-section">
Not registered yet? <a href="#" id="showRegistration">Register here</a>
</div>
</div>
</div>
<script>
// Show Registration Section and Hide Login Section
document.getElementById('showRegistration').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('registrationSection').style.display = 'block';
document.getElementById('loginSection').style.display = 'none';
});
// Show Login Section and Hide Registration Section
document.getElementById('showLogin').addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('registrationSection').style.display = 'none';
document.getElementById('loginSection').style.display = 'block';
});
// Registration form submission
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
var regUsername = document.getElementById('regUsername').value;
var regPassword = document.getElementById('regPassword').value;
// Retrieve registered users' list from localStorage or initialize an empty array
var registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || [];
// Add the new user to the registered users' list
registeredUsers.push({ username: regUsername, password: regPassword });
// Save the updated list back to localStorage
localStorage.setItem('registeredUsers', JSON.stringify(registeredUsers));
alert('Registration successful! You can now login.');
// Show the login section and hide the registration section
document.getElementById('registrationSection').style.display = 'none';
document.getElementById('loginSection').style.display = 'block';
});
// Login form submission
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
var loginUsername = document.getElementById('loginUsername').value;
var loginPassword = document.getElementById('loginPassword').value;
// Retrieve registered users' list from localStorage
var registeredUsers = JSON.parse(localStorage.getItem('registeredUsers')) || [];
// Check if the entered username and password match any of the registered users' credentials
var isValid = registeredUsers.some(function(user) {
return user.username === loginUsername && user.password === loginPassword;
});
if (isValid) {
alert('Login successful!');
// Redirect to the dashboard or desired page after successful login
window.location.href = '/';
} else {
alert('Invalid username or password. Please try again.');
}
});
</script>
</body>
</html>
6 Comments