Initial Codes

2025-07-29 17:02:08 -04:00
parent 946b18f142
commit 7459d0fd15
34 changed files with 23480 additions and 0 deletions
@@ -0,0 +1,181 @@
+{% 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">
+      <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('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 %}