nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/28 Fixed some security issues

Browse Source
This commit is contained in:
nngo
2026-04-28 16:27:39 -04:00
parent d8b57cde77
commit bfc2f58fe2
38 changed files with 4273 additions and 4067 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/add_manual_attendance.html
+1
View File
@@ -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
+4
View File
@@ -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
+2 -1
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+308 -231
View File
@@ -289,7 +289,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.range-input-group input[type="range"]::-moz-range-thumb {
@@ -299,7 +299,7 @@
background: var(--primary-color);
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.range-value {
@@ -544,18 +544,18 @@
.form-row {
grid-template-columns: 1fr;
}
.qr-preview-container {
flex-direction: column;
text-align: center;
}
.range-input-group {
flex-direction: column;
gap: 0.5rem;
align-items: stretch;
}
.range-value {
text-align: center;
}
@@ -579,17 +579,9 @@
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
0% { 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
<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>
QR Code Name <span style="color: var(--error-color)">*</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);" />
<small class="form-help">
<i class="fas fa-info-circle"></i>
The QR code name cannot be changed after creation.
</small>
placeholder="e.g., Main Office Entrance, Conference Room A"
maxlength="100"
/>
<small class="form-help"
>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>
<option value="dynamic" {% if qr_code.qr_type=='dynamic' %}selected{% endif %}>Dynamic — Employee Selects
Location</option>
<option value="standard" {% if qr_code.qr_type != 'dynamic' %}selected{% endif %}>Standard — Fixed 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>
@@ -673,23 +669,30 @@
<!-- ===== END ADDED ===== -->
<!-- ADDED: wrapper to hide/show for standard QR only -->
<div id="standardLocationNameGroup" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
<div class="form-group">
<label for="location">
<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 %}
value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
data-original="{{ qr_code.location }}" placeholder="e.g., Corporate Headquarters, Branch Office"
maxlength="100" />
<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'
}}/100</span>
</div>
<div id="standardLocationNameGroup" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
<div class="form-group">
<label for="location">
<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 %}
value="{{ qr_code.location if qr_code.qr_type != 'dynamic' else '' }}"
data-original="{{ qr_code.location }}"
placeholder="e.g., Corporate Headquarters, Branch Office"
maxlength="100"
/>
<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' }}/100</span>
</div>
</div>
</div><!-- end standardLocationNameGroup -->
<div class="form-group">
@@ -697,11 +700,10 @@
<i class="fas fa-folder"></i>
Project (Optional)
</label>
<select id="project_id" name="project_id" class="form-select"
data-original="{{ qr_code.project_id or '' }}">
<select id="project_id" name="project_id" class="form-select" 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 %}>
<option value="{{ project.id }}" {% if qr_code.project_id == project.id %}selected{% endif %}>
{{ project.name }} ({{ project.qr_count }} QR codes)
</option>
{% endfor %}
@@ -714,81 +716,96 @@
</div>
<!-- Location Details Section — hidden when Dynamic QR type is selected -->
<div id="standardLocationDetailsSection" {% if qr_code.qr_type=='dynamic' %}style="display:none;" {% endif %}>
<div class="form-section">
<div class="section-header">
<h3>
<i class="fas fa-building"></i>
Location Details
</h3>
<p>Update the complete address and event information</p>
</div>
<div class="form-group">
<label for="location_address">
<i class="fas fa-home"></i>
Complete Address
<span style="color: var(--error-color)">*</span>
</label>
<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"
maxlength="500">{{ 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>
<!-- Address Coordinates Section -->
<div class="coordinates-section" id="coordinatesSection">
<div class="coordinates-header">
<i class="fas fa-crosshairs"></i>
<h4>Address Coordinates</h4>
</div>
<div class="coordinates-content">
<div class="coordinate-display">
<div class="coordinate-info">
<div class="coordinate-value" id="latitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.6f"|format(qr_code.address_latitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Latitude</div>
</div>
<div class="coordinate-info">
<div class="coordinate-value" id="longitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.6f"|format(qr_code.address_longitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Longitude</div>
</div>
</div>
<div class="coordinates-actions">
<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"
style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};">
<i class="fas fa-times"></i>
Clear
</button>
</div>
<div id="coordinateStatus"></div>
</div>
</div>
</div>
<div id="standardLocationDetailsSection" {% if qr_code.qr_type == 'dynamic' %}style="display:none;"{% endif %}>
<div class="form-section">
<div class="section-header">
<h3>
<i class="fas fa-building"></i>
Location Details
</h3>
<p>Update the complete address and event information</p>
</div>
<div class="form-group">
<label for="location_address">
<i class="fas fa-home"></i>
Complete Address
<span style="color: var(--error-color)">*</span>
</label>
<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"
maxlength="500"
>{{ 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>
<!-- Address Coordinates Section -->
<div class="coordinates-section" id="coordinatesSection">
<div class="coordinates-header">
<i class="fas fa-crosshairs"></i>
<h4>Address Coordinates</h4>
</div>
<div class="coordinates-content">
<div class="coordinate-display">
<div class="coordinate-info">
<div class="coordinate-value" id="latitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.6f"|format(qr_code.address_latitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Latitude</div>
</div>
<div class="coordinate-info">
<div class="coordinate-value" id="longitudeDisplay">
{% if qr_code.has_coordinates %}
{{ "%.6f"|format(qr_code.address_longitude) }}
{% else %}
---.----------
{% endif %}
</div>
<div class="coordinate-label">Longitude</div>
</div>
</div>
<div class="coordinates-actions">
<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"
style="display: {% if qr_code.has_coordinates %}inline-flex{% else %}none{% endif %};"
>
<i class="fas fa-times"></i>
Clear
</button>
</div>
<div id="coordinateStatus"></div>
</div>
</div>
</div>
</div>
</div><!-- end standardLocationDetailsSection -->
<!-- Event or Purpose — always visible for both Standard and Dynamic QR -->
@@ -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"
data-original="{{ qr_code.location_event }}">
<select
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>
<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>
</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 %}
data-fill="{{ style.fill_color }}" data-back="{{ style.back_color }}"
data-box-size="{{ style.box_size }}" data-border="{{ style.border }}"
<option
value="{{ style.id }}"
{% 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' }}"
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')" />
<input
type="color"
id="fill_color"
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' }}"
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')" />
<input
type="color"
id="back_color"
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 }}"
oninput="updateRangeValue('box_size'); updatePreview()" />
<input
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 }}"
oninput="updateRangeValue('border'); updatePreview()" />
<input
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>
@@ -908,11 +971,10 @@
Error Correction Level
</label>
<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>
<option value="H" {% if qr_code.error_correction=='H' %}selected{% endif %}>High (30% recovery)</option>
<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>
<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>
</div>
@@ -947,12 +1009,24 @@
</div>
<!-- Hidden coordinate fields for form submission -->
<input type="hidden" id="address_latitude" name="address_latitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% 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 %}" />
<input
type="hidden"
id="address_latitude"
name="address_latitude"
value="{% if qr_code.has_coordinates %}{{ qr_code.address_latitude }}{% 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
style="display: inline-block; width: 12px; height: 12px; background: {{ qr_code.fill_color or '#000000' }}; border-radius: 2px; margin-right: 4px;"></span>
<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
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 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>
@@ -1054,11 +1126,11 @@
function updateCharacterCount(inputId, counterId, maxLength) {
const input = document.getElementById(inputId);
const counter = document.getElementById(counterId);
if (input && counter) {
const length = input.value.length;
counter.textContent = `${length}/${maxLength}`;
if (length > maxLength * 0.9) {
counter.classList.add('warning');
} else {
@@ -1071,7 +1143,7 @@
function applyStylePreset() {
const styleSelect = document.getElementById('style_id');
const selectedOption = styleSelect.options[styleSelect.selectedIndex];
if (selectedOption.value) {
// Apply preset values
const fillColor = selectedOption.getAttribute('data-fill');
@@ -1079,7 +1151,7 @@
const boxSize = selectedOption.getAttribute('data-box-size');
const border = selectedOption.getAttribute('data-border');
const errorCorrection = selectedOption.getAttribute('data-error-correction');
// Update form inputs
document.getElementById('fill_color').value = fillColor;
document.getElementById('fill_color_text').value = fillColor;
@@ -1088,14 +1160,14 @@
document.getElementById('box_size').value = boxSize;
document.getElementById('border').value = border;
document.getElementById('error_correction').value = errorCorrection;
// Update range value displays
updateRangeValue('box_size');
updateRangeValue('border');
// Update preview
updatePreview();
// Show toast notification
showToast(`Applied "${selectedOption.text}" style preset`, 'success');
}
@@ -1104,14 +1176,14 @@
function syncColorInput(type) {
const colorInput = document.getElementById(`${type}_color`);
const textInput = document.getElementById(`${type}_color_text`);
let value = textInput.value.trim().toUpperCase();
// Add # if missing
if (!value.startsWith('#')) {
value = '#' + value;
}
// Validate hex format
if (/^#[0-9A-F]{6}$/i.test(value)) {
colorInput.value = value;
@@ -1127,7 +1199,7 @@
function updateRangeValue(inputId) {
const input = document.getElementById(inputId);
const valueDisplay = document.getElementById(`${inputId}_value`);
if (inputId === 'box_size') {
valueDisplay.textContent = `${input.value}px`;
} else if (inputId === 'border') {
@@ -1140,31 +1212,31 @@
const backColor = document.getElementById('back_color').value;
const boxSize = document.getElementById('box_size').value;
const border = document.getElementById('border').value;
// Update preview QR modules
const qrSample = document.getElementById('qr_sample');
const qrModules = qrSample.querySelectorAll('.qr-module:not(.empty)');
// Apply colors to QR modules
qrModules.forEach(module => {
module.style.backgroundColor = fillColor;
});
// Apply background color
qrSample.style.backgroundColor = backColor;
// Apply border (padding represents border)
const borderPx = Math.max(4, parseInt(border) * 2);
qrSample.style.padding = `${borderPx}px`;
// Apply module size effect (simulate with scale)
const scale = Math.max(0.7, Math.min(1.3, parseInt(boxSize) / 10));
qrSample.style.transform = `scale(${scale})`;
// Sync text inputs with color inputs
document.getElementById('fill_color_text').value = fillColor.toUpperCase();
document.getElementById('back_color_text').value = backColor.toUpperCase();
// Add animation class
const preview = document.getElementById('qr_preview');
preview.style.animation = 'none';
@@ -1182,11 +1254,11 @@
document.getElementById('box_size').value = '10';
document.getElementById('border').value = '4';
document.getElementById('error_correction').value = 'L';
updateRangeValue('box_size');
updateRangeValue('border');
updatePreview();
showToast('Reset to default QR code styling', 'info');
}
@@ -1200,7 +1272,7 @@
<span>${message}</span>
</div>
`;
toast.style.cssText = `
position: fixed;
top: 20px;
@@ -1216,14 +1288,14 @@
border-left: 4px solid ${getToastColor(type)};
max-width: 350px;
`;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '1';
toast.style.transform = 'translateX(0)';
}, 100);
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transform = 'translateX(100%)';
@@ -1259,57 +1331,58 @@
function validateQRCustomization() {
const fillColor = document.getElementById('fill_color_text').value;
const backColor = document.getElementById('back_color_text').value;
// Check if colors are too similar
if (fillColor.toLowerCase() === backColor.toLowerCase()) {
showToast('QR code color and background color cannot be the same', 'error');
return false;
}
return true;
}
// Geocoding functionality
function geocodeAddress(address) {
showStatus('info', 'Getting coordinates...');
// Using server API which prefers Google Maps with OpenStreetMap fallback
const encodedAddress = encodeURIComponent(address);
// First try the server API
fetch('/api/geocode', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': (window.qrConfig && window.qrConfig.csrfToken) || '',
},
body: JSON.stringify({ address: address })
})
.then(response => response.json())
.then(data => {
if (data.success) {
const lat = data.data.latitude;
const lng = data.data.longitude;
updateCoordinates(lat, lng, 'geocoded');
showStatus('success', data.message || 'Coordinates updated successfully');
} else {
showStatus('warning', data.message || 'No coordinates found for this address');
}
})
.catch(error => {
console.error('Geocoding error:', error);
showStatus('error', 'Failed to get coordinates. Please try again.');
});
.then(response => response.json())
.then(data => {
if (data.success) {
const lat = data.data.latitude;
const lng = data.data.longitude;
updateCoordinates(lat, lng, 'geocoded');
showStatus('success', data.message || 'Coordinates updated successfully');
} else {
showStatus('warning', data.message || 'No coordinates found for this address');
}
})
.catch(error => {
console.error('Geocoding error:', error);
showStatus('error', 'Failed to get coordinates. Please try again.');
});
}
function updateCoordinates(lat, lng, accuracy) {
document.getElementById('address_latitude').value = lat;
document.getElementById('address_longitude').value = lng;
document.getElementById('coordinate_accuracy').value = accuracy;
document.getElementById('latitudeDisplay').textContent = lat.toFixed(10);
document.getElementById('longitudeDisplay').textContent = lng.toFixed(10);
document.getElementById('clearCoordinatesBtn').style.display = 'inline-flex';
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Update Coordinates';
}
@@ -1318,13 +1391,13 @@
document.getElementById('address_latitude').value = '';
document.getElementById('address_longitude').value = '';
document.getElementById('coordinate_accuracy').value = '';
document.getElementById('latitudeDisplay').textContent = '---.----------';
document.getElementById('longitudeDisplay').textContent = '---.----------';
document.getElementById('clearCoordinatesBtn').style.display = 'none';
document.getElementById('geocodeBtn').innerHTML = '<i class="fas fa-search-location"></i> Get Coordinates';
showStatus('info', 'Coordinates cleared');
}
@@ -1332,7 +1405,7 @@
const statusDiv = document.getElementById('coordinateStatus');
if (statusDiv) {
statusDiv.innerHTML = `<div class="status-${type}" style="padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; font-size: 0.875rem;">${message}</div>`;
setTimeout(() => {
statusDiv.innerHTML = '';
}, 5000);
@@ -1347,8 +1420,12 @@
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function () {
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();
@@ -1357,33 +1434,33 @@
updateCharacterCount('location_address', 'addressCounter', 500);
updateCurrentInfo();
});
// Set up event listener for location_event
document.getElementById('location_event').addEventListener('change', updateCurrentInfo);
// Set up initial values for QR customization
updateRangeValue('box_size');
updateRangeValue('border');
updatePreview();
// Add form validation
const form = document.getElementById('editQRForm');
if (form) {
form.addEventListener('submit', function (e) {
form.addEventListener('submit', function(e) {
if (!validateQRCustomization()) {
e.preventDefault();
return false;
}
});
}
// Add color input synchronization
document.getElementById('fill_color').addEventListener('change', function () {
document.getElementById('fill_color').addEventListener('change', function() {
document.getElementById('fill_color_text').value = this.value.toUpperCase();
updatePreview();
});
document.getElementById('back_color').addEventListener('change', function () {
document.getElementById('back_color').addEventListener('change', function() {
document.getElementById('back_color_text').value = this.value.toUpperCase();
updatePreview();
});
@@ -1392,7 +1469,7 @@
const geocodeBtn = document.getElementById('geocodeBtn');
const clearBtn = document.getElementById('clearCoordinatesBtn');
geocodeBtn.addEventListener('click', function () {
geocodeBtn.addEventListener('click', function() {
const address = document.getElementById('location_address').value.trim();
if (address.length > 10) {
geocodeAddress(address);
@@ -1408,26 +1485,26 @@
<!-- ===== Dynamic QR Type Toggle ===== -->
<script>
function toggleQRTypeSection() {
var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup');
var stdDetails = document.getElementById('standardLocationDetailsSection');
var locInput = document.getElementById('location');
var type = document.getElementById('qr_type').value;
var stdName = document.getElementById('standardLocationNameGroup');
var stdDetails= document.getElementById('standardLocationDetailsSection');
var locInput = document.getElementById('location');
var addrInput = document.getElementById('location_address');
if (type === 'dynamic') {
if (stdName) stdName.style.display = 'none';
if (stdDetails) stdDetails.style.display = 'none';
if (locInput) locInput.removeAttribute('required');
if (stdName) stdName.style.display = 'none';
if (stdDetails)stdDetails.style.display = 'none';
if (locInput) locInput.removeAttribute('required');
if (addrInput) addrInput.removeAttribute('required');
} else {
if (stdName) stdName.style.display = 'block';
if (stdDetails) stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', '');
if (stdName) stdName.style.display = 'block';
if (stdDetails)stdDetails.style.display = 'block';
if (locInput) locInput.setAttribute('required', '');
if (addrInput) addrInput.setAttribute('required', '');
}
}
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function() {
toggleQRTypeSection();
});
</script>
templates/edit_user.html
+2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+5
View File
@@ -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
+1184 -1182
View File
File diff suppressed because it is too large Load Diff
templates/projects.html
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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,