158 lines
9.6 KiB
PHP
158 lines
9.6 KiB
PHP
<div style="min-height:100vh; background-color:var(--background-primary); display:flex; flex-direction:column; padding-left:1.5rem; padding-right:1.5rem;">
|
|
|
|
<div style="margin:0 auto; padding-top:0.5rem; padding-bottom:2rem; border-bottom:1px solid var(--border-color); text-align:center;">
|
|
<h2 style="font-size:2rem; font-weight:700; margin-bottom:0.5rem; color:var(--text-primary);">
|
|
Report Abuse
|
|
</h2>
|
|
<div style="font-size:1rem; color:var(--text-secondary);">
|
|
Help us maintain a safe and respectful environment for everyone.
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex:1; width:100%; margin:0 auto; padding-left:1rem; padding-right:1rem;">
|
|
|
|
|
|
@if($submitted)
|
|
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-6 mb-6">
|
|
<div class="flex items-center">
|
|
<div>
|
|
<h3 style="font-weight:600; color:var(--text-primary); margin-bottom:0.25rem;">Report Submitted Successfully!</h3>
|
|
<p style="color:var(--text-secondary); font-size:0.875rem;">Thank you for reporting this issue. We will investigate this matter promptly.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<form wire:submit="submit" class="space-y-6">
|
|
<div class="bg-background-secondary dark:bg-background-secondary/80 border border-neutral rounded-lg p-6 shadow-md">
|
|
|
|
<div class="mb-4">
|
|
<label for="reporter_name" class="block text-sm font-medium text-text-primary mb-2">
|
|
Your Full Name (First Name, Surname)<span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text"
|
|
id="reporter_name"
|
|
wire:model="reporter_name"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Enter your full name">
|
|
@error('reporter_name') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="reporter_email" class="block text-sm font-medium text-text-primary mb-2">
|
|
Your Email Address (Primary Contact Email)<span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="email"
|
|
id="reporter_email"
|
|
wire:model="reporter_email"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Enter your email address">
|
|
@error('reporter_email') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="abuse_type" class="block text-sm font-medium text-text-primary mb-2">
|
|
Type of Abuse <span class="text-red-500">*</span>
|
|
</label>
|
|
<select id="abuse_type"
|
|
wire:model="abuse_type"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
<option value="">Select abuse type</option>
|
|
@foreach($abuseTypes as $key => $label)
|
|
<option value="{{ $key }}">{{ $label }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('abuse_type') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="reported_url" class="block text-sm font-medium text-text-primary mb-2">
|
|
Full URL/IP Address of Reported Content/Reported Activity
|
|
</label>
|
|
<input type="url"
|
|
id="reported_url"
|
|
wire:model="reported_url"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="https://example.com/page or 203.0.113.1">
|
|
@error('reported_url') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="reported_user" class="block text-sm font-medium text-text-primary mb-2">
|
|
Reported User/Email Address (If Applicable or Known)
|
|
</label>
|
|
<input type="text"
|
|
id="reported_user"
|
|
wire:model="reported_user"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Username or email address">
|
|
@error('reported_user') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="description" class="block text-sm font-medium text-text-primary mb-2">
|
|
Detailed Description (Provide a detailed description of the event, including dates, times, locations, URLs, IP addresses, and any related users, systems, or logs.)<span class="text-red-500">*</span>
|
|
</label>
|
|
<textarea id="description"
|
|
wire:model="description"
|
|
rows="6"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-vertical"
|
|
placeholder="Please provide a detailed description of the abuse. Include specific examples, dates, and any relevant context that will help us investigate."></textarea>
|
|
@error('description') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
<p class="text-xs text-text-secondary mt-1">Minimum 20 characters required</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="evidence" class="block text-sm font-medium text-text-primary mb-2">
|
|
Additional Evidence
|
|
</label>
|
|
<textarea id="evidence"
|
|
wire:model="evidence"
|
|
rows="4"
|
|
class="w-full px-4 py-3 rounded-md border border-neutral bg-background-primary text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-vertical"
|
|
placeholder="Any additional information, screenshots descriptions, or evidence that supports your report..."></textarea>
|
|
@error('evidence') <span class="text-red-500 text-sm mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<!-- CAPTCHA left, Submit Button right -->
|
|
<div class="flex justify-between items-center flex-wrap gap-4 mt-6">
|
|
<div class="flex-shrink-0">
|
|
<x-captcha :form="'abuse'" />
|
|
</div>
|
|
|
|
<button type="submit"
|
|
wire:loading.attr="disabled"
|
|
class="bg-primary text-white px-6 py-3 rounded-md font-semibold hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-[160px]">
|
|
<span wire:loading.remove>Submit Report</span>
|
|
<span wire:loading class="flex items-center">
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Submitting...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
@endif
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
div[style*="padding-left:1.5rem; padding-right:1.5rem;"] {
|
|
padding-left: 1rem !important;
|
|
padding-right: 1rem !important;
|
|
}
|
|
|
|
div[style*="max-width:700px;"] {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
</style>
|
|
@endpush |