Element-web: 入力された電話番号をローカルで検証する

作成日 2017年04月16日  ·  3コメント  ·  ソース: vector-im/element-web

説明

私のブラウザの自動入力は、おそらく古いフォームのデザインが原因で、電話番号ボックスに私のユーザー名を完成させました。 これは残念ながら検出が困難でした。ユーザー名が、フィールドが電話番号専用であることを示すテキストを覆い隠していたためです。 このシナリオのエラーメッセージはおそらく改善されるべきであり、UIはおそらくユーザーが電話番号フィールドにユーザー名を入力できないようにする必要があります。

再現する手順

  1. ログインページに移動します
  2. アメリカを選択し、携帯電話番号フィールドにユーザー名を入力します
  3. パスワードを入力してください
  4. サインインボタンを押す

何が起こるかがあなたが期待したものとどのように異なるかを説明してください。

  • 電話番号フィールドはおそらく文字を受け入れないはずです
  • 国フィールドは、国がサーバーの場所の設定ではなく電話番号の発信元を参照していることを示すために、より明確にラベル付けする必要があります
  • 電話番号に予期しない文字列を入力した場合のユーザーに表示されるエラー応答は、 There was a problem logging in. (HTTP 400)よりも詳細である必要があります。

ログ:

Successfully compiled asm.js code (total compilation time 38ms; unable to cache asm.js in synchronous scripts; try loading asm.js via <script async> or createElement('script'))  olm.js
"Initialised rageshake: See https://bugs.chromium.org/p/chromium/issues/detail?id=583193 to fix line numbers on Chrome."  bundle.js:81:17755
"Vector starting at https://riot.im/app/#/login"  bundle.js:81:17755
Restoring session for <strong i="21">@208425</strong>:matrix.org  bundle.js:81:17755
setLoggedIn => <strong i="22">@208425</strong>:matrix.org (guest=true) hs=https://matrix.org  bundle.js:81:17755
Session persisted for <strong i="23">@208425</strong>:matrix.org  bundle.js:81:17755
newscreen login  bundle.js:81:17755
XML Parsing Error: syntax error
Location: https://riot.im/app/version?cachebuster=1492311939009
Line Number 1, Column 1:  version:1:1
newscreen login  bundle.js:81:17755
IndexedDB worker is ready  bundle.js:81:17755
sync(): not doing HTTP hit, instead returning stored /sync data  bundle.js:81:17755
MatrixClient sync state => PREPARED  bundle.js:81:17755
MatrixClient sync state => SYNCING  bundle.js:81:17755
Persisting sync data up to  s132585502_195301772_228608_21601373_217439_72048_713898_550862  indexeddb-worker.js:27:30272
"/sync error Error: CORS request rejected: https://matrix.org/_matrix/client/r0/sync?filter=%7B%7D&timeout=30000&since=s132585502_195301772_228608_21601373_217439_72048_713898_550862&access_token=MDAxOGxvY2F0aW9uIG1hdHJpeC5vcmcKMDAxM2lkZW50aWZpZXIga2V5CjAwMTBjaWQgZ2VuID0gMQowMDI1Y2lkIHVzZXJfaWQgPSBAMjA4NDI1Om1hdHJpeC5vcmcKMDAxNmNpZCB0eXBlID0gYWNjZXNzCjAwMjFjaWQgbm9uY2UgPSAuYkJ-RUR0RVk0M2Q4NEVuCjAwMTVjaWQgZ3Vlc3QgPSB0cnVlCjAwMmZzaWduYXR1cmUgD12BMRtOxLxg1v2gIn3xNmE8LI1LAHF95Cby2ScNuHUK"  bundle.js:81:17755
Error: CORS request rejected: https://matrix.org/_matrix/client/r0/sync?filter=%7B%7D&timeout=30000&since=s132585502_195301772_228608_21601373_217439_72048_713898_550862&access_token=MDAxOGxvY2F0aW9uIG1hdHJpeC5vcmcKMDAxM2lkZW50aWZpZXIga2V5CjAwMTBjaWQgZ2VuID0gMQowMDI1Y2lkIHVzZXJfaWQgPSBAMjA4NDI1Om1hdHJpeC5vcmcKMDAxNmNpZCB0eXBlID0gYWNjZXNzCjAwMjFjaWQgbm9uY2UgPSAuYkJ-RUR0RVk0M2Q4NEVuCjAwMTVjaWQgZ3Vlc3QgPSB0cnVlCjAwMmZzaWduYXR1cmUgD12BMRtOxLxg1v2gIn3xNmE8LI1LAHF95Cby2ScNuHUK
Stack trace:
i<strong i="24">@https</strong>://riot.im/app/bundles/2379a6d8501f4248496c/bundle.js:46:29865
r<strong i="25">@https</strong>://riot.im/app/bundles/2379a6d8501f4248496c/bundle.js:46:29612
  bundle.js:81:17755
