GOV_QR_Codes_Management/templates/register.html

{% extends "base.html" %} {% block title %}Register - QR Code Management{%
endblock %} {% block content %}
<div class="auth-container">
  <div class="auth-card">
    <div class="auth-header">
      <div class="auth-logo">
        <i class="fas fa-user-plus"></i>
      </div>
      <h1>Create Account</h1>
      <p>Join our QR management platform</p>
    </div>

    <form method="POST" class="auth-form" id="registerForm">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="form-group">
        <label for="full_name">
          <i class="fas fa-id-card"></i>
          Full Name
        </label>
        <input type="text" id="full_name" name="full_name" required />
      </div>

      <div class="form-group">
        <label for="email">
          <i class="fas fa-envelope"></i>
          Email Address
        </label>
        <input type="email" id="email" name="email" required />
      </div>

      <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
          minlength="6"
        />
        <div class="password-strength" id="passwordStrength"></div>
      </div>

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

      <button type="submit" class="btn btn-primary btn-full">
        <i class="fas fa-user-plus"></i>
        Create Account
      </button>
    </form>

    <div class="auth-footer">
      <p>
        Already have an account?
        <a href="{{ url_for('auth.login') }}" class="auth-link">Sign in here</a>
      </p>
    </div>
  </div>
</div>
{% endblock %} {% block extra_scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("registerForm");
    const password = document.getElementById("password");
    const confirmPassword = document.getElementById("confirm_password");
    const passwordStrength = document.getElementById("passwordStrength");
    const passwordMatch = document.getElementById("passwordMatch");

    // Password strength checker
    password.addEventListener("input", function () {
      const value = this.value;
      let strength = 0;
      let feedback = [];

      if (value.length >= 6) strength++;
      else feedback.push("At least 6 characters");

      if (/[A-Z]/.test(value)) strength++;
      else feedback.push("One uppercase letter");

      if (/[a-z]/.test(value)) strength++;
      else feedback.push("One lowercase letter");

      if (/[0-9]/.test(value)) strength++;
      else feedback.push("One number");

      if (/[^A-Za-z0-9]/.test(value)) strength++;
      else feedback.push("One special character");

      let strengthText = "";
      let strengthClass = "";

      if (strength < 2) {
        strengthText = "Weak";
        strengthClass = "weak";
      } else if (strength < 4) {
        strengthText = "Medium";
        strengthClass = "medium";
      } else {
        strengthText = "Strong";
        strengthClass = "strong";
      }

      passwordStrength.className = `password-strength ${strengthClass}`;
      passwordStrength.textContent = `Strength: ${strengthText}`;

      if (feedback.length > 0 && value.length > 0) {
        passwordStrength.textContent += ` (Missing: ${feedback.join(", ")})`;
      }
    });

    // Password match checker
    function checkPasswordMatch() {
      if (confirmPassword.value) {
        if (password.value === confirmPassword.value) {
          passwordMatch.textContent = "Passwords match";
          passwordMatch.className = "password-match match";
        } else {
          passwordMatch.textContent = "Passwords do not match";
          passwordMatch.className = "password-match no-match";
        }
      } else {
        passwordMatch.textContent = "";
        passwordMatch.className = "password-match";
      }
    }

    password.addEventListener("input", checkPasswordMatch);
    confirmPassword.addEventListener("input", checkPasswordMatch);

    // Form submission validation
    form.addEventListener("submit", function (e) {
      if (password.value !== confirmPassword.value) {
        e.preventDefault();
        alert("Passwords do not match!");
        return;
      }

      const submitBtn = form.querySelector('button[type="submit"]');
      submitBtn.innerHTML =
        '<i class="fas fa-spinner fa-spin"></i> Creating Account...';
      submitBtn.disabled = true;
    });

    // Add focus effects
    const inputs = form.querySelectorAll("input");
    inputs.forEach((input) => {
      input.addEventListener("focus", function () {
        this.parentElement.classList.add("focused");
      });

      input.addEventListener("blur", function () {
        if (!this.value) {
          this.parentElement.classList.remove("focused");
        }
      });
    });
  });
</script>
{% endblock %}