Update MainForm and Home views
This commit is contained in:
parent
09edf2b7c7
commit
e6381d30c4
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<v-form @submit.prevent="submit">
|
<v-form @submit.prevent="submit">
|
||||||
<v-card :elevation="12">
|
<v-card :elevation="2">
|
||||||
<v-card-title class="mb-6 pa-6 text-center">
|
<v-card-title class="mb-6 pa-6 text-center">
|
||||||
<span class="headline font-weight-light text-h4">Trocar senha</span>
|
<span class="headline font-weight-light text-h4">Trocar senha</span>
|
||||||
</v-card-title>
|
</v-card-title>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="mb-8"
|
class="mb-4"
|
||||||
v-model="username"
|
v-model="username"
|
||||||
label="Usuário"
|
label="Usuário"
|
||||||
:variant="'outlined'"
|
:variant="'outlined'"
|
||||||
|
@ -15,9 +15,10 @@
|
||||||
prepend-inner-icon="mdi-account"
|
prepend-inner-icon="mdi-account"
|
||||||
:rules="[v => !!v || 'Campo obrigatório']"
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
required
|
required
|
||||||
|
density="compact"
|
||||||
/>
|
/>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="mb-8"
|
class="mb-4"
|
||||||
v-model="password"
|
v-model="password"
|
||||||
label="Senha atual"
|
label="Senha atual"
|
||||||
:type="showCurrent ? 'text' : 'password'"
|
:type="showCurrent ? 'text' : 'password'"
|
||||||
|
@ -28,6 +29,7 @@
|
||||||
@click:append-inner="showCurrent = !showCurrent"
|
@click:append-inner="showCurrent = !showCurrent"
|
||||||
:rules="[v => !!v || 'Campo obrigatório']"
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
required
|
required
|
||||||
|
density="compact"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
|
@ -42,9 +44,9 @@
|
||||||
@click:append-inner="showNew = !showNew"
|
@click:append-inner="showNew = !showNew"
|
||||||
:rules="[v => !!v || 'Campo obrigatório']"
|
:rules="[v => !!v || 'Campo obrigatório']"
|
||||||
required
|
required
|
||||||
|
density="compact"
|
||||||
/>
|
/>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="mb-8"
|
|
||||||
v-model="confirmPassword"
|
v-model="confirmPassword"
|
||||||
label="Confirme a nova senha"
|
label="Confirme a nova senha"
|
||||||
:type="showConfirm ? 'text' : 'password'"
|
:type="showConfirm ? 'text' : 'password'"
|
||||||
|
@ -53,9 +55,14 @@
|
||||||
prepend-inner-icon="mdi-lock-check"
|
prepend-inner-icon="mdi-lock-check"
|
||||||
:append-inner-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
|
:append-inner-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
|
||||||
@click:append-inner="showConfirm = !showConfirm"
|
@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
|
required
|
||||||
|
density="compact"
|
||||||
/>
|
/>
|
||||||
|
<password-checker class="mt-4" :password="newPassword" />
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer />
|
<v-spacer />
|
||||||
|
@ -66,6 +73,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
import PasswordChecker from './PasswordChecker.vue'
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
submit: [{ username: string; currentPassword: string; newPassword: string }]
|
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-container>
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col cols="8" offset="2">
|
<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" />
|
<main-form @submit="submit" />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user