[TASK] Migrate EXT:backend Login.js and UserPassLogin.js to TypeScript 71/54371/9
authorFrank Naegler <frank.naegler@typo3.org>
Wed, 11 Oct 2017 22:05:42 +0000 (00:05 +0200)
committerAndreas Wolf <andreas.wolf@typo3.org>
Thu, 23 Nov 2017 08:26:35 +0000 (09:26 +0100)
Resolves: #82594
Resolves: #82608
Releases: master
Change-Id: Ibc3fce2983d5a193db17d8acc1c4dab2baee31db
Reviewed-on: https://review.typo3.org/54371
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Wolf <andreas.wolf@typo3.org>
Tested-by: Andreas Wolf <andreas.wolf@typo3.org>
Build/types/TYPO3/index.d.ts
typo3/sysext/backend/Resources/Private/TypeScript/Login.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Private/TypeScript/UserPassLogin.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/Login.js
typo3/sysext/backend/Resources/Public/JavaScript/UserPassLogin.js

index 92c7553..4d9053d 100644 (file)
@@ -75,3 +75,10 @@ declare module 'TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min' {
 }
 
 declare module 'cm/lib/codemirror';
+
+/**
+ * Required to make jQuery plugins "available" in TypeScript
+ */
+interface JQuery {
+  clearable(): JQuery;
+}
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/Login.ts b/typo3/sysext/backend/Resources/Private/TypeScript/Login.ts
new file mode 100644 (file)
index 0000000..bfab200
--- /dev/null
@@ -0,0 +1,171 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import 'bootstrap';
+import $ = require('jquery');
+import 'TYPO3/CMS/Backend/jquery.clearable';
+
+/**
+ * Module: TYPO3/CMS/Backend/Login
+ * JavaScript module for the backend login form
+ * @exports TYPO3/CMS/Backend/Login
+ *
+ * Class and file name do not match as the class was renamed, but to keep overrides in place, the filename has to stay!
+ */
+class BackendLogin {
+  public options: any;
+
+  constructor() {
+    this.options = {
+      error: '.t3js-login-error',
+      errorNoCookies: '.t3js-login-error-nocookies',
+      formFields: '.t3js-login-formfields',
+      interfaceField: '.t3js-login-interface-field',
+      loginForm: '#typo3-login-form',
+      submitButton: '.t3js-login-submit',
+      submitHandler: null,
+      useridentField: '.t3js-login-userident-field',
+    };
+
+    this.checkCookieSupport();
+    this.checkForInterfaceCookie();
+    this.initializeEvents();
+
+    // prevent opening the login form in the backend frameset
+    if (top.location.href !== location.href) {
+      top.location.href = location.href;
+    }
+  }
+
+  /**
+   * Hide all form fields and show a progress message and icon
+   */
+  public showLoginProcess = (): void => {
+    this.showLoadingIndicator();
+    $(this.options.error).addClass('hidden');
+    $(this.options.errorNoCookies).addClass('hidden');
+  }
+
+  /**
+   * Show the loading spinner in the submit button
+   */
+  public showLoadingIndicator = (): void => {
+    $(this.options.submitButton).button('loading');
+  }
+
+  /**
+   * Pass on to registered submit handler
+   *
+   * @param {Event} event
+   */
+  public handleSubmit= (event: Event): void => {
+    this.showLoginProcess();
+
+    if (typeof this.options.submitHandler === 'function') {
+      this.options.submitHandler(event);
+    }
+  }
+
+  /**
+   * Store the new selected Interface in a cookie to save it for future visits
+   */
+  public interfaceSelectorChanged = (): void => {
+    const now = new Date();
+    // cookie expires in one year
+    const expires = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365);
+    document.cookie = 'typo3-login-interface='
+      + $(this.options.interfaceField).val()
+      + '; expires=' + expires.toUTCString() + ';';
+  }
+
+  /**
+   * Check if an interface was stored in a cookie and preselect it in the select box
+   */
+  public checkForInterfaceCookie = (): void => {
+    if ($(this.options.interfaceField).length) {
+      const posStart = document.cookie.indexOf('typo3-login-interface=');
+      if (posStart !== -1) {
+        let selectedInterface = document.cookie.substr(posStart + 22);
+        selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
+        $(this.options.interfaceField).val(selectedInterface);
+      }
+    }
+  }
+
+  /**
+   * Hides input fields and shows cookie warning
+   */
+  public showCookieWarning = (): void => {
+    $(this.options.formFields).addClass('hidden');
+    $(this.options.errorNoCookies).removeClass('hidden');
+  }
+
+  /**
+   * Hides cookie warning and shows input fields
+   */
+  public hideCookieWarning = (): void => {
+    $(this.options.formFields).removeClass('hidden');
+    $(this.options.errorNoCookies).addClass('hidden');
+  }
+
+  /**
+   * Checks browser's cookie support
+   * see http://stackoverflow.com/questions/8112634/jquery-detecting-cookies-enabled
+   */
+  public checkCookieSupport = (): void => {
+    const cookieEnabled = navigator.cookieEnabled;
+
+    // when cookieEnabled flag is present and false then cookies are disabled.
+    if (cookieEnabled === false) {
+      this.showCookieWarning();
+    } else {
+      // try to set a test cookie if we can't see any cookies and we're using
+      // either a browser that doesn't support navigator.cookieEnabled
+      // or IE (which always returns true for navigator.cookieEnabled)
+      if (!document.cookie && (cookieEnabled === null || /*@cc_on!@*/false)) {
+        document.cookie = 'typo3-login-cookiecheck=1';
+
+        if (!document.cookie) {
+          this.showCookieWarning();
+        } else {
+          // unset the cookie again
+          document.cookie = 'typo3-login-cookiecheck=; expires=' + new Date(0).toUTCString();
+        }
+      }
+    }
+  }
+
+  /**
+   * Registers listeners for the Login Interface
+   */
+  public initializeEvents = (): void => {
+    $(document).ajaxStart(this.showLoadingIndicator);
+    $(this.options.loginForm).on('submit', this.handleSubmit);
+
+    // The Interface selector is not always present, so this check is needed
+    if ($(this.options.interfaceField).length > 0) {
+      $(document).on('change blur', this.options.interfaceField, this.interfaceSelectorChanged);
+    }
+
+    $('.t3js-clearable').clearable();
+
+    // carousel news height transition
+    $('.t3js-login-news-carousel').on('slide.bs.carousel', (e: any) => {
+      const nextH = $(e.relatedTarget).height();
+      const $element: JQuery = $(e.target);
+      $element.find('div.active').parent().animate({ height: nextH }, 500);
+    });
+  }
+}
+
+export = new BackendLogin();
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/UserPassLogin.ts b/typo3/sysext/backend/Resources/Private/TypeScript/UserPassLogin.ts
new file mode 100644 (file)
index 0000000..a9c7832
--- /dev/null
@@ -0,0 +1,113 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import $ = require('jquery');
+import Login = require('./Login');
+
+/**
+ * Module: TYPO3/CMS/Backend/UserPassLogin
+ * JavaScript module for the UsernamePasswordLoginProvider
+ * @exports TYPO3/CMS/Backend/UserPassLogin
+ */
+class UserPassLogin {
+
+  /**
+   * Checks whether capslock is enabled (returns TRUE if enabled, false otherwise)
+   * thanks to http://24ways.org/2007/capturing-caps-lock
+   *
+   * @param {Event} e
+   * @returns {boolean}
+   */
+  public static isCapslockEnabled(e: any): boolean {
+    const ev = e ? e : window.event;
+    if (!ev) {
+      return false;
+    }
+    // get key pressed
+    let pressedKeyAsciiCode = -1;
+    if (ev.which) {
+      pressedKeyAsciiCode = ev.which;
+    } else if (ev.keyCode) {
+      pressedKeyAsciiCode = ev.keyCode;
+    }
+    // get shift status
+    let shiftPressed = false;
+    if (ev.shiftKey) {
+      shiftPressed = ev.shiftKey;
+    } else if (ev.modifiers) {
+      /* tslint:disable:no-bitwise */
+      shiftPressed = !!(ev.modifiers & 4);
+    }
+    return (pressedKeyAsciiCode >= 65 && pressedKeyAsciiCode <= 90 && !shiftPressed)
+      || (pressedKeyAsciiCode >= 97 && pressedKeyAsciiCode <= 122 && shiftPressed);
+  }
+
+  protected options: any;
+
+  constructor() {
+    this.options = {
+      passwordField: '.t3js-login-password-field',
+      usernameField: '.t3js-login-username-field',
+    };
+
+    // register submit handler
+    Login.options.submitHandler = this.resetPassword;
+
+    const $usernameField = $(this.options.usernameField);
+    const $passwordField = $(this.options.passwordField);
+
+    $usernameField.on('keypress', this.showCapsLockWarning);
+    $passwordField.on('keypress', this.showCapsLockWarning);
+
+    // If the login screen is shown in the login_frameset window for re-login,
+    // then try to get the username of the current/former login from opening windows main frame:
+    try {
+      if (parent.opener
+        && parent.opener.TYPO3
+        && parent.opener.TYPO3.configuration
+        && parent.opener.TYPO3.configuration.username
+      ) {
+        $usernameField.val(parent.opener.TYPO3.configuration.username);
+      }
+    } catch (error) {
+      // continue
+    }
+
+    if ($usernameField.val() === '') {
+      $usernameField.focus();
+    } else {
+      $passwordField.focus();
+    }
+  }
+
+  /**
+   * Reset user password field to prevent it from being submitted
+   */
+  public resetPassword = (): void => {
+    const $passwordField = $(this.options.passwordField);
+    if ($passwordField.val()) {
+      $(Login.options.useridentField).val($passwordField.val());
+      $passwordField.val('');
+    }
+  }
+
+  public showCapsLockWarning = (event: Event): void => {
+    $(event.target)
+      .parent()
+      .parent()
+      .find('.t3js-login-alert-capslock')
+      .toggleClass('hidden', !UserPassLogin.isCapslockEnabled(event));
+  }
+}
+
+export = new UserPassLogin();
index 770bfb2..94c34ea 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/Login
- * JavaScript module for the backend login form
- */
-define(['jquery', 'TYPO3/CMS/Backend/jquery.clearable', 'bootstrap'], function($) {
-       'use strict';
-
-       /**
-        *
-        * @type {{options: {loginForm: string, interfaceField: string, useridentField: string, submitButton: string, error: string, errorNoCookies: string, formFields: string, submitHandler: null}}}
-        * @exports TYPO3/CMS/Backend/Login
-        */
-       var BackendLogin = {
-               options: {
-                       loginForm: '#typo3-login-form',
-                       interfaceField: '.t3js-login-interface-field',
-                       useridentField: '.t3js-login-userident-field',
-                       submitButton: '.t3js-login-submit',
-                       error: '.t3js-login-error',
-                       errorNoCookies: '.t3js-login-error-nocookies',
-                       formFields: '.t3js-login-formfields',
-                       submitHandler: null
-               }
-       },
-       options = BackendLogin.options;
-
-       /**
-        * Hide all form fields and show a progress message and icon
-        */
-       BackendLogin.showLoginProcess = function() {
-               BackendLogin.showLoadingIndicator();
-               $(options.error).addClass('hidden');
-               $(options.errorNoCookies).addClass('hidden');
-       };
-
-       /**
-        * Show the loading spinner in the submit button
-        */
-       BackendLogin.showLoadingIndicator = function() {
-               $(options.submitButton).button('loading');
-       };
-
-       /**
-        * Pass on to registered submit handler
-        *
-        * @param {Event} event
-        */
-       BackendLogin.handleSubmit = function(event) {
-               BackendLogin.showLoginProcess();
-
-               if (BackendLogin.options.submitHandler) {
-                       BackendLogin.options.submitHandler(event);
-               }
-       };
-
-       /**
-        * Store the new selected Interface in a cookie to save it for future visits
-        */
-       BackendLogin.interfaceSelectorChanged = function() {
-               var now = new Date();
-               var expires = new Date(now.getTime() + 1000*60*60*24*365); // cookie expires in one year
-               document.cookie = 'typo3-login-interface=' + $(options.interfaceField).val() + '; expires=' + expires.toGMTString() + ';';
-       };
-
-       /**
-        * Check if an interface was stored in a cookie and preselect it in the select box
-        */
-       BackendLogin.checkForInterfaceCookie = function() {
-               if ($(options.interfaceField).length) {
-                       var posStart = document.cookie.indexOf('typo3-login-interface=');
-                       if (posStart !== -1) {
-                               var selectedInterface = document.cookie.substr(posStart + 22);
-                               selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
-                               $(options.interfaceField).val(selectedInterface);
-                       }
-               }
-       };
-
-       /**
-        * Hides input fields and shows cookie warning
-        */
-       BackendLogin.showCookieWarning = function() {
-               $(options.formFields).addClass('hidden');
-               $(options.errorNoCookies).removeClass('hidden');
-       };
-
-       /**
-        * Hides cookie warning and shows input fields
-        */
-       BackendLogin.hideCookieWarning = function() {
-               $(options.formFields).removeClass('hidden');
-               $(options.errorNoCookies).addClass('hidden');
-       };
-
-       /**
-        * Checks browser's cookie support
-        * see http://stackoverflow.com/questions/8112634/jquery-detecting-cookies-enabled
-        */
-       BackendLogin.checkCookieSupport = function() {
-               var cookieEnabled = navigator.cookieEnabled;
-
-               // when cookieEnabled flag is present and false then cookies are disabled.
-               if (cookieEnabled === false) {
-                       BackendLogin.showCookieWarning();
-               } else {
-                       // try to set a test cookie if we can't see any cookies and we're using
-                       // either a browser that doesn't support navigator.cookieEnabled
-                       // or IE (which always returns true for navigator.cookieEnabled)
-                       if (!document.cookie && (cookieEnabled === null || /*@cc_on!@*/false)) {
-                               document.cookie = 'typo3-login-cookiecheck=1';
-
-                               if (!document.cookie) {
-                                       BackendLogin.showCookieWarning();
-                               } else {
-                                       // unset the cookie again
-                                       document.cookie = 'typo3-login-cookiecheck=; expires=' + new Date(0).toUTCString();
-                               }
-                       }
-               }
-       };
-
-       /**
-        * Registers listeners for the Login Interface
-        */
-       BackendLogin.initializeEvents = function() {
-               $(document).ajaxStart(BackendLogin.showLoadingIndicator);
-               $(options.loginForm).on('submit', BackendLogin.handleSubmit);
-
-               // The Interface selector is not always present, so this check is needed
-               if ($(options.interfaceField).length > 0) {
-                       $(document).on('change blur', options.interfaceField, BackendLogin.interfaceSelectorChanged);
-               }
-
-               $('.t3js-clearable').clearable();
-
-               // carousel news height transition
-               $('.t3js-login-news-carousel').on('slide.bs.carousel', function(e) {
-                       var nextH = $(e.relatedTarget).height();
-                       $(this).find('div.active').parent().animate({ height: nextH }, 500);
-               });
-       };
-
-       // initialize and return the BackendLogin object
-       $(function() {
-               BackendLogin.checkCookieSupport();
-               BackendLogin.checkForInterfaceCookie();
-               BackendLogin.initializeEvents();
-       });
-
-       // prevent opening the login form in the backend frameset
-       if (top.location.href !== location.href) {
-               top.location.href = location.href;
-       }
-
-       return BackendLogin;
+define(["require", "exports", "jquery", "bootstrap", "TYPO3/CMS/Backend/jquery.clearable"], function (require, exports, $) {
+    "use strict";
+    /**
+     * Module: TYPO3/CMS/Backend/Login
+     * JavaScript module for the backend login form
+     * @exports TYPO3/CMS/Backend/Login
+     *
+     * Class and file name do not match as the class was renamed, but to keep overrides in place, the filename has to stay!
+     */
+    var BackendLogin = (function () {
+        function BackendLogin() {
+            var _this = this;
+            /**
+             * Hide all form fields and show a progress message and icon
+             */
+            this.showLoginProcess = function () {
+                _this.showLoadingIndicator();
+                $(_this.options.error).addClass('hidden');
+                $(_this.options.errorNoCookies).addClass('hidden');
+            };
+            /**
+             * Show the loading spinner in the submit button
+             */
+            this.showLoadingIndicator = function () {
+                $(_this.options.submitButton).button('loading');
+            };
+            /**
+             * Pass on to registered submit handler
+             *
+             * @param {Event} event
+             */
+            this.handleSubmit = function (event) {
+                _this.showLoginProcess();
+                if (typeof _this.options.submitHandler === 'function') {
+                    _this.options.submitHandler(event);
+                }
+            };
+            /**
+             * Store the new selected Interface in a cookie to save it for future visits
+             */
+            this.interfaceSelectorChanged = function () {
+                var now = new Date();
+                // cookie expires in one year
+                var expires = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 365);
+                document.cookie = 'typo3-login-interface='
+                    + $(_this.options.interfaceField).val()
+                    + '; expires=' + expires.toUTCString() + ';';
+            };
+            /**
+             * Check if an interface was stored in a cookie and preselect it in the select box
+             */
+            this.checkForInterfaceCookie = function () {
+                if ($(_this.options.interfaceField).length) {
+                    var posStart = document.cookie.indexOf('typo3-login-interface=');
+                    if (posStart !== -1) {
+                        var selectedInterface = document.cookie.substr(posStart + 22);
+                        selectedInterface = selectedInterface.substr(0, selectedInterface.indexOf(';'));
+                        $(_this.options.interfaceField).val(selectedInterface);
+                    }
+                }
+            };
+            /**
+             * Hides input fields and shows cookie warning
+             */
+            this.showCookieWarning = function () {
+                $(_this.options.formFields).addClass('hidden');
+                $(_this.options.errorNoCookies).removeClass('hidden');
+            };
+            /**
+             * Hides cookie warning and shows input fields
+             */
+            this.hideCookieWarning = function () {
+                $(_this.options.formFields).removeClass('hidden');
+                $(_this.options.errorNoCookies).addClass('hidden');
+            };
+            /**
+             * Checks browser's cookie support
+             * see http://stackoverflow.com/questions/8112634/jquery-detecting-cookies-enabled
+             */
+            this.checkCookieSupport = function () {
+                var cookieEnabled = navigator.cookieEnabled;
+                // when cookieEnabled flag is present and false then cookies are disabled.
+                if (cookieEnabled === false) {
+                    _this.showCookieWarning();
+                }
+                else {
+                    // try to set a test cookie if we can't see any cookies and we're using
+                    // either a browser that doesn't support navigator.cookieEnabled
+                    // or IE (which always returns true for navigator.cookieEnabled)
+                    if (!document.cookie && (cookieEnabled === null || false)) {
+                        document.cookie = 'typo3-login-cookiecheck=1';
+                        if (!document.cookie) {
+                            _this.showCookieWarning();
+                        }
+                        else {
+                            // unset the cookie again
+                            document.cookie = 'typo3-login-cookiecheck=; expires=' + new Date(0).toUTCString();
+                        }
+                    }
+                }
+            };
+            /**
+             * Registers listeners for the Login Interface
+             */
+            this.initializeEvents = function () {
+                $(document).ajaxStart(_this.showLoadingIndicator);
+                $(_this.options.loginForm).on('submit', _this.handleSubmit);
+                // The Interface selector is not always present, so this check is needed
+                if ($(_this.options.interfaceField).length > 0) {
+                    $(document).on('change blur', _this.options.interfaceField, _this.interfaceSelectorChanged);
+                }
+                $('.t3js-clearable').clearable();
+                // carousel news height transition
+                $('.t3js-login-news-carousel').on('slide.bs.carousel', function (e) {
+                    var nextH = $(e.relatedTarget).height();
+                    var $element = $(e.target);
+                    $element.find('div.active').parent().animate({ height: nextH }, 500);
+                });
+            };
+            this.options = {
+                error: '.t3js-login-error',
+                errorNoCookies: '.t3js-login-error-nocookies',
+                formFields: '.t3js-login-formfields',
+                interfaceField: '.t3js-login-interface-field',
+                loginForm: '#typo3-login-form',
+                submitButton: '.t3js-login-submit',
+                submitHandler: null,
+                useridentField: '.t3js-login-userident-field',
+            };
+            this.checkCookieSupport();
+            this.checkForInterfaceCookie();
+            this.initializeEvents();
+            // prevent opening the login form in the backend frameset
+            if (top.location.href !== location.href) {
+                top.location.href = location.href;
+            }
+        }
+        return BackendLogin;
+    }());
+    return new BackendLogin();
 });
index 9ca7dc5..00fe2a1 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/UserPassLogin
- * JavaScript module for the UsernamePasswordLoginProvider
- */
-define(['jquery', 'TYPO3/CMS/Backend/Login'], function($, Login) {
-       'use strict';
-
-       /**
-        *
-        * @type {{options: {usernameField: string, passwordField: string}}}
-        * @exports TYPO3/CMS/Backend/UserPassLogin
-        */
-       var UserPassLogin = {
-               options: {
-                       usernameField: '.t3js-login-username-field',
-                       passwordField: '.t3js-login-password-field'
-               }
-       };
-
-       /**
-        * Checks whether capslock is enabled (returns TRUE if enabled, false otherwise)
-        * thanks to http://24ways.org/2007/capturing-caps-lock
-        *
-        * @param {Event} e
-        * @returns {Boolean}
-        */
-       UserPassLogin.isCapslockEnabled = function(e) {
-               var ev = e ? e : window.event;
-               if (!ev) {
-                       return;
-               }
-               // get key pressed
-               var which = -1;
-               if (ev.which) {
-                       which = ev.which;
-               } else if (ev.keyCode) {
-                       which = ev.keyCode;
-               }
-               // get shift status
-               var shift_status = false;
-               if (ev.shiftKey) {
-                       shift_status = ev.shiftKey;
-               } else if (ev.modifiers) {
-                       shift_status = !!(ev.modifiers & 4);
-               }
-               return (which >= 65 && which <= 90 && !shift_status)
-                       || (which >= 97 && which <= 122 && shift_status);
-       };
-
-       /**
-        * Reset user password field to prevent it from being submitted
-        */
-       UserPassLogin.resetPassword = function() {
-               var $passwordField = $(UserPassLogin.options.passwordField);
-               if ($passwordField.val()) {
-                       $(Login.options.useridentField).val($passwordField.val());
-                       $passwordField.val('');
-               }
-       };
-
-       /**
-        * To prevent its unintended use when typing the password, the user is warned when Capslock is on
-        *
-        * @param {Event} event
-        */
-       UserPassLogin.showCapsLockWarning = function(event) {
-               $(this).parent().parent().find('.t3js-login-alert-capslock').toggleClass('hidden', !UserPassLogin.isCapslockEnabled(event));
-       };
-
-       // initialize and return the UserPassLogin object
-       $(function() {
-               // register submit handler
-               Login.options.submitHandler = UserPassLogin.resetPassword;
-
-               var $usernameField = $(UserPassLogin.options.usernameField);
-               var $passwordField = $(UserPassLogin.options.passwordField);
-
-               $usernameField.on('keypress', UserPassLogin.showCapsLockWarning);
-               $passwordField.on('keypress', UserPassLogin.showCapsLockWarning);
-
-               // If the login screen is shown in the login_frameset window for re-login,
-               // then try to get the username of the current/former login from opening windows main frame:
-               try {
-                       if (parent.opener && parent.opener.TYPO3 && parent.opener.TYPO3.configuration && parent.opener.TYPO3.configuration.username) {
-                               $usernameField.val(parent.opener.TYPO3.configuration.username);
-                       }
-               } catch (error) {} // continue
-
-               if ($usernameField.val() === '') {
-                       $usernameField.focus();
-               } else {
-                       $passwordField.focus();
-               }
-       });
-
-       return UserPassLogin;
+define(["require", "exports", "jquery", "./Login"], function (require, exports, $, Login) {
+    "use strict";
+    /**
+     * Module: TYPO3/CMS/Backend/UserPassLogin
+     * JavaScript module for the UsernamePasswordLoginProvider
+     * @exports TYPO3/CMS/Backend/UserPassLogin
+     */
+    var UserPassLogin = (function () {
+        function UserPassLogin() {
+            var _this = this;
+            /**
+             * Reset user password field to prevent it from being submitted
+             */
+            this.resetPassword = function () {
+                var $passwordField = $(_this.options.passwordField);
+                if ($passwordField.val()) {
+                    $(Login.options.useridentField).val($passwordField.val());
+                    $passwordField.val('');
+                }
+            };
+            this.showCapsLockWarning = function (event) {
+                $(event.target)
+                    .parent()
+                    .parent()
+                    .find('.t3js-login-alert-capslock')
+                    .toggleClass('hidden', !UserPassLogin.isCapslockEnabled(event));
+            };
+            this.options = {
+                passwordField: '.t3js-login-password-field',
+                usernameField: '.t3js-login-username-field',
+            };
+            // register submit handler
+            Login.options.submitHandler = this.resetPassword;
+            var $usernameField = $(this.options.usernameField);
+            var $passwordField = $(this.options.passwordField);
+            $usernameField.on('keypress', this.showCapsLockWarning);
+            $passwordField.on('keypress', this.showCapsLockWarning);
+            // If the login screen is shown in the login_frameset window for re-login,
+            // then try to get the username of the current/former login from opening windows main frame:
+            try {
+                if (parent.opener
+                    && parent.opener.TYPO3
+                    && parent.opener.TYPO3.configuration
+                    && parent.opener.TYPO3.configuration.username) {
+                    $usernameField.val(parent.opener.TYPO3.configuration.username);
+                }
+            }
+            catch (error) {
+                // continue
+            }
+            if ($usernameField.val() === '') {
+                $usernameField.focus();
+            }
+            else {
+                $passwordField.focus();
+            }
+        }
+        /**
+         * Checks whether capslock is enabled (returns TRUE if enabled, false otherwise)
+         * thanks to http://24ways.org/2007/capturing-caps-lock
+         *
+         * @param {Event} e
+         * @returns {boolean}
+         */
+        UserPassLogin.isCapslockEnabled = function (e) {
+            var ev = e ? e : window.event;
+            if (!ev) {
+                return false;
+            }
+            // get key pressed
+            var pressedKeyAsciiCode = -1;
+            if (ev.which) {
+                pressedKeyAsciiCode = ev.which;
+            }
+            else if (ev.keyCode) {
+                pressedKeyAsciiCode = ev.keyCode;
+            }
+            // get shift status
+            var shiftPressed = false;
+            if (ev.shiftKey) {
+                shiftPressed = ev.shiftKey;
+            }
+            else if (ev.modifiers) {
+                /* tslint:disable:no-bitwise */
+                shiftPressed = !!(ev.modifiers & 4);
+            }
+            return (pressedKeyAsciiCode >= 65 && pressedKeyAsciiCode <= 90 && !shiftPressed)
+                || (pressedKeyAsciiCode >= 97 && pressedKeyAsciiCode <= 122 && shiftPressed);
+        };
+        return UserPassLogin;
+    }());
+    return new UserPassLogin();
 });