user-ui-update

resources/assets/js/components/demo/voter/login.vue

@@ -1,34 +1,46 @@
 <template>
-<div class="col-md-5 col-md-offset-3">
-	<div class="panel panel-default">
-		<div class="panel-heading">
-			<h4>Selamat Datang!</h4>
-		</div>
+	<div class="col-md-5 col-md-offset-3">
+		<div class="panel panel-default">
 
-		<div class="panel-body">
-			<form @submit.prevent="login" id="login_form">
+			<div class="text-center">
 
-				<div class="form-group">
-					<label for="no_kp">Masukkan No. Kad Pengenalan!</label>
-					<input type="text" name="no_kp" class="form-control" required/>
+				<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">
-					<input 
-						type="submit" 
-						class="btn btn-primary form-control"
-						value="Login"/>
-				</div>
+					<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>
 
-			</form>
 		</div>
-
 	</div>
-</div>
 </template>
 
 <script>
-export default{
+
+
+// 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 {
@@ -39,22 +51,22 @@ export default{
 	created: function () {
 		if (this.util.isLogin())
 			//return this.$router.push({name:'Admin Home'})
-		this.util.setTitle('Voter Login');
+			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');
-			})
+		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');
@@ -67,11 +79,41 @@ export default{
 		}
 	},
 
-}
+
+};
+
 </script>
 
 <style>
 body {
 	padding: 50px 5px;
+	/* background-color:; */
+
 }
-</style>
+
+.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>