Element-web: Validar la entrada del número de teléfono localmente

Creado en 16 abr. 2017 · 3Comentarios · Fuente: vector-im/element-web

Descripción

La función de autocompletar de mi navegador completó mi nombre de usuario en el cuadro del número de teléfono probablemente debido al diseño de un formulario anterior. Esto fue desafortunado y difícil de detectar porque el nombre de usuario ocultaba el texto que indicaba que el campo era solo para números de teléfono. El mensaje de error para este escenario probablemente debería mejorarse y la interfaz de usuario probablemente debería evitar que un usuario ingrese un nombre de usuario en el campo del número de teléfono.

pasos para reproducir

Ir a la página de inicio de sesión
Seleccione América e ingrese su nombre de usuario en el campo del número de teléfono móvil
Ingresa tu contraseña
Presione el botón de inicio de sesión

Describe en qué se diferencia lo que sucede de lo que esperabas.

El campo del número de teléfono probablemente no debería aceptar letras
El campo del país debe estar etiquetado más claramente para indicar que el país se refiere al origen del número de teléfono, no a la preferencia de ubicación del servidor.
La respuesta de error visible del usuario para ingresar una cadena inesperada para el número de teléfono debe ser más detallada que There was a problem logging in. (HTTP 400)

Tronco:

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

Información de versión

Plataforma : web
Navegador : Chromium v57.0.2987.98, Firefox v52.0.1
SO : Ubuntu v17.04
URL : riot.im/app

bug p1 minor uux

Fuente

niedzielski

Todos 3 comentarios

Esto es particularmente un problema cuando el navegador intenta ser útil y coloca su nombre de usuario guardado en el campo del teléfono.

turt2live en 16 abr. 2017

😄1

Estamos trabajando para mejorar la usabilidad del menú desplegable de países; su propósito debería ser más claro después de eso (ya sea en # 3524 o # 3526).

El navegador que se autocompleta en campos que solo están etiquetados por su texto de marcador de posición es interesante:

Debemos ser conscientes del autocompletado al cambiar nuestros formularios.
tal vez no deberíamos confiar en el marcador de posición para el etiquetado (esto está listo para eliminar bicicletas)

Algo que no es ambiguo y que se puede accionar de inmediato es mejorar el mensaje de error; al menos, debería obtener un "Esa es una X inválida" al enviar un identificador que no coincide con el formato prescrito.

Aún mejor sería que el formulario proporcione dicha retroalimentación antes de enviarla. Pensé que teníamos algunas maquetas diseñadas de cómo deberían verse en algún lugar ...

lampholder en 20 abr. 2017

👍1

En realidad, esto no está arreglado.

El campo del número de teléfono probablemente no debería aceptar letras

@lampholder Siento que esto no tiene mucho que ver con el menú desplegable de países (especialmente desde los cambios más recientes que aterrizaron para él).

Creo que esto va más en la línea de "¿Por qué permitimos números de teléfono con letras?".