165 lines
6.9 KiB
PHP
165 lines
6.9 KiB
PHP
@extends('layouts.bk')
|
|
@section('title','Ubah Password')
|
|
@section('page-title','Ubah Password')
|
|
@section('page-sub','FR-BK-02 · Keamanan akun')
|
|
|
|
@section('content')
|
|
@if(Auth::user()->must_change_password)
|
|
<div class="alert alert-warning">⚠️ Anda wajib mengganti password sebelum mengakses fitur lain. (FR-BK-02)</div>
|
|
@endif
|
|
|
|
<style>
|
|
.password-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.password-wrapper .form-control {
|
|
padding-right: 46px;
|
|
}
|
|
|
|
.toggle-password {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.toggle-password svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.toggle-password:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
</style>
|
|
|
|
<div class="card" style="padding:24px;max-width:460px;">
|
|
<div style="font-family:'Playfair Display',serif;font-size:15px;font-weight:800;color:var(--primary-dark);margin-bottom:20px;">🔒 Ubah Password</div>
|
|
<form method="POST" action="{{ route('bk.password.update') }}">
|
|
@csrf @method('PUT')
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Password Lama <span class="req">*</span></label>
|
|
<div class="password-wrapper">
|
|
<input id="current_password" type="password" name="current_password" class="form-control" required/>
|
|
<button type="button" class="toggle-password" onclick="togglePassword('current_password', 'eyeIconCurrent', this)" aria-label="Tampilkan password lama">
|
|
<svg id="eyeIconCurrent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Password Baru <span class="req">*</span></label>
|
|
<div class="password-wrapper">
|
|
<input type="password" name="password" id="pwd_baru" class="form-control" required oninput="chkPwd(this.value)"/>
|
|
<button type="button" class="toggle-password" onclick="togglePassword('pwd_baru', 'eyeIconNew', this)" aria-label="Tampilkan password baru">
|
|
<svg id="eyeIconNew" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div style="height:5px;background:var(--border);border-radius:100px;overflow:hidden;margin:8px 0 4px;">
|
|
<div id="pwd-bar" style="height:100%;border-radius:100px;width:0;transition:all .4s;"></div>
|
|
</div>
|
|
<div id="pwd-hint" style="font-size:11px;color:var(--text-dim);">Masukkan password baru</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Konfirmasi Password <span class="req">*</span></label>
|
|
<div class="password-wrapper">
|
|
<input id="password_confirmation" type="password" name="password_confirmation" class="form-control" required oninput="chkMatch(this.value)"/>
|
|
<button type="button" class="toggle-password" onclick="togglePassword('password_confirmation', 'eyeIconConfirm', this)" aria-label="Tampilkan konfirmasi password">
|
|
<svg id="eyeIconConfirm" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div id="match-hint" style="font-size:11px;margin-top:5px;"></div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button class="btn btn-primary">🔒 Ubah Password</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function chkPwd(v){
|
|
let s=0;
|
|
if(v.length>=8)s++;
|
|
if(/[A-Z]/.test(v))s++;
|
|
if(/[0-9]/.test(v))s++;
|
|
if(/[^A-Za-z0-9]/.test(v))s++;
|
|
|
|
const l=[
|
|
{w:'0%',c:'#e2e8f0',t:''},
|
|
{w:'25%',c:'#dc2626',t:'⚠ Lemah'},
|
|
{w:'50%',c:'#d97706',t:'☑ Cukup'},
|
|
{w:'75%',c:'#1a3c6e',t:'✅ Kuat'},
|
|
{w:'100%',c:'#16a34a',t:'💪 Sangat Kuat'}
|
|
];
|
|
|
|
const i=v.length===0?0:s;
|
|
document.getElementById('pwd-bar').style.cssText=`width:${l[i].w};background:${l[i].c};height:100%;border-radius:100px;transition:all .4s;`;
|
|
document.getElementById('pwd-hint').textContent=l[i].t;
|
|
document.getElementById('pwd-hint').style.color=l[i].c;
|
|
}
|
|
|
|
function chkMatch(v){
|
|
const b=document.getElementById('pwd_baru').value;
|
|
const h=document.getElementById('match-hint');
|
|
|
|
if(!v){
|
|
h.textContent='';
|
|
return;
|
|
}
|
|
|
|
h.textContent=v===b?'✅ Password cocok':'❌ Tidak cocok';
|
|
h.style.color=v===b?'#16a34a':'#dc2626';
|
|
}
|
|
|
|
function togglePassword(inputId, iconId, button) {
|
|
const passwordInput = document.getElementById(inputId);
|
|
const eyeIcon = document.getElementById(iconId);
|
|
|
|
if (passwordInput.type === 'password') {
|
|
passwordInput.type = 'text';
|
|
button.setAttribute('aria-label', 'Sembunyikan password');
|
|
|
|
eyeIcon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.58 10.58A2 2 0 0 0 12 14a2 2 0 0 0 1.42-.58" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.88 5.32A9.77 9.77 0 0 1 12 5.25c6 0 9.75 6.75 9.75 6.75a17.42 17.42 0 0 1-3.06 3.72" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.53 6.53C3.86 8.23 2.25 12 2.25 12S6 18.75 12 18.75c1.37 0 2.62-.35 3.74-.91" />
|
|
`;
|
|
} else {
|
|
passwordInput.type = 'password';
|
|
button.setAttribute('aria-label', 'Tampilkan password');
|
|
|
|
eyeIcon.innerHTML = `
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12s3.75-6.75 9.75-6.75S21.75 12 21.75 12 18 18.75 12 18.75 2.25 12 2.25 12Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
`;
|
|
}
|
|
}
|
|
</script>
|
|
@endpush |