QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.
- Source
- Introdução
- Parte I - ASP.NET - Inicializando os Projetos
- Parte 2 - PostgreSQL
- Parte 3 - ASP.NET - Registrando Serviços e Lendo Variáveis de Ambiente
- Parte 4 - ASP.NET - Entity Framework e ASP.NET Core Identity
- Parte 5 - ASP.NET - Documentação Interativa com Swagger
- Parte 6 - ASP.NET - Regionalização
- Parte 7 - ASP.NET - Autenticação e Autorização
- Parte 8 - ASP.NET - CORS
- Parte 9 - Quasar - Criação e Configuração do Projeto
- Parte 10 - Quasar - Configurações e Customizações
- Parte 11 - Quasar - Componentes - Diferença entre SPA e SSR
- Parte 12 - Quasar - Serviços
- Parte 13 - Quasar - Regionalização e Stores
- Parte 14 - Quasar - Consumindo a API
- Parte 15 - Quasar - Login
- Parte 16 - Quasar - Áreas Protegidas
- Parte 17 - Quasar - Registro
- Parte 18 - Docker - Maquina Virtual Linux
- Parte 19 - Docker - Registro e Build
- Parte 20 - Docker - Traefik e Publicação
- Demo Online
35 Registrar Usuário.
Antes de criamos o componente de registro, precisamos adicionar duas novas regras de validação no validations.js
QPANC.App/src/services/validations.js
validations.compare = ({ self, field }) => {
return function required (val) {
var other = self.validationArgs[field].compare
return val === self[other] || self.$t('validations.compare', {
field: self.$t(`fields.${field}`),
other: self.$t(`fields.${other}`)
})
}
}
validations.strength = ({ self, field }) => {
return function required (val) {
const property = self.validationArgs[field].strength
const strength = self[property]
return strength < 0.6 || self.$t('validations.strength', {
field: self.$t(`fields.${field}`)
})
}
}
A regra compare
serve para comprar o valor de dois campos, o campo other
é definido no validationArgs.compare
.
A regra strength
testa a força de uma senha, no caso, este valor varia de 0 à 1, por hora, iremos definir um valor de 0.6 como aceitável, o validationArgs.strength
possui o nome da propriedade computada que realiza o calculo.
Agora, precisamos instalar o pacote zxcvbn
, pois iremos utiliza-lo para validar a força da senha:
yarn add zxcvbn
Então, podemos criar a nossa pagina de registro
QPANC.App/src/pages/home/store.js
import { factory } from '@toby.mosque/utils'
import { Dialog } from 'quasar'
class RegisterPageModel {
constructor ({
userName = '',
confirmUserName = '',
firstName = '',
lastName = '',
password = '',
confirmPassword = ''
} = {}) {
this.userName = userName
this.confirmUserName = confirmUserName
this.firstName = firstName
this.lastName = lastName
this.password = password
this.confirmPassword = confirmPassword
}
}
const options = {
model: RegisterPageModel
}
export default factory.store({
options,
actions: {
async initialize ({ state }, { route, next }) {
},
async register ({ state }) {
await this.$axios.post('/Auth/Register', state)
this.$router.push('/login')
Dialog.create({
color: 'positive',
message: this.$t('register.success')
})
}
}
})
export { options, RegisterPageModel }
Na store não há nada de novo.
QPANC.App/src/pages/home/index.js
import validations from 'services/validations'
import { factory } from '@toby.mosque/utils'
import store, { options } from './store'
import zxcvbn from 'zxcvbn'
const moduleName = 'page-register'
export default factory.page({
name: 'RegisterPage',
options,
moduleName,
storeModule: store,
created () {
if (process.env.CLIENT) {
this.$root.$on('unprocessable', this.unprocessable)
}
},
destroy () {
if (process.env.CLIENT) {
this.$root.$off('unprocessable', this.unprocessable)
}
},
data () {
const self = this
const validation = validations(self, {
userName: ['required', 'email', 'server'],
confirmUserName: ['required', 'compare', 'email'],
firstName: ['required'],
lastName: ['required'],
password: ['required', 'strength', 'server'],
confirmPassword: ['required', 'compare']
})
return {
validation,
validationArgs: {
userName: {
server: true
},
confirmUserName: {
compare: 'userName'
},
password: {
server: true
},
confirmPassword: {
compare: 'password'
}
}
}
},
computed: {
strength () {
if (!this.password) {
return 0
}
const strength = zxcvbn(this.password).score + 1
return strength / 5
},
strColor () {
switch (this.strength) {
case 1: return 'blue'
case 0.8: return 'green'
case 0.6: return 'yellow'
case 0.4: return 'orange'
case 0.2: return 'red'
default: return 'grey'
}
}
},
methods: {
unprocessable (errors) {
switch (true) {
case !!errors.UserName: this.validationArgs.userName.server = errors.UserName[0]; break
case !!errors.Password: this.validationArgs.password.server = errors.Password[0]; break
}
this.$refs.form.validate()
},
async register () {
this.validation.resetServer()
const isValid = await this.$refs.form.validate()
if (isValid) {
this.$store.dispatch(`${moduleName}/register`)
}
}
}
})
No script do componente, você pode observar o data
, onde agora temos as regras compare
e strength
, e no confirmUserName
estamos a definir as depedencias para estas validações.
No computed
, temos o strength
e strColor
, que é utilizado para mensurar a força do password
.
Lembrando que a regra usada pelo
zxcvbn
não é a mesma regra que é utilizado no servidor, por tanto, oback
pode vir a reclamar da senha, mesmo que ofront
o aprove, então o ideal é que use ozxcvbn
no backend, ou replique os requerimentos doback
nofront
QPANC.App/src/pages/home/index.sass
#page-register
QPANC.App/src/pages/home/index.vue
<template>
<div id="page-register">
<h5 class="q-my-md">{{$t('register.title')}}</h5>
<q-separator></q-separator>
<q-form ref="form" class="row q-col-gutter-sm">
<div class="col col-12">
<q-input v-model="userName" :label="$t('fields.userName')" :rules="validation.userName" @blur="validationArgs.userName.server = true"></q-input>
</div>
<div class="col col-12">
<q-input v-model="confirmUserName" :label="$t('fields.confirmUserName')" :rules="validation.confirmUserName"></q-input>
</div>
<div class="col col-12">
<q-input v-model="firstName" :label="$t('fields.firstName')" :rules="validation.firstName"></q-input>
</div>
<div class="col col-12">
<q-input v-model="lastName" :label="$t('fields.lastName')" :rules="validation.lastName"></q-input>
</div>
<div class="col col-12">
<q-input type="password" v-model="password" :label="$t('fields.password')" :rules="validation.password" @blur="validationArgs.password.server = true"></q-input>
<q-linear-progress size="10px" stripe :value="strength" :color="strColor" ></q-linear-progress>
</div>
<div class="col col-12">
<q-input type="password" v-model="confirmPassword" :label="$t('fields.confirmPassword')" :rules="validation.confirmPassword"></q-input>
</div>
<div class="col col-5">
<q-btn class="full-width" color="secondary" :label="$t('actions.backLogin')" to="/login"></q-btn>
</div>
<div class="col col-7">
<q-btn class="full-width" color="positive" :label="$t('actions.register')" @click="register"></q-btn>
</div>
</q-form>
</div>
</template>
<script src="./index.js"></script>
<style src="./index.sass" lang="sass"></style>
A unica novidade aqui, é a presença do QLinearProgress
.
E agora, um vídeo com o processo de registro e login
Top comments (0)