Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/components/User/Info.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="user-info"> | <div class="card" id="user-info"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title">User account</div> | <div class="card-title">User account</div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form @submit.prevent="submit"> | |||||
<div class="form-group row"> | |||||
<label for="first_name" class="col-sm-4 col-form-label">First name</label> | |||||
<div class="col-sm-8"> | |||||
<input type="text" class="form-control" id="first_name" v-model="user.first_name"> | |||||
</div> | |||||
</div> | |||||
<div class="form-group row"> | |||||
<label for="last_name" class="col-sm-4 col-form-label">Last name</label> | |||||
<div class="col-sm-8"> | |||||
<input type="text" class="form-control" id="last_name" v-model="user.last_name"> | |||||
</div> | |||||
</div> | |||||
<div class="form-group row"> | |||||
<label for="email" class="col-sm-4 col-form-label">Email</label> | |||||
<div class="col-sm-8"> | |||||
<input type="text" class="form-control" id="email" disabled v-model="user.email"> | |||||
</div> | |||||
</div> | |||||
<!-- | |||||
<div class="form-group row"> | |||||
<label for="alias" class="col-sm-4 col-form-label">Email aliases</label> | |||||
<div class="col-sm-8"> | |||||
<input type="text" class="form-control" id="alias" v-model="user.alias"> | |||||
</div> | |||||
</div> | |||||
--> | |||||
<div class="form-group row"> | |||||
<label for="password" class="col-sm-4 col-form-label">Password</label> | |||||
<div class="col-sm-8"> | |||||
<input type="password" class="form-control" id="password" v-model="user.password"> | |||||
</div> | |||||
</div> | |||||
<div class="form-group row"> | |||||
<label for="password_confirmaton" class="col-sm-4 col-form-label">Confirm password</label> | |||||
<div class="col-sm-8"> | |||||
<input type="password" class="form-control" id="password_confirmation" v-model="user.password_confirmation"> | |||||
</div> | |||||
</div> | |||||
<button class="btn btn-primary" type="submit">Submit</button> | |||||
</form> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
user_id: null, | user_id: null, | ||||
user: null | user: {} | ||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
if (this.user_id = this.$route.params.user) { | if (this.user_id = this.$route.params.user) { | ||||
axios.get('/api/v4/users/' + this.user_id) | axios.get('/api/v4/users/' + this.user_id) | ||||
.then(response => { | .then(response => { | ||||
this.user = response.data | this.user = response.data | ||||
this.user.first_name = response.data.settings.first_name | |||||
this.user.last_name = response.data.settings.last_name | |||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
} else { | } else { | ||||
this.$root.errorPage(404) | this.$root.errorPage(404) | ||||
} | } | ||||
}, | |||||
mounted() { | |||||
$('#first_name').focus() | |||||
}, | |||||
methods: { | |||||
submit() { | |||||
this.$root.clearFormValidation($('#user-info form')) | |||||
axios.put('/api/v4/users/' + this.user_id, this.user) | |||||
.then(response => { | |||||
delete this.user.password | |||||
delete this.user.password_confirm | |||||
if (response.data.status == 'success') { | |||||
this.$toastr('success', response.data.message) | |||||
} | |||||
}) | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |