04/28 Fixed some security issues

advanced_security_middleware.py

@@ -60,24 +60,24 @@ class SecurityManager:
         self.register_security_routes()
     
     def setup_encryption(self):
-        """Setup encryption for sensitive data"""
+        """Setup encryption for sensitive data.
+
+        Derives a stable Fernet key from the app's SECRET_KEY so that all
+        gunicorn workers share the same key without needing a separate
+        ENCRYPTION_KEY env var.  A random key is only generated as a last
+        resort (dev mode without SECRET_KEY set).
+        """
         if HAS_CRYPTOGRAPHY:
             encryption_key = self.app.config.get('ENCRYPTION_KEY')
             if not encryption_key:
-                # Generate a new key (should be stored securely in production)
+                # Derive a deterministic 32-byte key from SECRET_KEY so every
-                encryption_key = Fernet.generate_key()
+                # worker produces the same value — no per-worker randomness.
-                if self.logger_handler:
+                secret = self.app.config.get('SECRET_KEY', '')
-                    self.logger_handler.logger.warning(
+                derived = hashlib.sha256(secret.encode()).digest()
-                        "Generated new encryption key - store this securely!"
+                encryption_key = base64.urlsafe_b64encode(derived)
-                    )
-            
             self.cipher = Fernet(encryption_key)
         else:
             self.cipher = None
-            if self.logger_handler:
-                self.logger_handler.logger.warning(
-                    "Cryptography not available - encryption features disabled"
-                )
     
     def security_check(self):
         """Comprehensive security check before each request"""
@@ -93,11 +93,11 @@ class SecurityManager:
             })
             return jsonify({'error': 'Request blocked for security reasons'}), 403
         
-        # Validate session security
+        # NOTE: per-worker in-memory session token validation removed.
-        if 'user_id' in session:
+        # Flask's cryptographically signed session cookie provides session
-            if not self.validate_session_security():
+        # integrity; CSRF tokens handle cross-site forgery.  Keeping the
-                session.clear()
+        # validate_session_security() call here would log users out on every
-                return jsonify({'error': 'Session security validation failed'}), 401
+        # gunicorn worker boundary because session_tokens is not shared.
 
         # Check for SQL injection attempts
         if self.detect_sql_injection():
@@ -213,8 +213,19 @@ class SecurityManager:
         check_data.extend(request.args.values())
         check_data.extend(request.form.values())
 
-        if request.json:
+        # Only attempt JSON parsing when the client declared application/json.
-            check_data.extend(str(v) for v in request.json.values() if isinstance(v, (str, int, float)))
+        # Calling request.json without this guard raises a 415 Unsupported Media Type
+        # on every non-JSON request (GET pages, form POSTs, favicon, etc.).
+        if request.content_type and 'application/json' in request.content_type:
+            try:
+                json_body = request.get_json(silent=True, force=False)
+                if json_body and isinstance(json_body, dict):
+                    check_data.extend(
+                        str(v) for v in json_body.values()
+                        if isinstance(v, (str, int, float))
+                    )
+            except Exception:
+                pass
         
         for data in check_data:
             data_str = str(data).lower()

app.py

@@ -99,7 +99,45 @@ def create_app() -> Flask:
     from extensions import logger_handler as _lh
     create_location_logging_routes(app, db, _lh)
 
+    # ------------------------------------------------------------------
+    # Security: CSRF protection + rate-limiting via SecurityManager
+    # ------------------------------------------------------------------
+    from advanced_security_middleware import SecurityManager, generate_csrf_token
+    from extensions import logger_handler as _lh2
+    security_manager = SecurityManager()
+    security_manager.init_app(app, db, _lh2)
 
+    # Endpoints exempt from CSRF validation:
+    #   - login / register  (no session token exists yet)
+    #   - qr_checkin        (public, unauthenticated QR scan endpoint)
+    _CSRF_EXEMPT = {'auth.login', 'auth.register', 'qr_codes.qr_checkin', 'static'}
+
+    @app.before_request
+    def csrf_protect():
+        """Validate CSRF token on every state-mutating request."""
+        if request.method not in ('POST', 'PUT', 'PATCH', 'DELETE'):
+            return
+        if request.endpoint in _CSRF_EXEMPT:
+            return
+        token = (request.form.get('csrf_token')
+                 or request.headers.get('X-CSRF-Token'))
+        expected = session.get('csrf_token')
+        import hmac as _hmac
+        if not token or not expected or not _hmac.compare_digest(token, expected):
+            _lh2.logger.warning(
+                f"CSRF validation failed | endpoint={request.endpoint} "
+                f"| ip={request.remote_addr} | user={session.get('username','anon')}"
+            )
+            from flask import abort
+            abort(403)
+
+    # Make generate_csrf_token() available in every template as csrf_token()
+    @app.context_processor
+    def inject_csrf_token():
+        return {'csrf_token': generate_csrf_token}
+
+    # Expose security_manager to routes that need it (login rate-limiting)
+    app.security_manager = security_manager
 
     # ------------------------------------------------------------------
     # Template filters (global — must be on app, not blueprints)

