From 1e1e309fa6e28edd3e1089eebac9bff8a40f8e7f Mon Sep 17 00:00:00 2001
From: Joel Addison <joel@addison.net.au>
Date: Fri, 3 Jan 2025 12:25:16 +0000
Subject: [PATCH] Update boarding pass pages

Update glyphs to Bootstrap Icons and styling to use Boostrap 4.
Improve navigation and page titles throughout section.
---
 .../templates/regidesk/boardingpass.html      |  13 +-
 .../regidesk/boardingpass_overview.html       |  13 +-
 .../regidesk/boardingpass_prepare.html        |   7 +-
 .../templates/regidesk/ci_code_404.html       |  11 +-
 .../templates/regidesk/ci_landing.html        | 114 +++++++++---------
 .../templates/regidesk/ci_overview.html       |   7 +-
 6 files changed, 76 insertions(+), 89 deletions(-)

diff --git a/vendor/regidesk/regidesk/templates/regidesk/boardingpass.html b/vendor/regidesk/regidesk/templates/regidesk/boardingpass.html
index e6e7ab04..3c08c156 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/boardingpass.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/boardingpass.html
@@ -11,14 +11,13 @@
 <!-- {% total_items_purchased 4 as pdns_count %} -->
 {% ticket_type as ticket_type %}
 
-{% block header_title %}
-<h1>Boarding Pass for {{ attendee.user.email }}</h1>
-<div class="panel panel-info">
-    <p>This boarding pass was prepared at {{ boardingpass.created }} and was correct at that time.</p>
-    <p>For an up-to-date list of paid/unpaid items please see <a href="/tickets/review">this review page.</a></p>
-</div>
-{% endblock %}
+{% block head_title %}Boarding Pass for {{ attendee.user.email }}{% endblock %}
+{% block page_title %}Boarding Pass for {{ attendee.user.email }}{% endblock %}
 
 {% block body %}
+    <div class="alert alert-warning" role="alert">
+        <p>This boarding pass was prepared at {{ boardingpass.created }} and was correct at that time.</p>
+        <p>For an up-to-date list of paid/unpaid items please see <a href="/tickets/review">this review page.</a></p>
+    </div>
     <div>{{ boardingpass_body|safe }}</div>
 {% endblock %}
diff --git a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
index a43106f5..0f8df101 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_overview.html
@@ -22,16 +22,11 @@
     </style>
 {% endblock %}
 
-{% block header_title %}
-    <div>
-        <a type=button" class="btn btn-primary btn-lg" href="{% url 'regidesk:check_in_scanner' %}">Go to scanning page</a>
-    </div>
-{% endblock %}
+{% block head_title %}Boarding Pass Overview{% endblock %}
+{% block page_title %}Boarding Pass Overview{% endblock %}
+{% block page_lead %}Review and generate boarding passes for registered attendees. <a href="{% url 'regidesk:check_in_scanner' %}">Go to scanning page</a>{% endblock %}
 
 {% block body %}
-
-    <h1>Boarding Pass Overview</h1>
-
     <form class="form-horizontal" method="post" action="{% url "regidesk:boarding_prepare" %}">
 
         {% csrf_token %}
@@ -46,7 +41,7 @@
                 {% endfor %}
             </select>
             <br/>
-            <button id="next-button" type="submit" class="btn btn-primary" disabled>Next <i class="fa fa-chevron-right"></i></button>
+            <button id="next-button" type="submit" class="btn btn-primary" disabled>Next <i class="bi-chevron-right"></i></button>
         </p>
 
         <table class="table table-striped table-bordered dataTable">
diff --git a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_prepare.html b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_prepare.html
index 60ed7bdf..f4e4ccf7 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/boardingpass_prepare.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/boardingpass_prepare.html
@@ -11,10 +11,11 @@
 <!-- {% total_items_purchased 4 as pdns_count %} -->
 {% ticket_type as ticket_type %}
 
+{% block head_title %}Boarding Pass Preparation{% endblock %}
+{% block page_title %}Boarding Pass Preparation{% endblock %}
+{% block page_lead %}Confirm the boarding pass is correct via the preview then send.{% endblock %}
 
 {% block body %}
