[BUGFIX] Use proper events to trigger HTML5 validation in Install Tool 69/58369/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Fri, 21 Sep 2018 10:56:06 +0000 (12:56 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Fri, 21 Sep 2018 18:37:46 +0000 (20:37 +0200)
The actions "Create admin" and "Change install tool password" now listen
to the `submit` event of their respective form to allow using the
HTML5-based field validation.

Resolves: #86344
Releases: master
Change-Id: I4e913d71e356f41d04b6b0b653445c48a3a671e1
Reviewed-on: https://review.typo3.org/58369
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Guido Schmechel <guido.schmechel@brandung.de>
Tested-by: Guido Schmechel <guido.schmechel@brandung.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/install/Resources/Private/Templates/Maintenance/CreateAdmin.html
typo3/sysext/install/Resources/Private/Templates/Settings/ChangeInstallToolPassword.html
typo3/sysext/install/Resources/Public/JavaScript/Modules/ChangeInstallToolPassword.js
typo3/sysext/install/Resources/Public/JavaScript/Modules/CreateAdmin.js

index b2d6cfc..7870d36 100644 (file)
@@ -24,7 +24,7 @@
                                type="password"
                                autocomplete="off"
                                required
-                               minlength=8
+                               minlength="8"
                                pattern=".{8,}"
                                title="Password must be at least eight characters long."
                        />
@@ -37,7 +37,7 @@
                                type="password"
                                autocomplete="off"
                                required
-                               minlength=8
+                               minlength="8"
                                pattern=".{8,}"
                        />
                </div>
index b4cadd9..7707107 100644 (file)
@@ -6,32 +6,36 @@
 </p>
 
 <div class="t3js-module-content" data-install-tool-token="{changeInstallToolPasswordToken}">
-       <div class="form-group">
-               <label for="t3-install-tool-password" class="control-label">Enter new password:</label>
-               <input
-                       id="t3-install-tool-password"
-                       class="t3-install-form-input-text t3-install-form-password-strength t3js-changeInstallToolPassword-password form-control"
-                       type="password"
-                       autocomplete="off"
-               />
-       </div>
-       <div class="form-group">
-               <label for="t3-install-tool-password-repeat" class="control-label">Repeat password:</label>
-               <input
-                       id="t3-install-tool-password-repeat"
-                       class="t3-install-form-input-text t3js-changeInstallToolPassword-password-check form-control"
-                       type="password"
-                       autocomplete="off"
-               />
-       </div>
+       <form action="" id="t3js-changeInstallToolPassword-form" method="post">
+               <div class="form-group">
+                       <label for="t3-install-tool-password" class="control-label">Enter new password:</label>
+                       <input
+                               id="t3-install-tool-password"
+                               class="t3-install-form-input-text t3-install-form-password-strength t3js-changeInstallToolPassword-password form-control"
+                               type="password"
+                               autocomplete="off"
+                               required
+                       />
+               </div>
+               <div class="form-group">
+                       <label for="t3-install-tool-password-repeat" class="control-label">Repeat password:</label>
+                       <input
+                               id="t3-install-tool-password-repeat"
+                               class="t3-install-form-input-text t3js-changeInstallToolPassword-password-check form-control"
+                               type="password"
+                               autocomplete="off"
+                               required
+                       />
+               </div>
 
-       <div class="t3js-changeInstallToolPassword-output"></div>
-       <button
-               class="btn btn-default t3js-changeInstallToolPassword-change"
-               type="button"
-       >
-               Set new password
-       </button>
+               <div class="t3js-changeInstallToolPassword-output"></div>
+               <button
+                       class="btn btn-default t3js-changeInstallToolPassword-change"
+                       type="submit"
+               >
+                       Set new password
+               </button>
+       </form>
 </div>
 
 </html>
index 1295714..2d19289 100644 (file)
@@ -26,7 +26,7 @@ define([
   return {
     selectorModalBody: '.t3js-modal-body',
     selectorModuleContent: '.t3js-module-content',
-    selectorChangeTrigger: '.t3js-changeInstallToolPassword-change',
+    selectorChangeForm: '#t3js-changeInstallToolPassword-form',
     selectorOutputContainer: '.t3js-changeInstallToolPassword-output',
     currentModal: {},
 
@@ -35,7 +35,7 @@ define([
       this.currentModal = currentModal;
       this.getData();
 
-      currentModal.on('click', this.selectorChangeTrigger, function(e) {
+      currentModal.on('submit', this.selectorChangeForm, function(e) {
         e.preventDefault();
         self.change();
       });
index 5411995..11f9c47 100644 (file)
@@ -30,7 +30,6 @@ define([
     selectorModalBody: '.t3js-modal-body',
     selectorModuleContent: '.t3js-module-content',
     selectorCreateForm: '#t3js-createAdmin-form',
-    selectorCreateTrigger: '.t3js-createAdmin-create',
     selectorOutputContainer: '.t3js-createAdmin-output',
     currentModal: {},
 
@@ -39,7 +38,7 @@ define([
       this.currentModal = currentModal;
       this.getData();
 
-      currentModal.on('click', this.selectorCreateTrigger, function(e) {
+      currentModal.on('submit', this.selectorCreateForm, function(e) {
         e.preventDefault();
         self.create();
       });