initialize project
This commit is contained in:
Afrina Alimi
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<form id="add_form" @submit.prevent="add()">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Manage Account'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: () => ({
|
||||
loading: false
|
||||
}),
|
||||
|
||||
methods:{
|
||||
add: function () {
|
||||
if (this.loading || !this.isPasswordMatch()) return;
|
||||
var vm = this;
|
||||
this.loading = true;
|
||||
this.util.notify('Adding Admin', 'loading');
|
||||
axios.post(config.API+'admin', $('#add_form').serialize())
|
||||
.then(response=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.$router.push({name: 'Manage Account'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
vm.loading = false;
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error')
|
||||
})
|
||||
},
|
||||
|
||||
isPasswordMatch: function () {
|
||||
var isMatch = $('[name=password]').val() == $('[name=confirm_password]').val();
|
||||
if (!isMatch) this.util.notify('Password not match', 'error');
|
||||
return isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container col-md-8 col-md-offset-2">
|
||||
<h4>Manage Account</h4>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
created: function () {
|
||||
this.util.setTitle('Voting System - Manage Account');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Update Account</h4>
|
||||
<form @submit.prevent="edit()" id="edit_form">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" name="name" class="form-control" :value="data.user.name" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" class="form-control" :value="data.user.email" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Update Password'}" class="btn btn-default">Change Password</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
refreshUser: function () {
|
||||
var vm = this;
|
||||
axios.get(config.API+'admin/'+this.data.user.id)
|
||||
.then(response=>{
|
||||
vm.data.user = response.data;
|
||||
})
|
||||
},
|
||||
|
||||
edit: function () {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
var vm = this;
|
||||
this.util.notify('Updating account', 'loading');
|
||||
axios.put(config.API+'admin/'+this.data.user.id, $('#edit_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
if (vm.util.showResult(response, 'success')) {
|
||||
vm.refreshUser();
|
||||
vm.$router.push({name:'Admin Home'});
|
||||
}
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body table-responsive">
|
||||
|
||||
<div class="form-group">
|
||||
<router-link :to="{name: 'Add Account'}" class="btn btn-success">
|
||||
<i class="fa fa-plus"></i> Add Account</router-link>
|
||||
<button class="btn btn-default" @click="refreshAdmin()">
|
||||
<i class="fa fa-refresh"></i> Refresh</button>
|
||||
</div>
|
||||
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="admin in data.admins">
|
||||
<td>{{ admin.id }}</td>
|
||||
<td>{{ admin.name }}</td>
|
||||
<td>{{ admin.email }}</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="id=admin.id;util.showModal('#delete-admin-modal')">
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<modal id="delete-admin-modal">
|
||||
<modal-header>Delete Admin</modal-header>
|
||||
<modal-body>
|
||||
<h3>Are you sure to delete this admin?</h3>
|
||||
</modal-body>
|
||||
<modal-footer>
|
||||
<button @click="deleteAdmin()" class="btn btn-danger">Delete</button>
|
||||
<button @click="util.hideModal('#delete-admin-modal')" class="btn btn-default">Cancel</button>
|
||||
</modal-footer>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
|
||||
data: () => ({
|
||||
id:0
|
||||
}),
|
||||
|
||||
created: function () {
|
||||
this.refreshAdmin();
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteAdmin: function () {
|
||||
this.util.hideModal('#delete-admin-modal');
|
||||
this.util.notify('Deleting admin', 'loading');
|
||||
var vm = this;
|
||||
axios.delete(config.API+'admin/'+this.id)
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (vm.util.showResult(response, 'success'))
|
||||
vm.refreshAdmin();
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
refreshAdmin: function () {
|
||||
this.util.notify('Refreshing admin', 'loading');
|
||||
var vm = this;
|
||||
axios.get(config.API+'admin')
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
if (response.data.status == 'failed')
|
||||
vm.util.showResult(response, 'success');
|
||||
else
|
||||
vm.data.admins = response.data;
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<h4>Update Password</h4>
|
||||
<form @submit.prevent="edit()" id="edit_form">
|
||||
<div class="form-group">
|
||||
<label for="old_password">Old Password</label>
|
||||
<input type="password" name="old_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">New Password</label>
|
||||
<input type="password" name="password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="submit" value="Submit" class="btn btn-info"/>
|
||||
<router-link :to="{name: 'Update Account'}" class="btn btn-default">Back</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data: function () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function () {
|
||||
if (this.loading || !this.checkPassword()) return;
|
||||
var vm = this;
|
||||
vm.loading = true;
|
||||
vm.util.notify('Updating Password', 'loading');
|
||||
axios.put(config.API+'admin/password/'+this.data.user.id, $('#edit_form').serialize())
|
||||
.then(response=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(response, 'success');
|
||||
vm.$router.push({name:'Admin Home'});
|
||||
})
|
||||
.catch(error=>{
|
||||
$.notifyClose();
|
||||
vm.loading = false;
|
||||
vm.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
checkPassword: function () {
|
||||
var isMatch = $("[name=password]").val() == $("[name=confirm_password]").val();
|
||||
if (!isMatch) {
|
||||
this.util.notify('Password not match', 'error');
|
||||
}
|
||||
return isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user