diff --git a/ephios/core/templates/core/event_form.html b/ephios/core/templates/core/event_form.html
index 50781a06a..5771195e9 100644
--- a/ephios/core/templates/core/event_form.html
+++ b/ephios/core/templates/core/event_form.html
@@ -64,3 +64,4 @@ <h1>{% blocktranslate with title=eventtype.title %}Create new {{ title }}{% endb
</div>
</form>
{% endblock %}
+
diff --git a/ephios/core/templates/core/eventtype_form.html b/ephios/core/templates/core/eventtype_form.html
index c5b864933..612f1a30b 100644
--- a/ephios/core/templates/core/eventtype_form.html
+++ b/ephios/core/templates/core/eventtype_form.html
@@ -19,4 +19,5 @@
{% endif %}
<button class="btn btn-primary" type="submit">{% translate "Save" %}</button>
</form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
diff --git a/ephios/core/templates/core/shift_form.html b/ephios/core/templates/core/shift_form.html
index cfc2d6772..8307db882 100644
--- a/ephios/core/templates/core/shift_form.html
+++ b/ephios/core/templates/core/shift_form.html
@@ -85,3 +85,4 @@ <h5 class="card-subtitle mb-2 text-muted">{% trans "Shift" %}</h5>
<script type="text/javascript" src="{% static "ephios/js/shift_form.js" %}"></script>
{% endblock %}
+
diff --git a/ephios/core/templates/core/userprofile_form.html b/ephios/core/templates/core/userprofile_form.html
index d680c645a..b28776439 100644
--- a/ephios/core/templates/core/userprofile_form.html
+++ b/ephios/core/templates/core/userprofile_form.html
@@ -64,7 +64,7 @@ <h3 class="card-title">{% translate "Qualifications" %}</h3>
</div>
{% endfor %}
</ul>
-
+
<input class="btn btn-secondary mt-2" type="button"
value="{% translate "Add qualification" %}"
data-formset-add>
@@ -104,3 +104,4 @@ <h3 class="card-title">{% translate "Qualifications" %}</h3>
<input type="submit" value="{% trans "Save" %}" class="btn btn-primary float-right">
</form>
{% endblock %}
+
diff --git a/ephios/static/areyousure/are-you-sure.js b/ephios/static/areyousure/are-you-sure.js
new file mode 100644
index 000000000..29d667dc4
--- /dev/null
+++ b/ephios/static/areyousure/are-you-sure.js
@@ -0,0 +1,180 @@
+(function($) {
+
+ $.fn.areYouSure = function(options) {
+
+ var settings = $.extend(
+ {
+ 'message' : 'You have unsaved changes!',
+ 'dirtyClass' : 'dirty',
+ 'change' : null,
+ 'silent' : false,
+ 'addRemoveFieldsMarksDirty' : false,
+ 'fieldEvents' : 'change keyup propertychange input',
+ 'fieldSelector': ":input:not(input[type=submit]):not(input[type=button])"
+ }, options);
+
+ var getValue = function($field) {
+ if ($field.hasClass('ays-ignore')
+ || $field.hasClass('aysIgnore')
+ || $field.attr('data-ays-ignore')
+ || $field.attr('name') === undefined) {
+ return null;
+ }
+
+ if ($field.is(':disabled')) {
+ return 'ays-disabled';
+ }
+
+ var val;
+ var type = $field.attr('type');
+ if ($field.is('select')) {
+ type = 'select';
+ }
+
+ switch (type) {
+ case 'checkbox':
+ case 'radio':
+ val = $field.is(':checked');
+ break;
+ case 'select':
+ val = '';
+ $field.find('option').each(function(o) {
+ var $option = $(this);
+ if ($option.is(':selected')) {
+ val += $option.val();
+ }
+ });
+ break;
+ default:
+ val = $field.val();
+ }
+
+ return val;
+ };
+
+ var storeOrigValue = function($field) {
+ $field.data('ays-orig', getValue($field));
+ };
+
+ var checkForm = function(evt) {
+
+ var isFieldDirty = function($field) {
+ var origValue = $field.data('ays-orig');
+ if (undefined === origValue) {
+ return false;
+ }
+ return (getValue($field) != origValue);
+ };
+
+ var $form = ($(this).is('form'))
+ ? $(this)
+ : $(this).parents('form');
+
+ // Test on the target first as it's the most likely to be dirty
+ if (isFieldDirty($(evt.target))) {
+ setDirtyStatus($form, true);
+ return;
+ }
+
+ $fields = $form.find(settings.fieldSelector);
+
+ if (settings.addRemoveFieldsMarksDirty) {
+ // Check if field count has changed
+ var origCount = $form.data("ays-orig-field-count");
+ if (origCount != $fields.length) {
+ setDirtyStatus($form, true);
+ return;
+ }
+ }
+
+ // Brute force - check each field
+ var isDirty = false;
+ $fields.each(function() {
+ var $field = $(this);
+ if (isFieldDirty($field)) {
+ isDirty = true;
+ return false; // break
+ }
+ });
+
+ setDirtyStatus($form, isDirty);
+ };
+
+ var initForm = function($form) {
+ var fields = $form.find(settings.fieldSelector);
+ $(fields).each(function() { storeOrigValue($(this)); });
+ $(fields).unbind(settings.fieldEvents, checkForm);
+ $(fields).bind(settings.fieldEvents, checkForm);
+ $form.data("ays-orig-field-count", $(fields).length);
+ setDirtyStatus($form, false);
+ };
+
+ var setDirtyStatus = function($form, isDirty) {
+ var changed = isDirty != $form.hasClass(settings.dirtyClass);
+ $form.toggleClass(settings.dirtyClass, isDirty);
+
+ // Fire change event if required
+ if (changed) {
+ if (settings.change) settings.change.call($form, $form);
+
+ if (isDirty) $form.trigger('dirty.areYouSure', [$form]);
+ if (!isDirty) $form.trigger('clean.areYouSure', [$form]);
+ $form.trigger('change.areYouSure', [$form]);
+ }
+ };
+
+ var rescan = function() {
+ var $form = $(this);
+ var fields = $form.find(settings.fieldSelector);
+ $(fields).each(function() {
+ var $field = $(this);
+ if (!$field.data('ays-orig')) {
+ storeOrigValue($field);
+ $field.bind(settings.fieldEvents, checkForm);
+ }
+ });
+ // Check for changes while we're here
+ $form.trigger('checkform.areYouSure');
+ };
+
+ var reinitialize = function() {
+ initForm($(this));
+ }
+
+ if (!settings.silent && !window.aysUnloadSet) {
+ window.aysUnloadSet = true;
+ $(window).bind('beforeunload', function() {
+ $dirtyForms = $("form").filter('.' + settings.dirtyClass);
+ if ($dirtyForms.length == 0) {
+ return;
+ }
+ // Prevent multiple prompts - seen on Chrome and IE
+ if (navigator.userAgent.toLowerCase().match(/msie|chrome/)) {
+ if (window.aysHasPrompted) {
+ return;
+ }
+ window.aysHasPrompted = true;
+ window.setTimeout(function() {window.aysHasPrompted = false;}, 900);
+ }
+ return settings.message;
+ });
+ }
+
+ return this.each(function(elem) {
+ if (!$(this).is('form')) {
+ return;
+ }
+ var $form = $(this);
+
+ $form.submit(function() {
+ $form.removeClass(settings.dirtyClass);
+ });
+ $form.bind('reset', function() { setDirtyStatus($form, false); });
+ // Add a custom events
+ $form.bind('rescan.areYouSure', rescan);
+ $form.bind('reinitialize.areYouSure', reinitialize);
+ $form.bind('checkform.areYouSure', checkForm);
+ initForm($form);
+ });
+ };
+ })(jQuery);
\ No newline at end of file
diff --git a/ephios/static/ephios/js/main.js b/ephios/static/ephios/js/main.js
index 56284afb1..4910408bd 100644
--- a/ephios/static/ephios/js/main.js
+++ b/ephios/static/ephios/js/main.js
@@ -9,6 +9,7 @@ function handleForms(elem) {
}).on("formAdded", "div", function (event) {
handleForms($(event.target));
});
+ $('form').trigger('reinitialize.areYouSure');
}
$(document).ready(function () {
@@ -40,6 +41,9 @@ $(document).ready(function () {
$('#unloading-spinner').removeClass("d-none")
});
}
+
+ // Confirm users wants to leave page with unsaved forms
+ $('form').areYouSure();
})
// Initialize the service worker
diff --git a/ephios/templates/base.html b/ephios/templates/base.html
index a8ee9699f..dbc22985b 100644
--- a/ephios/templates/base.html
+++ b/ephios/templates/base.html
@@ -55,6 +55,7 @@
<script type="text/javascript" src="{% static "django_select2/django_select2.js" %}"></script>
<script type="text/javascript" src="{% static "ephios/js/formset/formset.js" %}"></script>
<script type="text/javascript" src="{% static "ephios/js/main.js" %}"></script>
+ <script type="text/javascript" src="{% static "areyousure/are-you-sure.js" %}"></script>
<script type="text/javascript" src="{% statici18n LANGUAGE_CODE %}"></script>
{% block javascript %}{% endblock %}
{% endcompress %}