| 776 |
lars |
1 |
var ComponentsFormTools = function () {
|
|
|
2 |
|
|
|
3 |
var handleBootstrapMaxlength = function() {
|
|
|
4 |
$('#maxlength_defaultconfig').maxlength({
|
|
|
5 |
limitReachedClass: "label label-danger",
|
|
|
6 |
})
|
|
|
7 |
|
|
|
8 |
$('#maxlength_thresholdconfig').maxlength({
|
|
|
9 |
limitReachedClass: "label label-danger",
|
|
|
10 |
threshold: 20
|
|
|
11 |
});
|
|
|
12 |
|
|
|
13 |
$('#maxlength_alloptions').maxlength({
|
|
|
14 |
alwaysShow: true,
|
|
|
15 |
warningClass: "label label-success",
|
|
|
16 |
limitReachedClass: "label label-danger",
|
|
|
17 |
separator: ' out of ',
|
|
|
18 |
preText: 'You typed ',
|
|
|
19 |
postText: ' chars available.',
|
|
|
20 |
validate: true
|
|
|
21 |
});
|
|
|
22 |
|
|
|
23 |
$('#maxlength_textarea').maxlength({
|
|
|
24 |
limitReachedClass: "label label-danger",
|
|
|
25 |
alwaysShow: true
|
|
|
26 |
});
|
|
|
27 |
|
|
|
28 |
$('#maxlength_placement').maxlength({
|
|
|
29 |
limitReachedClass: "label label-danger",
|
|
|
30 |
alwaysShow: true,
|
|
|
31 |
placement: App.isRTL() ? 'top-right' : 'top-left'
|
|
|
32 |
});
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
var handlePasswordStrengthChecker = function () {
|
|
|
36 |
var initialized = false;
|
|
|
37 |
var input = $("#password_strength");
|
|
|
38 |
|
|
|
39 |
input.keydown(function () {
|
|
|
40 |
if (initialized === false) {
|
|
|
41 |
// set base options
|
|
|
42 |
input.pwstrength({
|
|
|
43 |
raisePower: 1.4,
|
|
|
44 |
minChar: 8,
|
|
|
45 |
verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
|
|
|
46 |
scores: [17, 26, 40, 50, 60]
|
|
|
47 |
});
|
|
|
48 |
|
|
|
49 |
// add your own rule to calculate the password strength
|
|
|
50 |
input.pwstrength("addRule", "demoRule", function (options, word, score) {
|
|
|
51 |
return word.match(/[a-z].[0-9]/) && score;
|
|
|
52 |
}, 10, true);
|
|
|
53 |
|
|
|
54 |
// set as initialized
|
|
|
55 |
initialized = true;
|
|
|
56 |
}
|
|
|
57 |
});
|
|
|
58 |
}
|
|
|
59 |
|
|
|
60 |
var handleUsernameAvailabilityChecker1 = function () {
|
|
|
61 |
var input = $("#username1_input");
|
|
|
62 |
|
|
|
63 |
$("#username1_checker").click(function (e) {
|
|
|
64 |
var pop = $(this);
|
|
|
65 |
|
|
|
66 |
if (input.val() === "") {
|
|
|
67 |
input.closest('.form-group').removeClass('has-success').addClass('has-error');
|
|
|
68 |
|
|
|
69 |
pop.popover('destroy');
|
|
|
70 |
pop.popover({
|
|
|
71 |
'placement': (App.isRTL() ? 'left' : 'right'),
|
|
|
72 |
'html': true,
|
|
|
73 |
'container': 'body',
|
|
|
74 |
'content': 'Please enter a username to check its availability.',
|
|
|
75 |
});
|
|
|
76 |
// add error class to the popover
|
|
|
77 |
pop.data('bs.popover').tip().addClass('error');
|
|
|
78 |
// set last poped popover to be closed on click(see App.js => handlePopovers function)
|
|
|
79 |
App.setLastPopedPopover(pop);
|
|
|
80 |
pop.popover('show');
|
|
|
81 |
e.stopPropagation(); // prevent closing the popover
|
|
|
82 |
|
|
|
83 |
return;
|
|
|
84 |
}
|
|
|
85 |
|
|
|
86 |
var btn = $(this);
|
|
|
87 |
|
|
|
88 |
btn.attr('disabled', true);
|
|
|
89 |
|
|
|
90 |
input.attr("readonly", true).
|
|
|
91 |
attr("disabled", true).
|
|
|
92 |
addClass("spinner");
|
|
|
93 |
|
|
|
94 |
$.post('../demo/username_checker.php', {
|
|
|
95 |
username: input.val()
|
|
|
96 |
}, function (res) {
|
|
|
97 |
btn.attr('disabled', false);
|
|
|
98 |
|
|
|
99 |
input.attr("readonly", false).
|
|
|
100 |
attr("disabled", false).
|
|
|
101 |
removeClass("spinner");
|
|
|
102 |
|
|
|
103 |
if (res.status == 'OK') {
|
|
|
104 |
input.closest('.form-group').removeClass('has-error').addClass('has-success');
|
|
|
105 |
|
|
|
106 |
pop.popover('destroy');
|
|
|
107 |
pop.popover({
|
|
|
108 |
'html': true,
|
|
|
109 |
'placement': (App.isRTL() ? 'left' : 'right'),
|
|
|
110 |
'container': 'body',
|
|
|
111 |
'content': res.message,
|
|
|
112 |
});
|
|
|
113 |
pop.popover('show');
|
|
|
114 |
pop.data('bs.popover').tip().removeClass('error').addClass('success');
|
|
|
115 |
} else {
|
|
|
116 |
input.closest('.form-group').removeClass('has-success').addClass('has-error');
|
|
|
117 |
|
|
|
118 |
pop.popover('destroy');
|
|
|
119 |
pop.popover({
|
|
|
120 |
'html': true,
|
|
|
121 |
'placement': (App.isRTL() ? 'left' : 'right'),
|
|
|
122 |
'container': 'body',
|
|
|
123 |
'content': res.message,
|
|
|
124 |
});
|
|
|
125 |
pop.popover('show');
|
|
|
126 |
pop.data('bs.popover').tip().removeClass('success').addClass('error');
|
|
|
127 |
App.setLastPopedPopover(pop);
|
|
|
128 |
}
|
|
|
129 |
|
|
|
130 |
}, 'json');
|
|
|
131 |
|
|
|
132 |
});
|
|
|
133 |
}
|
|
|
134 |
|
|
|
135 |
var handleUsernameAvailabilityChecker2 = function () {
|
|
|
136 |
$("#username2_input").change(function () {
|
|
|
137 |
var input = $(this);
|
|
|
138 |
|
|
|
139 |
if (input.val() === "") {
|
|
|
140 |
input.closest('.form-group').removeClass('has-error').removeClass('has-success');
|
|
|
141 |
$('.fa-check, fa-warning', input.closest('.form-group')).remove();
|
|
|
142 |
|
|
|
143 |
return;
|
|
|
144 |
}
|
|
|
145 |
|
|
|
146 |
input.attr("readonly", true).
|
|
|
147 |
attr("disabled", true).
|
|
|
148 |
addClass("spinner");
|
|
|
149 |
|
|
|
150 |
$.post('../demo/username_checker.php', {
|
|
|
151 |
username: input.val()
|
|
|
152 |
}, function (res) {
|
|
|
153 |
input.attr("readonly", false).
|
|
|
154 |
attr("disabled", false).
|
|
|
155 |
removeClass("spinner");
|
|
|
156 |
|
|
|
157 |
// change popover font color based on the result
|
|
|
158 |
if (res.status == 'OK') {
|
|
|
159 |
input.closest('.form-group').removeClass('has-error').addClass('has-success');
|
|
|
160 |
$('.fa-warning', input.closest('.form-group')).remove();
|
|
|
161 |
input.before('<i class="fa fa-check"></i>');
|
|
|
162 |
input.data('bs.popover').tip().removeClass('error').addClass('success');
|
|
|
163 |
} else {
|
|
|
164 |
input.closest('.form-group').removeClass('has-success').addClass('has-error');
|
|
|
165 |
$('.fa-check', input.closest('.form-group')).remove();
|
|
|
166 |
input.before('<i class="fa fa-warning"></i>');
|
|
|
167 |
|
|
|
168 |
input.popover('destroy');
|
|
|
169 |
input.popover({
|
|
|
170 |
'html': true,
|
|
|
171 |
'placement': (App.isRTL() ? 'left' : 'right'),
|
|
|
172 |
'container': 'body',
|
|
|
173 |
'content': res.message,
|
|
|
174 |
});
|
|
|
175 |
input.popover('show');
|
|
|
176 |
input.data('bs.popover').tip().removeClass('success').addClass('error');
|
|
|
177 |
|
|
|
178 |
App.setLastPopedPopover(input);
|
|
|
179 |
}
|
|
|
180 |
|
|
|
181 |
}, 'json');
|
|
|
182 |
|
|
|
183 |
});
|
|
|
184 |
}
|
|
|
185 |
|
|
|
186 |
return {
|
|
|
187 |
//main function to initiate the module
|
|
|
188 |
init: function () {
|
|
|
189 |
handleBootstrapMaxlength();
|
|
|
190 |
handlePasswordStrengthChecker();
|
|
|
191 |
handleUsernameAvailabilityChecker1();
|
|
|
192 |
handleUsernameAvailabilityChecker2();
|
|
|
193 |
}
|
|
|
194 |
};
|
|
|
195 |
|
|
|
196 |
}();
|
|
|
197 |
|
|
|
198 |
if (App.isAngularJsApp() === false) {
|
|
|
199 |
jQuery(document).ready(function() {
|
|
|
200 |
ComponentsFormTools.init(); // init metronic core componets
|
|
|
201 |
});
|
|
|
202 |
}
|