change check password strength style (#6719)

* 03 confirm password not check

Confirm password input don't check password strength

* change change password error style

* 02 change password check event and no password state

* 01 change arrow style and format css

frontend/src/components/dialog/user-password-widgets/password-input.js

@@ -65,6 +65,8 @@ const PasswordInput = ({ value, labelValue, enableCheckStrength, onChangeValue }
 
 PasswordInput.propTypes = propTypes;
 
-PasswordInput.defaultProps = { enableCheckStrength: true };
+PasswordInput.defaultProps = {
+  enableCheckStrength: true
+};
 
 export default PasswordInput;

frontend/src/components/dialog/user-password-widgets/user-set-password-dialog.js

@@ -62,6 +62,7 @@ const UserSetPassword = ({ toggle }) => {
             value={confirmedPassword}
             labelValue={gettext('Confirm password')}
             onChangeValue={setConfirmedPassword}
+            enableCheckStrength={false}
           />
         </Form>
         {errorMessage && (

frontend/src/components/dialog/user-password-widgets/user-update-password-dialog.js

@@ -74,6 +74,7 @@ const UserUpdatePassword = ({ toggle }) => {
             value={confirmedNewPassword}
             labelValue={gettext('Confirm password')}
             onChangeValue={setConfirmedNewPassword}
+            enableCheckStrength={false}
           />
         </Form>
         {errorMessage && (

seahub/organizations/templates/organizations/org_register.html

@@ -93,9 +93,7 @@ $('#signup-form').on('submit', function(){
         }
    });
 $(function () {
-    // Assuming passwd_tip and template are defined somewhere in your script.
     setupPasswordField("password1", passwd_tip, template);
-    setupPasswordField("password2", passwd_tip, template);
 });
 </script>
 {% endblock %}

seahub/templates/registration/password_change_form.html

@@ -37,9 +37,7 @@ $('.new-narrow-panel').removeClass('vh');
 {% include "snippets/password_strength_js.html" %}
 
 $(function () {
-    // Assuming passwd_tip and template are defined somewhere in your script.
     setupPasswordField("id_new_password1", passwd_tip, template);
-    setupPasswordField("id_new_password2", passwd_tip, template);
 });
 
 $('form').on('submit', function(){

seahub/templates/registration/password_reset_confirm.html

@@ -45,9 +45,7 @@
 $('[type="password"]').addClass('input');
 {% include "snippets/password_strength_js.html" %}
 $(function () {
-    // Assuming passwd_tip and template are defined somewhere in your script.
     setupPasswordField("id_new_password1", passwd_tip, template);
-    setupPasswordField("id_new_password2", passwd_tip, template);
 });
 
 $('#signup-form').on('submit', function(){

seahub/templates/registration/password_set_form.html

@@ -40,9 +40,7 @@ $('.new-narrow-panel').removeClass('vh');
 {% include "snippets/password_strength_js.html" %}
 
 $(function () {
-    // Assuming passwd_tip and template are defined somewhere in your script.
     setupPasswordField("id_new_password1", passwd_tip, template);
-    setupPasswordField("id_new_password2", passwd_tip, template);
 });
 
 $('form').on('submit', function(){

seahub/templates/registration/registration_form.html

@@ -67,9 +67,7 @@
 {% include "snippets/password_strength_js.html" %}
 
 $(function () {
-    // Assuming passwd_tip and template are defined somewhere in your script.
     setupPasswordField("id_password1", passwd_tip, template);
-    setupPasswordField("id_password2", passwd_tip, template);
 });
 
 

seahub/templates/snippets/password_strength_js.html

@@ -16,6 +16,7 @@ var template = `
             <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25"></div>
         </div>
         <div class="popover-content">{% trans "The password should contain different types of characters to make it strong: uppercase letters, lowercase letters, numbers and special characters." %}</div>
+        <div class="arrow"></div>
     </div>
 `;
 
@@ -30,12 +31,23 @@ function setupPasswordField(selector, passwdTip, baseTemplate) {
         template: template,
         trigger: 'focus',
     });
-    element.addEventListener('keyup', () => {
+    function check() {
         var pwd = element.value;
-        if (pwd.trim()) {
+        if (pwd) {
             var level = strengthLevelMap[evaluatePasswordStrength(pwd.trim())];
             showStrength(level);
+        } else {
+            showStrength(0);
         }
+    }
+    element.addEventListener('keyup', () => {
+        check();
+    });
+    element.addEventListener('focus', () => {
+        // make sure popover open first, then check password strength level
+        setTimeout(() => {
+            check();
+        }, 1);
     });
 }