HDX-9438 & HDX-9420 build a warning for users navigating away from on…

…boarding flow
OCHA-DAP · Feb 9, 2024 · 6104bf2 · 6104bf2
1 parent 94e2638
commit 6104bf2
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/onboarding/confirm-page-leave.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/onboarding/confirm-page-leave.js
@@ -0,0 +1,31 @@
+$(document).ready(function () {
+  var shouldPreventBeforeUnload = false;
+  var requiredInputs = $('#user-info-form input[required]');
+
+  function checkInputs() {
+    requiredInputs.each(function() {
+      if ($(this).val().trim() !== '') {
+        shouldPreventBeforeUnload = true;
+        return false;
+      }
+    });
+  }
+
+  $(window).on('beforeunload', function (e) {
+    if (shouldPreventBeforeUnload) {
+      e.preventDefault();
+      e.returnValue = '';
+    }
+  });
+
+  $('#user-info-cancel-button, #user-info-submit-button').on('click', function () {
+    shouldPreventBeforeUnload = false;
+  });
+
+  requiredInputs.on('input', function () {
+    shouldPreventBeforeUnload = false;
+    checkInputs();
+  });
+
+  checkInputs();
+});
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/webassets.yml
@@ -124,6 +124,7 @@ hdx-onboarding-scripts:
   output: ckanext-hdx_theme/%(version)s_hdx-onboarding-scripts.js
   contents:
     - onboarding/came-from-input.js
+    - onboarding/confirm-page-leave.js
 
 search-scripts:
   <<: *common-js

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/onboarding/user_info.py b/ckanext-hdx_theme/ckanext/hdx_theme/helpers/ui_constants/onboarding/user_info.py
@@ -25,7 +25,7 @@
     'INPUT_PASSWORD2_PLACEHOLDER': '''Re-enter your password''',
     'INPUT_PASSWORD2_ERROR': '''Passwords must be valid and match''',
 
-    'CHECKBOX_TERMS_OF_SERVICE': '''I have read and accepted the <a href="{0}" title="HDX Terms of Service">HDX Terms of Service</a>''',
+    'CHECKBOX_TERMS_OF_SERVICE': '''I have read and accepted the <a href="{0}" target="_blank" title="HDX Terms of Service">HDX Terms of Service</a>''',
     'CHECKBOX_TERMS_OF_SERVICE_ERROR': '''Please accept the terms of service to continue''',
     'CHECKBOX_NEWSLETTER': '''Do you want to receive email updates from the Centre for Humanitarian Data about HDX features and events?''',
 

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/bem.blocks/form_button.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/bem.blocks/form_button.html
@@ -2,6 +2,7 @@
   {% if not type == 'href' %}
     <button
             class="form-button__btn btn{% if button_classes %} {{ button_classes|join(' ') }}{% endif %}"
+            {% if button_id %}id="{{ button_id }}"{% endif %}
             type="{{ type }}"
             {% if data_attributes %}{% for key, value in data_attributes.items() %}data-{{ key }}="{{ value }}"
             {% endfor %}{% endif %}
@@ -10,6 +11,7 @@
     <a
             href="{{ url }}"
             class="form-button__btn btn{% if button_classes %} {{ button_classes|join(' ') }}{% endif %}"
+            {% if button_id %}id="{{ button_id }}"{% endif %}
             title="{{ _(title) }}"
             {% if data_attributes %}{% for key, value in data_attributes.items() %}data-{{ key }}="{{ value }}"
             {% endfor %}{% endif %}

diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/onboarding/signup/user-info.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/onboarding/signup/user-info.html
@@ -30,7 +30,7 @@
     <div class="row">
       <div class="col-12 col-md-6 mx-auto">
         {{ h.snippet('bem.blocks/form_info.html', message=CONST.MANDATORY_HELP, spacing_class="mb-4") }}
-        <form method="post" action="{{ h.url_for('hdx_user_onboarding.user-info') }}" data-module="hdx-form-validator">
+        <form method="post" action="{{ h.url_for('hdx_user_onboarding.user-info') }}" id="user-info-form" data-module="hdx-form-validator">
           {{ h.csrf_input() }}
           <input type="hidden" name="came_from" id="came-from-input" value="">
           {{ h.snippet('bem.blocks/input_field.html', type="text", required=True, label=CONST.INPUT_FULLNAME_LABEL, name="fullname", value=data.get('fullname'), errors=errors.get('fullname'), placeholder=CONST.INPUT_FULLNAME_PLACEHOLDER, spacing_class="mb-3") }}
@@ -46,9 +46,9 @@
               <div class="g-recaptcha" data-sitekey="{{ g.recaptcha_publickey }}"></div>
             </div>
           {% endif %}
-          {{ h.snippet('bem.blocks/form_button.html', type="submit", title=CONST.BUTTON_SUBMIT, button_classes=["form-button__btn_font-size_big", "btn-primary", "btn-lg", "d-block", "w-100"]) }}
+          {{ h.snippet('bem.blocks/form_button.html', type="submit", title=CONST.BUTTON_SUBMIT, button_id="user-info-submit-button", button_classes=["form-button__btn_font-size_big", "btn-primary", "btn-lg", "d-block", "w-100"]) }}
           <div class="text-center mb-5">
-            {{ h.snippet('bem.blocks/form_button.html', type="href", url=h.url_for('home.index'), title=CONST.BUTTON_CANCEL, button_classes=["form-button__btn_font-size_medium", "btn-link"], container_classes=["mt-1"]) }}
+            {{ h.snippet('bem.blocks/form_button.html', type="href", url=h.url_for('home.index'), title=CONST.BUTTON_CANCEL, button_id="user-info-cancel-button", button_classes=["form-button__btn_font-size_medium", "btn-link"], container_classes=["mt-1"]) }}
           </div>
         </form>
       </div>