237 lines
8.8 KiB
PHP
237 lines
8.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Keamanan - Pustaka Nawasena</title>
|
|
<link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary-blue: #0d47a1;
|
|
--soft-bg: #f4f7fa;
|
|
--input-bg: #f8fafc;
|
|
}
|
|
|
|
/* Menyembunyikan scrollbar tapi tetap bisa scroll */
|
|
html, body {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
overflow-x: hidden;
|
|
}
|
|
body::-webkit-scrollbar { display: none; }
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--soft-bg);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
box-shadow: 0 15px 35px rgba(13, 71, 161, 0.08);
|
|
width: 100%;
|
|
max-width: 380px;
|
|
padding: 25px 30px;
|
|
border: 1px solid #f1f5f9;
|
|
}
|
|
|
|
h4 { font-weight: 800; color: var(--primary-blue); font-size: 1.1rem; margin-bottom: 2px; text-align: center; }
|
|
.subtitle { color: #64748b; font-size: 0.75rem; margin-bottom: 20px; display: block; text-align: center; }
|
|
|
|
.form-label { font-weight: 700; font-size: 0.68rem; color: #475569; text-transform: uppercase; margin-bottom: 5px; }
|
|
|
|
.input-group-text {
|
|
background: var(--input-bg);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 10px 0 0 10px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.form-control {
|
|
background: var(--input-bg);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 0; /* Dinamis dengan toggle */
|
|
padding: 7px 12px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.toggle-btn {
|
|
background: var(--input-bg);
|
|
border: 1px solid #e2e8f0;
|
|
border-left: none;
|
|
border-radius: 0 10px 10px 0;
|
|
cursor: pointer;
|
|
padding: 0 12px;
|
|
color: #94a3b8;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#passwordHelp {
|
|
background: #fdfdfd;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
margin-top: 8px;
|
|
border: 1px dashed #e2e8f0;
|
|
}
|
|
.check-item { font-size: 0.68rem; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
|
|
.valid { color: #10b981; }
|
|
.invalid { color: #94a3b8; }
|
|
|
|
.btn-primary {
|
|
background: var(--primary-blue);
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn-back {
|
|
display: flex; align-items: center; justify-content: center; gap: 5px;
|
|
color: #64748b; font-weight: 600; font-size: 0.78rem; text-decoration: none; margin-top: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="card">
|
|
<div class="text-center">
|
|
<img src="{{ asset('images/kartu.png') }}" alt="Logo" width="45" class="mb-2">
|
|
<h4>Profil & Keamanan</h4>
|
|
<span class="subtitle">Update informasi dan proteksi akun</span>
|
|
</div>
|
|
|
|
<form action="{{ route('user.updateProfile') }}" method="POST">
|
|
@csrf
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Nama</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-person"></i></span>
|
|
<input type="text" name="name" class="form-control" style="border-radius:0 10px 10px 0;" value="{{ $user->name }}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Email</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
|
|
<input type="email" name="email" class="form-control" style="border-radius:0 10px 10px 0;" value="{{ $user->email }}" required>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-3" style="opacity: 0.1;">
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Sandi Lama</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
|
|
<input type="password" name="current_password" id="current_password" class="form-control" placeholder="••••••••" required>
|
|
<button type="button" class="toggle-btn" onclick="togglePassword('current_password', 'eye1')">
|
|
<i class="bi bi-eye" id="eye1"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="form-label">Sandi Baru</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-key"></i></span>
|
|
<input type="password" name="new_password" id="new_password" class="form-control" placeholder="••••••••">
|
|
<button type="button" class="toggle-btn" onclick="togglePassword('new_password', 'eye2')">
|
|
<i class="bi bi-eye" id="eye2"></i>
|
|
</button>
|
|
</div>
|
|
<div id="passwordHelp">
|
|
<div id="length" class="check-item invalid"><i class="bi bi-check-circle"></i> Min. 8 Karakter</div>
|
|
<div id="capital" class="check-item invalid"><i class="bi bi-check-circle"></i> Huruf Besar & Kecil</div>
|
|
<div id="symbol" class="check-item invalid"><i class="bi bi-check-circle"></i> Tanda Baca (.,)</div>
|
|
<div id="match" class="check-item invalid"><i class="bi bi-check-circle"></i> Konfirmasi Cocok</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">Konfirmasi Sandi</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-patch-check"></i></span>
|
|
<input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" placeholder="••••••••">
|
|
<button type="button" class="toggle-btn" onclick="togglePassword('new_password_confirmation', 'eye3')">
|
|
<i class="bi bi-eye" id="eye3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary shadow-sm" id="submitBtn" disabled>Simpan Perubahan</button>
|
|
|
|
<a href="{{ route('user.profile') }}" class="btn-back">
|
|
<i class="bi bi-arrow-left-short fs-5"></i> Kembali
|
|
</a>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword(inputId, iconId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = document.getElementById(iconId);
|
|
if (input.type === "password") {
|
|
input.type = "text";
|
|
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
|
} else {
|
|
input.type = "password";
|
|
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
|
}
|
|
}
|
|
|
|
const newPass = document.getElementById('new_password');
|
|
const confirmPass = document.getElementById('new_password_confirmation');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
function validate() {
|
|
const val = newPass.value;
|
|
const conf = confirmPass.value;
|
|
|
|
const isLength = val.length >= 8;
|
|
const isCapital = /[A-Z]/.test(val) && /[a-z]/.test(val);
|
|
const isSymbol = /[.,]/.test(val);
|
|
const isMatch = val === conf && val !== '';
|
|
|
|
updateUI('length', isLength);
|
|
updateUI('capital', isCapital);
|
|
updateUI('symbol', isSymbol);
|
|
updateUI('match', isMatch);
|
|
|
|
submitBtn.disabled = !(isLength && isCapital && isSymbol && isMatch);
|
|
}
|
|
|
|
function updateUI(id, isValid) {
|
|
const el = document.getElementById(id);
|
|
if(isValid) {
|
|
el.classList.replace('invalid', 'valid');
|
|
el.querySelector('i').className = 'bi bi-check-circle-fill';
|
|
} else {
|
|
el.classList.replace('valid', 'invalid');
|
|
el.querySelector('i').className = 'bi bi-check-circle';
|
|
}
|
|
}
|
|
|
|
newPass.addEventListener('input', validate);
|
|
confirmPass.addEventListener('input', validate);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|