unknown
120 lines
2.3 KiB
Vue
120 lines
2.3 KiB
Vue
<template>
|
|
<div class="col-md-5 col-md-offset-3">
|
|
<div class="panel panel-default">
|
|
|
|
<div class="text-center">
|
|
|
|
<div class="panel-heading">
|
|
<img id="logo" alt="Logo">
|
|
<h4>Selamat Datang ke MyKoPKB eVoting System !</h4>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form @submit.prevent="login" id="login_form">
|
|
|
|
<div class="form-group">
|
|
<label for="no_kp">Sila Masukkan No. Kad Pengenalan</label>
|
|
<input type="text" name="no_kp" placeholder="masukkan no .k/p" class="form-control" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<input type="submit" class="btn btn-primary form-control" value="Masuk" />
|
|
</div>
|
|
|
|
</form>
|
|
</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');
|
|
// Set the source of the image dynamically
|
|
logoImage.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS62as3fVF6AdC6CZhfSIG4GCDBSzS3YyhlJg&s'; // Replace this URL with your desired image URL
|
|
});
|
|
|
|
|
|
export default {
|
|
|
|
data: function () {
|
|
return {
|
|
loading: false
|
|
}
|
|
},
|
|
|
|
created: function () {
|
|
if (this.util.isLogin())
|
|
//return this.$router.push({name:'Admin Home'})
|
|
this.util.setTitle('Log Masuk Pengundi=====');
|
|
},
|
|
|
|
methods: {
|
|
login: function () {
|
|
axios.post(config.API + 'voter/login', $('#login_form').serialize())
|
|
.then(response => {
|
|
this.stopLoading();
|
|
if (this.util.showResult(response, 'success')) {
|
|
this.$router.push({ name: 'Voter Verify', params: { 'nokp': response.data.nokp, 'notel': response.data.notel } })
|
|
}
|
|
})
|
|
.catch(error => {
|
|
vm.stopLoading();
|
|
this.util.showResult(error, 'error');
|
|
})
|
|
},
|
|
startLoading: function () {
|
|
this.util.notify('Logging in', 'loading');
|
|
this.loading = true;
|
|
},
|
|
|
|
stopLoading: function () {
|
|
$.notifyClose();
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
padding: 50px 5px;
|
|
/* background-color:; */
|
|
|
|
}
|
|
|
|
.logo {
|
|
width: 200px;
|
|
/* Adjust width as needed */
|
|
height: auto;
|
|
object-fit: cover;
|
|
|
|
}
|
|
|
|
.form-control {
|
|
|
|
border-radius: 0.80rem;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
|
|
background-color:#A7D397;
|
|
color: #f3f6f8; /* Change text color on hover */
|
|
text-shadow : 2px 2px 8px rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|