1 | (function() {
|
2 | 'use strict';
|
3 |
|
4 | window.Ractive.controller('pl-login', function(component, data, el, config, done) {
|
5 |
|
6 | data.avatar = !data.avatar ? 'null' : data.avatar;
|
7 |
|
8 | var Login = component({
|
9 | plName: 'pl-login',
|
10 | data: $.extend(true, {
|
11 | show: false,
|
12 | top: 0,
|
13 | inForgot: false,
|
14 | texts: {
|
15 | username: 'Name',
|
16 | code: 'Code',
|
17 | userpassword: 'Password',
|
18 | userpasswordconfirm: 'Confirm password',
|
19 | forgotlink: 'I forgot my password',
|
20 | login: 'Back to login',
|
21 | forgottext: 'Submit your email and press <span class="key">ENTER</span> to receive a validation code in your mailbox.',
|
22 | forgotcodetext: 'Use your <strong>validation code</strong> and press <span class="key">ENTER</span> to get the possibility to change your password.',
|
23 | forgotpasswordtext: 'Enter your new password twice (to confirm) and press <span class="key">ENTER</span> to change your password.',
|
24 | forgotpasswordhelp: [
|
25 | 'When creating your password, remember the following:',
|
26 | '<ol>',
|
27 | '<li>It must not contain your name.</li>',
|
28 | '<li>It must contain one or more digits.</li>',
|
29 | '<li>It is recommended to mix lowercase and uppercase characters.</li>',
|
30 | '<li>It should be long over 7 characters.</li>',
|
31 | '</ol>'
|
32 | ].join('')
|
33 | }
|
34 | }, data)
|
35 | }),
|
36 | _$el = {
|
37 | window: $(window),
|
38 | login: $(Login.el),
|
39 | forgotTexts: $(Login.el).find('.pl-login-forgot-texts')
|
40 | };
|
41 |
|
42 | window.Ractive.Plumes.bindUses(Login, ['forgot']);
|
43 |
|
44 | window.Ractive.Plumes.bindTexts(Login);
|
45 |
|
46 | Login.observe('texts.username', function(value) {
|
47 | Login.set('texts.usernamePlaceholder', value);
|
48 | });
|
49 |
|
50 | Login.observe('texts.userpassword', function(value) {
|
51 | Login.set('texts.userpasswordPlaceholder', value);
|
52 | });
|
53 |
|
54 | function _refresh() {
|
55 | var messageHeight = _$el.message.outerHeight(true);
|
56 |
|
57 | Login.set('height', _$el.window.height() - (40 + messageHeight + 30));
|
58 |
|
59 | if (_$el.forgotTexts.length) {
|
60 | Login.set('helpTop', _$el.forgototTexts.position().top);
|
61 | }
|
62 | }
|
63 |
|
64 | function _focusName() {
|
65 | _$el.login.find('.name').focus();
|
66 | }
|
67 |
|
68 | function _modal(message, type, clearUsername, clearUserpassword, callback) {
|
69 | Login.set('inModal', true);
|
70 | Login.set('message', message);
|
71 | Login.set('messageType', type);
|
72 | Login.set('storyboardMessage', 'sb-message-1');
|
73 |
|
74 | setTimeout(function() {
|
75 | if (clearUsername) {
|
76 | Login.set('username', '');
|
77 | }
|
78 | if (clearUserpassword) {
|
79 | Login.set('userpassword', '');
|
80 | }
|
81 |
|
82 | if (type == 'success') {
|
83 | Login.set('texts.usernamePlaceholder', Login.get('texts.username'));
|
84 | Login.set('texts.userpasswordPlaceholder', Login.get('texts.userpassword'));
|
85 | }
|
86 |
|
87 | Login.set('storyboardMessage', 'sb-message-2');
|
88 | setTimeout(function() {
|
89 | Login.set('storyboardMessage', 'sb-message-3');
|
90 | setTimeout(function() {
|
91 | Login.set('storyboardMessage', 'sb-message-4');
|
92 | setTimeout(function() {
|
93 | Login.set('storyboardError', null);
|
94 | Login.set('inModal', false);
|
95 |
|
96 | if (callback) {
|
97 | callback();
|
98 | }
|
99 | }, 350);
|
100 | }, 250);
|
101 | }, 3000);
|
102 | }, 250);
|
103 | }
|
104 |
|
105 | function _error(message, clearUsername, clearUserpassword, callback) {
|
106 | _modal(message, 'error', clearUsername, clearUserpassword, callback);
|
107 | }
|
108 |
|
109 | function _success(message, callback) {
|
110 | _modal(message, 'success', true, true, callback);
|
111 | }
|
112 |
|
113 | function _submit() {
|
114 | if (Login.get('inForgotPassword')) {
|
115 | Login.fire('forgotPassword', {
|
116 | password: Login.get('username'),
|
117 | confirmPassword: Login.get('userpassword')
|
118 | });
|
119 | }
|
120 | else if (Login.get('inForgotCode')) {
|
121 | Login.fire('forgotCode', {
|
122 | code: Login.get('username')
|
123 | });
|
124 | }
|
125 | else if (Login.get('inForgot')) {
|
126 | Login.fire('forgot', {
|
127 | username: Login.get('username')
|
128 | });
|
129 | }
|
130 | else {
|
131 | Login.fire('login', {
|
132 | username: Login.get('username'),
|
133 | userpassword: Login.get('userpassword')
|
134 | });
|
135 | }
|
136 | }
|
137 |
|
138 | _$el.login.find('.pl-login-form-content .input').keypress(function(event) {
|
139 |
|
140 | if (event.which == 13) {
|
141 | _submit();
|
142 |
|
143 | event.preventDefault();
|
144 | event.stopPropagation();
|
145 | }
|
146 | });
|
147 |
|
148 | var lastObserveUsernameDate = new Date();
|
149 |
|
150 | Login.observe('username', function() {
|
151 | if (Login.get('inForgotCode') || Login.get('inForgotPassword')) {
|
152 | return;
|
153 | }
|
154 |
|
155 | lastObserveUsernameDate = new Date();
|
156 |
|
157 | var username = Login.get('username');
|
158 |
|
159 | setTimeout(function() {
|
160 | if (new Date().getTime() - lastObserveUsernameDate.getTime() >= 1000) {
|
161 | Login.fire('username', {
|
162 | username: username
|
163 | });
|
164 | }
|
165 | }, 1000);
|
166 | });
|
167 |
|
168 | Login.observe('avatar', function(value, oldValue) {
|
169 | if (oldValue == value) {
|
170 | return;
|
171 | }
|
172 | if (!value) {
|
173 | value = 'null';
|
174 | Login.set('avatar', value);
|
175 | if (oldValue == 'null') {
|
176 | return;
|
177 | }
|
178 | }
|
179 |
|
180 | Login.set('oldAvatar', oldValue);
|
181 | setTimeout(function() {
|
182 | Login.set('oldAvatar', null);
|
183 | }, 650);
|
184 | });
|
185 |
|
186 | Login.on('teardown', function() {
|
187 | Login = null;
|
188 | _$el.window.off('resize', _resize);
|
189 | });
|
190 |
|
191 | function _close() {
|
192 | Login.fire('closed');
|
193 |
|
194 | if (Login && !Login.shouldDestroy) {
|
195 | Login.teardown();
|
196 | }
|
197 | }
|
198 |
|
199 | Login.on('logged', function(text) {
|
200 | var ScreenMessage = Login.findChild('name', 'pl-screen-message');
|
201 | ScreenMessage.fire('closeTitle');
|
202 |
|
203 | Login.set('storyboard', 'sb-hide-1');
|
204 |
|
205 | setTimeout(function() {
|
206 | Login.set('storyboard', 'sb-hide-2');
|
207 |
|
208 | setTimeout(function() {
|
209 | Login.set('storyboard', 'sb-hide-3');
|
210 |
|
211 | setTimeout(function() {
|
212 |
|
213 | if (text) {
|
214 | ScreenMessage.fire('play', {
|
215 | message: text,
|
216 | done: function() {
|
217 | _close();
|
218 | }
|
219 | });
|
220 | }
|
221 | else {
|
222 | _close();
|
223 | }
|
224 | }, 150);
|
225 | }, 400);
|
226 | }, 350);
|
227 | });
|
228 |
|
229 | Login.on('close', _close);
|
230 |
|
231 | Login.on('error', function(args) {
|
232 | args = $.extend(true, {
|
233 | message: 'You have an error in your credentials.',
|
234 | clearUsername: false,
|
235 | clearUserpassword: true
|
236 | }, args || {});
|
237 |
|
238 | _error(args.message, args.clearUsername, args.clearUserpassword, _focusName);
|
239 | });
|
240 |
|
241 | Login.on('displayForgot', function() {
|
242 | _refresh();
|
243 | Login.set('inForgot', true);
|
244 | Login.fire('enterForgot');
|
245 |
|
246 | setTimeout(_focusName);
|
247 | });
|
248 |
|
249 | Login.on('openHelp', function() {
|
250 | Login.set('inHelp', true);
|
251 | setTimeout(_focusName);
|
252 | });
|
253 |
|
254 | Login.on('displayLogin', function() {
|
255 | var inForgot = Login.get('inForgot'),
|
256 | inForgotCode = Login.get('inForgotCode'),
|
257 | inForgotPassword = Login.get('inForgotPassword');
|
258 |
|
259 | if (inForgotCode || inForgotPassword) {
|
260 | Login.set('username', '');
|
261 | Login.set('userpassword', '');
|
262 | }
|
263 |
|
264 | Login.set('inHelp', false);
|
265 | Login.set('inForgot', false);
|
266 | Login.set('inForgotCode', false);
|
267 | Login.set('inForgotPassword', false);
|
268 | Login.set('texts.usernamePlaceholder', Login.get('texts.username'));
|
269 | Login.set('texts.userpasswordPlaceholder', Login.get('texts.userpassword'));
|
270 |
|
271 | if (inForgotCode) {
|
272 | Login.fire('exitForgotCode');
|
273 | }
|
274 |
|
275 | if (inForgotPassword) {
|
276 | Login.fire('exitForgotPassword');
|
277 | }
|
278 |
|
279 | if (inForgot) {
|
280 | Login.fire('exitForgot');
|
281 | }
|
282 |
|
283 | setTimeout(_focusName);
|
284 | });
|
285 |
|
286 | Login.on('forgotSuccess', function() {
|
287 | Login.set('inForgotCode', true);
|
288 | Login.set('username', '');
|
289 | Login.set('texts.usernamePlaceholder', Login.get('texts.code'));
|
290 |
|
291 | Login.fire('enterForgotCode');
|
292 |
|
293 | setTimeout(_focusName);
|
294 | });
|
295 |
|
296 | Login.on('forgotError', function(args) {
|
297 | args = $.extend(true, {
|
298 | message: 'This email address doesn\'t exist.',
|
299 | clearUsername: false,
|
300 | clearUserpassword: false
|
301 | }, args || {});
|
302 |
|
303 | _error(args.message, args.clearUsername, args.clearUserpassword, _focusName);
|
304 | });
|
305 |
|
306 | Login.on('forgotCodeSuccess', function() {
|
307 | Login.set('inForgotCode', false);
|
308 | Login.set('inForgotPassword', true);
|
309 | Login.set('username', '');
|
310 | Login.set('texts.usernamePlaceholder', Login.get('texts.userpassword'));
|
311 | Login.set('userpassword', '');
|
312 | Login.set('texts.userpasswordPlaceholder', Login.get('texts.userpasswordconfirm'));
|
313 |
|
314 | Login.fire('enterForgotPassword');
|
315 |
|
316 | setTimeout(_focusName);
|
317 | });
|
318 |
|
319 | Login.on('forgotCodeError', function(args) {
|
320 | args = $.extend(true, {
|
321 | message: 'Code invalid.',
|
322 | clearUsername: true,
|
323 | clearUserpassword: false
|
324 | }, args || {});
|
325 |
|
326 | _error(args.message, args.clearUsername, args.clearUserpassword, _focusName);
|
327 | });
|
328 |
|
329 | Login.on('forgotPasswordSuccess', function(args) {
|
330 | args = $.extend(true, {
|
331 | message: 'New password registered.'
|
332 | }, args || {});
|
333 |
|
334 | _success(args.message, function() {
|
335 | Login.fire('displayLogin');
|
336 | });
|
337 | });
|
338 |
|
339 | Login.on('forgotPasswordError', function(args) {
|
340 | args = $.extend(true, {
|
341 | message: 'Passwords are invalid.',
|
342 | clearUsername: true,
|
343 | clearUserpassword: true
|
344 | }, args || {});
|
345 |
|
346 | _error(args.message, args.clearUsername, args.clearUserpassword, _focusName);
|
347 | });
|
348 |
|
349 | function _resize() {
|
350 | if (!Login) {
|
351 | return;
|
352 | }
|
353 |
|
354 | var storyboard = Login.get('storyboard');
|
355 |
|
356 | if (storyboard == 'sb-show-2' || storyboard == 'sb-show-3' || storyboard == 'sb-show-4') {
|
357 | _refresh();
|
358 | }
|
359 | }
|
360 |
|
361 | _$el.window.resize(_resize);
|
362 |
|
363 | Login.require().then(function() {
|
364 | var ScreenMessage = Login.findChild('name', 'pl-screen-message'),
|
365 | textQuestion = Login.get('texts.question');
|
366 |
|
367 | textQuestion = !textQuestion && textQuestion !== '' ? 'Who are you?' : textQuestion;
|
368 |
|
369 | ScreenMessage.fire('play', {
|
370 | message: textQuestion,
|
371 | lastLineToTitle: true,
|
372 | displayTextTime: 350,
|
373 | done: function() {
|
374 | _$el.message = $(ScreenMessage.el).find('.pl-screen-messages-message');
|
375 |
|
376 | var messageHeight = _$el.message.outerHeight(true);
|
377 |
|
378 | Login.set('top', _$el.message.offset().top + messageHeight - 1);
|
379 | Login.set('height', 1);
|
380 | Login.set('storyboard', 'sb-show-1');
|
381 |
|
382 | setTimeout(function() {
|
383 | Login.set('storyboard', 'sb-show-2');
|
384 | Login.set('top', 40 + messageHeight);
|
385 | _refresh();
|
386 |
|
387 | setTimeout(function() {
|
388 | Login.set('storyboard', 'sb-show-3');
|
389 |
|
390 | setTimeout(function() {
|
391 | _$el.login.find(!data.username ? '.name' : '.password').focus();
|
392 | Login.set('storyboard', 'sb-show-4');
|
393 | }, 450);
|
394 |
|
395 | }, 450);
|
396 | }, 650);
|
397 | }
|
398 | });
|
399 |
|
400 | done();
|
401 | });
|
402 |
|
403 | });
|
404 |
|
405 | })();
|