-    <h1>BoardingPass Preparation</h1>
-
     <div class="row">
         <div class="col-md-4">
             <h2>Attendees</h2>
@@ -67,7 +68,7 @@
                 {% include "regidesk/_bp_prepare_help.html" %}
 
                 <button type="submit" class="btn btn-primary">Send {{ attendees|length }} Email{{ attendees|length|pluralize }}</button>
-                <a class="btn" href="{% url "regidesk:boarding_overview" %}">Cancel</a>
+                <a class="btn btn-secondary" href="{% url "regidesk:boarding_overview" %}">Cancel</a>
             </form>
         </div>
     </form>
diff --git a/vendor/regidesk/regidesk/templates/regidesk/ci_code_404.html b/vendor/regidesk/regidesk/templates/regidesk/ci_code_404.html
index 6f9e8ebc..b37ef15e 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/ci_code_404.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/ci_code_404.html
@@ -1,11 +1,10 @@
 {% extends "regidesk/base.html" %}
 
-
-{% block header_title %}
-   <h3>404 code not found</h3>
-{% endblock %}
+{% block head_title %}Boarding Pass Unavailable{% endblock %}
+{% block page_title %}Boarding Pass Unavailable{% endblock %}
+{% block page_lead %}The provided code could not be found.{% endblock %}
 
 {% block body %}
-    <a type=button" class="btn btn-primary btn-lg" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
-    <a type=button" class="btn btn-primary btn-lg pull-right" href="{% url 'regidesk:boarding_overview' %}">Go to overview</a>
+    <a type=button" class="btn btn-primary" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
+    <a type=button" class="btn btn-secondary" href="{% url 'regidesk:boarding_overview' %}">Go to overview page</a>
 {% endblock %}
diff --git a/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html b/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
index c44b43a2..6ba69af1 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/ci_landing.html
@@ -1,49 +1,43 @@
 {% extends "regidesk/base.html" %}
 {% load static %}
-{% block header_title %}
-<h1>Boarding pass lookup</h1>
-<p>Please scan or enter boarding pass code and click "Look Up"</p>
-{% endblock %}
+
+{% block head_title %}Boarding Pass Lookup{% endblock %}
+{% block page_title %}Boarding Pass Lookup{% endblock %}
+{% block page_lead %}Please scan QR Code, or enter boarding pass code, and click submit. <a href="{% url 'regidesk:boarding_overview' %}">Go to overview (search)</a>{% endblock %}
+
 {% block extra_head %}
 <script type="text/javascript" src="{% static 'js/instascan.min.js' %}"></script>
 {% endblock %}
 
 {% block content %}
 <div class="row">
-    <div class="col-12">
-        <h2>Check-in</h2>
-        <p>Please scan QR Code or enter it below</p>
-    </div>
-</div>
+    <div class="col-lg-6">
+        <p><strong id="note"></strong></p>
+        <video id="preview" autoplay style=" height: 400px;"></video>
 
-<div class="row">
-
-<div class="col-lg-6">
-    <p><strong id="note"></strong></p>
-    <video id="preview"" autoplay style=" height: 400px;"></video>
-
-    <p>Select camera:</p>
-    <ul id="camera-list" class="list-group">
-        <li class="list-group-item active" aria-current="true">No camera found</li>
-    </ul>
-</div>
-
-<div class="col-lg-6">
-    <div id="code_div" class="form-group has-feedback has-error">
-        <label class="control-label" for="bpcode">Boarding Pass Code</label>
-        <input id="bptext" type="text" class="form-control" id="bpcode" placeholder="Code">
-        <span id="input_icon" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
-        <span id="help_ok" class="help-block" style="display: none;">Format appears OK</span>
-        <span id="help_ur" class="help-block" style="display: block;">Format doesn't match</span>
+        <div class="card border-dark" >
+            <div class="card-header">
+                Select camera
+            </div>
+            <ul id="camera-list" class="list-group list-group-flush">
+                <li class="list-group-item active" aria-current="true">No camera found</li>
+            </ul>
+        </div>
     </div>
