E-Vote/resources/assets/js/components/demo/voter/login.vue

<template>
	<div class="d-flex justify-content-center align-items-center min-vh-100 bg-gradient">
	  <div class="card shadow-lg rounded-lg border-primary" style="width: 100%; max-width: 400px; padding: 30px;">
		<div class="text-center mb-4">
		  <img class="logo-img" src="/images/MyKoPKB-logo.png" alt="Logo" style="max-width: 250px; height: auto;">
		  <h4 class="mt-3">Selamat Datang ke Portal MyKoPKB</h4>
		</div>
		<div class="card-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"
				id="no_kp"
				name="no_kp"
				placeholder="Masukkan No. Kad Pengenalan Tanpa Dash (-)"
				class="form-control"
				required
			  />
			</div>
			<div class="form-group">
			  <button
				type="submit"
				class="btn btn-primary btn-block"
				:disabled="loading"
			  >
				<span v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
				Masuk
			  </button>
			</div>
		  </form>
		</div>
	  </div>
	</div>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		loading: false
	  };
	},

	created() {
	  if (this.util.isAdminPortalSession()) {
		this.$router.replace(this.util.getAdminEntryRoute());
	  }
	},

	methods: {
	  login() {
		this.startLoading();
		const noKp = document.getElementById('no_kp').value.trim();
		axios
		  .post(config.API + 'voter/login', {
			no_kp: noKp,
			send_otp: false
		  })
		  .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,
				  'debug_otp': response.data.debug_otp || null
				}
			  });
			}
		  })
		  .catch(error => {
			this.stopLoading();
			this.util.showResult(error, 'error');
		  });
	  },
	  startLoading() {
		this.loading = true;
	  },
	  stopLoading() {
		this.loading = false;
	  }
	}
  };
  </script>
  
  <style scoped>
  body {
	background-color: #f8f9fa; /* Light grey background */
	margin: 0;
	padding: 0;
  }
  
  .bg-gradient {
	background: linear-gradient(to bottom, #6c757d, #343a40); /* Gradient background from grey to dark */
  }
  
  .d-flex {
	display: flex;
  }
  
  .justify-content-center {
	justify-content: center;
  }
  
  .align-items-center {
	align-items: center;
  }
  
  .min-vh-100 {
	min-height: 100vh; /* Ensure full screen height */
  }
  
  .card {
	background-color: #ffffff; /* White background for card */
	border: 2px solid #007bff; /* Blue border */
	border-radius: 1rem;
  }
  
  .card-body {
	padding: 30px;
  }
  
  .logo-img {
	max-width: 250px; /* Increased the size of the logo */
	height: auto;
  }
  
  .btn-primary {
	background-color: #5cb85c;
	border: none;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 0;
	border-radius: 30px;
  }
  
  .btn-primary:hover {
	background-color: #4cae4c;
  }
  
/* Add this to make the placeholder move and animate */
.form-control {
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 16px;
  position: relative;
}

.form-control::placeholder {
  color: #6c757d;
  transition: all 0.3s ease; /* Smooth transition for moving placeholder */
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%); /* Vertically center the placeholder */
}

.form-control:focus::placeholder {
  color: #ff0000; /* Change color on focus */
  left: 10px; /* Move it left */
  font-size: 12px; /* Shrink the font size */
  top: 5px; /* Move it up */
  transform: translateY(-50%) translateX(-10px); /* Move it to the left */
}

.form-control:focus {
  border-color: #007bff; /* Highlight the border on focus */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Add a shadow effect */
}

 
  h4 {
	font-size: 22px;
	font-weight: 600;
	color: #333;
  }
  
  @media (max-width: 576px) {
	.card {
	  width: 90%;
	  padding: 20px;
	}
  
	h4 {
	  font-size: 20px;
	}
  
	.logo-img {
	  max-width: 200px;
	}
  
	.form-control {
	  font-size: 14px;
	}
  
	.btn-primary {
	  font-size: 14px;
	  padding: 10px 0;
	}
  }
  </style>