feat: add resources and view components
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
<x-guest-layout>
|
||||
@php
|
||||
$logo = get_setting('app_logo');
|
||||
@endphp
|
||||
|
||||
{{-- Logo & Intro --}}
|
||||
<div class="text-center text-primary mb-5">
|
||||
<img src="{{ asset('assets/img/logo.png') }}" alt="logo" class="maxwidth-200 mx-auto"><br>
|
||||
<i class="fs-15 opacity-75">
|
||||
Start your journey with <b>biiproject.</b>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
{{-- Session Status (feedback setelah submit) --}}
|
||||
@if (session('status'))
|
||||
<div class="alert alert-success">{{ session('status') }}</div>
|
||||
@endif
|
||||
|
||||
{{-- Form Register User Baru --}}
|
||||
<form method="POST" action="{{ route('register') }}">
|
||||
@csrf
|
||||
|
||||
{{-- Full Name --}}
|
||||
<div class="form-floating mb-3">
|
||||
<input type="text" id="name" name="name" class="form-control @error('name') is-invalid @enderror"
|
||||
placeholder="Full Name" value="{{ old('name') }}" required autocomplete="name" autofocus>
|
||||
|
||||
<label for="name">Full Name</label>
|
||||
|
||||
@error('name')
|
||||
<div class="text-danger small mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
{{-- Email --}}
|
||||
<div class="form-floating mb-3">
|
||||
<input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
|
||||
placeholder="Email Address" value="{{ old('email') }}" autocomplete="off" required>
|
||||
|
||||
<label for="email">Email Address</label>
|
||||
|
||||
@error('email')
|
||||
<div class="text-danger small mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
{{-- Password --}}
|
||||
<div class="input-group mb-3">
|
||||
<div class="form-floating flex-grow-1">
|
||||
<input type="password" id="password" name="password"
|
||||
class="form-control border-end-0 @error('password') is-invalid @enderror" placeholder="Password"
|
||||
autocomplete="new-password" required minlength="{{ get_setting('password_min_length', 12) }}"
|
||||
title="Minimum {{ get_setting('password_min_length', 12) }} characters">
|
||||
<label for="password">Password</label>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary bg-white border-start-0 password-toggle" type="button" style="border-color: #dee2e6;">
|
||||
<i class="bi bi-eye text-secondary"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@error('password')
|
||||
<div class="text-danger small mt-1 mb-3">{{ $message }}</div>
|
||||
@enderror
|
||||
|
||||
{{-- Confirm Password --}}
|
||||
<div class="input-group mb-4">
|
||||
<div class="form-floating flex-grow-1">
|
||||
<input type="password" id="password_confirmation" name="password_confirmation"
|
||||
class="form-control border-end-0 @error('password_confirmation') is-invalid @enderror" placeholder="Confirm Password"
|
||||
autocomplete="new-password" required minlength="{{ get_setting('password_min_length', 12) }}"
|
||||
title="Must match the new password exactly">
|
||||
<label for="password_confirmation">Confirm Password</label>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary bg-white border-start-0 password-toggle" type="button" style="border-color: #dee2e6;">
|
||||
<i class="bi bi-eye text-secondary"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@error('password_confirmation')
|
||||
<div class="text-danger small mt-1 mb-4">{{ $message }}</div>
|
||||
@enderror
|
||||
|
||||
{{-- Consent Checkboxes (Fintech Style) --}}
|
||||
<div class="mb-4">
|
||||
<div class="p-3 rounded-4 border bg-white-50 shadow-sm consent-container" style="background: rgba(255,255,255,0.5); transition: all 0.3s ease;">
|
||||
<div class="form-check custom-check mb-2 d-flex align-items-center">
|
||||
<input type="checkbox" name="agree_tos_pdp" class="form-check-input flex-shrink-0 mt-0" id="agree_legal" value="1" required>
|
||||
<label class="form-check-label small lh-sm ms-2" for="agree_legal" style="cursor: pointer;">
|
||||
{{ __('I have read and agree to the') }}
|
||||
<a href="javascript:void(0)" onclick="openLegalModal('tos')" class="text-primary text-decoration-none fw-bold">{{ __('Terms of Use') }}</a>
|
||||
{{ __('and') }}
|
||||
<a href="javascript:void(0)" onclick="openLegalModal('privacy')" class="text-primary text-decoration-none fw-bold">{{ __('Privacy Policy (UU PDP)') }}</a>.
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check custom-check d-flex align-items-center">
|
||||
<input type="checkbox" name="marketing_consent" class="form-check-input flex-shrink-0 mt-0" id="agree_marketing" value="1">
|
||||
<label class="form-check-label small lh-sm ms-2" for="agree_marketing" style="cursor: pointer;">
|
||||
{{ __('I consent to receive newsletters, marketing emails, and service updates.') }} <span class="text-muted">({{ __('Optional') }})</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@error('agree_tos_pdp')
|
||||
<div class="text-danger small mt-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
{{-- Submit --}}
|
||||
<button type="submit" class="btn btn-lg btn-primary theme-black w-100">
|
||||
Register
|
||||
</button>
|
||||
|
||||
{{-- Redirect ke Login --}}
|
||||
<div class="text-center">
|
||||
<a href="{{ route('login') }}" class="text-primary small">
|
||||
Already registered? Login here
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-primary mb-5">
|
||||
{{-- Footer --}}
|
||||
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
|
||||
</div>
|
||||
|
||||
@push('modals')
|
||||
{{-- Legal Viewer Modal --}}
|
||||
<div class="modal fade" id="legalModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: 30px; overflow: hidden;">
|
||||
<div class="modal-header border-0 p-4 pb-0" style="padding: 2.5rem 2.5rem 0.5rem !important;">
|
||||
<h4 class="modal-title fw-bold" id="legalModalTitle" style="font-family: var(--adminuiux-title-font);">{{ __('Legal Document') }}</h4>
|
||||
<button type="button" class="btn-close me-1 mt-1" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4" style="padding: 1rem 2.5rem 2.5rem !important;">
|
||||
<div id="legalModalContent" class="legal-content-preview">
|
||||
<div class="text-center py-5">
|
||||
<div class="spinner-border text-primary spinner-border-sm mb-3"></div>
|
||||
<p class="small text-muted">{{ __('Loading document...') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 p-4 pt-0" style="padding: 0 2.5rem 2.5rem !important;">
|
||||
<button type="button" class="btn btn-pill-standard-primary w-100 py-3" data-bs-dismiss="modal">{{ __('Close & Continue') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function openLegalModal(type) {
|
||||
const modalEl = document.getElementById('legalModal');
|
||||
const modal = new bootstrap.Modal(modalEl);
|
||||
const contentDiv = document.getElementById('legalModalContent');
|
||||
const titleEl = document.getElementById('legalModalTitle');
|
||||
|
||||
// Set Titles
|
||||
titleEl.innerText = type === 'tos' ? "{{ __('Terms of Use') }}" : "{{ __('Privacy Policy') }}";
|
||||
|
||||
// Show Modal
|
||||
modal.show();
|
||||
|
||||
// Loader
|
||||
contentDiv.innerHTML = `
|
||||
<div class="text-center py-5">
|
||||
<div class="spinner-border text-primary spinner-border-sm mb-3"></div>
|
||||
<p class="small text-muted">{{ __('Loading document...') }}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Load Content via AJAX
|
||||
fetch(`/legal/${type}`)
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(html, 'text/html');
|
||||
const actualContent = doc.querySelector('.legal-content') ? doc.querySelector('.legal-content').innerHTML : html;
|
||||
contentDiv.innerHTML = actualContent;
|
||||
})
|
||||
.catch(err => {
|
||||
contentDiv.innerHTML = '<div class="alert alert-danger">{{ __('Failed to load content.') }}</div>';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.consent-container:hover {
|
||||
background: rgba(255,255,255,0.7) !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
.custom-check .form-check-input {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
margin-right: 0 !important;
|
||||
border: 2px solid #dee2e6;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.custom-check .form-check-input:checked {
|
||||
background-color: #000;
|
||||
border-color: #000;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.legal-content-preview {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
color: #333;
|
||||
}
|
||||
.legal-content-preview h1, .legal-content-preview h2, .legal-content-preview h3 {
|
||||
font-family: var(--adminuiux-title-font);
|
||||
font-weight: 700;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
</x-guest-layout>
|
||||
Reference in New Issue
Block a user