N°3922 Restyle one way password inputs, reset buttons and displayed hints

This commit is contained in:
Stephen Abello
2021-09-10 10:27:13 +02:00
parent 191891ac35
commit b120488085
21 changed files with 57 additions and 25 deletions

View File

@@ -49,6 +49,8 @@ class UIPasswordWidget
*/
public function Display(WebPage $oPage, $aArgs = array())
{
$oPage->add_dict_entry('UI:Component:Input:Password:DoesNotMatch');
$sCode = $this->sAttCode.$this->sNameSuffix;
$iWidgetIndex = self::$iWidgetIndex;
@@ -57,11 +59,12 @@ class UIPasswordWidget
$sConfirmPasswordValue = $aPasswordValues ? $aPasswordValues['confirm'] : '*****';
$sChangedValue = (($sPasswordValue != '*****') || ($sConfirmPasswordValue != '*****')) ? 1 : 0;
$sHtmlValue = '';
$sHtmlValue .= '<div class="field_input_zone field_input_onewaypassword">';
$sHtmlValue .= '<input type="password" maxlength="255" name="attr_'.$sCode.'[value]" id="'.$this->iId.'" value="'.htmlentities($sPasswordValue, ENT_QUOTES, 'UTF-8').'"/>';
$sHtmlValue .= '<input type="password" maxlength="255" id="'.$this->iId.'_confirm" value="'.htmlentities($sConfirmPasswordValue, ENT_QUOTES, 'UTF-8').'" name="attr_'.$sCode.'[confirm]"/>';
$sHtmlValue .= '<span>'.Dict::S('UI:PasswordConfirm').'</span>';
$sHtmlValue .= '<input id="'.$this->iId.'_reset" type="button" value="'.Dict::S('UI:Button:ResetPassword').'" onClick="ResetPwd(\''.$this->iId.'\');">';
$sHtmlValue .= '<div class="field_input_zone field_input_onewaypassword ibo-input-wrapper">';
$sHtmlValue .= '<input class="ibo-input" type="password" maxlength="255" name="attr_'.$sCode.'[value]" id="'.$this->iId.'" value="'.htmlentities($sPasswordValue, ENT_QUOTES, 'UTF-8').'"/>';
$sHtmlValue .= '<div class="ibo-input-wrapper ibo-input-wrapper--with-buttons"><input class="ibo-input" type="password" maxlength="255" id="'.$this->iId.'_confirm" value="'.htmlentities($sConfirmPasswordValue, ENT_QUOTES, 'UTF-8').'" name="attr_'.$sCode.'[confirm]"/>';
$sHtmlValue .= '<div class="ibo-input-select--action-buttons"><div class="ibo-input-select--action-button ibo-input-select--action-button--create" data-tooltip-content="'.Dict::S('UI:PasswordConfirm').'"><i class="fas fa-question-circle"></i></div></div></div>';
$sHtmlValue .= '<button id="'.$this->iId.'_reset" class="ibo-button ibo-is-regular ibo-is-neutral" onClick="ResetPwd(\''.$this->iId.'\');">';
$sHtmlValue .= '<span class="ibo-button--icon fas fa-undo"></span><span class="ibo-button--label">'.Dict::S('UI:Button:ResetPassword').'</span></button>';
$sHtmlValue .= '<input type="hidden" id="'.$this->iId.'_changed" name="attr_'.$sCode.'[changed]" value="'.$sChangedValue.'"/>';
$sHtmlValue .= '</div>';

View File

@@ -110,8 +110,7 @@ $ibo-input-select--autocomplete-item-image--border: 1px solid $ibo-color-grey-60
pointer-events: none;
}
.ibo-input-select-wrapper--with-buttons {
position: relative;
display: flex;
@extend .ibo-input-wrapper--with-buttons;
}
.ibo-input-select-container {

View File

@@ -55,6 +55,10 @@ $ibo-input--margin-x: 5px !default;
border: 1px solid $ibo-input-wrapper--is-error--border-color;
}
}
.ibo-input-wrapper--with-buttons{
position: relative;
display: flex;
}
.ibo-field-validation {
color: $ibo-field-validation;

View File

@@ -1041,7 +1041,7 @@ Dict::Add('CS CZ', 'Czech', 'Čeština', array(
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Nápověda',
'UI:PasswordConfirm' => '(Potvrzení)',
'UI:PasswordConfirm' => 'Potvrzení',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Než přidáte další objekty třídy %1$s, uložte tento objekt.',
'UI:DisplayThisMessageAtStartup' => 'Zobrazovat tuto zprávu při spuštění',
'UI:RelationshipGraph' => 'Grafické zobrazení',

View File

@@ -1032,7 +1032,7 @@ Ved tilknytningen til en trigger, bliver hver handling tildelt et "rækkefølge"
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Hjælp',
'UI:PasswordConfirm' => '(Bekræft)',
'UI:PasswordConfirm' => 'Bekræft',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Gem dette objekt, før der tilføjes flere %1$s objekter.',
'UI:DisplayThisMessageAtStartup' => 'Vis denne beksed ved start',
'UI:RelationshipGraph' => 'Grafisk visning',

View File

@@ -1031,7 +1031,7 @@ Wenn Aktionen mit Trigger verknüpft sind, bekommt jede Aktion eine Auftragsnumm
'UI:Deadline_Hours_Minutes' => '%1$dStunden %2$dMinuten',
'UI:Deadline_Days_Hours_Minutes' => '%1$dTage %2$dStunden %3$dMinuten',
'UI:Help' => 'Hilfe',
'UI:PasswordConfirm' => '(Bestätigen)',
'UI:PasswordConfirm' => 'Bestätigen',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Bevor weitere Objekte vom Typ "%1$s" hinzugefügt werden können, speichern Sie bitte dieses Objekt.',
'UI:DisplayThisMessageAtStartup' => 'Diese Meldung beim Start immer anzeigen',
'UI:RelationshipGraph' => 'Grafische Ansicht',

View File

@@ -1060,7 +1060,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Help',
'UI:PasswordConfirm' => '(Confirm)',
'UI:PasswordConfirm' => 'Confirm',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Before adding more %1$s objects, save this object.',
'UI:DisplayThisMessageAtStartup' => 'Display this message at startup',
'UI:RelationshipGraph' => 'Graphical view',

View File

@@ -1045,7 +1045,7 @@ Cuando se asocien con un disparador, cada acción recibe un número de "orden",
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Ayuda',
'UI:PasswordConfirm' => '(Confirmar)',
'UI:PasswordConfirm' => 'Confirmar',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Antes de Agregar un(a) %1$s, Guarde los Cambios Realizados.',
'UI:DisplayThisMessageAtStartup' => 'Desplegar este Mensaje al Inicio',
'UI:RelationshipGraph' => 'Vista Gráfica',

View File

@@ -1042,7 +1042,7 @@ Lors de l\'association à un déclencheur, on attribue à chaque action un numé
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dj %2$dh %3$dmin',
'UI:Help' => 'Aide',
'UI:PasswordConfirm' => '(Confirmer)',
'UI:PasswordConfirm' => 'Confirmer',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Enregistrez l\'objet courant avant de créer de nouveaux éléments de type %1$s.',
'UI:DisplayThisMessageAtStartup' => 'Afficher ce message au démarrage',
'UI:RelationshipGraph' => 'Vue graphique',

View File

@@ -1031,7 +1031,7 @@ Akció kiváltó okhoz rendelésekor kap egy sorszámot , amely meghatározza az
'UI:Deadline_Hours_Minutes' => '%1$dóra %2$dperc',
'UI:Deadline_Days_Hours_Minutes' => '%1$nap %2$dóra %3$dperc',
'UI:Help' => 'Segítség',
'UI:PasswordConfirm' => '(Jóváhagyás)',
'UI:PasswordConfirm' => 'Jóváhagyás',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => '%1$s objektumok hozzáadása előtt mentse ezt az objektumot',
'UI:DisplayThisMessageAtStartup' => 'Az üzenet megjelenítése indításkor',
'UI:RelationshipGraph' => 'Grafikus nézet',

View File

@@ -1044,7 +1044,7 @@ Quando è associata a un trigger, ad ogni azione è assegnato un numero "ordine"
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dg %2$dh %3$dmin',
'UI:Help' => 'Aiuto',
'UI:PasswordConfirm' => '(Conferma)',
'UI:PasswordConfirm' => 'Conferma',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Prima di aggiungere più %1$s oggetti, salva questo oggetto.',
'UI:DisplayThisMessageAtStartup' => 'Visualizza questo messaggio in fase di avvio',
'UI:RelationshipGraph' => 'Visualizzazione grafica',

View File

@@ -1032,7 +1032,7 @@ Dict::Add('JA JP', 'Japanese', '日本語', array(
'UI:Deadline_Hours_Minutes' => '%1$d時間%2$d分',
'UI:Deadline_Days_Hours_Minutes' => '%1$d日%2$d時間%3$d分',
'UI:Help' => 'ヘルプ',
'UI:PasswordConfirm' => '(確認)',
'UI:PasswordConfirm' => '確認',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => '%1$sオブジェクトをさらに追加する前に、このオブジェクトを保存してください。',
'UI:DisplayThisMessageAtStartup' => '起動時にこのメッセージを表示する',
'UI:RelationshipGraph' => 'グラフィカル表示',

View File

@@ -1046,7 +1046,7 @@ Bij die koppeling wordt aan elke actie een volgorde-nummer gegeven. Dit bepaalt
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Help',
'UI:PasswordConfirm' => '(Bevestig)',
'UI:PasswordConfirm' => 'Bevestig',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Sla dit object op voordat je meer %1$s objecten toevoegt.',
'UI:DisplayThisMessageAtStartup' => 'Geef dit bericht weer bij het opstarten',
'UI:RelationshipGraph' => 'Grafische weergave',

View File

@@ -1045,7 +1045,7 @@ W przypadku powiązania z wyzwalaczem, każde działanie otrzymuje numer "porzą
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Pomoc',
'UI:PasswordConfirm' => '(Potwierdenie)',
'UI:PasswordConfirm' => 'Potwierdenie',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Zanim dodasz więcej obiektów %1$s, zapisz ten obiekt.',
'UI:DisplayThisMessageAtStartup' => 'Wyświetl tę wiadomość podczas uruchamiania',
'UI:RelationshipGraph' => 'Widok graficzny',

View File

@@ -1043,7 +1043,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Ajuda',
'UI:PasswordConfirm' => '(Confirmar)',
'UI:PasswordConfirm' => 'Confirmar',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Antes de adicionar mais %1$s objetos, salvar este objeto.',
'UI:DisplayThisMessageAtStartup' => 'Exibir esta mensagem na inicialização',
'UI:RelationshipGraph' => 'Visualizar gráfico',

View File

@@ -1043,7 +1043,7 @@ Dict::Add('RU RU', 'Russian', 'Русский', array(
'UI:Deadline_Hours_Minutes' => '%1$d ч %2$d мин',
'UI:Deadline_Days_Hours_Minutes' => '%1$d д %2$d ч %3$d мин',
'UI:Help' => 'Помощь',
'UI:PasswordConfirm' => '(Подтвердить)',
'UI:PasswordConfirm' => 'Подтвердить',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Перед добавлением объекта %1$s сохраните текущий объект.',
'UI:DisplayThisMessageAtStartup' => 'Показать это сообщение при запуске',
'UI:RelationshipGraph' => 'Графический вид',

View File

@@ -1035,7 +1035,7 @@ Keď sú priradené spúštačom, každej akcii je dané číslo "príkazu", šp
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => 'Pomoc',
'UI:PasswordConfirm' => '(Potvrdiť)',
'UI:PasswordConfirm' => 'Potvrdiť',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Pred pridaním viacerých %1$s objektov, uložte tento objekt.',
'UI:DisplayThisMessageAtStartup' => 'Zobraziť túto správu pri spustení',
'UI:RelationshipGraph' => 'Grafický pohľad',

View File

@@ -1043,7 +1043,7 @@ Tetikleme gerçekleştiriğinde işlemler tanımlanan sıra numarası ile gerçe
'UI:Deadline_Hours_Minutes' => '%1$dh %2$ddk',
'UI:Deadline_Days_Hours_Minutes' => '%1$d gün %2$d saat %3$d dk',
'UI:Help' => 'Yardım',
'UI:PasswordConfirm' => '(Onay)',
'UI:PasswordConfirm' => 'Onay',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Yeni %1$s nesneleri eklemeden önce bu nesneyi kaydediniz.',
'UI:DisplayThisMessageAtStartup' => 'Bu mesajı başlangıçta göster',
'UI:RelationshipGraph' => 'Grafiksel gösterim',

View File

@@ -0,0 +1,23 @@
<?php
/**
* Copyright (C) 2013-2021 Combodo SARL
*
* This file is part of iTop.
*
* iTop is free software; you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* iTop is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
*/
// Input
Dict::Add('EN US', 'English', 'English', array(
'UI:Component:Input:Password:DoesNotMatch' => 'Passwords do not match',
));

View File

@@ -1043,7 +1043,7 @@ Dict::Add('ZH CN', 'Chinese', '简体中文', array(
'UI:Deadline_Hours_Minutes' => '%1$dh %2$dmin',
'UI:Deadline_Days_Hours_Minutes' => '%1$dd %2$dh %3$dmin',
'UI:Help' => '帮助',
'UI:PasswordConfirm' => '(确认)',
'UI:PasswordConfirm' => '确认',
'UI:BeforeAdding_Class_ObjectsSaveThisObject' => '在添加更多 %1$s 之前, 保存该对象.',
'UI:DisplayThisMessageAtStartup' => '在启动时显示此消息',
'UI:RelationshipGraph' => '图览',

View File

@@ -422,11 +422,14 @@ function ValidatePasswordField(id, sFormId)
oFormErrors['input_'+sFormId] = id;
}
// Visual feedback
$('#v_'+id).html('<img src="../images/validation_error.png" style="vertical-align:middle"/>');
$('#v_'+id).html(Dict.S('UI:Component:Input:Password:DoesNotMatch'));
$('#field_'+id +' .ibo-input-wrapper').addClass('is-error');
return false;
}
}
$('#v_'+id).html(''); //<img src="../images/validation_ok.png" />');
$('#v_'+id).html('');
$('#field_'+id +' .ibo-input-wrapper').removeClass('is-error');
return true;
}