Number of consecutive failed sync requests: 1  bundle.js:81:17755
Starting keep-alive  bundle.js:81:17755
MatrixClient sync state => RECONNECTING  bundle.js:81:17755
MatrixClient sync state => SYNCING  bundle.js:81:17755
"/sync error Error: CORS request rejected: https://matrix.org/_matrix/client/r0/sync?filter=%7B%7D&timeout=30000&since=s132585551_195302203_228615_21601383_217439_72048_713898_550862&access_token=MDAxOGxvY2F0aW9uIG1hdHJpeC5vcmcKMDAxM2lkZW50aWZpZXIga2V5CjAwMTBjaWQgZ2VuID0gMQowMDI1Y2lkIHVzZXJfaWQgPSBAMjA4NDI1Om1hdHJpeC5vcmcKMDAxNmNpZCB0eXBlID0gYWNjZXNzCjAwMjFjaWQgbm9uY2UgPSAuYkJ-RUR0RVk0M2Q4NEVuCjAwMTVjaWQgZ3Vlc3QgPSB0cnVlCjAwMmZzaWduYXR1cmUgD12BMRtOxLxg1v2gIn3xNmE8LI1LAHF95Cby2ScNuHUK"  bundle.js:81:17755
Error: CORS request rejected: https://matrix.org/_matrix/client/r0/sync?filter=%7B%7D&timeout=30000&since=s132585551_195302203_228615_21601383_217439_72048_713898_550862&access_token=MDAxOGxvY2F0aW9uIG1hdHJpeC5vcmcKMDAxM2lkZW50aWZpZXIga2V5CjAwMTBjaWQgZ2VuID0gMQowMDI1Y2lkIHVzZXJfaWQgPSBAMjA4NDI1Om1hdHJpeC5vcmcKMDAxNmNpZCB0eXBlID0gYWNjZXNzCjAwMjFjaWQgbm9uY2UgPSAuYkJ-RUR0RVk0M2Q4NEVuCjAwMTVjaWQgZ3Vlc3QgPSB0cnVlCjAwMmZzaWduYXR1cmUgD12BMRtOxLxg1v2gIn3xNmE8LI1LAHF95Cby2ScNuHUK
Stack trace:
i<strong i="26">@https</strong>://riot.im/app/bundles/2379a6d8501f4248496c/bundle.js:46:29865
r<strong i="27">@https</strong>://riot.im/app/bundles/2379a6d8501f4248496c/bundle.js:46:29612
  bundle.js:81:17755
Number of consecutive failed sync requests: 1  bundle.js:81:17755
Starting keep-alive  bundle.js:81:17755
MatrixClient sync state => RECONNECTING  bundle.js:81:17755
MatrixClient sync state => SYNCING  bundle.js:81:17755

screenshot from 2017-04-15 21-14-10

バージョン情報

  • プラットフォーム:ウェブ
  • ブラウザ:Chromium v​​57.0.2987.98、Firefox v52.0.1
  • OS :Ubuntu v17.04
  • URL :riot.im/app
bug p1 minor uux

全てのコメント3件

これは、ブラウザが役に立ち、保存したユーザー名を電話フィールドに入力する場合に特に問題になります。

国のドロップダウンの使いやすさを改善するために、いくつかの作業を行っています。 その後、その目的はより明確になるはずです(#3524または#3526のいずれか)。

プレースホルダーテキストでのみラベル付けされているフィールドへのブラウザーの自動入力は興味深いものです。

  • フォームを変更するときは、オートフィルを認識しておく必要があります
  • おそらく、ラベル付けにプレースホルダーに依存するべきではありません(これはバイクシェディングに適しています)

明確ですぐに実行できるのは、エラーメッセージを改善することです。少なくとも、規定の形式と一致しない識別子を送信すると、「これは無効なXです」というメッセージが表示されます。

さらに良いのは、フォームが送信前に上記のフィードバックを提供することです。 私は、これらがどこかにどのように見えるべきかについて、いくつかの設計されたモックアップを持っていると_考えました_...

実際、これは修正されていません。

電話番号フィールドはおそらく文字を受け入れないはずです

@lampholderこれは、国のドロップダウンとはあまり関係がないように感じます(特に、それに着陸した最新の変更以降)。

これは、「なぜ文字を含む電話番号を許可するのか」という方針に沿っていると思います。

このページは役に立ちましたか?
0 / 5 - 0 評価