-    <div>
-        <button id="bpredir" class="btn btn-primary">Submit</button>
-        <button id="clear" class="btn btn-danger">Clear</button>
+
+    <div class="col-lg-6">
+        <form id="bp-form" class="needs-validation" novalidate>
+            <div class="form-group">
+                <label for="bp-code">Boarding Pass Code</label>
+                <input type="text" class="form-control text-uppercase" id="bp-code" placeholder="Code" required pattern="^[A-Z0-9]{6}$">
+                <div class="invalid-feedback">
+                    Please provide a valid code (6 alphanumeric characters).
+                </div>
+            </div>
+            <button id="bp-redir" class="btn btn-primary" type="submit">Submit</button>
+            <button id="bp-clear" class="btn btn-danger">Clear</button>
+        </form>
     </div>
-    <div class="py-5">
-        <a href="{% url 'regidesk:boarding_overview' %}">Overview (Search page)</a>
-    </div>
-</div>
 </div>
 
 <script type="text/javascript">
@@ -129,32 +123,32 @@
 </script>
 
 <script type="text/javascript">
-    var code_div = document.getElementById("code_div");
-    var icon = document.getElementById("input_icon");
-    var tb = document.getElementById("bptext");
-    var ok = document.getElementById("help_ok");
-    var unk = document.getElementById("help_ur");
-    var re = new RegExp('^[A-Z0-9]{6}$');
-    document.getElementById("bpredir").onclick = function () {
-        location.href = tb.value;
-    };
-    document.getElementById("clear").onclick = function () {
-        tb.value = "";
-    };
-    tb.oninput = function () {
-        is_good = re.test(tb.value);
-        if (is_good) {
-            code_div.className = "form-group has-feedback has-success";
-            icon.className = "glyphicon glyphicon-ok form-control-feedback";
-            ok.style.display = "block";
-            unk.style.display = "none";
+    let bpForm = document.getElementById("bp-form");
+    let codeInput = document.getElementById("bp-code");
+    let clearBtn = document.getElementById("bp-clear");
+
+    bpForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        if (bpForm.checkValidity() === false) {
+            event.stopPropagation();
+            bpForm.classList.add('was-validated');
         } else {
-            code_div.className = "form-group has-feedback has-error";
-            icon.className = "glyphicon glyphicon-remove form-control-feedback";
-            ok.style.display = "none";
-            unk.style.display = "block";
+            let checkinUrl = window.location.href + codeInput.value + '/';
+            window.location.href = checkinUrl;
         }
-        console.log(is_good);
-    };
+    }, false);
+
+    clearBtn.addEventListener('click', function (event) {
+        codeInput.value = "";
+    }, false);
+
+    codeInput.addEventListener('focusout', function(event) {
+        this.value = this.value.toLocaleUpperCase();
+        bpForm.checkValidity();
+        bpForm.classList.add('was-validated');
+    });
+
+    codeInput.focus();
 </script>
 {% endblock %}
diff --git a/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html b/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
index 246bed6b..9e9a3482 100644
--- a/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
+++ b/vendor/regidesk/regidesk/templates/regidesk/ci_overview.html
@@ -1,7 +1,8 @@
 {% extends "regidesk/base.html" %}
 
-{% block head_title %}Checkin - {{ user.attendee.attendeeprofilebase.attendeeprofile.name }}{% endblock head_title %}
-{% block page_title %}Pre-print check{% endblock page_title %}
+{% block head_title %}Boarding Pass - {{ user.attendee.attendeeprofilebase.attendeeprofile.name }}{% endblock %}
+{% block page_title %}Boarding Pass - Pre-print check{% endblock %}
+{% block page_lead %}Confirm the details of the attendee then check them in. <a href="{% url 'regidesk:check_in_scanner' %}">Go to scanning page</a>{% endblock %}
 
 {% block body %}
 {% load registrasion_tags %}
@@ -18,8 +19,6 @@
 {% items_purchased 5 as raffle_tickets %}
 {% ticket_type as ticket_type %}
 
-<a type="button" class="btn btn-outline-primary" href="{% url 'regidesk:check_in_scanner' %}">Return to scanning page</a>
-
 <div class="card my-3">
     <div class="card-header">Content Check</div>
     <div class="card-body">