Element-web: Validasi masukan nomor telepon secara lokal

Dibuat pada 16 Apr 2017 · 3Komentar · Sumber: vector-im/element-web

Deskripsi

Pengisian otomatis browser saya melengkapi nama pengguna saya di kotak nomor telepon mungkin karena desain formulir yang lebih lama. Hal ini sangat disayangkan dan sulit untuk dideteksi karena nama pengguna mengaburkan teks yang menunjukkan bahwa bidang tersebut hanya untuk nomor telepon. Pesan kesalahan untuk skenario ini mungkin harus diperbaiki dan UI mungkin harus mencegah pengguna memasukkan nama pengguna di bidang nomor telepon.

Langkah-langkah untuk mereproduksi

Buka halaman login
Pilih Amerika dan masukkan nama pengguna Anda di kolom nomor ponsel
Masukkan kata sandi Anda
Tekan tombol masuk

Jelaskan bagaimana apa yang terjadi berbeda dari yang Anda harapkan.

Bidang nomor telepon mungkin tidak menerima surat
Bidang negara harus diberi label yang lebih jelas untuk menunjukkan bahwa negara mengacu pada asal nomor telepon, bukan preferensi lokasi server
Respons kesalahan yang terlihat oleh pengguna untuk memasukkan string yang tidak diharapkan untuk nomor telepon harus lebih panjang dari There was a problem logging in. (HTTP 400)

Catatan:

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

Informasi versi

Platform : web
Browser : Chromium v57.0.2987.98, Firefox v52.0.1
OS : Ubuntu v17.04
URL : riot.im/app

bug p1 minor uux

Sumber

niedzielski

Semua 3 komentar

Ini terutama menjadi masalah ketika browser mencoba membantu dan meletakkan nama pengguna Anda yang disimpan di bidang telepon.

turt2live pada 16 Apr 2017

😄1

Kami sedang melakukan beberapa pekerjaan untuk meningkatkan kegunaan tarik-turun negara; tujuannya harus lebih jelas setelah itu (baik di # 3524 atau # 3526).

Pengisian otomatis browser ke dalam bidang yang hanya diberi label oleh teks placeholder adalah hal yang menarik:

kita harus menyadari isi otomatis saat mengubah formulir kita
mungkin kita tidak harus bergantung pada placeholder untuk pelabelan (ini sudah matang untuk bikeshedding)

Sesuatu yang tidak ambigu dan dapat segera ditindaklanjuti adalah memperbaiki pesan kesalahan - setidaknya Anda harus mendapatkan "Itu X yang tidak valid" saat mengirimkan pengenal yang tidak cocok dengan format yang ditentukan.

Lebih baik lagi jika formulir memberikan umpan balik tersebut sebelum diserahkan. Saya _pikir_ kami memiliki beberapa rancangan mockup tentang bagaimana seharusnya ini terlihat di suatu tempat ...