requirements.txt

@@ -66,3 +66,5 @@ cryptography==44.0.0            # Required for MySQL SSL connections
 
 # Employee Synchronization Dependencies
 schedule==1.2.2                 # For automated scheduling
+
+jwt

routes/auth.py

@@ -28,6 +28,8 @@ def index():
     return redirect(url_for('auth.login'))
 
 @bp.route('/register', methods=['GET', 'POST'], endpoint='register')
+@login_required
+@admin_required
 @log_user_activity('user_registration')
 def register():
     """User registration endpoint"""
@@ -84,6 +86,18 @@ def login():
             flash('Please enter both username and password.', 'error')
             return render_template('login.html')
 
+        # Rate-limit check — blocks IPs with 5+ failed attempts in 15 minutes
+        from flask import current_app
+        sec_mgr = getattr(current_app, 'security_manager', None)
+        if sec_mgr and sec_mgr.is_auth_rate_limited():
+            logger_handler.log_security_event(
+                event_type="login_rate_limited",
+                description=f"Login blocked by rate limiter for username: {username}",
+                severity="HIGH"
+            )
+            flash('Too many failed attempts. Please wait 15 minutes before trying again.', 'error')
+            return render_template('login.html')
+
         # Verify Turnstile if enabled
         if turnstile_utils.is_enabled():
             if not turnstile_utils.verify_turnstile(turnstile_response):
@@ -126,6 +140,10 @@ def login():
                 session['full_name'] = user.full_name
                 session['login_time'] = datetime.now().isoformat()
 
+                # Create a secure session token (also clears failed attempts for this IP)
+                if sec_mgr:
+                    sec_mgr.create_secure_session(user.id)
+
                 # Update last login date
                 user.last_login_date = datetime.utcnow()
                 db.session.commit()
@@ -162,7 +180,10 @@ def login():
                 return redirect(url_for('attendance.attendance_report'))
 
             else:
-                # Invalid credentials - log failed attempt
+                # Invalid credentials — record failed attempt for rate limiting
+                if sec_mgr:
+                    sec_mgr.record_failed_attempt(username)
+
                 user_id = user.id if user else None
                 logger_handler.log_user_login(
                     user_id=user_id,

static/js/attendance_report.js

@@ -420,6 +420,7 @@ function deleteRecord(recordId, employeeId) {
       headers: {
         "Content-Type": "application/json",
         "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
       },
     })
       .then((response) => response.json())

static/js/dashboard.js

@@ -142,6 +142,7 @@ class ProjectDashboardManager {
         headers: {
           "Content-Type": "application/json",
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -348,6 +349,7 @@ class ProjectDashboardManager {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
       });
 
@@ -376,6 +378,7 @@ class ProjectDashboardManager {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
       });
 
@@ -528,6 +531,7 @@ class ProjectDashboardManager {
         method: "POST",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
       });
 

static/js/script.js

