iarv/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-03-28 17:42:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

issue #2437 update standard pages

Browse Source 
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
This commit is contained in:
HWFord
2025-11-14 10:34:43 +01:00
parent c43c3696e0
commit 146c694c6f
5 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
themes/standard_pages/js/standard_pages.js
View File

@@ -19,10 +19,16 @@ jQuery( document ).ready(function() {
jQuery("#selected-language").textContent = selected_language;
//Override empty input message
jQuery("form").on("submit", function (e) {
let isValid = true;
jQuery(".column-flex").each(function () {
jQuery("form").on("submit", function (e) {
let isValid = true;
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");

4
themes/standard_pages/template/identification.tpl
View File

@@ -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>
<input type="text" class="" type="text" name="username" id="username" size="25" autofocus>
<i class="gallery-icon-user"></i>
<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>

2
themes/standard_pages/template/password.tpl
View File

@@ -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>

10
themes/standard_pages/template/register.tpl
View File

@@ -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>

9
themes/standard_pages/theme.css
View File

@@ -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;