Making the code easier to read and more consistent.
This commit is contained in:
Scott Idem
@@ -1,75 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { Activity, Fingerprint, Globe, Landmark, ListFilter, Mail, Plus, Search, ShieldCheck, User, X } from '@lucide/svelte';
|
||||
let user_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let qry_enabled = $state('all');
|
||||
let qry_account_scope = $state('all'); // 'all', 'account', 'global'
|
||||
let show_add_form = $state(false);
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
load_ae_obj_li__user,
|
||||
create_ae_obj__user
|
||||
} from '$lib/ae_core/ae_core__user';
|
||||
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
Activity,
|
||||
Fingerprint,
|
||||
Globe,
|
||||
Landmark,
|
||||
ListFilter,
|
||||
Mail,
|
||||
Plus,
|
||||
Search,
|
||||
ShieldCheck,
|
||||
User,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
let user_li: any[] = $state([]);
|
||||
let loading = $state(true);
|
||||
let qry_str = $state('');
|
||||
let qry_enabled = $state('all');
|
||||
let qry_account_scope = $state('all'); // 'all', 'account', 'global'
|
||||
let show_add_form = $state(false);
|
||||
|
||||
async function load_users() {
|
||||
loading = true;
|
||||
async function load_users() {
|
||||
loading = true;
|
||||
|
||||
let for_obj_id: string | null = $ae_loc.account_id;
|
||||
let include_global = true;
|
||||
let for_obj_id: string | null = $ae_loc.account_id;
|
||||
let include_global = true;
|
||||
|
||||
if (qry_account_scope === 'account') {
|
||||
include_global = false;
|
||||
} else if (qry_account_scope === 'global') {
|
||||
for_obj_id = null;
|
||||
include_global = true; // This will trigger the (account_id IS NULL) logic in the search if no qry_str
|
||||
}
|
||||
|
||||
user_li = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: for_obj_id,
|
||||
include_global: include_global,
|
||||
qry_str: qry_str || null,
|
||||
enabled: qry_enabled as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
if (qry_account_scope === 'account') {
|
||||
include_global = false;
|
||||
} else if (qry_account_scope === 'global') {
|
||||
for_obj_id = null;
|
||||
include_global = true; // This will trigger the (account_id IS NULL) logic in the search if no qry_str
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_users();
|
||||
user_li = await load_ae_obj_li__user({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_id: for_obj_id,
|
||||
include_global: include_global,
|
||||
qry_str: qry_str || null,
|
||||
enabled: qry_enabled as any,
|
||||
log_lvl: 1
|
||||
});
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function handle_add_user() {
|
||||
const username = prompt('Enter new username:');
|
||||
if (!username) return;
|
||||
const email = prompt('Enter email address:');
|
||||
|
||||
// Link to account if scope is 'account' or 'all', otherwise create global user
|
||||
const account_id = qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
|
||||
|
||||
await create_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
account_id: account_id,
|
||||
data_kv: { username, email, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_users();
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
return;
|
||||
}
|
||||
load_users();
|
||||
});
|
||||
|
||||
async function handle_add_user() {
|
||||
const username = prompt('Enter new username:');
|
||||
if (!username) return;
|
||||
const email = prompt('Enter email address:');
|
||||
|
||||
// Link to account if scope is 'account' or 'all', otherwise create global user
|
||||
const account_id =
|
||||
qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
|
||||
|
||||
await create_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
account_id: account_id,
|
||||
data_kv: { username, email, enable: true },
|
||||
log_lvl: 1
|
||||
});
|
||||
load_users();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg">
|
||||
<ShieldCheck size={24} class="text-primary-500" />
|
||||
</div>
|
||||
<h1 class="h2 font-black tracking-tight">User Management</h1>
|
||||
</div>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={() => (show_add_form = !show_add_form)}>
|
||||
{#if show_add_form}
|
||||
<X size={16} class="mr-2" /> Cancel
|
||||
{:else}
|
||||
@@ -78,12 +97,17 @@
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div
|
||||
class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
|
||||
<div class="flex flex-wrap gap-6 items-end">
|
||||
<div class="flex-1 min-w-[280px] space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</span>
|
||||
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Search Users</span>
|
||||
<div
|
||||
class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
|
||||
<div
|
||||
class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
|
||||
<Search size={18} class="opacity-50" />
|
||||
</div>
|
||||
<input
|
||||
@@ -91,13 +115,16 @@
|
||||
type="search"
|
||||
bind:value={qry_str}
|
||||
placeholder="Search username or email..."
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()}
|
||||
/>
|
||||
<button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
|
||||
onkeydown={(e) => e.key === 'Enter' && load_users()} />
|
||||
<button
|
||||
class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
|
||||
onclick={load_users}
|
||||
disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="animate-spin text-xl">⏳</span>
|
||||
{:else}
|
||||
<span class="whitespace-nowrap tracking-wide">Go</span>
|
||||
<span class="whitespace-nowrap tracking-wide"
|
||||
>Go</span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
@@ -105,8 +132,13 @@
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Scope</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_account_scope}
|
||||
onchange={load_users}>
|
||||
<option value="all">All (Current + Global)</option>
|
||||
<option value="account">Account Only</option>
|
||||
<option value="global">Global Only</option>
|
||||
@@ -114,8 +146,13 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
|
||||
<select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
|
||||
<span
|
||||
class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
|
||||
>Status</span>
|
||||
<select
|
||||
class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
|
||||
bind:value={qry_enabled}
|
||||
onchange={load_users}>
|
||||
<option value="all">All</option>
|
||||
<option value="enabled">Enabled</option>
|
||||
<option value="not_enabled">Disabled</option>
|
||||
@@ -127,47 +164,67 @@
|
||||
|
||||
{#if loading}
|
||||
<div class="card p-8 flex justify-center items-center h-64">
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
|
||||
<div class="placeholder animate-pulse w-full h-full rounded-2xl">
|
||||
</div>
|
||||
</div>
|
||||
{:else if user_li.length === 0}
|
||||
<div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<div
|
||||
class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
|
||||
<Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="h3 font-bold opacity-50">No Users Found</h3>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
|
||||
<p class="opacity-60 max-w-xs mx-auto mt-2">
|
||||
Try adjusting your search or scope filters.
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
|
||||
<ListFilter size={18} class="text-secondary-500" />
|
||||
Directory Results
|
||||
<span class="badge preset-tonal-secondary ml-auto">{user_li.length} found</span>
|
||||
<span class="badge preset-tonal-secondary ml-auto"
|
||||
>{user_li.length} found</span>
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each user_li as user (user.user_id_random)}
|
||||
<div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
|
||||
<div
|
||||
class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
|
||||
<header class="flex justify-between items-start">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
|
||||
<User size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-black tracking-tight">{user.username}</p>
|
||||
<p class="text-[10px] uppercase font-bold opacity-50">{user.name || 'No Display Name'}</p>
|
||||
<p class="font-black tracking-tight">
|
||||
{user.username}
|
||||
</p>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold opacity-50">
|
||||
{user.name || 'No Display Name'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-end gap-1">
|
||||
{#if user.super}
|
||||
<span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
|
||||
<span
|
||||
class="badge preset-filled-error text-[8px] uppercase font-bold"
|
||||
>Super</span>
|
||||
{:else if user.manager}
|
||||
<span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
|
||||
<span
|
||||
class="badge preset-filled-warning text-[8px] uppercase font-bold"
|
||||
>Manager</span>
|
||||
{/if}
|
||||
{#if !user.account_id && !user.account_id_random}
|
||||
<span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span
|
||||
class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Globe size={8} /> Global
|
||||
</span>
|
||||
{:else}
|
||||
<span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<span
|
||||
class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
|
||||
<Landmark size={8} /> Account
|
||||
</span>
|
||||
{/if}
|
||||
@@ -175,17 +232,25 @@
|
||||
</header>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Mail size={14} class="text-primary-500" />
|
||||
<span class="truncate">{user.email || '--'}</span>
|
||||
<span class="truncate"
|
||||
>{user.email || '--'}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Activity size={14} class="text-secondary-500" />
|
||||
<span class="font-mono">{user.user_id_random}</span>
|
||||
<div
|
||||
class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
|
||||
<Activity
|
||||
size={14}
|
||||
class="text-secondary-500" />
|
||||
<span class="font-mono"
|
||||
>{user.user_id_random}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
|
||||
<a
|
||||
class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
|
||||
href="/core/users/{user.user_id_random}">
|
||||
Manage User
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,87 +1,120 @@
|
||||
<script lang="ts">
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { update_ae_obj__user, delete_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
|
||||
import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
|
||||
import { Activity, ArrowLeft, CircleCheck, CircleX, Clock, Fingerprint, Key, Lock, Mail, Save, Settings, ShieldCheck, Trash2, User as UserIcon } from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
import { onMount, untrack } from 'svelte';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import {
|
||||
update_ae_obj__user,
|
||||
delete_ae_obj_id__user
|
||||
} from '$lib/ae_core/ae_core__user';
|
||||
import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
|
||||
import {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
Clock,
|
||||
Fingerprint,
|
||||
Key,
|
||||
Lock,
|
||||
Mail,
|
||||
Save,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Trash2,
|
||||
User as UserIcon
|
||||
} from '@lucide/svelte';
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let user = $state(untrack(() => data.user));
|
||||
let saving = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
user = data.user;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
}
|
||||
});
|
||||
|
||||
let { data }: Props = $props();
|
||||
let user = $state(untrack(() => data.user));
|
||||
let saving = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
user = data.user;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!$ae_loc.manager_access) {
|
||||
goto('/core');
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__user.forEach((field) => {
|
||||
if (user[field] !== undefined) {
|
||||
data_kv[field] = user[field];
|
||||
}
|
||||
});
|
||||
|
||||
async function handle_save() {
|
||||
saving = true;
|
||||
const data_kv: any = {};
|
||||
editable_fields__user.forEach(field => {
|
||||
if (user[field] !== undefined) {
|
||||
data_kv[field] = user[field];
|
||||
}
|
||||
});
|
||||
const result = await update_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
const result = await update_ae_obj__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
alert('User updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
if (result) {
|
||||
alert('User updated successfully');
|
||||
}
|
||||
saving = false;
|
||||
}
|
||||
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this user account?')) return;
|
||||
async function handle_delete() {
|
||||
if (!confirm('Are you sure you want to disable this user account?')) return;
|
||||
|
||||
const result = await delete_ae_obj_id__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
const result = await delete_ae_obj_id__user({
|
||||
api_cfg: $ae_api,
|
||||
user_id: user.user_id_random,
|
||||
method: 'disable',
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (result) {
|
||||
goto('/core/users');
|
||||
}
|
||||
if (result) {
|
||||
goto('/core/users');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4 space-y-6">
|
||||
<header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<header
|
||||
class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/users">
|
||||
<a
|
||||
class="btn btn-sm preset-tonal-surface shadow-sm"
|
||||
href="/core/users">
|
||||
<ArrowLeft size={16} />
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
|
||||
<div
|
||||
class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
|
||||
<UserIcon size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h2 font-black tracking-tight">{user.username}</h1>
|
||||
<p class="text-[10px] uppercase font-bold tracking-widest opacity-50">UID: {user.user_id_random}</p>
|
||||
<h1 class="h2 font-black tracking-tight">
|
||||
{user.username}
|
||||
</h1>
|
||||
<p
|
||||
class="text-[10px] uppercase font-bold tracking-widest opacity-50">
|
||||
UID: {user.user_id_random}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-error font-bold shadow-lg"
|
||||
onclick={handle_delete}
|
||||
disabled={saving}>
|
||||
<Trash2 size={16} class="mr-2" /> Disable
|
||||
</button>
|
||||
<button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
|
||||
<button
|
||||
class="btn btn-sm preset-filled-primary font-bold shadow-lg"
|
||||
onclick={handle_save}
|
||||
disabled={saving}>
|
||||
{#if saving}
|
||||
<span class="animate-spin mr-2">⏳</span>
|
||||
{:else}
|
||||
@@ -95,61 +128,123 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Main Info -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<UserIcon size={18} class="text-primary-500" /> Basic Profile
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-display-name">Display Name</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-2"
|
||||
id="user-display-name"
|
||||
type="text"
|
||||
bind:value={user.name}
|
||||
placeholder="Full Name" />
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
|
||||
<input class="input preset-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-email">Email Address</label>
|
||||
<input
|
||||
class="input preset-filled-surface rounded-lg p-2"
|
||||
id="user-email"
|
||||
type="email"
|
||||
bind:value={user.email} />
|
||||
</div>
|
||||
<div class="space-y-1 md:col-span-2">
|
||||
<label class="label text-xs font-bold opacity-75" for="user-username">Username</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
|
||||
<div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
|
||||
<input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
|
||||
<label
|
||||
class="label text-xs font-bold opacity-75"
|
||||
for="user-username">Username</label>
|
||||
<div
|
||||
class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
|
||||
<div class="input-group-shim !pl-4 !pr-0">
|
||||
<Fingerprint size={16} />
|
||||
</div>
|
||||
<input
|
||||
class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2"
|
||||
id="user-username"
|
||||
type="text"
|
||||
bind:value={user.username}
|
||||
disabled />
|
||||
</div>
|
||||
<p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
|
||||
<p
|
||||
class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">
|
||||
Username changes are currently restricted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<ShieldCheck size={18} class="text-secondary-500" /> System Permissions
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.super} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.super} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Super User</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Super User</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Full system override access</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.manager} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.manager} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Manager</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Manager</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Global account & user management</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.administrator} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.administrator} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Administrator</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Administrator</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Account-level administrative access</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.verified} />
|
||||
<label
|
||||
class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.verified} />
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black uppercase text-xs tracking-widest">Verified User</span>
|
||||
<span class="text-[10px] opacity-70 group-hover:opacity-100">Identity confirmed by staff</span>
|
||||
<span
|
||||
class="font-black uppercase text-xs tracking-widest"
|
||||
>Verified User</span>
|
||||
<span
|
||||
class="text-[10px] opacity-70 group-hover:opacity-100"
|
||||
>Identity confirmed by staff</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
@@ -158,63 +253,105 @@
|
||||
|
||||
<!-- Sidebar / Meta -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Activity size={18} class="text-tertiary-500" /> Account Status
|
||||
</h3>
|
||||
<div class="space-y-4 py-2">
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.enable} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Login Enabled</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.enable} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Login Enabled</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.hide} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Lists</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.hide} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Hidden from Lists</span>
|
||||
</label>
|
||||
<label class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input class="checkbox" type="checkbox" bind:checked={user.allow_auth_key} />
|
||||
<span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Allow Email Auth Key</span>
|
||||
<label
|
||||
class="flex items-center space-x-3 cursor-pointer group">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
bind:checked={user.allow_auth_key} />
|
||||
<span
|
||||
class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
|
||||
>Allow Email Auth Key</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Lock size={18} class="text-surface-500" /> Linking Info
|
||||
</h3>
|
||||
<div class="space-y-3 text-xs">
|
||||
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span class="font-bold opacity-50 uppercase tracking-tighter">Linked Person</span>
|
||||
<div
|
||||
class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span
|
||||
class="font-bold opacity-50 uppercase tracking-tighter"
|
||||
>Linked Person</span>
|
||||
<span class="font-mono font-bold">
|
||||
{#if user.person_id_random}
|
||||
<a href="/core/people/{user.person_id_random}" class="text-primary-500 hover:underline">
|
||||
<a
|
||||
href="/core/people/{user.person_id_random}"
|
||||
class="text-primary-500 hover:underline">
|
||||
{user.person_id_random}
|
||||
</a>
|
||||
{:else}
|
||||
<span class="italic text-error-500">Unlinked</span>
|
||||
<span class="italic text-error-500"
|
||||
>Unlinked</span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span class="font-bold opacity-50 uppercase tracking-tighter">Account Context</span>
|
||||
<span class="font-mono font-bold">{user.account_id_random || '--'}</span>
|
||||
<div
|
||||
class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
|
||||
<span
|
||||
class="font-bold opacity-50 uppercase tracking-tighter"
|
||||
>Account Context</span>
|
||||
<span class="font-mono font-bold"
|
||||
>{user.account_id_random || '--'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<div
|
||||
class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
|
||||
<h3
|
||||
class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
|
||||
<Clock size={18} class="text-surface-500" /> Timestamps
|
||||
</h3>
|
||||
<div class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
|
||||
<div
|
||||
class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
|
||||
<div class="flex flex-col gap-1 opacity-60">
|
||||
<span>Created On</span>
|
||||
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.created_on).toLocaleString()}</span>
|
||||
<span
|
||||
class="text-xs text-surface-900 dark:text-surface-100"
|
||||
>{new Date(user.created_on).toLocaleString()}</span>
|
||||
</div>
|
||||
{#if user.updated_on}
|
||||
<div class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
|
||||
<div
|
||||
class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
|
||||
<span>Last Updated</span>
|
||||
<span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.updated_on).toLocaleString()}</span>
|
||||
<span
|
||||
class="text-xs text-surface-900 dark:text-surface-100"
|
||||
>{new Date(
|
||||
user.updated_on
|
||||
).toLocaleString()}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user