DONE: disable login and implement sso
This commit is contained in:
ISMAIL MASSERAN
@@ -59,3 +59,7 @@ PHYSICAL_ATTENDANCE_GATE_DISPLAY_KEY=
|
||||
# API token idle lifetime in minutes (enforced server-side for Passport tokens)
|
||||
VOTER_TOKEN_LIFETIME=120
|
||||
ADMIN_TOKEN_LIFETIME=480
|
||||
|
||||
MYKOPKB_SSO_SECRET=
|
||||
MYKOPKB_SSO_ISSUER="MYKOPKB 1.0"
|
||||
MYKOPKB_SSO_AUDIENCE=e-vote
|
||||
@@ -0,0 +1,113 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\API\v1\Voter;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Controllers\Util;
|
||||
use App\Support\ApiTokenLifetime;
|
||||
use App\Support\JwtVerifier;
|
||||
use App\Voter;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Cache;
|
||||
|
||||
class SsoLoginController extends Controller
|
||||
{
|
||||
public function login(Request $request)
|
||||
{
|
||||
$token = $request->query('token');
|
||||
|
||||
if (! $token) {
|
||||
return $this->redirectToLogin('Token SSO tidak sah.', 'token_invalid');
|
||||
}
|
||||
|
||||
$secret = config('services.mykopkb.sso_secret');
|
||||
if (! $secret) {
|
||||
return $this->redirectToLogin(
|
||||
app()->environment('local', 'development')
|
||||
? 'MYKOPKB_SSO_SECRET belum dikonfigurasi dalam .env.'
|
||||
: 'Token SSO tamat tempoh atau tidak sah.',
|
||||
'token_invalid'
|
||||
);
|
||||
}
|
||||
|
||||
$payload = JwtVerifier::verify($token, $secret, [
|
||||
'issuer' => config('services.mykopkb.sso_issuer', 'mykopkb'),
|
||||
'audience' => config('services.mykopkb.sso_audience', 'e-vote'),
|
||||
]);
|
||||
|
||||
if (! $payload) {
|
||||
return $this->redirectToLogin('Token SSO tamat tempoh atau tidak sah.', 'token_invalid');
|
||||
}
|
||||
|
||||
$jti = $payload['jti'] ?? null;
|
||||
if (! $jti || Cache::has("sso_jti:$jti")) {
|
||||
return $this->redirectToLogin('Token SSO telah digunakan.', 'token_used');
|
||||
}
|
||||
|
||||
$icNumber = preg_replace('/[\s-]+/', '', (string) ($payload['ic_number'] ?? ''));
|
||||
$memberNumber = trim((string) ($payload['member_number'] ?? ''));
|
||||
|
||||
if ($icNumber === '' || $memberNumber === '') {
|
||||
return $this->redirectToLogin('Token SSO tidak sah.', 'token_invalid');
|
||||
}
|
||||
|
||||
$voter = Voter::query()
|
||||
->where('no_kp', $icNumber)
|
||||
->where('no_anggota', $memberNumber)
|
||||
->where('election_id', Util::getCurrentElection())
|
||||
->first();
|
||||
|
||||
if (! $voter) {
|
||||
activity()
|
||||
->withProperties([
|
||||
'ic_number' => $icNumber,
|
||||
'member_number' => $memberNumber,
|
||||
'election_id' => Util::getCurrentElection(),
|
||||
'ip' => $request->ip(),
|
||||
'user_agent' => $request->userAgent(),
|
||||
])
|
||||
->log('voter sso login rejected: not in current election');
|
||||
|
||||
return $this->redirectToLogin(
|
||||
'Akaun pengundi tidak dijumpai untuk pilihan raya semasa. Sila daftar di kaunter IT atau log masuk secara manual.',
|
||||
'voter_not_found'
|
||||
);
|
||||
}
|
||||
|
||||
Cache::put("sso_jti:$jti", true, now()->addMinutes(5));
|
||||
|
||||
ApiTokenLifetime::revokeActiveTokens($voter);
|
||||
|
||||
$passportToken = $voter->createToken('SSO Login', ['vote'])->accessToken;
|
||||
$meta = ApiTokenLifetime::loginMeta('voter');
|
||||
|
||||
activity()
|
||||
->performedOn($voter)
|
||||
->withProperties([
|
||||
'election_id' => Util::getCurrentElection(),
|
||||
'voter_id' => $voter->id,
|
||||
'voter_name' => $voter->name,
|
||||
'no_kp' => $voter->no_kp,
|
||||
'no_anggota' => $voter->no_anggota,
|
||||
'sso_sub' => $payload['sub'] ?? null,
|
||||
'ip' => $request->ip(),
|
||||
'user_agent' => $request->userAgent(),
|
||||
])
|
||||
->log("voter sso login: {$voter->name}");
|
||||
|
||||
$query = http_build_query([
|
||||
'sso_token' => $passportToken,
|
||||
'token_expires_at' => $meta['token_expires_at'],
|
||||
]);
|
||||
|
||||
return redirect('/login?'.$query);
|
||||
}
|
||||
|
||||
private function redirectToLogin(string $message, string $code = 'sso_error')
|
||||
{
|
||||
return redirect('/login?'.http_build_query([
|
||||
'sso_error' => $message,
|
||||
'sso_error_code' => $code,
|
||||
]));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
<?php
|
||||
|
||||
namespace App\Support;
|
||||
|
||||
class JwtVerifier
|
||||
{
|
||||
/**
|
||||
* Verify an HS256 JWT and return the payload, or null if invalid.
|
||||
*
|
||||
* @param array{issuer?: string, audience?: string, leeway?: int} $options
|
||||
*/
|
||||
public static function verify(string $token, string $secret, array $options = []): ?array
|
||||
{
|
||||
$result = self::diagnose($token, $secret, $options);
|
||||
|
||||
return $result['valid'] ? $result['payload'] : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array{issuer?: string, audience?: string, leeway?: int} $options
|
||||
* @return array{
|
||||
* valid: bool,
|
||||
* reason: string|null,
|
||||
* payload: array|null,
|
||||
* claims: array<string, mixed>|null
|
||||
* }
|
||||
*/
|
||||
public static function diagnose(string $token, string $secret, array $options = []): array
|
||||
{
|
||||
$parts = explode('.', $token);
|
||||
if (count($parts) !== 3) {
|
||||
return self::failure('malformed_token');
|
||||
}
|
||||
|
||||
[$headerB64, $payloadB64, $signatureB64] = $parts;
|
||||
|
||||
$expected = self::base64UrlEncode(
|
||||
hash_hmac('sha256', "$headerB64.$payloadB64", $secret, true)
|
||||
);
|
||||
|
||||
if (! hash_equals($expected, $signatureB64)) {
|
||||
return self::failure('invalid_signature', null, self::decodePayload($payloadB64));
|
||||
}
|
||||
|
||||
$header = json_decode(self::base64UrlDecode($headerB64), true);
|
||||
$payload = json_decode(self::base64UrlDecode($payloadB64), true);
|
||||
|
||||
if (! is_array($header) || ! is_array($payload)) {
|
||||
return self::failure('invalid_json');
|
||||
}
|
||||
|
||||
if (($header['alg'] ?? '') !== 'HS256') {
|
||||
return self::failure('unsupported_algorithm', $payload);
|
||||
}
|
||||
|
||||
$issuer = $options['issuer'] ?? null;
|
||||
if ($issuer !== null && ($payload['iss'] ?? '') !== $issuer) {
|
||||
return self::failure('issuer_mismatch', $payload);
|
||||
}
|
||||
|
||||
$audience = $options['audience'] ?? null;
|
||||
if ($audience !== null && ($payload['aud'] ?? '') !== $audience) {
|
||||
return self::failure('audience_mismatch', $payload);
|
||||
}
|
||||
|
||||
$leeway = (int) ($options['leeway'] ?? 0);
|
||||
$now = time();
|
||||
|
||||
if (($payload['exp'] ?? 0) < ($now - $leeway)) {
|
||||
return self::failure('token_expired', $payload);
|
||||
}
|
||||
|
||||
if (($payload['nbf'] ?? 0) > ($now + $leeway)) {
|
||||
return self::failure('token_not_yet_valid', $payload);
|
||||
}
|
||||
|
||||
return [
|
||||
'valid' => true,
|
||||
'reason' => null,
|
||||
'payload' => $payload,
|
||||
'claims' => self::summarizeClaims($payload),
|
||||
];
|
||||
}
|
||||
|
||||
public static function isLaravelEncryptedSecret(?string $secret): bool
|
||||
{
|
||||
if (! is_string($secret) || $secret === '') {
|
||||
return false;
|
||||
}
|
||||
|
||||
$decoded = base64_decode($secret, true);
|
||||
if ($decoded === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$json = json_decode($decoded, true);
|
||||
|
||||
return is_array($json)
|
||||
&& array_key_exists('iv', $json)
|
||||
&& array_key_exists('value', $json)
|
||||
&& array_key_exists('mac', $json);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array<string, mixed>|null
|
||||
*/
|
||||
protected static function decodePayload(string $payloadB64): ?array
|
||||
{
|
||||
$payload = json_decode(self::base64UrlDecode($payloadB64), true);
|
||||
|
||||
return is_array($payload) ? $payload : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<string, mixed>|null $payload
|
||||
* @return array{valid: false, reason: string, payload: null, claims: array<string, mixed>|null}
|
||||
*/
|
||||
protected static function failure(string $reason, ?array $payload = null, ?array $claims = null): array
|
||||
{
|
||||
return [
|
||||
'valid' => false,
|
||||
'reason' => $reason,
|
||||
'payload' => null,
|
||||
'claims' => $claims ?? ($payload ? self::summarizeClaims($payload) : null),
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<string, mixed> $payload
|
||||
* @return array<string, mixed>
|
||||
*/
|
||||
protected static function summarizeClaims(array $payload): array
|
||||
{
|
||||
return [
|
||||
'iss' => $payload['iss'] ?? null,
|
||||
'aud' => $payload['aud'] ?? null,
|
||||
'exp' => $payload['exp'] ?? null,
|
||||
'nbf' => $payload['nbf'] ?? null,
|
||||
'ic_number' => $payload['ic_number'] ?? null,
|
||||
'member_number' => $payload['member_number'] ?? null,
|
||||
];
|
||||
}
|
||||
|
||||
protected static function base64UrlDecode(string $data): string
|
||||
{
|
||||
$remainder = strlen($data) % 4;
|
||||
if ($remainder) {
|
||||
$data .= str_repeat('=', 4 - $remainder);
|
||||
}
|
||||
|
||||
return base64_decode(strtr($data, '-_', '+/'), true) ?: '';
|
||||
}
|
||||
|
||||
protected static function base64UrlEncode(string $data): string
|
||||
{
|
||||
return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
|
||||
}
|
||||
}
|
||||
@@ -35,4 +35,10 @@ return [
|
||||
'secret' => env('STRIPE_SECRET'),
|
||||
],
|
||||
|
||||
'mykopkb' => [
|
||||
'sso_secret' => env('MYKOPKB_SSO_SECRET'),
|
||||
'sso_issuer' => env('MYKOPKB_SSO_ISSUER'),
|
||||
'sso_audience' => env('MYKOPKB_SSO_AUDIENCE', 'e-vote'),
|
||||
],
|
||||
|
||||
];
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,90 +1,197 @@
|
||||
<template>
|
||||
<div class="login-shell">
|
||||
<div class="login-card">
|
||||
<transition name="sso-overlay">
|
||||
<div v-if="ssoSuccess.active" class="sso-overlay" role="status" aria-live="polite">
|
||||
<div class="sso-overlay__card" :class="'sso-overlay__card--' + ssoSuccess.phase">
|
||||
<div class="sso-overlay__icon" aria-hidden="true">
|
||||
<div v-if="ssoSuccess.phase === 'loading'" class="sso-overlay__spinner"></div>
|
||||
<svg v-else class="sso-overlay__check" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.35 13.15-3.4-3.35a1 1 0 1 1 1.4-1.42l2.68 2.64 5.28-5.22a1 1 0 0 1 1.4 1.42l-6 5.93a1 1 0 0 1-1.36 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="sso-overlay__title">{{ ssoSuccess.title }}</p>
|
||||
<p class="sso-overlay__message">{{ ssoSuccess.message }}</p>
|
||||
<div v-if="ssoSuccess.phase === 'loading'" class="sso-overlay__progress">
|
||||
<div class="sso-overlay__progress-bar" :style="{ animationDuration: SSO_LOADING_MS + 'ms' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div class="login-card"
|
||||
:class="{ 'login-card--shake': ssoAlert.shake, 'login-card--dimmed': ssoSuccess.active }">
|
||||
<div class="login-header">
|
||||
<img class="login-logo" src="/images/MyKoPKB-logo.png" alt="MyKoPKB" />
|
||||
<h1 class="login-title">Selamat Datang</h1>
|
||||
<p class="login-subtitle">Log masuk untuk meneruskan ke Portal MyKoPKB</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="login" id="login_form" class="login-form" novalidate>
|
||||
<div class="form-group mb-3">
|
||||
<label class="login-label" for="no_kp">No. Kad Pengenalan</label>
|
||||
<div class="login-field">
|
||||
<span class="login-field-icon" aria-hidden="true">
|
||||
<transition name="sso-alert">
|
||||
<div v-if="ssoAlert.visible" class="sso-alert" :class="'sso-alert--' + ssoAlert.code" role="alert"
|
||||
aria-live="assertive">
|
||||
<div class="sso-alert__icon" aria-hidden="true">
|
||||
<svg v-if="ssoAlert.code === 'voter_not_found'" viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 7Zm-1 4.25a1 1 0 0 1 2 0V16a1 1 0 1 1-2 0v-4.75Z" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-.75 5.5a.75.75 0 0 1 1.5 0v6a.75.75 0 0 1-1.5 0v-6Zm.75 9.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="sso-alert__body">
|
||||
<p class="sso-alert__title">{{ ssoAlert.title }}</p>
|
||||
<p class="sso-alert__message">{{ ssoAlert.message }}</p>
|
||||
</div>
|
||||
<button type="button" class="sso-alert__close" aria-label="Tutup" @click="dismissSsoAlert">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div class="sso-only-notice">
|
||||
<div class="sso-only-notice__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" focusable="false">
|
||||
<path
|
||||
d="M4 7.5A3.5 3.5 0 0 1 7.5 4h9A3.5 3.5 0 0 1 20 7.5v9A3.5 3.5 0 0 1 16.5 20h-9A3.5 3.5 0 0 1 4 16.5v-9Zm3.5-1.5A1.5 1.5 0 0 0 6 7.5v9A1.5 1.5 0 0 0 7.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 16.5 6h-9Zm1.5 3h6v2H9V9Zm0 4h10v2H9v-2Z" />
|
||||
d="M12 2a5 5 0 0 0-5 5v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm-3 7V7a3 3 0 1 1 6 0v2H9Zm3 4a1.5 1.5 0 0 1 .75 2.8V18h-1.5v-2.2A1.5 1.5 0 0 1 12 13Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<input v-model.trim="no_kp" @input="onNoKpInput" :disabled="loading" type="text" id="no_kp"
|
||||
name="no_kp" class="form-control login-input" placeholder="Contoh: 901010101010"
|
||||
autocomplete="off" inputmode="numeric" enterkeyhint="go" required />
|
||||
</div>
|
||||
<small class="login-help">Masukkan tanpa dash (-) atau jarak.</small>
|
||||
<div>
|
||||
<p class="sso-only-notice__title">
|
||||
Sila log masuk melalui
|
||||
<a href="https://mykopkb.koppkb.com" class="sso-only-notice__link" target="_blank"
|
||||
rel="noopener noreferrer">MyKoPKB</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn login-btn" :disabled="loading || !no_kp">
|
||||
<span v-if="loading" class="spinner-border spinner-border-sm mr-2" role="status"
|
||||
aria-hidden="true"></span>
|
||||
<span>{{ loading ? 'Sedang log masuk…' : 'Masuk' }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const SSO_LOADING_MS = 2500;
|
||||
const SSO_SUCCESS_MS = 2500;
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
no_kp: ''
|
||||
SSO_LOADING_MS,
|
||||
SSO_SUCCESS_MS,
|
||||
ssoAlert: {
|
||||
visible: false,
|
||||
title: '',
|
||||
message: '',
|
||||
code: 'sso_error',
|
||||
shake: false
|
||||
},
|
||||
ssoSuccess: {
|
||||
active: false,
|
||||
phase: 'loading',
|
||||
title: 'Mengesahkan log masuk SSO',
|
||||
message: 'Sila tunggu sebentar…'
|
||||
},
|
||||
ssoRedirectTimer: null
|
||||
};
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.ssoRedirectTimer) {
|
||||
window.clearTimeout(this.ssoRedirectTimer);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.util.isAdminPortalSession()) {
|
||||
this.$router.replace(this.util.getAdminEntryRoute());
|
||||
return;
|
||||
}
|
||||
|
||||
this.handleSsoCallback();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onNoKpInput() {
|
||||
// keep input forgiving: strip dash/spaces and non-digits
|
||||
this.no_kp = (this.no_kp || '').replace(/[\s-]+/g, '').replace(/[^\d]/g, '');
|
||||
},
|
||||
login() {
|
||||
this.startLoading();
|
||||
const noKp = (this.no_kp || '').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
|
||||
handleSsoCallback() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const ssoError = params.get('sso_error');
|
||||
|
||||
if (ssoError) {
|
||||
const code = params.get('sso_error_code') || 'sso_error';
|
||||
this.showSsoError(ssoError, code);
|
||||
this.clearSsoQueryParams();
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const ssoToken = params.get('sso_token');
|
||||
const tokenExpiresAt = params.get('token_expires_at');
|
||||
|
||||
if (!ssoToken) {
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
this.stopLoading();
|
||||
this.util.showResult(error, 'error');
|
||||
|
||||
this.clearSsoQueryParams();
|
||||
this.completeSsoLogin(ssoToken, tokenExpiresAt);
|
||||
},
|
||||
completeSsoLogin(ssoToken, tokenExpiresAt) {
|
||||
this.ssoSuccess = {
|
||||
active: true,
|
||||
phase: 'loading',
|
||||
title: 'Mengesahkan log masuk SSO',
|
||||
message: 'Sila tunggu sebentar…'
|
||||
};
|
||||
|
||||
window.setTimeout(() => {
|
||||
this.util.persistLoginSession(ssoToken, tokenExpiresAt, {
|
||||
clearAdminSession: true
|
||||
});
|
||||
|
||||
this.ssoSuccess = {
|
||||
active: true,
|
||||
phase: 'success',
|
||||
title: 'Log masuk berjaya',
|
||||
message: 'Anda akan dialihkan ke portal…'
|
||||
};
|
||||
|
||||
this.util.notify('Log masuk SSO berjaya.', 'success');
|
||||
|
||||
this.ssoRedirectTimer = window.setTimeout(() => {
|
||||
this.$router.replace({ name: 'Voter Home' });
|
||||
}, SSO_SUCCESS_MS);
|
||||
}, SSO_LOADING_MS);
|
||||
},
|
||||
startLoading() {
|
||||
this.loading = true;
|
||||
clearSsoQueryParams() {
|
||||
if (!window.location.search) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
},
|
||||
stopLoading() {
|
||||
this.loading = false;
|
||||
showSsoError(message, code) {
|
||||
const titles = {
|
||||
voter_not_found: 'Akaun pengundi tidak dijumpai',
|
||||
token_invalid: 'Log masuk SSO gagal',
|
||||
token_used: 'Token SSO telah digunakan',
|
||||
sso_error: 'Log masuk SSO gagal'
|
||||
};
|
||||
|
||||
this.ssoAlert = {
|
||||
visible: true,
|
||||
title: titles[code] || titles.sso_error,
|
||||
message: message,
|
||||
code: code,
|
||||
shake: true
|
||||
};
|
||||
|
||||
this.util.notify(message, 'error');
|
||||
|
||||
window.setTimeout(() => {
|
||||
this.ssoAlert.shake = false;
|
||||
}, 650);
|
||||
},
|
||||
dismissSsoAlert() {
|
||||
this.ssoAlert.visible = false;
|
||||
this.ssoAlert.shake = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -150,6 +257,374 @@ export default {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sso-only-notice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(37, 99, 235, 0.16);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
|
||||
color: #1e3a8a;
|
||||
}
|
||||
|
||||
.sso-only-notice__icon {
|
||||
flex: 0 0 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.sso-only-notice__icon svg {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.sso-only-notice__title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.sso-only-notice__link {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
|
||||
.sso-only-notice__link:hover,
|
||||
.sso-only-notice__link:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.sso-only-notice__message {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.sso-alert-enter-active,
|
||||
.sso-alert-leave-active {
|
||||
transition: opacity 280ms ease, transform 280ms ease, max-height 280ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sso-alert-enter,
|
||||
.sso-alert-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.sso-alert-enter-to,
|
||||
.sso-alert-leave {
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.sso-alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin: 0 0 16px;
|
||||
padding: 14px 14px 14px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
animation: sso-alert-pulse 2.4s ease-in-out 1;
|
||||
}
|
||||
|
||||
.sso-alert--voter_not_found {
|
||||
background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
|
||||
border-color: rgba(234, 88, 12, 0.22);
|
||||
color: #9a3412;
|
||||
animation-name: sso-alert-pulse-warn;
|
||||
}
|
||||
|
||||
.sso-alert--token_invalid,
|
||||
.sso-alert--token_used,
|
||||
.sso-alert--sso_error {
|
||||
background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.sso-alert__icon {
|
||||
flex: 0 0 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-top: 1px;
|
||||
animation: sso-icon-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
.sso-alert__icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: currentColor;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sso-alert__body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sso-alert__title {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.sso-alert__message {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.sso-alert__close {
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
padding: 0 0 0 8px;
|
||||
cursor: pointer;
|
||||
opacity: 0.65;
|
||||
transition: opacity 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.sso-alert__close:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.login-card--shake {
|
||||
animation: login-card-shake 560ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
}
|
||||
|
||||
.login-card--dimmed {
|
||||
opacity: 0.35;
|
||||
filter: blur(1px);
|
||||
transform: scale(0.985);
|
||||
transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sso-overlay-enter-active,
|
||||
.sso-overlay-leave-active {
|
||||
transition: opacity 280ms ease;
|
||||
}
|
||||
|
||||
.sso-overlay-enter,
|
||||
.sso-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sso-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px 16px;
|
||||
background: rgba(15, 23, 42, 0.42);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.sso-overlay__card {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
padding: 28px 24px 24px;
|
||||
text-align: center;
|
||||
box-shadow:
|
||||
0 24px 60px rgba(2, 6, 23, 0.22),
|
||||
0 4px 14px rgba(2, 6, 23, 0.08);
|
||||
animation: sso-overlay-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.sso-overlay__card--success {
|
||||
animation: sso-overlay-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both,
|
||||
sso-overlay-success-pop 360ms ease 80ms both;
|
||||
}
|
||||
|
||||
.sso-overlay__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sso-overlay__spinner {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid rgba(37, 99, 235, 0.16);
|
||||
border-top-color: #2563eb;
|
||||
animation: sso-spinner 760ms linear infinite;
|
||||
}
|
||||
|
||||
.sso-overlay__check {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
fill: #16a34a;
|
||||
animation: sso-check-pop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
.sso-overlay__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.sso-overlay__message {
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
color: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.sso-overlay__progress {
|
||||
margin-top: 18px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sso-overlay__progress-bar {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
|
||||
animation: sso-progress ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes sso-overlay-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px) scale(0.96);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-overlay-success-pop {
|
||||
from {
|
||||
box-shadow: 0 24px 60px rgba(2, 6, 23, 0.22);
|
||||
}
|
||||
|
||||
to {
|
||||
box-shadow: 0 24px 60px rgba(22, 163, 74, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-check-pop {
|
||||
0% {
|
||||
transform: scale(0.35);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-progress {
|
||||
from {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes login-card-shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(7px);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-alert-pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
|
||||
}
|
||||
|
||||
35% {
|
||||
box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-alert-pulse-warn {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
|
||||
}
|
||||
|
||||
35% {
|
||||
box-shadow: 0 0 0 6px rgba(234, 88, 12, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sso-icon-pop {
|
||||
0% {
|
||||
transform: scale(0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@@ -43,6 +43,8 @@ Route::get('/fizikalpdf/{id}', [FizikalController::class, 'index']);
|
||||
|
||||
Route::get('/mayapdf/{id}', [MayaController::class, 'index']);
|
||||
|
||||
Route::get('/sso/login', 'API\v1\Voter\SsoLoginController@login');
|
||||
|
||||
Route::view('/{any}', 'index')->where('any', '.*');
|
||||
|
||||
Route::get('/penyata/{id}', [App\Http\Controllers\PenyataController::class, 'show']);
|
||||
|
||||
Reference in New Issue
Block a user