経緯
はるか昔に登録していた Qiita のユーザ名を変更しようとしたら、パスワードの登録が必要なようでした。GoogleやTwitter連携でログインしていたので、パスワードを登録していませんでした。その際に、「パスワードの再入力」で30秒ほどハマったのが気になったので記載します。
Qiita のパスワード変更
「設定 > パスワード」で変更画面を表示できます。
事象
パスワードは、思い浮かべた単語の組み合わせか、ジェネレータで生成されたものをよく使います。
今回は、思い浮かべた単語の組み合わせます。
パスワード入力欄と再入力欄に軽快に入力し[Enter]します。
// 脱線しますが、パスワード欄にペーストさせないサイトもあるようですが、Qiitaは許可しているようですね。
// 調べるとUIとセキュリティの勉強になりそうです。
"Password confirmationとパスワードの入力が一致しません" の悲しい文言が表示されました。
完全にタイポと思い再入力しましたが、状況は変わらずでした。
[Enter]押す前に入力欄の ● を見ると、再入力欄の方がわずかに長いことに気が付きました。
// inputタグの type が "password" のときに表示される ● です。
確認したところ、初回の入力途中で勝手に文字が削除されてしまうようです。
// うまく説明できませんが、●●●●● と入力すると、一瞬の後、●●●● になります。
お勉強
素人ですが、ソースを見てみることにしました。
inputタグはこちら。
<input class="st-Form_text" required="" maxlength="32" type="password" name="user[password]">
class="st-Form_text"のCSSはこちら。
.st-Form_text {
display: block;
width: 100%;
font-size: 1.6rem;
background-color: #fff;
border-radius: 3px;
border: 1px solid #ccc;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
padding: 8px 16px;
cursor: text;
margin-top: .6em;
}
transitionが気になり ease-in-out の時間を変えたりしてみましたが、関係する挙動はなさそうでした。
では、パスワード強度判定かなと思い header を見てみると、こちらがありました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
AGILE社のWebサイトから zxcvbn.js の使い方を確認します。
実際に、zxcvbn の処理を行っている以下の .js をダウンロードして試してみようとしましたが、、
・https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js
・https://cdn.qiita.com/assets/public/bundle-70a524d8910b351d2a389235c5312375.min.js
ChromeDevToolでエラーになりました。もう少し工夫が必要そうです。
bundle-70a524d8910b351d2a389235c5312375.min.js:1 Uncaught TypeError: Cannot read property 'dataset' of null
at bundle-70a524d8910b351d2a389235c5312375.min.js:1
at bundle-70a524d8910b351d2a389235c5312375.min.js:1
ここまでで予想としては、1文字入力する毎に判定処理が走っているので、強度判定の処理に時間がかかるのかなと思います。
が、なぜ文字が消えるのかまではわかっていません。
もしかして、強度判定が終わった文字列を、input要素に挿入しているのかもしれません。
時間があるときに引き続き調査します。
// inputタグの maxlength="9999" にして試してみたら、PCが暖かくなりました。