pasword change filed broken on personal page

[schiessle]

If you try to change your password on the personal page, first everything looks OK:

but if you try to look at the password you just entered, the password-strength-indicator moves to the top:

cc @nextcloud/designers

[eppfel]

<div class="personal-show-container">
  <label for="pass2" class="hidden-visually">New password: </label>
  <input type="password" id="pass2" name="newpassword" placeholder="New password" data-typetoggle="#personal-show" autocomplete="off" autocapitalize="none" autocorrect="off"  style="display: none;"><div class="strengthify-wrapper" data-strengthifyfor="pass2" title="" data-original-title="Very weak password" aria-describedby="tooltip862577">
  <div class="strengthify-bg" style="opacity: 1;"></div><div class="password-bad strengthify-container" style="opacity: 1; width: 25%;"></div><div class="strengthify-separator" style="left: 25%; opacity: 1;"></div><div class="strengthify-separator" style="left: 50%; opacity: 1;"></div><div class="strengthify-separator" style="left: 75%; opacity: 1;"></div><div class="strengthify-tiles" style="opacity: 1;"></div></div><div class="tooltip fade bottom in" role="tooltip" id="tooltip862577" style="top: 34px; left: 2px; display: block;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Very weak password</div></div>
  <input type="text" name="newpassword-clone" autocomplete="off" placeholder="New password" style="display: inline-block;">
  <input type="checkbox" id="personal-show" name="show"><label for="personal-show" class="personal-show-label"></label>
</div>

The input[type="text"] with the clear text sits under the strengthify div. When it would sit on top, it works.

<div class="personal-show-container">
  <input type="text" name="newpassword-clone" autocomplete="off" placeholder="New password" style="display: inline-block;">
  <label for="pass2" class="hidden-visually">New password: </label>
  <input type="password" id="pass2" name="newpassword" placeholder="New password" data-typetoggle="#personal-show" autocomplete="off" autocapitalize="none" autocorrect="off"  style="display: none;"><div class="strengthify-wrapper" data-strengthifyfor="pass2" title="" data-original-title="Very weak password" aria-describedby="tooltip862577">
  <div class="strengthify-bg" style="opacity: 1;"></div><div class="password-bad strengthify-container" style="opacity: 1; width: 25%;"></div><div class="strengthify-separator" style="left: 25%; opacity: 1;"></div><div class="strengthify-separator" style="left: 50%; opacity: 1;"></div><div class="strengthify-separator" style="left: 75%; opacity: 1;"></div><div class="strengthify-tiles" style="opacity: 1;"></div></div><div class="tooltip fade bottom in" role="tooltip" id="tooltip862577" style="top: 34px; left: 2px; display: block;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Very weak password</div></div>
  <input type="checkbox" id="personal-show" name="show"><label for="personal-show" class="personal-show-label"></label>
</div>

The strengthify is injected after pass2, but I could not find, where the input[type="text"] is injected.

Relevant files:

• settings/templates/personal.php
• settings/js/personal.js

[MorrisJobke]

moved to 12.0.1

[AykutCevik]

I also have a similar issue regarding the password change:
If I enter a long password (longer than input width) and want to review it moving the caret with the keyboard arrow keys, the strength indicator becomes on top of the input field:

Edit: moved suggestion to #5181. Thanks @eppfel.

[eppfel]

@AykutCevik Can you open a new issue for your wokflow suggestion/critique? This issue is for a particular bug.