107 lines
3.7 KiB
Vue
Executable File
107 lines
3.7 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-10 col-sm-8">
|
|
<h4 class="fw-bold text-center pt-5 me-5"><span class="float-start " style="cursor: pointer" @click="this.$router.go(-1)"><i class="fa-solid fa-arrow-left-long"></i></span> Edit Account</h4>
|
|
<div class="row justify-content-center">
|
|
<div class="col-11 col-md-8">
|
|
<form @submit.prevent="saveUser">
|
|
<div class="row pt-5">
|
|
<div class="col-12">
|
|
<label class="text-muted ">First Name</label>
|
|
<input type="text" v-model="form.first_name" class="form-control" placeholder="First Name" />
|
|
<div class="invalid-feedback d-block" v-if="errors.first_name">{{errors.first_name[0]}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<label class="text-muted ">Surname</label>
|
|
<input type="text" v-model="form.surname" class="form-control" placeholder="Surname" />
|
|
<div class="invalid-feedback d-block" v-if="errors.surname">{{errors.surname[0]}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<label class="text-muted ">Email</label>
|
|
<input type="email" v-model="form.email" class="form-control" placeholder="Email" />
|
|
<div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<label class="text-muted ">Password</label>
|
|
<input type="password" v-model="form.password" class="form-control" placeholder="Password" />
|
|
<div class="invalid-feedback d-block" v-if="errors.password">{{errors.password[0]}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-5 ">
|
|
<div class="col-12 text-center">
|
|
<button type="submit" class="btn text-white fs-5 col-12 fw-bold py-2 " style="background-color: #e9c046">Save Changes <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div></button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Index from "~/pages/index.vue";
|
|
import {mapState,mapActions} from "pinia";
|
|
import {useUserStore} from "~/stores/user";
|
|
export default {
|
|
name:'EditAccount',
|
|
components: {Index},
|
|
computed:{
|
|
...mapState(useUserStore,['user'])
|
|
},
|
|
mounted() {
|
|
console.log(this.user)
|
|
this.form.first_name=this.user.first_name;
|
|
this.form.email=this.user.email;
|
|
this.form.surname=this.user.surname;
|
|
},
|
|
data(){
|
|
return {
|
|
loading:false,
|
|
form:{
|
|
first_name:"",
|
|
surname:"",
|
|
email:"email",
|
|
password:""
|
|
},
|
|
errors:[],
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
...mapActions(useUserStore,['updateUser']),
|
|
saveUser(){
|
|
this.loading=true;
|
|
this.$axios.post('/api/account/update',this.form).then(({data})=>{
|
|
this.loading=false;
|
|
if(data.success){
|
|
this.$toast.success(data.message);
|
|
this.updateUser(data.user);
|
|
}
|
|
}).catch((error)=>{
|
|
this.loading=false;
|
|
this.$toast.error('Something wrong while saving...');
|
|
if(error.response.status==422){
|
|
this.errors = error.response.data.errors;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |