hayatie
135 lines
10 KiB
Vue
135 lines
10 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 Portal MyKoPKB !</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://i.ibb.co/txhx2N0/My-Ko-PKB-logo-removebg-preview.png'; // Replace this URL with your desired image URL
|
|
|
|
// Add error handling
|
|
logoImage.onerror = function() {
|
|
// If the image fails to load, set a default image or handle the error in some other way
|
|
logoImage.src = 'https://i.ibb.co/txhx2N0/My-Ko-PKB-logo-removebg-preview.png'; // Replace 'path/to/default-image.png' with the URL of your default image
|
|
};
|
|
|
|
logoImage.style.width = '300px'; // Set width to 200 pixels
|
|
logoImage.style.height = 'auto';
|
|
logoImage.style.objectFit = 'cover';
|
|
logoImage.style.margin = 'auto';
|
|
});
|
|
|
|
|
|
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 {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
object-fit:cover;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.element {
|
|
/* background-image: url('data:image/jpeg;base64,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'); Replace 'your-image.jpg' with your image file */
|
|
background-size: cover; /* Cover the entire element with the background image */
|
|
background-position: center; /* Center the background image horizontally and vertically */
|
|
}
|
|
</style>
|