Skip to main content

​
Login and Registration

Movie Nachos includes a client-side authentication system that allows users to register accounts and log in using browser local storage.

​
Overview

The authentication system provides:
  • Registration: Create new user accounts with username, email, and password
  • Login: Authenticate existing users
  • Local Storage: User data persisted in browser storage
  • Form Validation: Client-side validation for required fields
  • Success Messages: Visual feedback for successful operations
  • Error Handling: User-friendly error messages
This is a client-side only authentication system using local storage. For production applications, implement server-side authentication with proper security measures.

​
Registration System

​
Registration Form

Users can create accounts by providing basic information: 
<form id="register-form" class="register-form" action="#">
  <input type="text" name="username" placeholder="Username" required/>
  <input type="email" name="email" placeholder="Email" required/>
  <input type="password" name="password" placeholder="Password" required/>
  <button type="submit">Register</button>
</form>
<p id="successully-registered">You have successfully registered!</p>

​
Registration JavaScript

The registration process stores user data in local storage: 
document.addEventListener('DOMContentLoaded', function() {
  // Register form action
  const registerForm = document.getElementById('register-form');
  const successullyRegistered = document.getElementById('successully-registered');

  registerForm.addEventListener('submit', function (e) {
    e.preventDefault()
    let username = e.target.elements.username.value;
    let email = e.target.elements.email.value;
    let password = e.target.elements.password.value;

    // Retrieve all users from local storage
    let users = JSON.parse(localStorage.getItem('users')) || [];
    users.push({ username: username, email: email, password: password });

    // Save user data into local storage
    localStorage.setItem('users', JSON.stringify(users));
    successullyRegistered.style.display = "block";
    
    // Clear all form inputs
    registerForm.reset();
  });
});

​
Registration Flow

let username = e.target.elements.username.value;
let email = e.target.elements.email.value;
let password = e.target.elements.password.value;
The form submission handler captures user input from the form elements.
The registration system automatically prevents the default form submission behavior to handle the process with JavaScript.

​
Login System

​
Login Form

Users authenticate with their username and password: 
<form id="login-form" class="login-form" action="#">
  <input type="text" name="username" placeholder="Username" required/>
  <input type="password" name="password" placeholder="Password" required/>
  <button type="submit">Login</button>
</form>
<p id="user-not-found">User not found or incorrect password!</p>
<p id="successfully-logged-in">You have successfully logged in!</p>

​
Login JavaScript

The login system validates credentials against stored user data: 
document.addEventListener('DOMContentLoaded', function() {
  // Login form action
  const loginForm = document.getElementById('login-form');
  const userNotFound = document.getElementById('user-not-found');
  const successfullyLoggedIn = document.getElementById('successfully-logged-in');

  loginForm.addEventListener('submit', function (e) {
    e.preventDefault()
    let username = e.target.elements.username.value;
    let password = e.target.elements.password.value;

    // Retrieve all users from local storage
    let users = JSON.parse(localStorage.getItem('users')) || [];

    users.forEach(user => {
      // Check if user exists with correct password
      if (user.username == username && user.password == password) {
        successfullyLoggedIn.style.display = "block";
        return;
      }
    });

    // If user not found in local storage
    userNotFound.style.display = "block";
    return;
  });
});

​
Login Flow

let username = e.target.elements.username.value;
let password = e.target.elements.password.value;

​
Data Structure

User data is stored in local storage as a JSON array: 
[
  {
    "username": "john_doe",
    "email": "[email protected]",
    "password": "password123"
  },
  {
    "username": "jane_smith",
    "email": "[email protected]",
    "password": "securepass456"
  }
]
Passwords are stored in plain text in local storage. This is not secure for production use. Always implement proper password hashing and server-side authentication in real applications.

​
Form Validation

Both forms use HTML5 validation attributes:
  • Required Fields: All inputs marked as required
  • Email Validation: Email input uses type="email" for validation
  • Password Field: Password input uses type="password" for masking

​
User Experience Features

​
Success Messages

<p id="successully-registered">You have successfully registered!</p>
Displayed when a user successfully creates an account.

​
Form Reset

After successful registration, the form is automatically cleared: 
registerForm.reset();
The login form does not reset after submission to allow users to correct typos without re-entering all information.

​
Header Navigation

Login and registration links are available in the header: 
<div class="header-login-register">
  <a href="./pages/login.html">
    <button type="button" class="header-login-register-button">Login</button>
  </a>
  <a href="./pages/register.html">
    <button type="button" class="header-login-register-button">Register</button>
  </a>
</div>

​
Security Considerations

Important security notes for production implementation:
  1. Never store passwords in plain text
  2. Implement server-side authentication
  3. Use HTTPS for all authentication requests
  4. Implement password strength requirements
  5. Add CSRF protection
  6. Consider using OAuth or other secure authentication methods
  7. Implement rate limiting for login attempts
  8. Add session management

​
Future Enhancements

Potential improvements for the authentication system:
  • Password strength validation
  • Email verification
  • Password reset functionality
  • Remember me functionality
  • Session management
  • User profile pages
  • Logout functionality
  • Protected routes
  • Server-side integration

​
File Locations

  • Login Script: ~/workspace/source/scripts/login.js
  • Register Script: ~/workspace/source/scripts/register.js
  • Login Page: ~/workspace/source/pages/login.html
  • Register Page: ~/workspace/source/pages/register.html

Build docs developers (and LLMs) love

Get started for freeTalk to us