WIP: storage-fix-local-nas work before playlist controls feature
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
ghassanandClaude Sonnet 4.6 committed
1 parent
6b3ab5b65e
commit
c160242dbc
46 files changed
+5365
-815
No files matched your search
@@ -2,14 +2,229 @@
|
||||
|
||||
@section('title', 'Users')
|
||||
|
||||
@php
|
||||
$adminNeedsOtp = auth()->user()->two_factor_enabled &&
|
||||
(! session('admin_2fa_verified_at') || now()->timestamp - session('admin_2fa_verified_at') >= 1800);
|
||||
|
||||
$totalUsers = \App\Models\User::count();
|
||||
$totalAdmins = \App\Models\User::whereIn('role', ['admin','super_admin'])->count();
|
||||
$newThisWeek = \App\Models\User::where('created_at', '>=', now()->subDays(7))->count();
|
||||
$unverified = \App\Models\User::whereNull('email_verified_at')->count();
|
||||
@endphp
|
||||
|
||||
@section('extra_styles')
|
||||
<style>
|
||||
|
||||
/* ═══ STAT CARDS ═══════════════════════════════════════════════════ */
|
||||
.u-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.u-stat {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
padding: 20px 22px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color .2s, transform .2s;
|
||||
}
|
||||
.u-stat:hover { border-color: #3a3a3a; transform: translateY(-1px); }
|
||||
.u-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
|
||||
.u-stat-icon {
|
||||
width: 40px; height: 40px; border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 17px; flex-shrink: 0;
|
||||
}
|
||||
.u-stat-icon.c-blue { background: rgba(96,165,250,.14); color: #60a5fa; }
|
||||
.u-stat-icon.c-red { background: rgba(248,113,113,.14); color: #f87171; }
|
||||
.u-stat-icon.c-green { background: rgba(52,211,153,.14); color: #34d399; }
|
||||
.u-stat-icon.c-amber { background: rgba(251,191,36,.14); color: #fbbf24; }
|
||||
.u-stat-accent {
|
||||
position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
}
|
||||
.u-stat-val { font-size: 32px; font-weight: 700; line-height: 1; color: var(--text-primary); letter-spacing: -1px; }
|
||||
.u-stat-lbl { font-size: 13px; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }
|
||||
|
||||
/* ═══ FILTER BAR ══════════════════════════════════════════════════ */
|
||||
.u-filter {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
.u-search {
|
||||
position: relative; flex: 1; min-width: 200px;
|
||||
}
|
||||
.u-search i {
|
||||
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
|
||||
font-size: 13px; color: var(--text-secondary); pointer-events: none;
|
||||
}
|
||||
.u-search input {
|
||||
width: 100%; height: 38px;
|
||||
background: var(--bg-card2, #1a1a1a);
|
||||
border: 1px solid var(--border-color); border-radius: 9px;
|
||||
padding: 0 14px 0 36px; color: var(--text-primary); font-size: 13px;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.u-search input:focus { outline: none; border-color: var(--brand-red); }
|
||||
.u-search input::placeholder { color: #444; }
|
||||
|
||||
/* ═══ TABLE ════════════════════════════════════════════════════════ */
|
||||
.u-table-wrap { overflow-x: auto; }
|
||||
|
||||
.u-table {
|
||||
width: 100%; border-collapse: collapse; min-width: 640px;
|
||||
}
|
||||
|
||||
.u-table thead tr {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
.u-table thead th {
|
||||
padding: 11px 18px;
|
||||
font-size: 11px; font-weight: 600; letter-spacing: .7px;
|
||||
text-transform: uppercase; color: var(--text-secondary);
|
||||
white-space: nowrap; text-align: left;
|
||||
}
|
||||
.u-table thead th.right { text-align: right; }
|
||||
|
||||
.u-table tbody tr {
|
||||
border-bottom: 1px solid rgba(255,255,255,.04);
|
||||
cursor: pointer;
|
||||
transition: background .1s;
|
||||
}
|
||||
.u-table tbody tr:last-child { border-bottom: none; }
|
||||
.u-table tbody tr:hover { background: rgba(255,255,255,.03); }
|
||||
.u-table tbody td {
|
||||
padding: 0 18px; height: 68px;
|
||||
vertical-align: middle; font-size: 13px;
|
||||
}
|
||||
|
||||
/* Identity cell */
|
||||
.u-identity { display: flex; align-items: center; gap: 13px; }
|
||||
.u-avatar-wrap { position: relative; flex-shrink: 0; }
|
||||
.u-avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
object-fit: cover; display: block;
|
||||
border: 2px solid var(--border-color);
|
||||
transition: border-color .15s;
|
||||
}
|
||||
.u-table tbody tr:hover .u-avatar { border-color: var(--brand-red); }
|
||||
.u-name {
|
||||
font-size: 14px; font-weight: 600; color: var(--text-primary);
|
||||
white-space: nowrap; display: flex; align-items: center; gap: 7px;
|
||||
line-height: 1;
|
||||
}
|
||||
.u-email { font-size: 12px; color: #555; margin-top: 3px; }
|
||||
.u-you {
|
||||
font-size: 9px; font-weight: 700; letter-spacing: .5px;
|
||||
padding: 2px 6px; border-radius: 4px;
|
||||
background: rgba(230,30,30,.15); color: var(--brand-red);
|
||||
text-transform: uppercase; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Role cell */
|
||||
.u-role { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; }
|
||||
.u-role-dot {
|
||||
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.u-role-dot.super { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.5); }
|
||||
.u-role-dot.admin { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.4); }
|
||||
.u-role-dot.user { background: #555; }
|
||||
|
||||
/* Status cell */
|
||||
.u-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; white-space: nowrap; }
|
||||
.u-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
.u-status.verified { color: #34d399; }
|
||||
.u-status.verified .u-status-dot { background: #34d399; box-shadow: 0 0 5px rgba(52,211,153,.5); }
|
||||
.u-status.unverified { color: #fbbf24; }
|
||||
.u-status.unverified .u-status-dot { background: #fbbf24; }
|
||||
|
||||
/* Videos cell */
|
||||
.u-vcount { font-size: 15px; font-weight: 700; color: var(--text-primary); }
|
||||
.u-vcount-lbl { font-size: 11px; color: #444; }
|
||||
|
||||
/* Joined cell */
|
||||
.u-joined-date { font-size: 13px; font-weight: 500; color: var(--text-primary); }
|
||||
.u-joined-ago { font-size: 11px; color: #444; margin-top: 2px; }
|
||||
|
||||
/* Row click hint */
|
||||
.u-table tbody tr:hover td:last-child::after {
|
||||
content: '⋯';
|
||||
float: right;
|
||||
color: #444;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Row dropdown */
|
||||
#uRowMenu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
min-width: 190px;
|
||||
background: #1c1c1c;
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 10px;
|
||||
padding: 5px 0;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,.7);
|
||||
animation: uMenuIn .1s ease;
|
||||
}
|
||||
@keyframes uMenuIn {
|
||||
from { opacity:0; transform:translateY(-4px); }
|
||||
to { opacity:1; transform:translateY(0); }
|
||||
}
|
||||
#uRowMenu .u-menu-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
width: 100%; padding: 9px 14px;
|
||||
background: none; border: none;
|
||||
color: var(--text-primary); font-size: 13px;
|
||||
cursor: pointer; text-align: left; text-decoration: none;
|
||||
transition: background .1s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#uRowMenu .u-menu-item:hover { background: rgba(255,255,255,.06); }
|
||||
#uRowMenu .u-menu-item.danger { color: #f87171; }
|
||||
#uRowMenu .u-menu-item.danger:hover { background: rgba(248,113,113,.1); }
|
||||
#uRowMenu .u-menu-sep {
|
||||
height: 1px; background: #2a2a2a; margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.u-empty { padding: 80px 20px; text-align: center; }
|
||||
.u-empty-circle {
|
||||
width: 72px; height: 72px; border-radius: 50%;
|
||||
background: rgba(255,255,255,.03); border: 1px solid var(--border-color);
|
||||
margin: 0 auto 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 30px; color: #333;
|
||||
}
|
||||
.u-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; }
|
||||
.u-empty p { font-size: 13px; color: #444; margin: 0; }
|
||||
|
||||
/* ═══ RESPONSIVE ════════════════════════════════════════════════════ */
|
||||
@media (max-width: 960px) {
|
||||
.u-stats { grid-template-columns: repeat(2, 1fr); }
|
||||
.u-hide-md { display: none !important; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.u-stats { grid-template-columns: repeat(2, 1fr); }
|
||||
.u-hide-sm { display: none !important; }
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- ── Page header ──────────────────────────────────────────────────── --}}
|
||||
<div class="adm-page-header">
|
||||
<h1 class="adm-page-title"><i class="bi bi-people"></i> Users</h1>
|
||||
<a href="{{ route('admin.dashboard') }}" class="adm-btn" style="font-size:12px;">
|
||||
<i class="bi bi-arrow-left"></i> Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- ── Alerts ───────────────────────────────────────────────────────── --}}
|
||||
{{-- Alerts --}}
|
||||
@if(session('success'))
|
||||
<div class="adm-alert adm-alert-success">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
@@ -25,181 +240,220 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ── Filter card ──────────────────────────────────────────────────── --}}
|
||||
<div class="adm-card">
|
||||
<div class="adm-card-body" style="padding:16px 20px;">
|
||||
<form method="GET" action="{{ route('admin.users') }}" class="adm-filter-form">
|
||||
<div class="adm-filter-search">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text" name="search" class="adm-input"
|
||||
placeholder="Search name or email…"
|
||||
value="{{ request('search') }}" autocomplete="off">
|
||||
{{-- Stats --}}
|
||||
<div class="u-stats">
|
||||
<div class="u-stat">
|
||||
<div class="u-stat-accent" style="background: linear-gradient(90deg,#60a5fa,#3b82f6);"></div>
|
||||
<div class="u-stat-top">
|
||||
<div>
|
||||
<div class="u-stat-val">{{ number_format($totalUsers) }}</div>
|
||||
<div class="u-stat-lbl">Total users</div>
|
||||
</div>
|
||||
|
||||
<select name="role" class="adm-select">
|
||||
<option value="">All Roles</option>
|
||||
<option value="user" {{ request('role') === 'user' ? 'selected' : '' }}>User</option>
|
||||
<option value="admin" {{ request('role') === 'admin' ? 'selected' : '' }}>Admin</option>
|
||||
<option value="super_admin" {{ request('role') === 'super_admin' ? 'selected' : '' }}>Super Admin</option>
|
||||
</select>
|
||||
|
||||
<select name="sort" class="adm-select">
|
||||
<option value="latest" {{ request('sort', 'latest') === 'latest' ? 'selected' : '' }}>Newest first</option>
|
||||
<option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest first</option>
|
||||
<option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>Name A–Z</option>
|
||||
<option value="name_desc" {{ request('sort') === 'name_desc' ? 'selected' : '' }}>Name Z–A</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" class="adm-btn adm-btn-primary">
|
||||
<i class="bi bi-funnel"></i> Filter
|
||||
</button>
|
||||
@if(request()->hasAny(['search','role','sort']))
|
||||
<a href="{{ route('admin.users') }}" class="adm-btn">
|
||||
<i class="bi bi-x-lg"></i> Clear
|
||||
</a>
|
||||
@endif
|
||||
</form>
|
||||
<div class="u-stat-icon c-blue"><i class="bi bi-people-fill"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-stat">
|
||||
<div class="u-stat-accent" style="background: linear-gradient(90deg,#f87171,#e61e1e);"></div>
|
||||
<div class="u-stat-top">
|
||||
<div>
|
||||
<div class="u-stat-val">{{ $totalAdmins }}</div>
|
||||
<div class="u-stat-lbl">Admins</div>
|
||||
</div>
|
||||
<div class="u-stat-icon c-red"><i class="bi bi-shield-fill"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-stat">
|
||||
<div class="u-stat-accent" style="background: linear-gradient(90deg,#34d399,#059669);"></div>
|
||||
<div class="u-stat-top">
|
||||
<div>
|
||||
<div class="u-stat-val">{{ $newThisWeek }}</div>
|
||||
<div class="u-stat-lbl">New this week</div>
|
||||
</div>
|
||||
<div class="u-stat-icon c-green"><i class="bi bi-person-plus-fill"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-stat">
|
||||
<div class="u-stat-accent" style="background: linear-gradient(90deg,#fbbf24,#d97706);"></div>
|
||||
<div class="u-stat-top">
|
||||
<div>
|
||||
<div class="u-stat-val">{{ $unverified }}</div>
|
||||
<div class="u-stat-lbl">Unverified</div>
|
||||
</div>
|
||||
<div class="u-stat-icon c-amber"><i class="bi bi-envelope-exclamation-fill"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ── Users table ──────────────────────────────────────────────────── --}}
|
||||
{{-- Filter --}}
|
||||
<div class="adm-card" style="margin-bottom:16px;">
|
||||
<form method="GET" action="{{ route('admin.users') }}" class="u-filter">
|
||||
<div class="u-search">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text" name="search" placeholder="Search by name or email…"
|
||||
value="{{ request('search') }}" autocomplete="off">
|
||||
</div>
|
||||
<select name="role" class="adm-select">
|
||||
<option value="">All Roles</option>
|
||||
<option value="user" {{ request('role') === 'user' ? 'selected' : '' }}>Users</option>
|
||||
<option value="admin" {{ request('role') === 'admin' ? 'selected' : '' }}>Admins</option>
|
||||
<option value="super_admin" {{ request('role') === 'super_admin' ? 'selected' : '' }}>Super Admins</option>
|
||||
</select>
|
||||
<select name="sort" class="adm-select">
|
||||
<option value="latest" {{ request('sort','latest') === 'latest' ? 'selected' : '' }}>Newest first</option>
|
||||
<option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>Oldest first</option>
|
||||
<option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>Name A–Z</option>
|
||||
<option value="name_desc" {{ request('sort') === 'name_desc' ? 'selected' : '' }}>Name Z–A</option>
|
||||
</select>
|
||||
<button type="submit" class="adm-btn adm-btn-primary"><i class="bi bi-funnel-fill"></i> Filter</button>
|
||||
@if(request()->hasAny(['search','role','sort']))
|
||||
<a href="{{ route('admin.users') }}" class="adm-btn"><i class="bi bi-x-lg"></i> Clear</a>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="adm-card">
|
||||
<div class="adm-card-header">
|
||||
<div class="adm-card-title">
|
||||
<i class="bi bi-people"></i>
|
||||
All Users
|
||||
<i class="bi bi-people"></i> Members
|
||||
<span class="adm-badge adm-badge-user">{{ $users->total() ?? $users->count() }}</span>
|
||||
</div>
|
||||
<span style="font-size:12px; color:#444; display:flex; align-items:center; gap:5px;">
|
||||
<i class="bi bi-hand-index" style="font-size:11px;"></i>
|
||||
Click a row for actions
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="adm-table-wrap">
|
||||
<table class="adm-table">
|
||||
<div class="u-table-wrap">
|
||||
<table class="u-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Verified</th>
|
||||
<th>Videos</th>
|
||||
<th>Joined</th>
|
||||
<th style="width:80px; text-align:right;">Actions</th>
|
||||
<th class="u-hide-sm">Role</th>
|
||||
<th class="u-hide-sm">Status</th>
|
||||
<th class="u-hide-md">Videos</th>
|
||||
<th class="u-hide-md">Likes</th>
|
||||
<th class="u-hide-md">Shares</th>
|
||||
<th class="u-hide-md">Joined</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($users as $user)
|
||||
<tr>
|
||||
{{-- User cell --}}
|
||||
@forelse($users as $user)
|
||||
<tr class="u-clickable-row"
|
||||
data-channel="{{ route('channel', $user->channel) }}"
|
||||
data-user-id="{{ $user->id }}"
|
||||
data-user-name="{{ addslashes($user->name) }}"
|
||||
data-verified="{{ $user->email_verified_at ? '1' : '0' }}"
|
||||
data-is-self="{{ $user->id === auth()->id() ? '1' : '0' }}"
|
||||
data-is-super="{{ $user->isSuperAdmin() ? '1' : '0' }}"
|
||||
data-edit-url="{{ route('admin.users.edit', $user->id) }}"
|
||||
data-verify-url="{{ route('admin.users.verify', $user->id) }}"
|
||||
data-impersonate-url="{{ route('admin.users.impersonate', $user->id) }}"
|
||||
data-delete-id="{{ $user->id }}">
|
||||
|
||||
{{-- Identity --}}
|
||||
<td>
|
||||
<div class="adm-user-cell">
|
||||
<img src="{{ $user->avatar_url }}" alt="{{ $user->name }}">
|
||||
<div class="u-identity">
|
||||
<div class="u-avatar-wrap">
|
||||
<img class="u-avatar" src="{{ $user->avatar_url }}" alt="{{ $user->name }}">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display:flex;align-items:center;gap:4px;">
|
||||
<span class="adm-user-cell-name">{{ $user->name }}</span>
|
||||
<div class="u-name">
|
||||
{{ $user->name }}
|
||||
@if($user->id === auth()->id())
|
||||
<span class="adm-user-cell-you">you</span>
|
||||
<span class="u-you">you</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="adm-user-cell-email">{{ $user->email }}</div>
|
||||
<div class="u-email">{{ $user->email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{{-- Role --}}
|
||||
<td>
|
||||
<td class="u-hide-sm">
|
||||
@if($user->role === 'super_admin')
|
||||
<span class="adm-badge adm-badge-superadmin"><i class="bi bi-shield-fill"></i> Super Admin</span>
|
||||
<div class="u-role"><span class="u-role-dot super"></span> Super Admin</div>
|
||||
@elseif($user->role === 'admin')
|
||||
<span class="adm-badge adm-badge-admin"><i class="bi bi-person-badge"></i> Admin</span>
|
||||
<div class="u-role"><span class="u-role-dot admin"></span> Admin</div>
|
||||
@else
|
||||
<span class="adm-badge adm-badge-user"><i class="bi bi-person"></i> User</span>
|
||||
<div class="u-role" style="color:#666;"><span class="u-role-dot user"></span> User</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
{{-- Verified --}}
|
||||
<td>
|
||||
{{-- Status --}}
|
||||
<td class="u-hide-sm">
|
||||
@if($user->email_verified_at)
|
||||
<span class="adm-badge adm-badge-verified"><i class="bi bi-check-circle-fill"></i> Verified</span>
|
||||
<div class="u-status verified">
|
||||
<span class="u-status-dot"></span> Verified
|
||||
</div>
|
||||
@else
|
||||
<span class="adm-badge adm-badge-unverified"><i class="bi bi-clock"></i> Pending</span>
|
||||
<div class="u-status unverified">
|
||||
<span class="u-status-dot"></span> Pending
|
||||
</div>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
{{-- Videos --}}
|
||||
<td>
|
||||
<a href="{{ route('channel', $user->channel) }}" target="_blank"
|
||||
class="text-dim" style="text-decoration:none; font-size:13px;">
|
||||
{{ $user->videos->count() }}
|
||||
<i class="bi bi-box-arrow-up-right" style="font-size:10px; opacity:.5; margin-left:2px;"></i>
|
||||
</a>
|
||||
<td class="u-hide-md">
|
||||
<div class="u-vcount">{{ $user->videos->count() }}</div>
|
||||
<div class="u-vcount-lbl">videos</div>
|
||||
</td>
|
||||
|
||||
{{-- Likes --}}
|
||||
<td class="u-hide-md">
|
||||
@php $videoIds = $user->videos->pluck('id'); @endphp
|
||||
<div class="u-vcount">{{ number_format(\DB::table('video_likes')->whereIn('video_id', $videoIds)->count()) }}</div>
|
||||
<div class="u-vcount-lbl">likes</div>
|
||||
</td>
|
||||
|
||||
{{-- Shares --}}
|
||||
<td class="u-hide-md">
|
||||
<div class="u-vcount">{{ number_format(\DB::table('video_shares')->whereIn('video_id', $videoIds)->count()) }}</div>
|
||||
<div class="u-vcount-lbl">shares</div>
|
||||
</td>
|
||||
|
||||
{{-- Joined --}}
|
||||
<td class="text-muted-sm">{{ $user->created_at->format('M d, Y') }}</td>
|
||||
<td class="u-hide-md">
|
||||
<div class="u-joined-date">{{ $user->created_at->format('M d, Y') }}</div>
|
||||
<div class="u-joined-ago">{{ $user->created_at->diffForHumans() }}</div>
|
||||
</td>
|
||||
|
||||
|
||||
{{-- Actions --}}
|
||||
<td>
|
||||
<div class="adm-row-actions" style="justify-content:flex-end;">
|
||||
@if(!$user->email_verified_at)
|
||||
<form method="POST" action="{{ route('admin.users.verify', $user->id) }}" style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="adm-btn adm-btn-sm adm-btn-verify" title="Manually verify account">
|
||||
<i class="bi bi-patch-check-fill"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
@if($user->id !== auth()->id() && !$user->isSuperAdmin())
|
||||
<form method="POST" action="{{ route('admin.users.impersonate', $user->id) }}" style="display:inline;">
|
||||
@csrf
|
||||
<button type="submit" class="adm-btn adm-btn-sm adm-btn-impersonate" title="Impersonate user">
|
||||
<i class="bi bi-person-fill-gear"></i>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
<a href="{{ route('admin.users.edit', $user->id) }}"
|
||||
class="adm-btn adm-btn-sm" title="Edit user">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
@if($user->id !== auth()->id())
|
||||
<button type="button"
|
||||
class="adm-btn adm-btn-sm adm-btn-danger"
|
||||
title="Delete user"
|
||||
onclick="openDeleteDialog({{ $user->id }}, '{{ addslashes($user->name) }}')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-people"></i>
|
||||
<p>No users found</p>
|
||||
<td colspan="7" style="border:none;">
|
||||
<div class="u-empty">
|
||||
<div class="u-empty-circle"><i class="bi bi-people"></i></div>
|
||||
<h3>No users found</h3>
|
||||
<p>Try adjusting your search or filter criteria</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- Pagination --}}
|
||||
@if($users instanceof \Illuminate\Pagination\LengthAwarePaginator && $users->hasPages())
|
||||
<div style="padding:16px 20px; border-top:1px solid var(--border);">
|
||||
<div style="padding:14px 20px; border-top:1px solid var(--border-color);">
|
||||
{{ $users->onEachSide(1)->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- ── Delete confirmation dialog ───────────────────────────────────── --}}
|
||||
{{-- Row action dropdown --}}
|
||||
<div id="uRowMenu"></div>
|
||||
|
||||
{{-- Delete dialog --}}
|
||||
<div class="adm-dialog-overlay" id="deleteDialog">
|
||||
<div class="adm-dialog">
|
||||
<div class="adm-dialog-header">
|
||||
<div class="adm-dialog-title">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
Delete User
|
||||
<i class="bi bi-exclamation-triangle-fill"></i> Delete User
|
||||
</div>
|
||||
<button type="button" class="adm-btn adm-btn-sm" onclick="closeDeleteDialog()" style="border:none;background:none;color:var(--text-2);">
|
||||
<button type="button" class="adm-btn adm-btn-sm" onclick="closeDeleteDialog()"
|
||||
style="border:none;background:none;color:var(--text-secondary);">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -209,15 +463,26 @@
|
||||
<i class="bi bi-info-circle-fill" style="flex-shrink:0;margin-top:1px;"></i>
|
||||
All videos uploaded by this user will also be deleted. This cannot be undone.
|
||||
</div>
|
||||
@if($adminNeedsOtp)
|
||||
<div style="margin-top:16px;">
|
||||
<label style="font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:8px;">
|
||||
<i class="bi bi-shield-lock-fill" style="color:#a78bfa;"></i>
|
||||
Enter your <strong style="color:var(--text-primary);">2FA code</strong> to confirm
|
||||
</label>
|
||||
<input type="text" id="dlgUserOtp" inputmode="numeric" pattern="[0-9]*"
|
||||
maxlength="6" autocomplete="one-time-code" placeholder="000 000"
|
||||
style="width:100%;background:#111;border:1px solid var(--border-color);border-radius:8px;padding:12px 16px;color:#fff;font-size:26px;letter-spacing:.25em;text-align:center;transition:border-color .15s;"
|
||||
onfocus="this.style.borderColor='#a78bfa'" onblur="this.style.borderColor='var(--border-color)'">
|
||||
</div>
|
||||
@endif
|
||||
<div id="dlgUserError" style="display:none;margin-top:10px;padding:10px 14px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);border-radius:8px;color:#f87171;font-size:13px;"></div>
|
||||
</div>
|
||||
<div class="adm-dialog-footer">
|
||||
<button type="button" class="adm-btn" onclick="closeDeleteDialog()">Cancel</button>
|
||||
<form id="deleteForm" method="POST">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="adm-btn adm-btn-danger" style="height:36px;">
|
||||
<i class="bi bi-trash"></i> Delete User
|
||||
</button>
|
||||
</form>
|
||||
<button type="button" class="adm-btn adm-btn-danger" id="dlgUserConfirmBtn" onclick="confirmDeleteUser()"
|
||||
style="height:36px;">
|
||||
<i class="bi bi-trash"></i> Delete permanently
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -226,19 +491,132 @@
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
const _adminNeedsOtp = {{ $adminNeedsOtp ? 'true' : 'false' }};
|
||||
let _deleteUserId = null;
|
||||
|
||||
/* ── Row dropdown ─────────────────────────────────────────────── */
|
||||
const _menu = document.getElementById('uRowMenu');
|
||||
|
||||
function _closeMenu() { _menu.style.display = 'none'; }
|
||||
|
||||
document.querySelectorAll('.u-clickable-row').forEach(function(row) {
|
||||
row.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
const d = row.dataset;
|
||||
const isSelf = d.isSelf === '1';
|
||||
const isSuper = d.isSuper === '1';
|
||||
const verified = d.verified === '1';
|
||||
|
||||
let html = '';
|
||||
|
||||
// Open channel
|
||||
html += `<a class="u-menu-item" href="${d.channel}" target="_blank"><i class="bi bi-box-arrow-up-right"></i> Open Channel</a>`;
|
||||
html += `<a class="u-menu-item" href="${d.editUrl}"><i class="bi bi-pencil"></i> Edit User</a>`;
|
||||
|
||||
if (!verified) {
|
||||
html += `<button class="u-menu-item" onclick="_verifyUser('${d.verifyUrl}')"><i class="bi bi-patch-check-fill" style="color:#34d399;"></i> Verify Account</button>`;
|
||||
}
|
||||
|
||||
if (!isSelf && !isSuper) {
|
||||
html += `<button class="u-menu-item" onclick="_impersonateUser('${d.impersonateUrl}')"><i class="bi bi-person-fill-gear" style="color:#60a5fa;"></i> Impersonate</button>`;
|
||||
}
|
||||
|
||||
if (!isSelf) {
|
||||
html += `<div class="u-menu-sep"></div>`;
|
||||
html += `<button class="u-menu-item danger" onclick="_closeMenu(); openDeleteDialog(${d.deleteId}, '${d.userName}')"><i class="bi bi-trash"></i> Delete User</button>`;
|
||||
}
|
||||
|
||||
_menu.innerHTML = html;
|
||||
|
||||
// Position near click, keep within viewport
|
||||
const vw = window.innerWidth, vh = window.innerHeight;
|
||||
const mw = 200, mh = _menu.childElementCount * 40;
|
||||
let x = e.clientX, y = e.clientY + 6;
|
||||
if (x + mw > vw - 12) x = vw - mw - 12;
|
||||
if (y + mh > vh - 12) y = e.clientY - mh - 6;
|
||||
|
||||
_menu.style.left = x + 'px';
|
||||
_menu.style.top = y + 'px';
|
||||
_menu.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', _closeMenu);
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') { _closeMenu(); closeDeleteDialog(); } });
|
||||
|
||||
function _verifyUser(url) {
|
||||
_closeMenu();
|
||||
const f = document.createElement('form');
|
||||
f.method = 'POST'; f.action = url;
|
||||
f.innerHTML = '<input type="hidden" name="_token" value="{{ csrf_token() }}">';
|
||||
document.body.appendChild(f); f.submit();
|
||||
}
|
||||
function _impersonateUser(url) {
|
||||
_closeMenu();
|
||||
const f = document.createElement('form');
|
||||
f.method = 'POST'; f.action = url;
|
||||
f.innerHTML = '<input type="hidden" name="_token" value="{{ csrf_token() }}">';
|
||||
document.body.appendChild(f); f.submit();
|
||||
}
|
||||
|
||||
/* ── Delete dialog ────────────────────────────────────────────── */
|
||||
function openDeleteDialog(userId, userName) {
|
||||
_deleteUserId = userId;
|
||||
document.getElementById('dlgUserName').textContent = userName;
|
||||
document.getElementById('deleteForm').action = '/admin/users/' + userId;
|
||||
document.getElementById('dlgUserError').style.display = 'none';
|
||||
if (_adminNeedsOtp) document.getElementById('dlgUserOtp').value = '';
|
||||
document.getElementById('deleteDialog').classList.add('open');
|
||||
if (_adminNeedsOtp) setTimeout(() => document.getElementById('dlgUserOtp').focus(), 120);
|
||||
}
|
||||
function closeDeleteDialog() {
|
||||
document.getElementById('deleteDialog').classList.remove('open');
|
||||
_deleteUserId = null;
|
||||
}
|
||||
document.getElementById('deleteDialog').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeDeleteDialog();
|
||||
});
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') closeDeleteDialog();
|
||||
function confirmDeleteUser() {
|
||||
if (!_deleteUserId) return;
|
||||
const btn = document.getElementById('dlgUserConfirmBtn');
|
||||
const errEl = document.getElementById('dlgUserError');
|
||||
const otp = _adminNeedsOtp ? document.getElementById('dlgUserOtp').value.replace(/\s/g,'') : '';
|
||||
|
||||
if (_adminNeedsOtp && otp.length !== 6) {
|
||||
errEl.textContent = 'Please enter your 6-digit 2FA code.';
|
||||
errEl.style.display = 'block';
|
||||
document.getElementById('dlgUserOtp').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Deleting…';
|
||||
errEl.style.display = 'none';
|
||||
|
||||
const body = new URLSearchParams({ _token: '{{ csrf_token() }}', _method: 'DELETE' });
|
||||
if (_adminNeedsOtp) body.append('otp_code', otp);
|
||||
|
||||
fetch('/admin/users/' + _deleteUserId, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: body.toString()
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) { closeDeleteDialog(); window.location.reload(); }
|
||||
else {
|
||||
errEl.textContent = data.message || 'Delete failed.';
|
||||
errEl.style.display = 'block';
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="bi bi-trash"></i> Delete permanently';
|
||||
if (_adminNeedsOtp) { document.getElementById('dlgUserOtp').value = ''; document.getElementById('dlgUserOtp').focus(); }
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
errEl.textContent = 'An unexpected error occurred.';
|
||||
errEl.style.display = 'block';
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '<i class="bi bi-trash"></i> Delete permanently';
|
||||
});
|
||||
}
|
||||
document.getElementById('deleteDialog').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('deleteDialog')) closeDeleteDialog();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in new issue
Block a user