@@ -447,10 +447,13 @@ class QRManager {
 
   // AJAX Helper
   async makeRequest(url, options = {}) {
+    // Read the CSRF token injected by Flask into window.qrConfig
+    const csrfToken = (window.qrConfig && window.qrConfig.csrfToken) || '';
     const defaultOptions = {
       headers: {
         'Content-Type': 'application/json',
-        'X-Requested-With': 'XMLHttpRequest'
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': csrfToken
       },
       ...options
     };

static/js/users.js

@@ -223,6 +223,7 @@ class UsersManager {
         method: "GET",
         headers: {
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -248,6 +249,7 @@ class UsersManager {
         method: "GET",
         headers: {
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -280,6 +282,7 @@ class UsersManager {
         method: "GET",
         headers: {
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -312,6 +315,7 @@ class UsersManager {
         method: "GET",
         headers: {
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -346,6 +350,7 @@ class UsersManager {
         headers: {
           "Content-Type": "application/json",
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
       });
 
@@ -487,6 +492,7 @@ class UsersManager {
         headers: {
           "Content-Type": "application/json",
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
         body: JSON.stringify({
           user_ids: Array.from(this.selectedUsers),
@@ -529,6 +535,7 @@ class UsersManager {
         headers: {
           "Content-Type": "application/json",
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
         body: JSON.stringify({
           user_ids: Array.from(this.selectedUsers),
@@ -571,6 +578,7 @@ class UsersManager {
         headers: {
           "Content-Type": "application/json",
           "X-Requested-With": "XMLHttpRequest",
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
         },
         body: JSON.stringify({
           user_ids: Array.from(this.selectedUsers),

templates/add_manual_attendance.html

@@ -213,6 +213,7 @@
         </div>
 
         <form id="manualAttendanceForm" method="POST" action="{{ url_for('attendance.save_manual_attendance') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <!-- Employee Selection with Autocomplete -->
             <div class="form-group">
                 <label for="employee_search">

templates/admin_logs.html

@@ -592,6 +592,7 @@ Management{% endblock %} {% block extra_head %}
         method: "GET",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
       });
 
@@ -1050,6 +1051,7 @@ ${
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
       });
 
@@ -1096,6 +1098,7 @@ ${
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
         body: JSON.stringify({ days_to_keep: daysToKeep }),
       });
@@ -1155,6 +1158,7 @@ ${
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
         body: JSON.stringify({ days_threshold: daysThreshold }),
       });

templates/attendance_report.html

@@ -673,7 +673,8 @@ function deleteRecord(recordId, employeeId) {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
+                'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || ''
             }
         })
         .then(response => response.json())

templates/bulk_qr_import.html

@@ -129,6 +129,7 @@
     </div>
     <div class="import-body">
       <form id="importForm" method="POST" enctype="multipart/form-data" action="{{ url_for('qr_codes.import_bulk_qr_codes') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- File Upload Area -->
         <div class="file-upload-area" id="fileUploadArea">
           <div class="upload-icon">
@@ -234,6 +235,7 @@
           <p>All {{ validation_result.valid_rows }} records are valid and ready to import.</p>
         </div>
         <form method="POST" action="{{ url_for('qr_codes.import_bulk_qr_codes') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <input type="hidden" name="proceed_import" value="true">
           <button type="submit" class="btn btn-success">
             <i class="fas fa-check"></i>

templates/confirm_delete_qr.html

@@ -381,6 +381,7 @@ endblock %} {% block extra_head %}
       </a>
 
       <form method="POST" style="display: inline" id="deleteForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <button type="button" class="btn btn-delete-confirm" id="deleteBtn">
           <i class="fas fa-trash"></i>
           Delete Permanently

templates/create_employee.html

@@ -195,6 +195,7 @@
 
     <div class="form-body">
       <form method="POST" id="createEmployeeForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Employee ID and Contract ID Row -->
         <div class="form-row">
           <div class="form-group">

templates/create_project.html

@@ -29,6 +29,7 @@
     
     <div style="padding: 1.5rem;">
       <form method="POST" id="createProjectForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <div style="max-width: 600px;">
           <!-- Project Name -->
           <div class="form-group" style="margin-bottom: 1.5rem;">

templates/create_qr_code.html

@@ -564,6 +564,7 @@
         </div>
 
         <form method="POST" class="form" id="createQRForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
           <!-- Basic Information Section -->
           <div class="form-section">
             <div class="section-header">
@@ -1225,6 +1226,7 @@
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
           },
           body: JSON.stringify({ address: address })
         })

templates/create_user.html

@@ -17,6 +17,7 @@ Code Management{% endblock %} {% block content %}
       method="POST"
       action="{{ url_for('users.create_user') }}"
     >
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="form-section">
         <h3>
           <i class="fas fa-user"></i>
@@ -463,6 +464,7 @@ Code Management{% endblock %} {% block content %}
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
           },
           body: JSON.stringify({ project_ids: projectIds })
         });

templates/edit_attendance.html

@@ -145,6 +145,7 @@
   </div>
 
   <form method="POST" action="{{ url_for('attendance.edit_attendance', record_id=attendance_record.id) }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     
     <!-- Audit Note Section -->
     <div class="audit-note-section">

templates/edit_employee.html

@@ -198,6 +198,7 @@
 
     <div class="form-body">
       <form method="POST" id="editEmployeeForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Employee ID and Contract ID Row -->
         <div class="form-row">
           <div class="form-group">

templates/edit_project.html

@@ -67,6 +67,7 @@
     
     <div style="padding: 1.5rem;">
       <form method="POST" id="editProjectForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <div style="max-width: 600px;">
           <!-- Project Name -->
           <div class="form-group" style="margin-bottom: 1.5rem; position: relative;">

templates/edit_qr_code.html

@@ -579,17 +579,9 @@
   }
 
   @keyframes pulse {
-    0% {
+    0% { transform: scale(1); }
-      transform: scale(1);
+    50% { transform: scale(1.05); }
-    }
+    100% { transform: scale(1); }
-
-    50% {
-      transform: scale(1.05);
-    }
-
-    100% {
-      transform: scale(1);
-    }
   }
 
   /* Toast notification styles */
@@ -624,6 +616,7 @@
       </div>
 
       <form method="POST" class="form" id="editQRForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <!-- Basic Information Section -->
         <div class="form-section">
           <div class="section-header">
@@ -637,19 +630,24 @@
           <div class="form-group">
             <label for="name">
               <i class="fas fa-tag"></i>
-              QR Code Name
+              QR Code Name <span style="color: var(--error-color)">*</span>
-              <span
-                style="margin-left: 0.4rem; font-size: 0.75rem; font-weight: 500; color: var(--gray-500); background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; padding: 0.1rem 0.4rem;">
-                <i class="fas fa-lock" style="font-size: 0.7rem;"></i> Read-only
-              </span>
             </label>
-            <input type="text" id="name" name="name" readonly value="{{ qr_code.name }}"
+            <input
+              type="text"
+              id="name"
+              name="name"
+              required
+              value="{{ qr_code.name }}"
               data-original="{{ qr_code.name }}"
-              style="background-color: var(--gray-100); color: var(--gray-600); cursor: not-allowed; border-color: var(--gray-300);" />
+              placeholder="e.g., Main Office Entrance, Conference Room A"
-            <small class="form-help">
+              maxlength="100"
-              <i class="fas fa-info-circle"></i>
+            />
-              The QR code name cannot be changed after creation.
+            <small class="form-help"
-            </small>
+              >A unique name to identify this QR code</small
+            >
+            <div class="character-counter">
+              <span id="nameCounter">{{ qr_code.name|length }}/100</span>
+            </div>
           </div>
 
           <!-- ===== ADDED: QR Code Type selector ===== -->
@@ -660,10 +658,8 @@
               <span style="color: var(--error-color)">*</span>
             </label>
             <select id="qr_type" name="qr_type" class="form-control" onchange="toggleQRTypeSection()">
-              <option value="standard" {% if qr_code.qr_type !='dynamic' %}selected{% endif %}>Standard — Fixed Location
+              <option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed Location</option>
-              </option>
+              <option value="dynamic" {% if qr_code.qr_type == 'dynamic' %}selected{% endif %}>Dynamic — Employee Selects Location</option>
-              <option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
-                Location</option>
             </select>
             <small class="form-help">
               <strong>Standard:</strong> employee checks in at one fixed location.<br>
@@ -679,15 +675,22 @@
               <i class="fas fa-map-marker-alt"></i>
               Location Name <span style="color: var(--error-color)">*</span>
             </label>
-              <input type="text" id="location" name="location" {% if qr_code.qr_type !='dynamic' %}required{% endif %}
+            <input
+              type="text"
+              id="location"
+              name="location"
+              {% if qr_code.qr_type != 'dynamic' %}required{% endif %}
               value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
-                data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
+              data-original="{{ qr_code.location }}"
-                maxlength="100" />
+              placeholder="e.g., Corporate Headquarters, Branch Office"
-              <small class="form-help">The name of the physical location where this QR code will be
+              maxlength="100"
-                used</small>
+            />
+            <small class="form-help"
+              >The name of the physical location where this QR code will be
+              used</small
+            >
             <div class="character-counter">
-                <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0'
+              <span id="locationCounter">{{ qr_code.location|length if qr_code.qr_type != 'dynamic' else '0' }}/100</span>
-                  }}/100</span>
             </div>
           </div>
           </div><!-- end standardLocationNameGroup -->
@@ -697,8 +700,7 @@
               <i class="fas fa-folder"></i>
               Project (Optional)
             </label>
-            <select id="project_id" name="project_id" class="form-select"
+            <select id="project_id" name="project_id" class="form-select" data-original="{{ qr_code.project_id or '' }}">
-              data-original="{{ qr_code.project_id or '' }}">
               <option value="">Select a project (Optional)</option>
               {% for project in projects %}
               <option value="{{ project.id }}" {% if qr_code.project_id == project.id %}selected{% endif %}>
@@ -730,12 +732,19 @@
               Complete Address
               <span style="color: var(--error-color)">*</span>
             </label>
-              <textarea id="location_address" name="location_address" required
+            <textarea
+              id="location_address"
+              name="location_address"
+              required
               data-original="{{ qr_code.location_address }}"
-                placeholder="Enter the full address including street, city, state, and ZIP code" rows="3"
+              placeholder="Enter the full address including street, city, state, and ZIP code"
-                maxlength="500">{{ qr_code.location_address }}</textarea>
+              rows="3"
-              <small class="form-help">Include all address details for accurate location
+              maxlength="500"
-                identification</small>
+            >{{ qr_code.location_address }}</textarea>
+            <small class="form-help"
+              >Include all address details for accurate location
+              identification</small
+            >
             <div class="character-counter">
               <span id="addressCounter">{{ qr_code.location_address|length }}/500</span>
             </div>
@@ -772,12 +781,20 @@
                 </div>
 
                 <div class="coordinates-actions">
-                    <button type="button" class="btn-coordinate" id="geocodeBtn">
+                  <button
+                    type="button"
+                    class="btn-coordinate"
+                    id="geocodeBtn"
+                  >
                     <i class="fas fa-search-location"></i>
                     {% if qr_code.has_coordinates %}Update{% else %}Get{% endif %} Coordinates
                   </button>
-                    <button type="button" class="btn-coordinate" id="clearCoordinatesBtn"
+                  <button
-                      style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
+                    type="button"
+                    class="btn-coordinate"
+                    id="clearCoordinatesBtn"
+                    style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
+                  >
                     <i class="fas fa-times"></i>
                     Clear
                   </button>
@@ -799,14 +816,20 @@
               Event or Purpose
               <span style="color: var(--error-color)">*</span>
             </label>
-            <select id="location_event" name="location_event" required class="form-control"
+            <select
-              data-original="{{ qr_code.location_event }}">
+              id="location_event"
+              name="location_event"
+              required
+              class="form-control"
+              data-original="{{ qr_code.location_event }}"
+            >
               <option value="">Select Event Type</option>
               <option value="Check In" {% if qr_code.location_event == 'Check In' %}selected{% endif %}>Check In</option>
-              <option value="Check Out" {% if qr_code.location_event=='Check Out' %}selected{% endif %}>Check Out
+              <option value="Check Out" {% if qr_code.location_event == 'Check Out' %}selected{% endif %}>Check Out</option>
-              </option>
             </select>
-            <small class="form-help">Select the event type for this QR code</small>
+            <small class="form-help"
+              >Select the event type for this QR code</small
+            >
           </div>
 
         </div>
@@ -830,9 +853,13 @@
             <select id="style_id" name="style_id" onchange="applyStylePreset()">
               <option value="">Custom Style</option>
               {% for style in styles %}
-              <option value="{{ style.id }}" {% if qr_code.style_id==style.id %}selected{% endif %}
+              <option 
-                data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
+                value="{{ style.id }}" 
-                data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
+                {% if qr_code.style_id == style.id %}selected{% endif %}
+                data-fill="{{ style.fill_color }}" 
+                data-back="{{ style.back_color }}"
+                data-box-size="{{ style.box_size }}"
+                data-border="{{ style.border }}"
                 data-error-correction="{{ style.error_correction }}">
                 {{ style.name }}
               </option>
@@ -849,10 +876,21 @@
                 QR Code Color
               </label>
               <div class="color-input-group">
-                <input type="color" id="fill_color" name="fill_color" value="{{ qr_code.fill_color or '#000000' }}"
+                <input 
-                  onchange="updatePreview()" />
+                  type="color" 
-                <input type="text" id="fill_color_text" value="{{ qr_code.fill_color or '#000000' }}"
+                  id="fill_color" 
-                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000" onchange="syncColorInput('fill')" />
+                  name="fill_color" 
+                  value="{{ qr_code.fill_color or '#000000' }}"
+                  onchange="updatePreview()"
+                />
+                <input 
+                  type="text" 
+                  id="fill_color_text" 
+                  value="{{ qr_code.fill_color or '#000000' }}" 
+                  pattern="^#[0-9A-Fa-f]{6}$"
+                  placeholder="#000000"
+                  onchange="syncColorInput('fill')"
+                />
               </div>
               <span class="form-help">Color of the QR code modules</span>
             </div>
@@ -863,10 +901,21 @@
                 Background Color
               </label>
               <div class="color-input-group">
-                <input type="color" id="back_color" name="back_color" value="{{ qr_code.back_color or '#FFFFFF' }}"
+                <input 
-                  onchange="updatePreview()" />
+                  type="color" 
-                <input type="text" id="back_color_text" value="{{ qr_code.back_color or '#FFFFFF' }}"
+                  id="back_color" 
-                  pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF" onchange="syncColorInput('back')" />
+                  name="back_color" 
+                  value="{{ qr_code.back_color or '#FFFFFF' }}"
+                  onchange="updatePreview()"
+                />
+                <input 
+                  type="text" 
+                  id="back_color_text" 
+                  value="{{ qr_code.back_color or '#FFFFFF' }}" 
+                  pattern="^#[0-9A-Fa-f]{6}$"
+                  placeholder="#FFFFFF"
+                  onchange="syncColorInput('back')"
+                />
               </div>
               <span class="form-help">Background color of the QR code</span>
             </div>
@@ -880,8 +929,15 @@
                 Module Size
               </label>
               <div class="range-input-group">
-                <input type="range" id="box_size" name="box_size" min="5" max="20" value="{{ qr_code.box_size or 10 }}"
+                <input 
-                  oninput="updateRangeValue('box_size'); updatePreview()" />
+                  type="range" 
+                  id="box_size" 
+                  name="box_size" 
+                  min="5" 
+                  max="20" 
+                  value="{{ qr_code.box_size or 10 }}"
+                  oninput="updateRangeValue('box_size'); updatePreview()"
+                />
                 <span class="range-value" id="box_size_value">{{ qr_code.box_size or 10 }}px</span>
               </div>
               <span class="form-help">Size of each QR code module (affects overall size)</span>
@@ -893,8 +949,15 @@
                 Border Size
               </label>
               <div class="range-input-group">
-                <input type="range" id="border" name="border" min="1" max="10" value="{{ qr_code.border or 4 }}"
+                <input 
-                  oninput="updateRangeValue('border'); updatePreview()" />
+                  type="range" 
+                  id="border" 
+                  name="border" 
+                  min="1" 
+                  max="10" 
+                  value="{{ qr_code.border or 4 }}"
+                  oninput="updateRangeValue('border'); updatePreview()"
+                />
                 <span class="range-value" id="border_value">{{ qr_code.border or 4 }} modules</span>
               </div>
               <span class="form-help">White border around the QR code</span>
@@ -910,8 +973,7 @@
             <select id="error_correction" name="error_correction" onchange="updatePreview()">
               <option value="L" {% if qr_code.error_correction == 'L' %}selected{% endif %}>Low (7% recovery)</option>
               <option value="M" {% if qr_code.error_correction == 'M' %}selected{% endif %}>Medium (15% recovery)</option>
-              <option value="Q" {% if qr_code.error_correction=='Q' %}selected{% endif %}>Quartile (25% recovery)
+              <option value="Q" {% if qr_code.error_correction == 'Q' %}selected{% endif %}>Quartile (25% recovery)</option>
-              </option>
               <option value="H" {% if qr_code.error_correction == 'H' %}selected{% endif %}>High (30% recovery)</option>
             </select>
             <span class="form-help">Higher levels allow QR code to work even if partially damaged</span>
@@ -947,12 +1009,24 @@
         </div>
 
         <!-- Hidden coordinate fields for form submission -->
-        <input type="hidden" id="address_latitude" name="address_latitude"
+        <input
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}" />
+          type="hidden"
-        <input type="hidden" id="address_longitude" name="address_longitude"
+          id="address_latitude"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}" />
+          name="address_latitude"
-        <input type="hidden" id="coordinate_accuracy" name="coordinate_accuracy"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% endif %}"
-          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}" />
+        />
+        <input
+          type="hidden"
+          id="address_longitude"
+          name="address_longitude"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.address_longitude }}{% endif %}"
+        />
+        <input
+          type="hidden"
+          id="coordinate_accuracy"
+          name="coordinate_accuracy"
+          value="{% if qr_code.has_coordinates %}{{ qr_code.coordinate_accuracy }}{% endif %}"
+        />
 
         <!-- Form Actions -->
         <div class="form-actions">
