Changeset 1375:b9329a025ce9

Timestamp:

08/14/13 18:09:45 (10 years ago)

Author:

Anne Kozlika <kozlika@…>

Branch:

2.5

Message:

Better semantic html and accessible wording and colors for password assessment.

Files:

• admin/preferences.php (modified) (2 diffs)
• admin/style/default.css (modified) (2 diffs)
• locales/fr/main.po (modified) (1 diff)

admin/preferences.php

@@ -348 +348 @@
           "//<![CDATA[\n".
           "\$(function() {\n".
-          "    \$('#new_pwd').pwstrength({texts: ['".__('very weak')."', '".__('weak')."', '".__('mediocre')."', '".__('strong')."', '".__('very strong')."']});\n".
+          "    \$('#new_pwd').pwstrength({texts: ['".
+                    sprintf(__('Password strength: %s'),__('very weak'))."', '".
+                    sprintf(__('Password strength: %s'),__('weak'))."', '".
+                    sprintf(__('Password strength: %s'),__('mediocre'))."', '".
+                    sprintf(__('Password strength: %s'),__('strong'))."', '".
+                    sprintf(__('Password strength: %s'),__('very strong'))."']});\n".
           "});\n".
           "\n//]]>\n".
@@ -424 +429 @@
      '<legend>'.__('Change your password').'</legend>'.
      
-     '<p><label for="new_pwd">'.__('New password:').
-     form::password('new_pwd',20,255,'','','',false,' data-indicator="pwindicator" ').'</label></p>'.
+     '<div class="pw-table">'.
+     '<p class="pw-cell"><label for="new_pwd">'.__('New password:').'</label>'.
+     form::password('new_pwd',20,255,'','','',false,' data-indicator="pwindicator" ').'</p>'.
     '<div id="pwindicator">'.
     '    <div class="bar"></div>'.
-    '    <div class="label"></div>'.
+    '    <p class="label no-margin"></p>'.
+    '</div>'.
     '</div>'.
      
-     '<p><label for="new_pwd_c">'.__('Confirm password:').
-     form::password('new_pwd_c',20,255).'</label></p>'.
+     '<p><label for="new_pwd_c">'.__('Confirm password:').'</label>'.
+     form::password('new_pwd_c',20,255).'</p>'.
      '</fieldset>'.
      
      '<p>'.__('If you have changed this user email or password you must provide your current password to save these modifications.').'</p>'.
-     '<p><label for="cur_pwd">'.__('Your password:').
-     form::password('cur_pwd',20,255).'</label></p>';
+     '<p><label for="cur_pwd">'.__('Your password:').'</label>'.
+     form::password('cur_pwd',20,255).'</p>';
 }
 

admin/style/default.css

@@ -901 +901 @@
      margin: 0;
 }
-
 /* paragraphe pour bouton Nouveau bidule */
 p.top-add {
@@ -1386 +1385 @@
 
 /* --------------------------------------------------------------- password indcator */
+.pw-table {
+     display: table;
+     margin-bottom: 1em;
+}
+.pw-cell {
+     display: table-cell;
+     margin-bottom: 1em;
+}
 #pwindicator {
-     margin-top: 4px;
+     display: table-cell;
+     vertical-align: bottom;
+     padding-left: 1.5em;
+     height: 3.8em;
+}
+#pwindicator .bar {
+     height: 6px;
+     margin-bottom: 4px;
+}
+.pw-very-weak .bar {
+     background: #900;
+     width: 30px;
+}
+.pw-weak .bar {
+     background: #c00;
+     width: 60px;
+}
+.pw-mediocre .bar {
+     background: #f60;
+     width: 90px;
+}
+.pw-strong .bar {
+     background: #060;
+     width: 120px;
+}
+.pw-very-strong .bar {
+     background: #0c0;
      width: 150px;
 }
-#pwindicator .bar {
-     height: 2px;
-}
-.pw-very-weak .bar {
-     background: #d00;
-     width: 30px;
-}
-.pw-very-weak .label {
-     color: #d00;
-}
-.pw-weak .bar {
-     background: #d00;
-     width: 60px;
-}
-.pw-weak .label {
-     color: #d00;
-}
-.pw-mediocre .bar {
-     background: #f3f01a;
-     width: 90px;
-}
-.pw-mediocre .label {
-     color: #f3f01a;
-}
-.pw-strong .bar {
-     background: #f3b31a;
-     width: 120px;
-}
-.pw-strong .label {
-     color: #f3b31a;
-}
-.pw-very-strong .bar {
-     background: #0d0;
-     width: 150px;
-}
-.pw-very-strong .label {
-     color: #0d0;
-}

locales/fr/main.po

@@ -2944 +2944 @@
 msgstr "(aucune)"
 
+msgid "Password strength: %s"
+msgstr "Force du mot de passe : %s"
+
 msgid "very weak"
 msgstr "très faible"