UpdatePasswordPopup

src/layouts/components/password/UpdatePasswordPopup.vue

Overlay Medium 1 uso

Popup obrigatório de atualização de senha inicial. Exibido automaticamente quando AppActiveUser.old_password_in_use = true e a rota não é /two-factor ou /chat-attendance. Sem botão de fechar — o usuário deve atualizar a senha para continuar. Contém: ícone de cadeado, texto explicativo, alert collapsible com requisitos, 2 campos senha com toggle visibilidade, indicador PasswordStrong, e botão Salvar. Valida filterPassword(password) >= 75 antes de salvar. MutationObserver previne remoção do popup via DevTools — se #updatePasswordPopup sumir, recarrega a página. Zero props, zero eventos.

Requisitos Recolhidos (padrão)

Estado inicial: showRequirements = false. Alert primário exibe apenas o texto "Veja os requisitos" com chevron-down. Campos vazios → botão Salvar desabilitado.

<!-- Registrado junto com os outros 2 popups de sistema -->
<notification-popup/>
<contract-popup/>
<update-password-popup/>

Requisitos Expandidos + Senha Forte

showRequirements = true: alert expand para 170px mostrando 6 requisitos. Campos preenchidos com senha forte (score ≥ 75) → PasswordStrong verde → botão Salvar ativo.

<!-- Fluxo interno — sem props configuráveis -->
<!-- 1. mounted(): old_password_in_use=true → isPopupActive=true + watchPopupDeletion() -->
<!-- 2. vs-alert collapsible: clique em 'Veja os requisitos' toggle showRequirements -->
<!-- 3. vs-input senha + confirme senha com toggle visibility (vs-icon olho, 23px) -->
<!-- 4. password-strong :password="password" — score em tempo real -->
<!-- 5. Salvar: score >= 75 → dispatch user/updatePassword → fecha popup -->
<!--    score < 75 → $vs.notify danger "Senha fraca" -->
<!-- 6. Fechar: impossível — button-close-hidden=true, sem cancelar -->
<update-password-popup/>

MutationObserver — Proteção Anti-DevTools

O componente registra um MutationObserver no document.body ao abrir. Se #updatePasswordPopup for removido do DOM (ex: via DevTools), a página é recarregada. O observer é desconectado em 3 situações.

mounted(): isPopupActive = true → watchPopupDeletion() chamado

↓

MutationObserver observa document.body (childList + subtree)

↓ elemento removido do DOM

observer.callback: #updatePasswordPopup não encontrado → location.reload()

── observer.disconnect() em:

1. Salvo com sucesso (dispatch user/updatePassword resolvido)

2. Mudança de rota (watch: $route)

3. beforeDestroy()

API

Resumo
Props	Nenhuma
Eventos emitidos	Nenhum
Padrão	Singleton Vuex — bloqueante, sem fechar
Condição de abertura	`AppActiveUser.old_password_in_use = true` + rota permitida
Rotas bloqueadas	`/two-factor`, `/chat-attendance` — não renderiza

Estado interno (data)

Propriedade	Tipo	Descrição
`isPopupActive`	Boolean	Controla `vs-popup`. Setado true em mounted quando old_password_in_use=true.
`password`	String	Campo nova senha. Passado para PasswordStrong e filterPassword().
`confirm_password`	String	Campo confirmação. Validado contra password via vee-validate.
`showRequirements`	Boolean	Toggle do vs-alert de requisitos. False = recolhido, True = expandido (170px).
`showPassword`	Boolean	Toggle visibilidade campo nova senha. Alterna ícone `visibility/visibility_off`.
`showConfirmPassword`	Boolean	Toggle visibilidade campo confirmação.
`observer`	MutationObserver	Referência ao observer. Desconectado em 3 situações (ver seção acima).

Validação de senha

Condição	Resultado
Campos vazios ou erro vee-validate	Botão Salvar desabilitado (computed `formValid`)
`filterPassword(password) < 75`	`$vs.notify` danger — senha fraca
`filterPassword(password) >= 75`	dispatch `user/updatePassword` → UPDATE_USER_INFO(old_password_in_use=false) → fecha popup

Dependências

Tipo	Dependência	Descrição
Vuesax	`vs-popup`, `vs-input`, `vs-icon`, `vs-alert`, `vs-button`	Popup base e campos de formulário
Custom	PasswordStrong, FeatherIcon	Indicador de força de senha e ícones
Store	`user` (módulo dinâmico)	Action `user/updatePassword` e `AppActiveUser.old_password_in_use`
Utils	`filterPassword()`	Calcula score de força da senha (0–100). Threshold: 75 para salvar.
Web API	`MutationObserver`	Proteção anti-DevTools: recarrega página se popup removido do DOM

Onde é usado

Arquivo	Nota
`src/layouts/main/Main.vue:78`	Único uso. Registrado no bloco de popups de sistema junto com NotificationPopup e ContractPopup.