@@ -1037,11 +1111,9 @@
         <div class="detail-row">
           <strong>Colors:</strong>
           <span>
-            <span
+            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
-              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
             on
-            <span
+            <span style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
-              style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.back_color or '#FFFFFF' }}; border: 1px solid #ccc; border-radius: 2px; margin-left: 4px;"></span>
           </span>
         </div>
       </div>
@@ -1281,6 +1353,7 @@
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
       },
       body: JSON.stringify({ address: address })
     })
@@ -1349,6 +1422,10 @@
   // Initialize on page load
   document.addEventListener('DOMContentLoaded', function() {
     // Set up character counters
+    document.getElementById('name').addEventListener('input', () => {
+      updateCharacterCount('name', 'nameCounter', 100);
+      updateCurrentInfo();
+    });
     document.getElementById('location').addEventListener('input', () => {
       updateCharacterCount('location', 'locationCounter', 100);
       updateCurrentInfo();

templates/edit_user.html

@@ -15,6 +15,7 @@
 
     <div class="edit-user-container">
         <form id="editUserForm" method="POST" action="{{ url_for('users.edit_user', user_id=user.id) }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <!-- User Information Section -->
             <div class="form-section">
                 <h3>
@@ -470,6 +471,7 @@
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
+          'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
                     },
                     body: JSON.stringify({ project_ids: projectIds })
                 });

templates/employees.html

@@ -304,6 +304,7 @@ extra_head %}
     <div class="modal-footer">
       <button class="btn btn-secondary" data-modal="deleteModal">Cancel</button>
       <form id="deleteForm" method="POST" style="display: inline">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <button type="submit" class="btn btn-danger">
           <i class="fas fa-trash"></i>
           Delete Employee

