30406520b430431ab49edf12e762a223dfe93073
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Public / JavaScript / 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', 'openid_url']).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-openIdLogo').show();
125
126 $('t3-login-form-footer-default').hide();
127 $('t3-login-form-footer-openId').show();
128 $('t3-login-username-section').hide();
129 $('t3-login-password-section').hide();
130 $('t3-login-openid_url-section').show();
131
132 if ($('t3-login-interface-section')) {
133 $('t3-login-interface-section').hide();
134 }
135
136 $('openid_url').activate();
137 if ($('t3-username').getValue() == '') {
138 $('t3-username').setValue('openid_url');
139 }
140
141 TYPO3BackendLogin.setLogintypeCookie('openid');
142 },
143
144 /**
145 * Change to Interface for default login and save the selection to a cookie
146 */
147 switchToDefault: function() {
148 $('t3-login-openIdLogo').hide();
149
150 if ($('t3-username').getValue() == 'openid_url') {
151 $('t3-username').setValue('');
152 }
153
154 $('t3-login-form-footer-default').show();
155 $('t3-login-form-footer-openId').hide();
156 $('t3-login-username-section').show();
157 $('t3-login-password-section').show();
158 $('t3-login-openid_url-section').hide();
159
160 if ($('t3-login-interface-section')) {
161 $('t3-login-interface-section').show();
162 }
163
164 $('t3-username').activate();
165
166 TYPO3BackendLogin.setLogintypeCookie('username');
167 },
168
169 /**
170 * Checks browser's cookie support
171 */
172 checkCookieSupport: function() {
173 Ext.util.Cookies.set('typo3-login-cookiecheck', true);
174 cookieEnabled = Ext.util.Cookies.get('typo3-login-cookiecheck');
175
176 if (!cookieEnabled) {
177 TYPO3BackendLogin.showCookieWarning()
178 }
179
180 Ext.util.Cookies.clear('typo3-login-cookiecheck');
181 },
182
183 /**
184 * Hides input fields and shows cookie warning
185 */
186 showCookieWarning: function() {
187 Ext.get('t3-login-form-fields').setVisibilityMode(Ext.Element.DISPLAY).hide();
188 Ext.get('t3-nocookies-error').show();
189 },
190
191 /**
192 * Hides cookie warning and shows input fields
193 */
194 hideCookieWarning: function() {
195 Ext.get('t3-nocookies-error').setVisibilityMode(Ext.Element.DISPLAY).hide();
196 Ext.get('t3-login-form-fields').show();
197 },
198
199 /**
200 * Store a login type in a cookie to save it for future visits
201 * Login type means wether you login by username/password or OpenID
202 */
203 setLogintypeCookie: function(type) {
204 var now = new Date();
205 var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
206 document.cookie = 'typo3-login-method=' + type + '; expires=' + expires.toGMTString() + ';';
207 },
208
209 /**
210 * Check if a login type was stored in a cookie and change the Interface accordingly
211 */
212 checkForLogintypeCookie: function() {
213 if(document.cookie.indexOf('typo3-login-method=openid') >- 1) {
214 TYPO3BackendLogin.switchToOpenId();
215 }
216 },
217
218 /**
219 * Store the new selected Interface in a cookie to save it for future visits
220 */
221 interfaceSelectorChanged: function(event) {
222 var now = new Date();
223 var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
224 document.cookie = 'typo3-login-interface=' + $('t3-interfaceselector').getValue() + '; expires=' + expires.toGMTString() + ';';
225 },
226
227 /**
228 * Check if an interface was stored in a cookie and preselect it in the select box
229 */
230 checkForInterfaceCookie: function() {
231 if (Object.isElement($('t3-interfaceselector'))) {
232 var posStart = document.cookie.indexOf('typo3-login-interface=');
233 if (posStart != -1) {
234 var selectedInterface = document.cookie.substr(posStart + 22);
235 selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
236 }
237 $('t3-interfaceselector').setValue(selectedInterface);
238 }
239 },
240
241 /**
242 * Hide all form fields and show a progress message and icon
243 */
244 showLoginProcess: function() {
245 if ($('t3-login-error')) {
246 $('t3-login-error').hide();
247 }
248
249 $('t3-login-form-fields').hide();
250 $('t3-nocookies-error').hide();
251
252 // setting a fixed height (based on the current, calculated height of the browser) for
253 // the box with the login form, so it doesn't jump around when the spinner is shown
254 var loginBoxHeight = $('t3-login-form-fields').getHeight();
255 $('t3-login-process').setStyle({height: loginBoxHeight + 'px'}).show();
256 }
257 };
258
259 Ext.onReady(TYPO3BackendLogin.start, TYPO3BackendLogin);