Element-web: Valide a entrada do número de telefone localmente

Criado em 16 abr. 2017 · 3Comentários · Fonte: vector-im/element-web

Descrição

O preenchimento automático do meu navegador completou meu nome de usuário na caixa do número de telefone, provavelmente devido ao design de um formulário mais antigo. Isso foi lamentável e difícil de detectar porque o nome de usuário obscureceu o texto, indicando que o campo era apenas para números de telefone. A mensagem de erro para este cenário provavelmente deve ser melhorada e a IU provavelmente deve impedir que um usuário insira um nome de usuário no campo de número de telefone.

Passos para reproduzir

Vá para a página de login
Selecione América e digite seu nome de usuário no campo do número do celular
Coloque sua senha
Pressione o botão de login

Descreva como o que acontece difere do que você esperava.

O campo do número de telefone provavelmente não deve aceitar letras
O campo do país deve ser identificado de forma mais clara para indicar que o país se refere à origem do número de telefone, não à preferência de localização do servidor
A resposta de erro visível para o usuário ao inserir uma string inesperada para o número de telefone deve ser mais detalhada do que There was a problem logging in. (HTTP 400)

Registro:

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

Versão informação

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

bug p1 minor uux

Fonte

niedzielski

Todos 3 comentários

Isso é especialmente um problema quando o navegador tenta ser útil e coloca seu nome de usuário salvo no campo do telefone.

turt2live em 16 abr. 2017

😄1

Estamos trabalhando para melhorar a usabilidade do menu suspenso de países; sua finalidade deve ficar mais clara depois disso (em # 3524 ou # 3526).

O preenchimento automático do navegador em campos que são rotulados apenas por seu texto de espaço reservado é interessante:

devemos estar cientes do preenchimento automático ao alterar nossas formas
talvez não devêssemos confiar em marcadores de posição para rotulagem (isso é ideal para bicicletas)

Algo inequívoco e imediatamente acionável é melhorar a mensagem de erro - no mínimo, você deve obter um "Este é um X inválido" ao enviar um identificador que não corresponda ao formato prescrito.

Melhor ainda seria que o formulário fornecesse o referido feedback antes do envio. _Pensei_ que tínhamos algumas maquetes projetadas de como deveriam ser em algum lugar ...