7302997b140c9f4a3ff41654be53ceda7cc793bd
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / resources / login.js
1 var isWebKit = document.childNodes && !document.all && !navigator.taintEnabled;
2
3 TYPO3BackendLogin = {
4
5 /**
6 * Initializing the Login Interface
7 */
8 start: function() {
9 TYPO3BackendLogin.preloadImages();
10 TYPO3BackendLogin.registerEventListeners();
11 TYPO3BackendLogin.setVisibilityOfClearIcon($('t3-username'), $('t3-username-clearIcon'));
12 TYPO3BackendLogin.setVisibilityOfClearIcon($('t3-password'), $('t3-password-clearIcon'));
13 TYPO3BackendLogin.checkCookieSupport();
14 TYPO3BackendLogin.checkForLogintypeCookie();
15 TYPO3BackendLogin.checkForInterfaceCookie();
16 $('t3-username').activate();
17 },
18
19 /**
20 * Preload the login process image, so it can show up immediatelly after submitting
21 */
22 preloadImages: function() {
23 var image = new Image();
24 image.src = 'sysext/t3skin/icons/login-submit-progress.gif';
25 },
26
27 /**
28 * Registers listeners for the Login Interface (e.g. to toggle OpenID and Default login)
29 */
30 registerEventListeners: function() {
31 Event.observe(
32 $('t3-login-switchToOpenId'),
33 'click',
34 TYPO3BackendLogin.switchToOpenId
35 );
36 Event.observe(
37 $('t3-login-switchToDefault'),
38 'click',
39 TYPO3BackendLogin.switchToDefault
40 );
41 Event.observe(
42 $('t3-login-submit'),
43 'click',
44 TYPO3BackendLogin.showLoginProcess
45 );
46
47 // The Interface selector is not always present, so this check is needed
48 if (Object.isElement($('t3-interfaceselector'))) {
49 TYPO3BackendLogin.observeEvents(
50 $('t3-interfaceselector'),
51 ['change', 'blur'],
52 TYPO3BackendLogin.interfaceSelectorChanged
53 );
54 }
55
56 $A(['t3-username', 't3-password']).each(function(value) {
57 Event.observe(
58 $(value + '-clearIcon'),
59 'click',
60 function() { TYPO3BackendLogin.clearInputField($(value)); }
61 );
62 TYPO3BackendLogin.observeEvents(
63 $(value),
64 ['focus', 'blur', 'keypress'],
65 function() { TYPO3BackendLogin.setVisibilityOfClearIcon($(value), $(value + '-clearIcon')); }
66 );
67 if (!isWebKit) {
68 Event.observe(
69 $(value),
70 'keypress',
71 function(event) { TYPO3BackendLogin.showCapsLockWarning($(value + '-alert-capslock'), event); }
72 );
73 }
74 })
75 },
76
77 /**
78 * Wrapper for Event.observe that takes an array with events, instead of only one event
79 */
80 observeEvents: function(element, events, handler) {
81 events.each(function(event) {
82 Event.observe(
83 element,
84 event,
85 handler
86 );
87 });
88 },
89
90 /**
91 * Shows up the clear icon for a field which is not empty, and hides it otherwise
92 */
93 setVisibilityOfClearIcon: function(formField, clearIcon) {
94 if (formField.value) {
95 clearIcon.show();
96 } else {
97 clearIcon.hide();
98 }
99 },
100
101 /**
102 * To prevent its unintented use when typing the password, the user is warned when Capslock is on
103 */
104 showCapsLockWarning: function(alertIcon, event) {
105 if (isCapslock(event)) {
106 alertIcon.show();
107 } else {
108 alertIcon.hide();
109 }
110 },
111
112 /**
113 * Clears an input field and sets focus to it
114 */
115 clearInputField: function(formField) {
116 formField.value = '';
117 formField.focus();
118 },
119
120 /**
121 * Change to Interface for OpenId login and save the selection to a cookie
122 */
123 switchToOpenId: function() {
124 $('t3-login-label-username').hide();
125 $('t3-login-label-openId').show();
126 $('t3-login-openIdLogo').show();
127
128 $('t3-login-form-footer-default').hide();
129 $('t3-login-form-footer-openId').show();
130 $('t3-login-password-section').hide();
131
132 if ($('t3-login-interface-section')) {
133 $('t3-login-interface-section').hide();
134 }
135
136 $('t3-username').activate();
137
138 TYPO3BackendLogin.setLogintypeCookie('openid');
139 },
140
141 /**
142 * Change to Interface for default login and save the selection to a cookie
143 */
144 switchToDefault: function() {
145 $('t3-login-label-username').show();
146 $('t3-login-label-openId').hide();
147 $('t3-login-openIdLogo').hide();
148
149 $('t3-login-form-footer-default').show();
150 $('t3-login-form-footer-openId').hide();
151 $('t3-login-password-section').show();
152
153 if ($('t3-login-interface-section')) {
154 $('t3-login-interface-section').show();
155 }
156
157 $('t3-username').activate();
158
159 TYPO3BackendLogin.setLogintypeCookie('username');
160 },
161
162 /**
163 * Checks browser's cookie support
164 */
165 checkCookieSupport: function() {
166 Ext.util.Cookies.set('typo3-login-cookiecheck', true);
167 cookieEnabled = Ext.util.Cookies.get('typo3-login-cookiecheck');
168
169 if (!cookieEnabled) {
170 TYPO3BackendLogin.showCookieWarning()
171 }
172
173 Ext.util.Cookies.clear('typo3-login-cookiecheck');
174 },
175
176 /**
177 * Hides input fields and shows cookie warning
178 */
179 showCookieWarning: function() {
180 Ext.get('t3-login-form-fields').setVisibilityMode(Ext.Element.DISPLAY).hide();
181 Ext.get('t3-nocookies-error').show();
182 },
183
184 /**
185 * Hides cookie warning and shows input fields
186 */
187 hideCookieWarning: function() {
188 Ext.get('t3-nocookies-error').setVisibilityMode(Ext.Element.DISPLAY).hide();
189 Ext.get('t3-login-form-fields').show();
190 },
191
192 /**
193 * Store a login type in a cookie to save it for future visits
194 * Login type means wether you login by username/password or OpenID
195 */
196 setLogintypeCookie: function(type) {
197 var now = new Date();
198 var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
199 document.cookie = 'typo3-login-method=' + type + '; expires=' + expires.toGMTString() + ';';
200 },
201
202 /**
203 * Check if a login type was stored in a cookie and change the Interface accordingly
204 */
205 checkForLogintypeCookie: function() {
206 if(document.cookie.indexOf('typo3-login-method=openid') >- 1) {
207 TYPO3BackendLogin.switchToOpenId();
208 }
209 },
210
211 /**
212 * Store the new selected Interface in a cookie to save it for future visits
213 */
214 interfaceSelectorChanged: function(event) {
215 var now = new Date();
216 var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
217 document.cookie = 'typo3-login-interface=' + $('t3-interfaceselector').getValue() + '; expires=' + expires.toGMTString() + ';';
218 },
219
220 /**
221 * Check if an interface was stored in a cookie and preselect it in the select box
222 */
223 checkForInterfaceCookie: function() {
224 if (Object.isElement($('t3-interfaceselector'))) {
225 var posStart = document.cookie.indexOf('typo3-login-interface=');
226 if (posStart != -1) {
227 var selectedInterface = document.cookie.substr(posStart + 22);
228 selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
229 }
230 $('t3-interfaceselector').setValue(selectedInterface);
231 }
232 },
233
234 /**
235 * Hide all form fields and show a progress message and icon
236 */
237 showLoginProcess: function() {
238 if ($('t3-login-error')) {
239 $('t3-login-error').hide();
240 }
241
242 $('t3-login-form-fields').hide();
243 $('t3-nocookies-error').hide();
244
245 // setting a fixed height (based on the current, calculated height of the browser) for
246 // the box with the login form, so it doesn't jump around when the spinner is shown
247 var loginBoxHeight = $('t3-login-form-fields').getHeight();
248 $('t3-login-process').setStyle({height: loginBoxHeight + 'px'}).show();
249 }
250 };
251
252 Ext.onReady(TYPO3BackendLogin.start, TYPO3BackendLogin);