templates/export_configuration.html

@@ -86,6 +86,7 @@
     <!-- Export Configuration Form -->
     <div class="export-config-section">
         <form method="POST" action="{{ url_for('attendance.generate_excel_export') }}" id="exportForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <!-- Hidden fields for filters -->
             <input type="hidden" name="date_from" value="{{ filters.date_from }}">
             <input type="hidden" name="date_to" value="{{ filters.date_to }}">

templates/login.html

@@ -18,6 +18,7 @@
     </div>
 
     <form method="POST" class="auth-form" id="loginForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       <div class="form-group">
         <label for="username">
           <i class="fas fa-user"></i>

templates/payroll_dashboard.html

@@ -821,6 +821,7 @@
         <div class="export-actions">
         <!--
             <form method="POST" action="{{ url_for('payroll.export_payroll_excel') }}" style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="date_from" value="{{ date_from }}">
                 <input type="hidden" name="date_to" value="{{ date_to }}">
                 <input type="hidden" name="project_filter" value="{{ project_filter }}">
@@ -832,6 +833,7 @@
             </form>
 
             <form method="POST" action="{{ url_for('payroll.export_payroll_excel') }}" style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="date_from" value="{{ date_from }}">
                 <input type="hidden" name="date_to" value="{{ date_to }}">
                 <input type="hidden" name="project_filter" value="{{ project_filter }}">
