Update MainForm and Home views
This commit is contained in:
parent
09edf2b7c7
commit
e6381d30c4
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<v-form @submit.prevent="submit">
|
||||
<v-card :elevation="12">
|
||||
<v-card :elevation="2">
|
||||
<v-card-title class="mb-6 pa-6 text-center">
|
||||
<span class="headline font-weight-light text-h4">Trocar senha</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
class="mb-8"
|
||||
class="mb-4"
|
||||
v-model="username"
|
||||
label="Usuário"
|
||||
:variant="'outlined'"
|
||||
|
@ -15,9 +15,10 @@
|
|||
prepend-inner-icon="mdi-account"
|
||||
:rules="[v => !!v || 'Campo obrigatório']"
|
||||
required
|
||||
density="compact"
|
||||
/>
|
||||
<v-text-field
|
||||
class="mb-8"
|
||||
class="mb-4"
|
||||
v-model="password"
|
||||
label="Senha atual"
|
||||
:type="showCurrent ? 'text' : 'password'"
|
||||
|
@ -28,6 +29,7 @@
|
|||
@click:append-inner="showCurrent = !showCurrent"
|
||||
:rules="[v => !!v || 'Campo obrigatório']"
|
||||
required
|
||||
density="compact"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
|
@ -42,9 +44,9 @@
|
|||
@click:append-inner="showNew = !showNew"
|
||||
:rules="[v => !!v || 'Campo obrigatório']"
|
||||
required
|
||||
density="compact"
|
||||
/>
|
||||
<v-text-field
|
||||
class="mb-8"
|
||||
v-model="confirmPassword"
|
||||
label="Confirme a nova senha"
|
||||
:type="showConfirm ? 'text' : 'password'"
|
||||
|
@ -53,9 +55,14 @@
|
|||
prepend-inner-icon="mdi-lock-check"
|
||||
:append-inner-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append-inner="showConfirm = !showConfirm"
|
||||
:rules="[v => !!v || 'Campo obrigatório']"
|
||||
:rules="[
|
||||
v => !!v || 'Campo obrigatório',
|
||||
v => v === newPassword || 'As senhas não coincidem'
|
||||
]"
|
||||
required
|
||||
density="compact"
|
||||
/>
|
||||
<password-checker class="mt-4" :password="newPassword" />
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
|
@ -66,6 +73,7 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import PasswordChecker from './PasswordChecker.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [{ username: string; currentPassword: string; newPassword: string }]
|
||||
|
|
46
src/web/components/PasswordChecker.vue
Normal file
46
src/web/components/PasswordChecker.vue
Normal file
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-alert
|
||||
v-for="alert in alerts"
|
||||
:key="alert.text"
|
||||
:type="alertType(password, alert.rule)"
|
||||
class="mb-1"
|
||||
variant="tonal"
|
||||
density="compact"
|
||||
>
|
||||
{{ alert.text }}
|
||||
</v-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps<{
|
||||
password: string
|
||||
}>()
|
||||
|
||||
function alertType(password: string, rule: (password: string) => boolean) {
|
||||
if (password.length === 0) return 'info'
|
||||
|
||||
return rule(password) ? 'success' : 'error'
|
||||
}
|
||||
|
||||
const alerts = [
|
||||
{
|
||||
text: 'Uma ou mais letras minúsculas.',
|
||||
rule: (password: string) => /[a-z]/.test(password)
|
||||
},
|
||||
{
|
||||
text: 'Uma ou mais letras maiúsculas.',
|
||||
rule: (password: string) => /[A-Z]/.test(password)
|
||||
},
|
||||
{
|
||||
text: '8 ou mais caracteres.',
|
||||
rule: (password: string) => password.length >= 8
|
||||
},
|
||||
{
|
||||
text: `Um ou mais caracteres especiais (!"#$%&'()*+,\\-./:;<=>?@[]^_\`{}|~).`,
|
||||
rule: (password: string) =>
|
||||
/[●!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/.test(password)
|
||||
}
|
||||
]
|
||||
</script>
|
|
@ -2,8 +2,7 @@
|
|||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="8" offset="2">
|
||||
<logo class="mx-auto mb-12" :style="{ maxWidth: '256px' }" />
|
||||
|
||||
<logo class="mx-auto my-3" :style="{ maxWidth: '128px' }" />
|
||||
<main-form @submit="submit" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
|
Loading…
Reference in New Issue
Block a user