GOV_QR_Codes_Management/templates/login.html

{% extends "base.html" %} 
{% block title %}Login - QR Code Management{% endblock %}

{% block extra_head %}
<!-- Include the new authentication styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
{% endblock %}

{% block content %}
<div class="auth-container">
  <div class="auth-card">
    <div class="auth-header">
      <div class="auth-logo">
        <i class="fas fa-qrcode"></i>
      </div>
      <h1>{{ COMPANY_NAME }}</h1>
      <p>Sign in to your account</p>
    </div>

    <form method="POST" class="auth-form" id="loginForm">
      <div class="form-group">
        <label for="username">
          <i class="fas fa-user"></i>
          Username
        </label>
        <input type="text" id="username" name="username" required />
      </div>

      <div class="form-group">
        <label for="password">
          <i class="fas fa-lock"></i>
          Password
        </label>
        <input type="password" id="password" name="password" required />
      </div>

      <!-- Remember Me Checkbox -->
      <div style="margin-top: 1rem; margin-bottom: 1.5rem;">
        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; color: var(--gray-700);">
          <input
            type="checkbox"
            id="remember_me"
            name="remember_me"
            style="width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--primary-color); flex-shrink: 0;"
          />
          <span style="font-size: 0.925rem;">Remember me for 30 days</span>
        </label>
      </div>
      
      <!-- Turnstile Integration -->
      {% if turnstile_enabled %}
      <div class="form-group turnstile-container">
        <div class="cf-turnstile" 
             data-sitekey="{{ turnstile_site_key }}" 
             data-callback="onTurnstileSuccess"
             data-expired-callback="onTurnstileExpired"
             data-theme="light"
             data-language="en">
        </div>
      </div>
      {% endif %}

      <button type="submit" class="btn btn-primary btn-full">
        <i class="fas fa-sign-in-alt"></i>
        Sign In
      </button>
    </form>
  </div>
</div>
{% endblock %} 

{% block extra_scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector(".auth-form");
    const inputs = form.querySelectorAll("input");

    // Add focus effects with improved visual feedback
    inputs.forEach((input) => {
      input.addEventListener("focus", function () {
        this.parentElement.classList.add("focused");
      });

      input.addEventListener("blur", function () {
        if (!this.value) {
          this.parentElement.classList.remove("focused");
        }
      });

      // Keep focus state if input has value
      if (input.value) {
        input.parentElement.classList.add("focused");
      }
    });

    // Enhanced form validation with Turnstile
    form.addEventListener("submit", function(e) {
      {% if turnstile_enabled %}
      // Check if Turnstile is completed
      const turnstileResponse = document.querySelector('[name="cf-turnstile-response"]');
      if (!turnstileResponse || !turnstileResponse.value) {
        e.preventDefault();
        
        // Highlight Turnstile container
        const turnstileContainer = document.querySelector('.turnstile-container');
        if (turnstileContainer) {
          turnstileContainer.classList.add('turnstile-error');
          setTimeout(() => {
            turnstileContainer.classList.remove('turnstile-error');
          }, 3000);
        }
        
        // Show error message
        alert('Please complete the security verification.');
        return false;
      }
      {% endif %}
      
      // Show loading state
      const submitButton = form.querySelector('button[type="submit"]');
      if (submitButton) {
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
      }
    });
  });

  // Turnstile callback functions
  {% if turnstile_enabled %}
  function onTurnstileSuccess(token) {
    // Remove any error styling
    const turnstileContainer = document.querySelector('.turnstile-container');
    if (turnstileContainer) {
      turnstileContainer.classList.remove('turnstile-error');
    }
    console.log('Turnstile verification successful');
  }

  function onTurnstileExpired() {
    // Reset form if Turnstile expires
    console.log('Turnstile expired, please verify again');
  }
  {% endif %}
</script>
{% endblock %}