issue #2437 update standard pages

change how required inputs are handled
change js to display error message for inputs only with data-required
for register handle mandatory or not email
update success message css

themes/standard_pages/js/standard_pages.js

@@ -19,10 +19,16 @@ jQuery( document ).ready(function() {
   jQuery("#selected-language").textContent = selected_language;
 
   //Override empty input message
-    jQuery("form").on("submit", function (e) {
+  jQuery("form").on("submit", function (e) {
-      let isValid = true;
+    let isValid = true;
-  
+
-      jQuery(".column-flex").each(function () {
+    jQuery(".column-flex").each(function (i) {
+      // Because we overid the default browser error message 
+      // we need to distinguish which fields are now required
+      // To do this we use data-required="true" on the input
+      let input = $(this).find("input");
+      if($(input).data("required") == true)
+      {
         let input = jQuery(this).find("input");
         let errorMessage = jQuery(this).find(".error-message");
         if (!input.val().trim()) {
@@ -35,11 +41,12 @@ jQuery( document ).ready(function() {
           input[0].setCustomValidity("");
           errorMessage.hide();
         }
-      });
+      }
-  
-      return isValid;
     });
   
+    return isValid;
+  });
+  
     // Hide error message and reset validation on input
     jQuery(".column-flex input").on("input", function () {
       let errorMessage = jQuery(this).closest(".column-flex").find(".error-message");

themes/standard_pages/template/identification.tpl

@@ -45,8 +45,8 @@
         <div class="column-flex">
           <label for="username">{'Username'|translate}</label>
           <div class="row-flex input-container">
-            <i class="gallery-icon-user-2"></i>
+            <i class="gallery-icon-user"></i>
-            <input type="text" class="" type="text" name="username" id="username" size="25" autofocus>
+            <input type="text" class="" type="text" name="username" id="username" size="25" autofocus data-required="true">
           </div>
           <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
         </div>

themes/standard_pages/template/password.tpl

@@ -50,7 +50,7 @@
         <label for="username">{'Username or email'|@translate}</label>
         <div class="row-flex input-container">
           <i class="gallery-icon-user-2"></i>
-          <input type="text" id="username_or_email" name="username_or_email" size="100" maxlength="100"{if isset($username_or_email)} value="{$username_or_email}"{/if} autofocus>
+          <input type="text" id="username_or_email" name="username_or_email" size="100" maxlength="100"{if isset($username_or_email)} value="{$username_or_email}"{/if} autofocus data-required="true">
         </div>
         <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
       </div>

themes/standard_pages/template/register.tpl

@@ -43,10 +43,10 @@
       <form class="properties" method="post" action="{$F_ACTION}" name="register_form" autocomplete="off">
 
         <div class="column-flex">
-          <label for="mail_address">{'Email address'|translate}</label>
+          <label for="mail_address">{'Email address'|translate}{if not $obligatory_user_mail_address} ({'useful when password forgotten'|@translate}){/if}</label>
           <div class="row-flex input-container">
             <i class="gallery-icon-user-2"></i>
-            <input type="email" name="mail_address" id="login" value="{$F_EMAIL}">
+            <input type="email" name="mail_address" id="login" value="{$F_EMAIL}"{if $obligatory_user_mail_address}data-required="true"{/if}>
           </div>
           <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
         </div>
@@ -55,7 +55,7 @@
           <label for="username">{'Username'|translate}</label>
           <div class="row-flex input-container">
             <i class="gallery-icon-user-2"></i>
-            <input type="text" name="login" id="login" value="{$F_LOGIN}">
+            <input type="text" name="login" id="login" value="{$F_LOGIN}" data-required="true">
           </div>
           <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
         </div>
@@ -64,7 +64,7 @@
           <label for="password">{'Password'|translate}</label>
           <div class="row-flex input-container">
             <i class="gallery-icon-lock"></i>
-            <input type="password" class="" name="password" id="password" size="25">
+            <input type="password" class="" name="password" id="password" size="25" data-required="true">
             <i class="gallery-icon-eye togglePassword"></i>
           </div>
           <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
@@ -74,7 +74,7 @@
           <label for="password">{'Confirm Password'|translate}</label>
           <div class="row-flex input-container">
             <i class="gallery-icon-lock"></i>
-            <input type="password" class="" name="password_conf" id="password_conf" size="25">
+            <input type="password" class="" name="password_conf" id="password_conf" size="25" data-required="true">
             <i class="gallery-icon-eye togglePassword"></i>
           </div>
           <p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>

themes/standard_pages/theme.css

@@ -388,6 +388,7 @@ a.btn-main{
   display: block;
   padding: 15px;
   margin-bottom:15px;
+  font-weight:700;
 }
 
 .error-message{
@@ -951,6 +952,10 @@ input:checked + .slider:before, input:checked + .slider::after {
   border-left: 4px solid #6DCE5E;
 }
 
+.light .success-message i{
+  color:#6DCE5E;
+}
+
 .light .infos-message{
   background-color: #bde5f8;
   color: #00529b !important;
@@ -1084,6 +1089,10 @@ input:checked + .slider:before, input:checked + .slider::after {
   border-left: 4px solid #AAF6E4;
 }
 
+.dark .success-message i{
+  color: #AAF6E4;
+}
+
 .dark .infos-message{
   background-color: #4f71a4;
   color: #bad6ff !important;