ISMAIL MASSERAN
153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<template>
|
|
<div class="col-md-5 col-md-offset-3">
|
|
<div class="panel panel-default">
|
|
<div class="text-center">
|
|
<img id="logo-admin" alt="Logo-admin">
|
|
<div class="panel-heading">
|
|
<h4><b>ADMIN LOG MASUK</b> </h4>
|
|
</div>
|
|
|
|
<div class="panel-body">
|
|
<form @submit.prevent="login" id="login_form">
|
|
|
|
<div class="form-group">
|
|
<label for="email">E-mail</label>
|
|
<input type="email" name="email" class="form-control" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">Kata laluan </label>
|
|
<input type="password" name="password" class="form-control" id="password" required />
|
|
</div>
|
|
|
|
<label>
|
|
<input type="checkbox" id="visibility" onclick=" $(this)[0].checked ?
|
|
$('#password').attr('type','text'):
|
|
$('#password').attr('type','password')" /> Show Password
|
|
</label>
|
|
|
|
<div class="form-group">
|
|
<input type="submit" class="btn btn-info form-control"
|
|
:class="{ 'disabled': loading.isLoading }" :value="loading.value" />
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
// JavaScript to set the image source
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Select the image element by its ID
|
|
var logoImage = document.getElementById('logo-admin');
|
|
// Set the source of the image dynamically
|
|
logoImage.src = window.location.origin + '/images/login-admin.jpeg?' + new Date().getTime(); // Replace this URL with your desired image URL
|
|
console.log(logoImage.src);
|
|
});
|
|
|
|
export default {
|
|
|
|
data: function () {
|
|
return {
|
|
loading: {
|
|
value: 'Teruskan ',
|
|
isLoading: false
|
|
}
|
|
}
|
|
},
|
|
|
|
created: function () {
|
|
if (this.util.isLogin()) {
|
|
var ar = localStorage.getItem('admin_role');
|
|
if (ar === '3') {
|
|
return this.$router.push({ name: 'Kehadiran Calon' });
|
|
}
|
|
return this.$router.push({ name: 'Admin Home' });
|
|
}
|
|
this.util.setTitle('Log Masuk Admin ');
|
|
},
|
|
|
|
methods: {
|
|
login: function () {
|
|
if (this.loading.isLoading) return;
|
|
|
|
let vm = this;
|
|
|
|
this.startLoading();
|
|
|
|
axios.post(config.API + 'admin/login', $('#login_form').serialize())
|
|
.then(response => {
|
|
vm.stopLoading();
|
|
if (this.util.showResult(response, 'success')) {
|
|
localStorage['Access Token'] = `Bearer ${response.data.token}`;
|
|
localStorage.setItem('admin_session', '1');
|
|
if (response.data.user && response.data.user.role !== undefined && response.data.user.role !== null) {
|
|
localStorage.setItem('admin_role', String(response.data.user.role));
|
|
}
|
|
this.util.setAuthorization();
|
|
if (Number(response.data.user && response.data.user.role) === 3) {
|
|
vm.$router.push({ name: 'Kehadiran Calon' });
|
|
} else {
|
|
vm.$router.push({ name: 'Admin Home' });
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
vm.stopLoading();
|
|
this.util.showResult(error, 'error');
|
|
})
|
|
|
|
},
|
|
|
|
startLoading: function () {
|
|
this.util.notify('Logging in', 'loading');
|
|
this.loading = {
|
|
value: 'Loading...',
|
|
isLoading: true
|
|
}
|
|
},
|
|
|
|
stopLoading: function () {
|
|
$.notifyClose();
|
|
this.loading = {
|
|
value: 'Login',
|
|
isLoading: false
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
padding: 50px 5px;
|
|
}
|
|
|
|
.logo-admin {
|
|
width: 30px;
|
|
/* Adjust width as needed */
|
|
height: 50px;
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
.form-control {
|
|
|
|
border-radius: 0.50rem;
|
|
|
|
|
|
}
|
|
|
|
.btn-info:hover {
|
|
background-color: #c2ccc8;
|
|
/* Change background color on hover */
|
|
color: #f3f6f8;
|
|
/* Change text color on hover */
|
|
}
|
|
</style> |