204 lines
9.1 KiB
PHP
204 lines
9.1 KiB
PHP
@extends('layout.layout')
|
|
|
|
@php
|
|
$title = 'Ubah Email';
|
|
$subTitle = 'Profil Pengguna';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="card basic-data-table">
|
|
<div class="card-body">
|
|
<div
|
|
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-3">
|
|
<div>
|
|
<h5 class="mb-0">Ubah Email</h5>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<a href="{{ route('profile.index') }}" class="btn btn-secondary btn-sm d-flex align-items-center gap-2">
|
|
<iconify-icon icon="iconoir:arrow-left"></iconify-icon>
|
|
<span>Kembali</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul class="mb-0">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('profile.update-email') }}" id="emailChangeForm">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Email Saat Ini</label>
|
|
<input type="email" class="form-control" value="{{ Auth::user()->email }}" readonly>
|
|
</div>
|
|
|
|
<div class="col-12"></div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Email Baru <span class="text-danger">*</span></label>
|
|
<input type="email" name="email" class="form-control" required value="{{ old('email') }}"
|
|
placeholder="Masukkan email baru">
|
|
</div>
|
|
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
|
|
<div class="position-relative">
|
|
<input type="password" name="current_password" id="current_password_email"
|
|
class="form-control pe-5" required placeholder="Masukkan password untuk konfirmasi">
|
|
<button type="button"
|
|
class="btn btn-link position-absolute end-0 top-50 translate-middle-y pe-3 text-secondary toggle-password"
|
|
data-target="#current_password_email">
|
|
<iconify-icon icon="solar:eye-linear" class="eye-open"></iconify-icon>
|
|
<iconify-icon icon="solar:eye-closed-linear" class="eye-closed d-none"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<div class="form-text">Password diperlukan untuk konfirmasi keamanan.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 d-flex gap-2">
|
|
<button class="btn btn-primary d-flex align-items-center gap-2">
|
|
<iconify-icon icon="material-symbols:save"></iconify-icon>
|
|
<span>Ubah Email</span>
|
|
</button>
|
|
<a href="{{ route('profile.index') }}" class="btn btn-light">Batal</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Confirmation Modal -->
|
|
<div class="modal fade" id="confirmEmailChangeModal" tabindex="-1" aria-labelledby="confirmEmailChangeModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0 pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
<div
|
|
class="w-48-px h-48-px bg-info-subtle rounded-circle d-flex align-items-center justify-content-center">
|
|
<iconify-icon icon="material-symbols:mail" class="text-info fs-3"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h5 class="modal-title mb-1" id="confirmEmailChangeModalLabel">Konfirmasi Ubah Email</h5>
|
|
<p class="text-muted mb-0 small">Pastikan email baru sudah benar</p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body pt-2">
|
|
<div class="alert alert-info border-0 bg-info-subtle">
|
|
<div class="d-flex">
|
|
<iconify-icon icon="material-symbols:info" class="text-info me-2 mt-1"></iconify-icon>
|
|
<div>
|
|
<strong>Informasi:</strong>
|
|
<ul class="mb-0 mt-2">
|
|
<li>Email akan <strong>langsung diubah</strong> setelah konfirmasi</li>
|
|
<li>Pastikan <strong>email baru sudah benar</strong> dan dapat diakses</li>
|
|
<li>Gunakan email ini untuk <strong>login selanjutnya</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-light p-3 rounded">
|
|
<div class="row">
|
|
<div class="col-12 mb-2">
|
|
<small class="text-muted">Email saat ini:</small>
|
|
<div class="fw-medium">{{ Auth::user()->email }}</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted">Email baru:</small>
|
|
<div class="fw-medium text-primary" id="newEmailPreview">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0 pt-0">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">
|
|
<iconify-icon icon="material-symbols:close" class="me-1"></iconify-icon>
|
|
Batal
|
|
</button>
|
|
<button type="button" class="btn btn-info" id="confirmEmailChange">
|
|
<iconify-icon icon="material-symbols:mail" class="me-1"></iconify-icon>
|
|
Ya, Ubah Email
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Password toggle functionality
|
|
$('.toggle-password').on('click', function() {
|
|
const target = $(this).data('target');
|
|
const input = $(target);
|
|
const eyeOpen = $(this).find('.eye-open');
|
|
const eyeClosed = $(this).find('.eye-closed');
|
|
|
|
if (input.attr('type') === 'password') {
|
|
input.attr('type', 'text');
|
|
eyeOpen.addClass('d-none');
|
|
eyeClosed.removeClass('d-none');
|
|
} else {
|
|
input.attr('type', 'password');
|
|
eyeOpen.removeClass('d-none');
|
|
eyeClosed.addClass('d-none');
|
|
}
|
|
});
|
|
|
|
// Custom modal confirmation before email change
|
|
$('#emailChangeForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get new email value and show in modal
|
|
const newEmail = $('input[name="email"]').val();
|
|
if (newEmail) {
|
|
$('#newEmailPreview').text(newEmail);
|
|
$('#confirmEmailChangeModal').modal('show');
|
|
} else {
|
|
// If no email entered, show validation
|
|
$('input[name="email"]').focus();
|
|
}
|
|
});
|
|
|
|
// Handle modal confirmation
|
|
$('#confirmEmailChange').on('click', function() {
|
|
// Hide modal
|
|
$('#confirmEmailChangeModal').modal('hide');
|
|
|
|
// Add loading state to button
|
|
const btn = $(this);
|
|
const originalText = btn.html();
|
|
btn.html(
|
|
'<span class="spinner-border spinner-border-sm me-2" role="status"></span>Mengubah Email...'
|
|
);
|
|
btn.prop('disabled', true);
|
|
|
|
// Submit form after modal closes
|
|
setTimeout(function() {
|
|
$('#emailChangeForm')[0].submit();
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|