Configurações da conta

Configurações da conta dentro do shell do app, em quatro seções: perfil com envio de foto e validação, chaves de notificação, troca de senha com ativação da verificação em duas etapas e uma zona de perigo que pede confirmação.

Feito comCopy Anchor Link

• AppShell
• Sidebar
• Drawer
• Tabs
• Card
• Avatar
• Button
• Field
• Input
• Textarea
• NativeSelect
• Switch
• Separator
• PasswordInput
• OtpField
• Badge
• AlertDialog
• Alert
• Heading
• Text

ComportamentoCopy Anchor Link

• Dentro do app. As configurações ficam no mesmo AppShell do dashboard de vendas: menu lateral a partir de 1000px, trilho de ícones a partir de 640px e um Drawer abaixo disso. As seções são abas; abaixo de 640px um select escolhe a seção, então nenhuma aba fica escondida fora da tela. Experimente a largura Celular acima.
• Perfil. Enviar foto abre o seletor de arquivos e mostra a imagem no Avatar na hora (uma URL de objeto; envie o arquivo ao servidor ao salvar). A bio conta os 160 caracteres que faltam. Salvar valida nome e e-mail e confirma numa linha de status.
• Notificações. Cada chave fica dentro de um rótulo que ocupa a linha toda, então o título e a dica também a alternam. Elas salvam na hora, como diz o rodapé.
• Segurança. O formulário de senha confere a senha atual, as regras da nova e se a confirmação bate. Ativar a verificação em duas etapas mostra a chave de configuração e um OtpField; Verificar exige os 6 dígitos e o selo passa para Ativada.
• Zona de perigo. Excluir conta abre um AlertDialog cujo botão de excluir fica desativado até você digitar marina. Confirmar troca o card por um aviso com opção de desfazer.

AcessibilidadeCopy Anchor Link

• As setas do teclado andam entre as abas e Enter abre uma. Cada seção começa com um h2 escondido da tela (a aba ou o select já mostram o nome), e os cards dentro dela usam h3.
• Mensagens de salvo e de erro ficam em regiões role="status" ou ligadas aos campos com FieldError, então os leitores de tela as anunciam.
• As células do código se chamam "Dígito 2 de 6", e a primeira usa o rótulo do campo.
• O AlertDialog prende o foco, começa no primeiro controle e devolve o foco ao botão que o abriu quando fecha.