KoPKB/E-Vote
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: add data injection, update ui on login

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-05-13 16:41:20 +08:00
parent 6730a3c40e
commit 65045d6935
9 changed files with 1613 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/demo/voter/verification.vue
+269 -59
View File
@@ -1,55 +1,64 @@
<template>
<div class="col-md-5 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<a @click="$router.go(-1)">Kembali</a>
<h4 class="text-center">Kod Verifikasi!</h4>
<div class="verify-shell">
<div class="verify-card">
<div class="verify-card__accent" aria-hidden="true"></div>
<div class="verify-header">
<button type="button" class="verify-back" @click="$router.go(-1)">
<span class="verify-back__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path
d="M15.5 19.5a1 1 0 0 1-.7-.3l-7-7a1 1 0 0 1 0-1.4l7-7a1 1 0 1 1 1.4 1.4L9.9 11.5l6.3 6.3a1 1 0 0 1-.7 1.7Z" />
</svg>
</span>
Kembali
</button>
<h1 class="verify-title">Kod Verifikasi</h1>
<p class="verify-subtitle">
<template v-if="!otpSent">
Sahkan nombor telefon anda. Kod akan dihantar ke nombor berakhir
<span class="verify-phone">+6 •••• •••• {{ phoneLastFour }}</span>
</template>
<template v-else>
Masukkan kod pengesahan yang dihantar ke nombor berakhir
<span class="verify-phone">+6 •••• •••• {{ phoneLastFour }}</span>
</template>
</p>
<p class="verify-note">
Jika nombor ini tidak betul atau anda tidak menerima OTP, sila pergi ke kaunter IT.
</p>
</div>
<div class="panel-body">
<form @submit.prevent="login" id="login_form">
<div class="m-4">
<template v-if="!otpSent">
<span>Sila sahkan nombor telefon anda. Kod akan dihantar ke nombor berakhir:</span>
<br><b>+6 •••• •••• {{ phoneLastFour }}</b>
</template>
<template v-else>
<span>Sila masukkan kod pengesahan yang dihantar ke nombor berakhir:</span>
<br><b>+6 •••• •••• {{ phoneLastFour }}</b>
</template>
<p class="text-muted small" style="margin-top:12px;margin-bottom:0;">
Jika nombor ini tidak betul atau anda tidak menerima OTP, sila pergi ke kaunter IT.
</p>
</div>
<form @submit.prevent="login" id="login_form" class="verify-form" novalidate>
<div v-if="otpSent && showDebugOtp" class="verify-debug">
OTP local development: <b>{{ debugOtp }}</b>
</div>
<div v-if="otpSent && showDebugOtp" class="alert alert-info" style="margin-bottom:20px;">
OTP local development: <b>{{ debugOtp }}</b>
</div>
<div v-if="!otpSent" class="verify-actions">
<button type="button" class="btn verify-btn" :disabled="otpSending" @click="requestOtp">
<span v-if="otpSending" class="spinner-border spinner-border-sm mr-2" role="status"
aria-hidden="true"></span>
Hantar OTP
</button>
</div>
<div v-if="!otpSent" class="form-group" style="margin-top: 20px;">
<button type="button" class="btn btn-primary form-control" :disabled="otpSending" @click="requestOtp">
<span v-if="otpSending" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Hantar OTP ke nombor ini
</button>
</div>
<div v-show="otpSent" class="verify-otp">
<v-otp-input ref="otpInput" input-classes="otp-input" separator="-" :num-inputs="6"
:should-auto-focus="true" :is-input-num="true" @on-change="handleOnChange"
@on-complete="handleOnComplete" />
</div>
<div v-show="otpSent" class="justify-content-center d-flex"
style="margin-top:20px;margin-bottom:20px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
<v-otp-input ref="otpInput" input-classes="otp-input" separator="-" :num-inputs="6"
:should-auto-focus="true" :is-input-num="true" @on-change="handleOnChange"
@on-complete="handleOnComplete" />
</div>
<div v-if="otpSent" class="verify-links">
<button type="button" class="verify-link" @click="resendVerify">Hantar kembali OTP</button>
</div>
<div v-if="otpSent" style="margin-bottom:20px;">
<a @click="resendVerify">Hantar Kembali OTP!</a>
</div>
<div v-if="otpSent" class="form-group">
<input ref="submitbtn" type="submit" class="btn btn-primary form-control" value="Sahkan & Teruskan"
disabled />
</div>
</form>
</div>
<div v-if="otpSent" class="verify-actions">
<button ref="submitbtn" type="submit" class="btn verify-btn verify-btn--primary" disabled>
Sahkan & Teruskan
</button>
</div>
</form>
</div>
</div>
</template>
@@ -167,25 +176,226 @@ export default {
},
};
</script>
<style>
.otp-input {
width: 40px;
height: 40px;
padding: 5px;
margin: 0 10px;
font-size: 20px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.3);
text-align: center;
<style scoped>
.verify-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
background: #f6f7fb;
}
.otp-input.error {
border: 1px solid red !important;
.verify-card {
width: 100%;
max-width: 520px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 20px;
box-shadow:
0 18px 55px rgba(2, 6, 23, 0.12),
0 2px 10px rgba(2, 6, 23, 0.06);
padding: 22px 22px 18px;
position: relative;
overflow: hidden;
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
.verify-card__accent {
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, #22c55e 0%, #3b82f6 55%, #a855f7 100%);
}
.verify-header {
padding-top: 6px;
}
.verify-back {
appearance: none;
border: 0;
background: transparent;
padding: 8px 0;
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(15, 23, 42, 0.7);
font-weight: 800;
}
.verify-back:hover {
color: rgba(15, 23, 42, 0.85);
}
.verify-back__icon {
width: 18px;
height: 18px;
display: inline-flex;
color: currentColor;
}
.verify-back__icon svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.verify-title {
margin: 6px 0 0;
font-size: 22px;
font-weight: 900;
letter-spacing: -0.02em;
color: #0f172a;
}
.verify-subtitle {
margin: 8px 0 0;
font-size: 14px;
color: rgba(15, 23, 42, 0.72);
line-height: 1.45;
}
.verify-phone {
display: inline-block;
margin-left: 6px;
font-weight: 900;
color: rgba(15, 23, 42, 0.88);
}
.verify-note {
margin: 10px 0 0;
font-size: 12px;
line-height: 1.45;
color: rgba(15, 23, 42, 0.56);
}
.verify-form {
margin-top: 18px;
}
.verify-debug {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(59, 130, 246, 0.2);
background: rgba(59, 130, 246, 0.08);
color: rgba(15, 23, 42, 0.9);
font-size: 13px;
}
.verify-otp {
display: flex;
justify-content: center;
align-items: center;
margin: 18px 0 14px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
/* v-otp-input renders inputs inside a child component.
Use deep selectors so scoped styles apply. */
::v-deep .otp-input {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 46px !important;
padding: 6px !important;
margin: 0 6px !important;
font-size: 18px !important;
font-weight: 900 !important;
border-radius: 14px !important;
border: 1px solid rgba(15, 23, 42, 0.14) !important;
text-align: center !important;
box-sizing: border-box !important;
transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
::v-deep .otp-input.error {
border-color: rgba(239, 68, 68, 0.9) !important;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14) !important;
}
::v-deep .otp-input:focus {
outline: none !important;
border-color: rgba(59, 130, 246, 0.55) !important;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14) !important;
}
::v-deep .otp-input::-webkit-inner-spin-button,
::v-deep .otp-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.verify-links {
display: flex;
justify-content: center;
margin: 10px 0 16px;
}
.verify-link {
appearance: none;
border: 0;
background: transparent;
padding: 6px 10px;
color: rgba(29, 78, 216, 0.92);
font-weight: 900;
}
.verify-link:hover {
text-decoration: underline;
}
.verify-actions {
margin-top: 12px;
}
.verify-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
padding: 13px 14px;
font-weight: 900;
letter-spacing: 0.01em;
color: #ffffff;
background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
border: 0;
box-shadow: 0 12px 24px rgba(29, 78, 216, 0.22);
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.verify-btn:hover {
filter: brightness(1.03);
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(29, 78, 216, 0.26);
}
.verify-btn:disabled {
opacity: 0.72;
filter: saturate(0.9);
transform: none;
box-shadow: none;
cursor: not-allowed;
}
@media (max-width: 576px) {
.verify-shell {
padding: 20px 14px;
}
.verify-card {
padding: 20px 18px 16px;
}
::v-deep .otp-input {
width: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
height: 44px !important;
margin: 0 5px !important;
}
}
</style>