PasswordStrong

src/components/password-strong/password-strong.vue

Form Low 4 usos

Indicador de força de senha. Exibe uma barra de progresso colorida (vs-progress) e label de texto baseados no score calculado por filterPassword(). Puramente visual — recebe a senha via prop e não emite eventos. Sempre posicionado abaixo de um vs-input de senha pelo componente pai.

Estados da barra

Quatro estados baseados no score da senha: vazia (0%), fraca (50% danger), média (75% warning), forte (100% success). Score calculado internamente por filterPassword() de src/utils/index.js.

Vazia

Fraca — score 50

Senha Fraca

Média — score 75

Senha Média

Forte — score 100

Senha Forte

<password-strong :password="password" class="mb-4"></password-strong>

Em contexto (abaixo do input de senha)

Padrão universal: password-strong sempre segue imediatamente o vs-input de senha. A senha é mantida em data() e passada via v-model no input e :password no indicador.

Nova Senha

Senha Forte

<!-- Padrão universal: vs-input de senha + password-strong abaixo -->
<vs-input
  v-model="password"
  label="Nova Senha"
  type="password"
  class="w-full mb-3"
/>
<password-strong :password="password" class="mb-4"></password-strong>

API

Exemplo completo

<!-- password: string da senha atual — o único prop. -->
<!-- O componente calcula o nível internamente com filterPassword() de src/utils/index.js. -->
<!-- Sem eventos emitidos — componente puramente visual/unidirecional. -->
<password-strong :password="password" class="mb-4"></password-strong>

Props

Nome	Tipo	Default	Obrig.	Descrição
`password`	String	`''`	Sim	Senha atual para avaliar. Observada via watch — atualiza o indicador a cada mudança.

Algoritmo de scoring (`filterPassword`)

Nível	Score	Cor	Label	Condição
Fraca	50	danger	Senha Fraca	3+ chars idênticos consecutivos; sequências comuns (123, abc, xyz...); menos de 8 chars
Média	75	warning	Senha Média	Sem 2+ caracteres especiais; sem letra minúscula E maiúscula simultâneas
Forte	100	success	Senha Forte	Aprovada em todas as verificações acima

Dependências

vs-progress (Vuesax 3) — barra de progresso com props percent, color, rounded
src/utils/index.js → filterPassword() — lógica de scoring

Onde é usado

src/layouts/components/password/UpdatePasswordPopup.vue
src/views/users/UserViewSidebar.vue
src/views/pages/user-settings/UserSettingsChangePassword.vue
src/views/pages/forgot/NewPassword.vue

Features comentadas: O template do componente tem código comentado para uma lista de requisitos da senha e um box de aviso amarelo — funcionalidades planejadas mas não ativas no admin. Os estilos .warning, .bullet-list, .green, .red existem no CSS scoped mas não são usados atualmente.