@@ -843,6 +845,7 @@
             </form>
         -->
             <form method="POST" action="{{ url_for('payroll.export_payroll_excel') }}" style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="date_from" value="{{ date_from }}">
                 <input type="hidden" name="date_to" value="{{ date_to }}">
                 <input type="hidden" name="project_filter" value="{{ project_filter }}">
@@ -854,6 +857,7 @@
             </form>
         <!--
             <form method="POST" action="{{ url_for('payroll.export_payroll_excel') }}" style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="date_from" value="{{ date_from }}">
                 <input type="hidden" name="date_to" value="{{ date_to }}">
                 <input type="hidden" name="project_filter" value="{{ project_filter }}">
@@ -865,6 +869,7 @@
             </form>
 
             <form method="POST" action="{{ url_for('payroll.export_payroll_excel') }}" style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                 <input type="hidden" name="date_from" value="{{ date_from }}">
                 <input type="hidden" name="date_to" value="{{ date_to }}">
                 <input type="hidden" name="project_filter" value="{{ project_filter }}">

templates/profile.html

@@ -114,6 +114,7 @@ endblock %} {% block content %}
           </div>
 
           <form method="POST" class="profile-form" id="profileForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="form_type" value="profile" />
 
             <div class="form-row">
@@ -192,6 +193,7 @@ endblock %} {% block content %}
           </div>
 
           <form method="POST" class="profile-form" id="passwordForm">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <input type="hidden" name="form_type" value="password" />
 
             <div class="form-group">

