Skip to content

Instantly share code, notes, and snippets.

@viniazvd
Created August 23, 2017 17:00
Show Gist options
  • Save viniazvd/bdada90dd1e579adc289054ec3cfe9b2 to your computer and use it in GitHub Desktop.
Save viniazvd/bdada90dd1e579adc289054ec3cfe9b2 to your computer and use it in GitHub Desktop.
Mudar tipo do input dinamicamente
<template>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Matricula</label>
<input type="matricula" v-model="user.matricula" class="form-control">
</div>
<div class="form-group" v-if="showPassword">
<label>Senha</label>
<input type="text" v-model="user.senha" class="form-control">
</div>
<div class="form-group" v-else="showPassword">
<label>Senha</label>
<input type="password" v-model="user.senha" class="form-control">
</div>
<div class="form-group">
<input type="checkbox" @click="changeType">
<label>Visualizar a senha ao digitar?</label>
</div>
<button type="submit" @click="doLogin" class="btn btn-success" :disabled="!isValid">Logar</button>
<sweet-modal icon="success" ref="modalSucess" @close="redirectPage">
Logado com sucesso!
</sweet-modal>
<sweet-modal icon="warning" ref="modalFail">
Dados incorretos. Tente novamente.
</sweet-modal>
<!-- modal para reenvio de senha -->
<button class="btn btn-default" @click="showModalReenvioSenha=true">Esqueceu a senha?</button>
<modalReenvioSenha v-if="showModalReenvioSenha" @close="showModalReenvioSenha=false"></modalReenvioSenha>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import { isEmpty } from 'lodash'
import modalReenvioSenha from './../../../../components/root/modals/ReenvioSenha.vue'
import modalMudarSenha from './../../../../components/root/modals/MudarSenha.vue'
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'
export default {
name: 'login',
components: { modalReenvioSenha, modalMudarSenha, SweetModal, SweetModalTab },
data () {
return {
user: {
matricula: '',
senha: ''
},
showModalReenvioSenha: false,
showModalMudarSenha: false,
showPassword: false
}
},
methods: {
...mapActions(['attemptLogin']),
doLogin () {
const user = this.user
this.attemptLogin({...user})
.then(() => {
this.user.matricula = ''
this.user.senha = ''
this.$refs.modalSucess.open()
})
.catch(() => {
this.$refs.modalFail.open()
})
},
redirectPage () {
this.$router.push('/dashboard')
},
changeType () {
this.showPassword = !this.showPassword
}
},
computed: {
isValid () {
const user = this.user
return !isEmpty(user.matricula) && !isEmpty(user.senha)
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment