https://www.waveenergyscotland.co.uk/scripts/hie-forms.js?d=3175

1(function ($, window, document) {
2    // The $ is now locally scoped
3    $(function () {
4
5        //
6        // forms
7        //
8        function formValidation() { // #TODO - Could be promoted, but wait until the end as it is used in lots of places, but those places seem very account drived...
9            $('.m-form form').each(function () {
10                $(this).validate({
11                    focusInvalid: false,
12                    invalidHandler: function (form, validator) {
13
14                        if (!validator.numberOfInvalids())
15                            return;
16
17                        $('html, body').animate({
18                            scrollTop: $(validator.errorList[0].element).offset().top - 250
19                        }, 800);
20
21                    },
22                    errorPlacement: function (error, element) {
23                        error.appendTo($(element).parent());
24                    }
25                });
26
27                $('.m-form form button').on('click', function (e) {
28                    if (!$('.m-form form').valid()) {
29                        e.preventDefault();
30                    }
31                });
32            });
33
34
35            $('.e-reveal').on('click',
36                function () {
37                    if ($(this).hasClass('active')) {
38                        $(this).removeClass('active');
39                        $(this).siblings('input').attr('type', 'password');
40                    } else {
41                        $(this).addClass('active');
42                        $(this).siblings('input').attr('type', 'text');
43                    }
44                });
45        }
46        function myHieProfileForm() { // #TODO : maybe move to a forms.js type thing?
47
48            // Get support options when updating & registering for a MyHIE profile
49            supportSelections = [];
50            if ($('input:checkbox[name="OrganisationTypeSelections"]:checked').val() !== '') {
51                supportSelections.push($('#currentSupportSelections').val());
52                getSupportOptions(supportSelections);
53            }
54
55            // Show & hide organisation options when updating & registering for a MyHIE profile
56            if ($('input:checkbox[name="OrganisationTypeSelections"]:checked').val() !== ''
57                && $('input:checkbox[name="OrganisationTypeSelections"]:checked').val() == '16420') {
58                $('#OrganisationSizeOptions').show();
59                $('#OrganisationName').show();
60            }
61
62            $('input:checkbox[name="OrganisationTypeSelections"]').change(function () {
63
64                if ($('input:checkbox[name="OrganisationTypeSelections"]:checked').val() == '16420') {
65                    $('#OrganisationSizeOptions').show();
66                    $('#OrganisationName').show();
67                }
68                else {
69                    $('#OrganisationSizeOptions').hide();
70                    $('#OrganisationName').hide();
71                }
72
73                // Update support options
74                getSupportOptions(supportSelections);
75
76            });
77        }
78        function umbracoFormLoadCushion() { // #TODO : this should only go where Umbraco forms appears...
79
80            var fileUploads = [].slice.call(document.querySelectorAll("input[type='file']"));
81            if (document.querySelector('input[data-form-upload-total-upload-restriction]') === null) {
82                return;
83            }
84
85            if (!window.FileReader || fileUploads == undefined || fileUploads.length < 1) {
86                return;
87            }
88
89            var maxUploadBytes = (document.querySelector('input[data-form-upload-total-upload-restriction]').dataset.formUploadTotalUploadRestriction) * 1024 * 1024;
90            var numberOfFiles = (document.querySelector('input[data-form-upload-max-file-count]').dataset.formUploadMaxFileCount);
91
92            maxUploadBytes = parseInt(maxUploadBytes);
93            numberOfFiles = parseInt(numberOfFiles);
94
95            console.log(maxUploadBytes, numberOfFiles);
96
97            fileUploads.forEach(function (fu) {
98                var maxUploadSizePerInput = maxUploadBytes / numberOfFiles;
99                var alertDiv = fu.parentNode.getElementsByClassName('alert-warning')[0];
100                var preUploadText = "File upload limit is " + formatBytes(maxUploadSizePerInput);
101                var tickImage = "<img src='/images/tick.png' style='width:16px;height:12px' />"
102                alertDiv.innerHTML = preUploadText;
103
104                fu.onchange = function () {
105                    alertDiv.innerHTML = preUploadText;
106                    var failedUploadText = "File upload limit is " + formatBytes(maxUploadSizePerInput) +
107                        ". Your file was " +
108                        formatBytes(fu.files[0].size) +
109                        ". Please try again with a smaller version.";
110                    if (!fu.files) {
111                        console.log("This browser doesn't seem to supp

111ort the `files` property of file inputs.");
112                    }
113                    else if (fu.files[0].size > maxUploadSizePerInput) {
114                        alertDiv.innerHTML = failedUploadText;
115                        alertDiv.className = "";
116                        alertDiv.classList.add('alert', 'alert-danger');
117                        fu.value = null;
118                        fu.files = null;
119                    }
120                    else {
121                        alertDiv.className = "";
122                        alertDiv.classList.add('alert', 'alert-success');
123                        alertDiv.innerHTML = tickImage + " Your file meets the size requirements";
124                    }
125                }
126
127            })
128
129        }
130        function umbracoFormSubmitLoader() {
131            if (document.querySelector('input[data-form-submit-loader]') !== null) {
132                var form = $('input[data-form-submit-loader]').closest('form');
133                $(form).on('submit', function (e) {
134                    window.onbeforeunload = function () {
135                        document.body.style.overflow = 'hidden';
136                        document.getElementById('animated-loading').style.display = 'flex';
137                    }
138                });
139            }
140        }
141        function getSupportOptions(supportSelections) {  // #TODO : maybe create an Accounts/Support.js thing?
142
143            orgTypeSelections = [];
144
145            $('input[name="OrganisationTypeSelections"]:checked').each(function () {
146                orgTypeSelections.push($(this).val());
147            });
148
149            $.ajax({

150                url: '/umbraco/api/SupportFinderApi/GetSupportOptions',
151                type: 'GET',
152                data: { currentPageId: currentPageId, orgTypeSelections: orgTypeSelections.join(","), supportSelections: supportSelections },
153                success: function (response) {
154
155                    $(".supportOptions_ddl").empty();
156                    $(".supportOptions_cbx").empty();
157
158                    var len = response.length;
159
160                    for (var i = 0; i < len; i++) {
161                        var value = response[i]['Value'];
162                        var text = response[i]['Text'];
163                        var checked = response[i]['Selected'] ? "checked" : "notchecked";
164
165                        $(".e-more.supportOptions_ddl").append("<div data-id=" + 'SupportSelection-' + value + " class='dropdown-checkbox " + checked + "'>" + text + "</div>");
166
167                        $(".e-checkboxes.supportOptions_cbx").append(
168                            "<div class='checkbox'>" +
169                            "<input type='checkbox' name='SupportSelections' id=" + 'SupportSelection-' + value + " value='" + value + "' " + checked + ">" +
170                            "<label for=" + 'SupportSelection-' + value + ">" + text + "</label>" +
171                            "</div>"
172                        );
173                    }
174
175                    $('<a href="#" class="btn btn-outline green">Close</a>').appendTo('.e-more.supportOptions_ddl');
176
177
178                },
179                error: function (response) {
180                    console.log(response);
181                }
182            });
183        }
184        function formatBytes(a, b) { 
185            if (b === undefined) { b = 2 }
186            if (0 === a) return "0 Bytes";
187            const c = 0 > b ? 0 : b, d = Math.floor(Math.log(a) / Math.log(1024));
188            return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + " " + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
189        }
190
191        myHieProfileForm();
192        umbracoFormLoadCushion();
193        umbracoFormSubmitLoader();
194
195        setTimeout(function () {
196            formValidation();
197        }, 500);
198
199    });
200
201    // Extend jQuery Validator to include required checkbox validator
202    (function ($) {
203        $.validator.unobtrusive.adapters.addBool("checkboxrequired", "required");
204    }(jQuery));
205
206    //
207    // Extend jQuery Validator to include password strength
208    //
209    $.validator.addMethod('strongpassword', function (value, element) {
210        const rules = [/[A-Z]{1}/g, /[a-z]{1}/g, /[0-9]{1}/g, /[^a-zA-Z\d]{1}/g, /.{8,}/g];
211        let isValid = true;
212
213        for (let i = 0; i < rules.length; i++) {
214            if (!value.match(rules[i])) {
215                isValid = false;
216                break;
217            }
218        }
219
220        return this.optional(element) || isValid;
221    }, 'Password must contain 1 uppercase letter, 1 lowercase letter, 1 number, 1 special character, and be at least 8 characters long');
222
223})(window.jQuery, window, document);