templates/projects.html

@@ -114,6 +114,7 @@
           <!-- Activate/Deactivate button (for future use)
           <form method="POST" action="{{ url_for('projects.toggle_project', project_id=project.id) }}" 
                 style="display: inline;">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
             <button type="submit" 
                     class="btn {% if project.active_status %}btn-warning{% else %}btn-success{% endif %}">
               <i class="fas {% if project.active_status %}fa-pause{% else %}fa-play{% endif %}"></i>

templates/register.html

@@ -11,6 +11,7 @@ endblock %} {% block content %}
     </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>

templates/time_attendance_duplicate_review.html

@@ -367,6 +367,7 @@
   <!-- Duplicates List -->
   {% if analysis.duplicate_records > 0 %}
   <form id="duplicateReviewForm" method="POST" action="{{ url_for('time_attendance.import_time_attendance') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     <input type="hidden" name="analyze_duplicates" value="false">
     <input type="hidden" name="skip_duplicates" value="true">
     <input type="hidden" name="import_source" value="Import with Duplicates - {{ filename }}">

templates/time_attendance_import.html

@@ -343,6 +343,7 @@
     </div>
     <div class="import-body">
       <form id="importForm" method="POST" enctype="multipart/form-data" action="{{ url_for('time_attendance.import_time_attendance') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 
         <!-- Project Selection - REQUIRED (moved to top) -->
         <div class="form-group" style="margin-bottom: 1.5rem;">
