feat: add resources and view components
This commit is contained in:
@@ -0,0 +1,150 @@
|
||||
<x-guest-layout :maxWidthClass="'maxwidth-800'">
|
||||
@push('styles')
|
||||
<style>
|
||||
.re-agree-container {
|
||||
width: 100%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.re-agree-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
border-radius: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 40px 80px rgba(0,0,0,0.1);
|
||||
padding: 50px;
|
||||
}
|
||||
.legal-preview-box {
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
background: rgba(248, 249, 250, 0.8);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
border-radius: 20px;
|
||||
padding: 25px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
font-family: var(--adminuiux-content-font), sans-serif;
|
||||
}
|
||||
.legal-preview-box h1, .legal-preview-box h2 {
|
||||
font-family: var(--adminuiux-title-font);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #000;
|
||||
}
|
||||
.step-badge {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
margin-right: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.maxwidth-800 {
|
||||
max-width: 800px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.form-check.custom-check {
|
||||
display: flex;
|
||||
align-items: center; /* Center the checkbox vertically with the text */
|
||||
padding-left: 1.5rem !important;
|
||||
}
|
||||
.form-check.custom-check .form-check-input {
|
||||
margin-top: 0 !important;
|
||||
margin-left: -0.75rem !important;
|
||||
}
|
||||
.btn-pill-primary {
|
||||
white-space: normal !important; /* Allow text to wrap if very long */
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="re-agree-container">
|
||||
<div class="re-agree-card">
|
||||
<div class="text-center mb-5">
|
||||
<div class="avatar avatar-80 rounded-circle bg-primary-subtle text-primary mx-auto mb-4">
|
||||
<i class="bi bi-shield-check fs-1"></i>
|
||||
</div>
|
||||
<h2 class="fw-bold text-dark mb-2" style="font-family: var(--adminuiux-title-font); font-size: clamp(1.5rem, 4vw, 2.25rem);">{{ __('Legal Update Required') }}</h2>
|
||||
<p class="text-muted mx-auto" style="max-width: 500px;">{{ __('We have updated our legal documents to improve our services and compliance with UU PDP regulations. please review and accept the latest terms to continue.') }}</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('legal.re-agree.post') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
@if($missingTos)
|
||||
<div class="mb-5">
|
||||
<h5 class="fw-bold mb-4 d-flex align-items-center">
|
||||
<span class="step-badge">1</span> {{ __('Terms of Use Update') }}
|
||||
<span class="badge bg-light text-dark border ms-2 fw-normal fs-xs">v{{ $tosVersion }}</span>
|
||||
</h5>
|
||||
<div class="legal-preview-box">
|
||||
@if(!empty($tosContent))
|
||||
{!! strip_tags($tosContent, '<h1><h2><h3><h4><h5><h6><p><br><strong><em><u><s><ul><ol><li><a><blockquote><table><thead><tbody><tr><th><td><hr><span><div><img>') !!}
|
||||
@else
|
||||
<div class="text-center py-5 opacity-50 italic">
|
||||
<i class="bi bi-file-earmark-text fs-2 mb-2 d-block"></i>
|
||||
{{ __('Terms of Use content is being updated...') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="form-check custom-check p-3 bg-light rounded-4 border">
|
||||
<input type="checkbox" name="agree_tos" class="form-check-input flex-shrink-0" id="agree_tos" required>
|
||||
<label class="form-check-label fw-bold ms-2 mb-0" for="agree_tos" style="cursor: pointer;">
|
||||
{{ __('I have read and agree to the latest Terms of Use') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($missingPrivacy)
|
||||
<div class="mb-5">
|
||||
<h5 class="fw-bold mb-4 d-flex align-items-center">
|
||||
<span class="step-badge">{{ $missingTos ? '2' : '1' }}</span> {{ __('Privacy Policy Update') }}
|
||||
<span class="badge bg-light text-dark border ms-2 fw-normal fs-xs">v{{ $privacyVersion }}</span>
|
||||
</h5>
|
||||
<div class="legal-preview-box">
|
||||
@if(!empty($privacyContent))
|
||||
{!! strip_tags($privacyContent, '<h1><h2><h3><h4><h5><h6><p><br><strong><em><u><s><ul><ol><li><a><blockquote><table><thead><tbody><tr><th><td><hr><span><div><img>') !!}
|
||||
@else
|
||||
<div class="text-center py-5 opacity-50 italic">
|
||||
<i class="bi bi-shield-lock fs-2 mb-2 d-block"></i>
|
||||
{{ __('Privacy Policy content is being updated...') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="form-check custom-check p-3 bg-light rounded-4 border">
|
||||
<input type="checkbox" name="agree_privacy" class="form-check-input flex-shrink-0" id="agree_privacy" required>
|
||||
<label class="form-check-label fw-bold ms-2 mb-0" for="agree_privacy" style="cursor: pointer;">
|
||||
{{ __('I have read and agree to the latest Privacy Policy (UU PDP)') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="mt-5">
|
||||
<button type="submit" class="btn btn-pill-primary w-100 py-3 fs-5 shadow-sm">
|
||||
{{ __('Update Agreements & Proceed') }} <i class="bi bi-arrow-right ms-2"></i>
|
||||
</button>
|
||||
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn btn-link text-muted small w-100 mt-4 text-decoration-none">
|
||||
{{ __('Logout and review later') }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
|
||||
@csrf
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-guest-layout>
|
||||
Reference in New Issue
Block a user