E41220778
/
TIF_NGANJUK_E41220778
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: Implementation modal and copy clipboard page request code

This commit is contained in:
zhadaarsita 2025-11-08 01:24:09 +07:00
parent a8ea989e4a
commit b2405eee13
1 changed files with 111 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
resources/views/baca/request_code.blade.php
View File

@ -1,37 +1,122 @@
@section('page-title', 'Kode Akses Buku')
<x-app-layout>
<div class="container text-center py-5">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<h2 class="fw-bold">KODE AKSES BUKU ANDA</h2>
<p class="text-muted">Kode unik telah diberikan secara otomatis. Perhatikan kode dibawah ini:</p>
<div class="modal fade" id="accessCodeModal" tabindex="-1" aria-labelledby="accessCodeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0 shadow-lg" style="border-radius: 1rem;">
<div class="modal-header border-0 pb-0 d-block text-center position-relative">
<div class="my-4 p-4 rounded" style="border: 2px dashed #0d6efd; background-color: #f8f9fa; display: inline-block;">
<h3 class="fw-bold" style="font-family: monospace; letter-spacing: 2px;">{{ $accessCode }}</h3>
<button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"
aria-label="Close">
</button>
<div class="icon-circle bg-primary-soft text-primary mx-auto mb-3"
style="width: 60px; height: 60px; border-radius: 12px;">
<i class="bi bi-shield-lock fs-3"></i>
</div>
<h4 class="modal-title fw-bold" id="accessCodeModalLabel">Akses Buku Digital</h4>
<p class="text-muted small">Masukkan kode akses yang telah Anda terima di bawah ini.</p>
</div>
<p class="text-muted">Jangan bagikan kepada orang lain.</p>
<p>Masukkan kode akses ini pada kolom dibawah ini:</p>
@if(session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<div class="modal-body pt-0 px-4">
<div class="text-center mb-4">
<form action="{{ route('baca.verify_code', ['id' => $book['id']]) }}" method="POST" class="mt-3">
@csrf
<div class="form-group" style="max-width: 400px; margin-left: auto; margin-right: auto;">
<label for="kode_akses" class="form-label fw-bold">Kode Akses Buku:</label>
<input type="text" name="kode_akses" id="kode_akses" class="form-control form-control-lg text-center" placeholder="Masukkan kode akses..." required autofocus>
</div>
<div class="d-grid gap-2" style="max-width: 400px; margin-left: auto; margin-right: auto;">
<button type="submit" class="btn btn-primary btn-lg mt-3">Akses Buku</button>
</div>
</form>
<p class="mb-2 small text-muted">Kode Akses Unik Anda:</p>
<div class="input-group input-group-lg shadow-sm">
<input type="text" class="form-control text-center fw-bold bg-light"
value="{{ $accessCode ?? 'KODE-TIDAK-TERSEDIA' }}" id="accessCodeDisplay" readonly
style="border-right: none; font-family: monospace; letter-spacing: 1px;">
<button class="btn btn-outline-primary" type="button" id="copyCodeButton"
data-bs-toggle="tooltip" data-bs-placement="top" title="Salin Kode">
<i class="bi bi-clipboard"></i>
</button>
</div>
<p class="small text-danger mt-1">Jangan bagikan kode ini kepada orang lain.</p>
</div>
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
{{-- Form Verifikasi Kode Akses --}}
<form action="{{ route('baca.verify_code', ['id' => $book['id'] ?? 1]) }}" method="POST">
@csrf
<div class="form-group mb-3">
<label for="kode_akses" class="form-label fw-bold small text-start d-block">Verifikasi Kode
Akses:</label>
<input type="text" name="kode_akses" id="kode_akses"
class="form-control form-control text-center"
placeholder="Tempel kode akses di sini..." required autofocus>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary mt-2">Akses Buku</button>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
{{-- Script untuk Salin Kode, Menampilkan Modal, dan Redirect saat ditutup --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Logika Copy to Clipboard
const copyButton = document.getElementById('copyCodeButton');
const accessCodeDisplay = document.getElementById('accessCodeDisplay');
if (copyButton) {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
copyButton.addEventListener('click', function() {
navigator.clipboard.writeText(accessCodeDisplay.value).then(() => {
const originalIcon = copyButton.querySelector('i').className;
copyButton.querySelector('i').className = 'bi bi-check-lg text-success';
const tooltip = bootstrap.Tooltip.getInstance(copyButton);
if (tooltip) {
tooltip.hide();
copyButton.setAttribute('title', 'Tersalin!');
tooltip.update();
tooltip.show();
}
setTimeout(() => {
copyButton.querySelector('i').className = originalIcon;
if (tooltip) {
tooltip.hide();
copyButton.setAttribute('title', 'Salin Kode');
tooltip.update();
}
}, 1500);
}).catch(err => {
alert('Gagal menyalin kode. Silakan salin manual.');
});
});
}
// Tampilkan Modal Secara Otomatis
const accessCode = '{{ $accessCode ?? null }}';
const accessCodeModal = document.getElementById('accessCodeModal');
if (accessCode && accessCodeModal) {
var myModal = new bootstrap.Modal(accessCodeModal);
myModal.show();
}
// Logic redirect (Mengarahkan ke baca.ringkasan)
if (accessCodeModal) {
accessCodeModal.addEventListener('hidden.bs.modal', function(event) {
// Redirect ke halaman ringkasan buku saat modal ditutup
window.location.href = '{{ route('baca.ringkasan', ['id' => $book['id'] ?? 1]) }}';
});
}
});
</script>
</x-app-layout>