@@ -885,6 +886,7 @@ importForm.addEventListener('submit', async (e) => {
   try {
     const resp = await fetch('{{ url_for("time_attendance.start_import_job") }}', {
       method: 'POST',
+      headers: { 'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '' },
       body: formData
     });
     const data = await resp.json();

templates/time_attendance_import_progress.html

@@ -243,6 +243,7 @@ fetch('/time-attendance/import/execute', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
   },
   body: JSON.stringify({
     batch_id: batchId,

templates/time_attendance_invalid_review.html

@@ -321,6 +321,7 @@
   <!-- Invalid Rows List -->
   {% if analysis.invalid_rows > 0 %}
   <form id="invalidReviewForm" method="POST" action="{{ url_for('time_attendance.import_time_attendance') }}">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
     <input type="hidden" name="from_invalid_review" value="true">
     <input type="hidden" name="analyze_invalid" value="false">
     <input type="hidden" name="analyze_duplicates" value="false">

templates/time_attendance_record_detail.html

@@ -867,7 +867,7 @@ function submitDelete() {
   }
   
   // Add CSRF token
-  const sessionCsrfToken = '{{ session.get("csrf_token", "") }}';
+  const sessionCsrfToken = (window.qrConfig && window.qrConfig.csrfToken) || '';
   if (sessionCsrfToken) {
     const csrfInput = document.createElement('input');
     csrfInput.type = 'hidden';

templates/time_attendance_records.html

@@ -630,7 +630,7 @@ function confirmDelete(recordId, employeeName, date) {
     }
     
     // Add CSRF token if available
-    const sessionCsrfToken = '{{ session.get("csrf_token", "") }}';
+    const sessionCsrfToken = (window.qrConfig && window.qrConfig.csrfToken) || '';
     if (sessionCsrfToken) {
       const csrfInput = document.createElement('input');
       csrfInput.type = 'hidden';

templates/users.html

@@ -442,7 +442,9 @@ Code Management{% endblock %} {% block extra_head %}
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
           "X-Requested-With": "XMLHttpRequest",
+          "X-CSRF-Token": (window.qrConfig && window.qrConfig.csrfToken) || "",
         },
         body: JSON.stringify({
           new_status: newStatus,

templates/verification_review.html

@@ -817,6 +817,7 @@
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
       },
       body: JSON.stringify({
         status: status,

templates/verification_review_detail.html

@@ -497,6 +497,7 @@ QR Code Management{% endblock %} {% block extra_head %}
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
+        'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
           },
           body: JSON.stringify({
               status: status,