feat: add resources and view components

This commit is contained in:
2026-05-21 16:05:19 +07:00
parent 28a06315b8
commit b2d60e680d
249 changed files with 37379 additions and 0 deletions
@@ -0,0 +1,47 @@
<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>
<p class="opacity-75 fs-6">
This is a secure area. Please confirm your password to continue.
</p>
</div>
{{-- Form Konfirmasi Password --}}
<form method="POST" action="{{ route('password.confirm') }}">
@csrf
{{-- Input Password --}}
<div class="input-group mb-4">
<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" required
autocomplete="current-password">
<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>
{{-- Pesan Error Validasi --}}
@error('password')
<div class="text-danger small mt-1 mb-4">{{ $message }}</div>
@enderror
{{-- Tombol Submit --}}
<button type="submit" class="btn btn-lg btn-primary theme-black w-100">
Confirm
</button>
</form>
<div class="text-center text-primary mb-5">
{{-- Footer --}}
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
</div>
</x-guest-layout>
@@ -0,0 +1,54 @@
<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 mb-0">
{{ __('Forgot your password? Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
</i>
</div>
{{-- Status Notification (Reset link successfully sent) --}}
@if (session('status'))
<div class="alert alert-success">{{ session('status') }}</div>
@endif
{{-- Form Request Reset Password --}}
<form method="POST" action="{{ route('password.email') }}">
@csrf
{{-- Input Email --}}
<div class="form-floating mb-3">
<input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
placeholder="Enter your email" value="{{ old('email') }}" autocomplete="off" required autofocus>
<label for="email">Email Address</label>
{{-- Error Validasi --}}
@error('email')
<div class="text-danger small mt-1">{{ $message }}</div>
@enderror
</div>
{{-- Button Kirim Link Reset Password --}}
<button type="submit" class="btn btn-lg btn-primary theme-black w-100">
Email Password Reset Link
</button>
{{-- Back to Login --}}
<div class="text-center mt-3">
<a href="{{ route('login') }}" class="text-primary small">
Back to Login
</a>
</div>
</form>
<div class="text-center text-primary mb-5">
{{-- Footer --}}
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
</div>
</x-guest-layout>
+183
View File
@@ -0,0 +1,183 @@
<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 mb-0">
{{ $app_tagline1 ?? '' }}<br>
{{ $app_tagline ?? '' }}
</i>
</div>
{{-- Alert Session Status (Login feedback) --}}
@if (session('status'))
<div class="alert alert-success">{{ session('status') }}</div>
@endif
@if($errors->has('email'))
<div class="alert alert-danger mt-2">
{{ $errors->first('email') }}
</div>
@endif
{{-- Login Form --}}
<form method="POST" action="{{ route('login') }}">
@csrf
{{-- Email Input --}}
<div class="form-floating mb-3">
<input type="email" autocomplete="off" class="form-control @error('email') is-invalid @enderror" id="email"
name="email" placeholder="Enter email" required value="{{ old('email') }}">
<label for="email">Email Address</label>
</div>
{{-- Password Input --}}
<div class="input-group mb-3">
<div class="form-floating flex-grow-1">
<input type="password" autocomplete="new-password"
class="form-control border-end-0 @error('password') is-invalid @enderror" id="password"
name="password" placeholder="Enter your password" required>
<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>
{{-- Options: Remember + Forgot Password --}}
<div class="d-flex justify-content-between align-items-center mb-3">
<label class="text-primary">
<input type="checkbox" name="remember"> Remember me
</label>
@if (Route::has('password.request'))
<a href="{{ route('password.request') }}" class="text-primary small">
Forgot Password?
</a>
@endif
</div>
{{-- Captcha --}}
@if(get_setting('captcha_enabled', false))
<div class="mb-3 d-flex justify-content-center">
{!! NoCaptcha::display() !!}
</div>
@if ($errors->has('g-recaptcha-response'))
<div class="alert alert-danger py-2 small mb-3">
{{ $errors->first('g-recaptcha-response') }}
</div>
@endif
{!! NoCaptcha::renderJs() !!}
@endif
{{-- Submit --}}
<button type="submit" class="btn btn-lg btn-primary theme-black w-100 mb-2">
Login
</button>
@if(get_setting('webauthn_enabled', false))
<button type="button" id="passkey-login" class="btn btn-lg btn-info w-100 mb-2 text-white">
<i class="bi bi-fingerprint me-2"></i> {{ __('Login with Passkey') }}
</button>
@endif
{{-- Social Logins --}}
<div class="row g-2 mt-2">
@if(get_setting('feature_google_oauth', false))
<div class="col-12">
<a href="{{ route('auth.social', 'google') }}" class="btn btn-lg btn-outline-dark w-100">
<img src="{{ asset('assets/img/google.png') }}" alt="google" class="maxwidth-20 mx-auto me-2">
{{ __('Login with Google') }}
</a>
</div>
@endif
@if(get_setting('feature_facebook_oauth', false))
<div class="col-12">
<a href="{{ route('auth.social', 'facebook') }}" class="btn btn-lg btn-outline-dark w-100">
<img src="{{ asset('assets/img/facebook.png') }}" alt="facebook" class="maxwidth-20 mx-auto me-2">
{{ __('Login with Facebook') }}
</a>
</div>
@endif
@if(get_setting('feature_github_oauth', false))
<div class="col-12">
<a href="{{ route('auth.social', 'github') }}" class="btn btn-lg btn-outline-dark w-100">
<img src="{{ asset('assets/img/github.png') }}" alt="github" class="maxwidth-20 mx-auto me-2">
{{ __('Login with GitHub') }}
</a>
</div>
@endif
</div>
</form>
@if(get_setting('webauthn_enabled', false))
<script src="{{ asset('vendor/webauthn/webauthn.js') }}"></script>
<script>
document.getElementById('passkey-login').addEventListener('click', async () => {
const passkeyBtn = document.getElementById('passkey-login');
// Check if class is available
if (typeof WebAuthn === 'undefined') {
console.error('WebAuthn library not loaded.');
return;
}
if (WebAuthn.supportsWebAuthn()) {
try {
passkeyBtn.disabled = true;
passkeyBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> {{ __("Authenticating...") }}';
const webauthn = new WebAuthn();
const response = await webauthn.login();
if (response) {
window.location.href = "{{ route('dashboard') }}";
}
} catch (error) {
console.error('WebAuthn Error:', error);
let errorMsg = 'Authentication failed. Please use your password.';
if (!window.isSecureContext) {
errorMsg = 'Passkeys require a secure context (HTTPS). \n\n' +
'Developer Tip: If you are on a local domain (like .test), you can bypass this in Chrome/Edge by going to: \n' +
'chrome://flags/#unsafely-treat-insecure-origin-as-secure \n' +
'and adding your domain to the list.';
} else if (error.name === 'NotAllowedError') {
errorMsg = 'Authentication was cancelled or timed out.';
} else {
errorMsg = 'Login failed. Ensure you have registered a passkey on this device.';
}
StandardSwal.fire({
icon: 'error',
title: 'Authentication Failed!',
text: errorMsg || 'Unable to log in with Passkey. Please verify your device settings or use your password.',
confirmButtonText: 'Try Again'
});
} finally {
passkeyBtn.disabled = false;
passkeyBtn.innerHTML = '<i class="bi bi-fingerprint me-2"></i> {{ __("Login with Passkey") }}';
}
} else {
StandardSwal.fire({
icon: 'info',
title: 'Passkey Not Supported',
text: 'Your current browser or device does not support secure Passkey authentication.',
confirmButtonText: 'Understood'
});
}
});
</script>
@endif
<div class="text-center text-primary mb-5">
{{-- Footer --}}
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
</div>
</x-guest-layout>
@@ -0,0 +1,10 @@
<x-guest-layout>
<div class="text-center">
<h1 class="fw-bold fs-2">🚧 Under Maintenance</h1>
<p class="mt-2 text-secondary">Free Trial is currently unavailable at this time.</p>
<a href="{{ url()->previous() }}" class="btn btn-dark mt-4 px-5">
{{ __('Back') }}
</a>
</div>
</x-guest-layout>
+220
View File
@@ -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>
@@ -0,0 +1,83 @@
<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>
<p class="opacity-75 fs-6">Enter your new password to reset your account.</p>
</div>
{{-- Form Reset Password --}}
<form method="POST" action="{{ route('password.store') }}">
@csrf
{{-- Token Reset (dibawa dari email) --}}
<input type="hidden" name="token" value="{{ $request->route('token') }}">
{{-- 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', $request->email) }}" required autofocus
autocomplete="username">
<label for="email">Email Address</label>
{{-- Error Validasi --}}
@error('email')
<div class="text-danger small mt-1">{{ $message }}</div>
@enderror
</div>
{{-- Password Baru --}}
<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="New Password"
autocomplete="new-password" required>
<label for="password">New 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
{{-- Konfirmasi Password Baru --}}
<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>
<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
{{-- Tombol Reset --}}
<button type="submit" class="btn btn-lg btn-primary theme-black w-100">
Reset Password
</button>
{{-- Redirect ke Login --}}
<div class="text-center mt-3">
<a href="{{ route('login') }}" class="text-primary small">Back to Login</a>
</div>
</form>
<div class="text-center text-primary mb-5">
{{-- Footer --}}
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
</div>
</x-guest-layout>
+41
View File
@@ -0,0 +1,41 @@
<x-guest-layout>
<div class="text-center text-primary mb-5">
<h3 class="fw-bold">{{ __('Two-Factor Authentication') }}</h3>
<p class="text-muted">{{ __('Please enter the verification code sent to your email.') }}</p>
</div>
@if (session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif
@if (app()->environment('local') && session('dev_otp'))
<div class="alert alert-info border-0 shadow-sm mb-4">
<i class="bi bi-info-circle me-2"></i>
<strong>Developer Tip:</strong> Your OTP code is <code>{{ session('dev_otp') }}</code>
</div>
@endif
<form method="POST" action="{{ route('2fa.verify') }}">
@csrf
<div class="form-floating mb-3">
<input type="text" name="code" class="form-control" id="2fa_code" placeholder="Enter code" required autofocus maxlength="6">
<label for="2fa_code">Verification Code</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" name="trust_device" id="trust_device">
<label class="form-check-label small text-muted" for="trust_device">
{{ __('Trust this device for') }} {{ get_setting('two_factor_trust_days', 30) }} {{ __('days') }}
</label>
</div>
<button type="submit" class="btn btn-lg btn-primary theme-black w-100 mb-3">
{{ __('Verify') }}
</button>
<div class="text-center">
<a href="{{ route('login') }}" class="text-primary small">{{ __('Back to Login') }}</a>
</div>
</form>
</x-guest-layout>
@@ -0,0 +1,51 @@
<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>
<p class="opacity-75 fs-6">
Thanks for signing up!<br>
Please verify your email to continue.
</p>
</div>
{{-- Notification: Verification link successfully sent --}}
@if (session('status') == 'verification-link-sent')
<div class="alert alert-success text-center mb-4">
A new verification link has been sent to your email address.
</div>
@endif
{{-- Informasi Panduan --}}
<div class="text-primary mb-4 text-center">
<small>
We have sent you a verification link.
Didn't receive it? You can request another one below.
</small>
</div>
{{-- Button: Kirim ulang email verifikasi --}}
<form method="POST" action="{{ route('verification.send') }}" class="mb-3">
@csrf
<button type="submit" class="btn btn-lg btn-primary theme-black w-100">
Resend Verification Email
</button>
</form>
{{-- Aksi Logout --}}
<form method="POST" action="{{ route('logout') }}" class="text-center">
@csrf
<button type="submit" class="btn btn-link text-primary small text-decoration-underline">
Log Out
</button>
</form>
<div class="text-center text-primary mb-5">
{{-- Footer --}}
<small class="opacity-50 d-block mt-4"> {{ $footer_text }} </small>
</div>
</x-guest-layout>