chore: lint and format
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -68,7 +68,10 @@
|
||||
<!-- Sidebar (desktop only) -->
|
||||
<aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
|
||||
<div class="px-4 py-5 border-b border-border/40">
|
||||
<a href="/" class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
|
||||
{$_("admin.nav.back_to_site")}
|
||||
</a>
|
||||
@@ -80,8 +83,11 @@
|
||||
{getUserInitials(displayName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background">
|
||||
<span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"></span>
|
||||
<span
|
||||
class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary ring-2 ring-background"
|
||||
>
|
||||
<span class="icon-[ri--shield-keyhole-fill] h-2.5 w-2.5 text-primary-foreground"
|
||||
></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
|
||||
@@ -101,7 +101,10 @@
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold">{data.article.title}</h1>
|
||||
<p class="text-xs text-muted-foreground mt-0.5">
|
||||
{data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article.author ? " · " + data.article.author.artist_name : ""}
|
||||
{data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article
|
||||
.author
|
||||
? " · " + data.article.author.artist_name
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -238,7 +241,10 @@
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>{$_("admin.common.tags")}</Label>
|
||||
<TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
|
||||
<TagsInput
|
||||
bind:value={tags}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
|
||||
@@ -187,7 +187,10 @@
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>{$_("admin.common.tags")}</Label>
|
||||
<TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
|
||||
<TagsInput
|
||||
bind:value={tags}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
|
||||
@@ -182,7 +182,11 @@
|
||||
class="h-20 w-20 rounded-full object-cover mb-2"
|
||||
/>
|
||||
{/if}
|
||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleAvatarUpload} />
|
||||
<FileDropZone
|
||||
accept="image/*"
|
||||
maxFileSize={10 * MEGABYTE}
|
||||
onUpload={handleAvatarUpload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
@@ -194,7 +198,11 @@
|
||||
class="w-full h-24 rounded object-cover mb-2"
|
||||
/>
|
||||
{/if}
|
||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleBannerUpload} />
|
||||
<FileDropZone
|
||||
accept="image/*"
|
||||
maxFileSize={10 * MEGABYTE}
|
||||
onUpload={handleBannerUpload}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
@@ -207,7 +215,11 @@
|
||||
class="w-full h-48 rounded object-cover mb-2"
|
||||
/>
|
||||
{/if}
|
||||
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handlePhotoUpload2} />
|
||||
<FileDropZone
|
||||
accept="image/*"
|
||||
maxFileSize={10 * MEGABYTE}
|
||||
onUpload={handlePhotoUpload2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label
|
||||
|
||||
@@ -110,7 +110,9 @@
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold">{data.video.title}</h1>
|
||||
<p class="text-xs text-muted-foreground mt-0.5">
|
||||
{data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured ? " · featured" : ""}
|
||||
{data.video.slug}{data.video.premium ? " · premium" : ""}{data.video.featured
|
||||
? " · featured"
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -177,7 +179,10 @@
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>{$_("admin.common.tags")}</Label>
|
||||
<TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
|
||||
<TagsInput
|
||||
bind:value={tags}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
|
||||
@@ -161,7 +161,10 @@
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<Label>{$_("admin.common.tags")}</Label>
|
||||
<TagsInput bind:value={tags} class="bg-background/50 border-primary/20 focus:border-primary" />
|
||||
<TagsInput
|
||||
bind:value={tags}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
|
||||
@@ -65,7 +65,10 @@
|
||||
<!-- Sidebar (desktop only) -->
|
||||
<aside class="hidden lg:flex w-56 shrink-0 flex-col border-r border-border/40">
|
||||
<div class="px-4 py-5 border-b border-border/40">
|
||||
<a href="/" class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<span class="icon-[ri--arrow-left-line] h-3.5 w-3.5"></span>
|
||||
{$_("me.nav.back_to_site")}
|
||||
</a>
|
||||
|
||||
@@ -135,150 +135,150 @@
|
||||
</div>
|
||||
|
||||
<Card class="bg-card/50 border-primary/20 max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>{$_("me.settings.profile_title")}</CardTitle>
|
||||
<CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<form onsubmit={handleProfileSubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>{$_("me.settings.avatar")}</Label>
|
||||
<div class="flex items-center gap-5">
|
||||
<FileDropZone
|
||||
id="avatar"
|
||||
fileCount={0}
|
||||
maxFiles={1}
|
||||
maxFileSize={2 * MEGABYTE}
|
||||
onUpload={handleFilesUpload}
|
||||
accept="image/*"
|
||||
class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
|
||||
>
|
||||
<div class="relative group cursor-pointer w-24 h-24">
|
||||
{#if avatar}
|
||||
<img
|
||||
src={avatar.url}
|
||||
alt={avatar.name}
|
||||
class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
>
|
||||
<span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
|
||||
>
|
||||
<span
|
||||
class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
|
||||
></span>
|
||||
<span class="text-xs text-muted-foreground">Upload</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</FileDropZone>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
|
||||
<p class="text-xs text-muted-foreground/70">
|
||||
Click or drop to {avatar ? "change" : "upload"}
|
||||
</p>
|
||||
<CardHeader>
|
||||
<CardTitle>{$_("me.settings.profile_title")}</CardTitle>
|
||||
<CardDescription>{$_("me.settings.profile_subtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<form onsubmit={handleProfileSubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>{$_("me.settings.avatar")}</Label>
|
||||
<div class="flex items-center gap-5">
|
||||
<FileDropZone
|
||||
id="avatar"
|
||||
fileCount={0}
|
||||
maxFiles={1}
|
||||
maxFileSize={2 * MEGABYTE}
|
||||
onUpload={handleFilesUpload}
|
||||
accept="image/*"
|
||||
class="h-auto w-auto shrink-0 border-none p-0 rounded-full hover:bg-transparent"
|
||||
>
|
||||
<div class="relative group cursor-pointer w-24 h-24">
|
||||
{#if avatar}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={handleAvatarRemove}
|
||||
class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
<img
|
||||
src={avatar.url}
|
||||
alt={avatar.name}
|
||||
class="w-24 h-24 rounded-full object-cover ring-4 ring-primary/20 group-hover:ring-primary/50 transition-all"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
>
|
||||
<span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
|
||||
Remove
|
||||
</Button>
|
||||
<span class="icon-[ri--camera-line] w-7 h-7 text-white"></span>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="w-24 h-24 rounded-full border-2 border-dashed border-primary/30 group-hover:border-primary/60 bg-primary/5 group-hover:bg-primary/10 transition-all flex flex-col items-center justify-center gap-1"
|
||||
>
|
||||
<span
|
||||
class="icon-[ri--camera-line] w-7 h-7 text-primary/50 group-hover:text-primary/80 transition-colors"
|
||||
></span>
|
||||
<span class="text-xs text-muted-foreground">Upload</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</FileDropZone>
|
||||
<div class="flex flex-col gap-1">
|
||||
<p class="text-sm text-muted-foreground">JPG, PNG · max 2 MB</p>
|
||||
<p class="text-xs text-muted-foreground/70">
|
||||
Click or drop to {avatar ? "change" : "upload"}
|
||||
</p>
|
||||
{#if avatar}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={handleAvatarRemove}
|
||||
class="cursor-pointer w-fit mt-1 px-2 h-7 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<span class="icon-[ri--delete-bin-line] w-3.5 h-3.5 mr-1"></span>
|
||||
Remove
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="firstName">{$_("me.settings.first_name")}</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
placeholder={$_("me.settings.first_name_placeholder")}
|
||||
bind:value={firstName}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="lastName">{$_("me.settings.last_name")}</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
placeholder={$_("me.settings.last_name_placeholder")}
|
||||
bind:value={lastName}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="artistName">{$_("me.settings.artist_name")}</Label>
|
||||
<Label for="firstName">{$_("me.settings.first_name")}</Label>
|
||||
<Input
|
||||
id="artistName"
|
||||
placeholder={$_("me.settings.artist_name_placeholder")}
|
||||
bind:value={artistName}
|
||||
id="firstName"
|
||||
placeholder={$_("me.settings.first_name_placeholder")}
|
||||
bind:value={firstName}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="description">{$_("me.settings.description")}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
bind:value={description}
|
||||
placeholder={$_("me.settings.description_placeholder")}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="tags">{$_("me.settings.tags")}</Label>
|
||||
<TagsInput
|
||||
id="tags"
|
||||
bind:value={tags}
|
||||
placeholder={$_("me.settings.tags_placeholder")}
|
||||
<Label for="lastName">{$_("me.settings.last_name")}</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
placeholder={$_("me.settings.last_name_placeholder")}
|
||||
bind:value={lastName}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isProfileError}
|
||||
<div class="grid w-full items-start gap-4">
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Title class="items-center flex">
|
||||
<span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
|
||||
{$_("me.settings.error")}
|
||||
</Alert.Title>
|
||||
<Alert.Description>{profileError}</Alert.Description>
|
||||
</Alert.Root>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="artistName">{$_("me.settings.artist_name")}</Label>
|
||||
<Input
|
||||
id="artistName"
|
||||
placeholder={$_("me.settings.artist_name_placeholder")}
|
||||
bind:value={artistName}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="description">{$_("me.settings.description")}</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
bind:value={description}
|
||||
placeholder={$_("me.settings.description_placeholder")}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="tags">{$_("me.settings.tags")}</Label>
|
||||
<TagsInput
|
||||
id="tags"
|
||||
bind:value={tags}
|
||||
placeholder={$_("me.settings.tags_placeholder")}
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isProfileError}
|
||||
<div class="grid w-full items-start gap-4">
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Title class="items-center flex">
|
||||
<span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
|
||||
{$_("me.settings.error")}
|
||||
</Alert.Title>
|
||||
<Alert.Description>{profileError}</Alert.Description>
|
||||
</Alert.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
disabled={isProfileLoading}
|
||||
>
|
||||
{#if isProfileLoading}
|
||||
<div
|
||||
class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
|
||||
></div>
|
||||
{$_("me.settings.updating_profile")}
|
||||
{:else}
|
||||
{$_("me.settings.update_profile")}
|
||||
{/if}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
disabled={isProfileLoading}
|
||||
>
|
||||
{#if isProfileLoading}
|
||||
<div
|
||||
class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
|
||||
></div>
|
||||
{$_("me.settings.updating_profile")}
|
||||
{:else}
|
||||
{$_("me.settings.update_profile")}
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -63,101 +63,101 @@
|
||||
</div>
|
||||
|
||||
<Card class="bg-card/50 border-primary/20 max-w-2xl">
|
||||
<CardHeader>
|
||||
<CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
|
||||
<CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<form onsubmit={handleSecuritySubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="email">{$_("me.settings.email")}</Label>
|
||||
<CardHeader>
|
||||
<CardTitle>{$_("me.settings.privacy_title")}</CardTitle>
|
||||
<CardDescription>{$_("me.settings.privacy_subtitle")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<form onsubmit={handleSecuritySubmit} class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="email">{$_("me.settings.email")}</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder={$_("me.settings.email_placeholder")}
|
||||
bind:value={email}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="password">{$_("me.settings.password")}</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder={$_("me.settings.email_placeholder")}
|
||||
bind:value={email}
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder={$_("me.settings.password_placeholder")}
|
||||
bind:value={password}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary"
|
||||
class="bg-background/50 border-primary/20 focus:border-primary pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{#if showPassword}
|
||||
<span class="icon-[ri--eye-off-line] w-4 h-4"></span>
|
||||
{:else}
|
||||
<span class="icon-[ri--eye-line] w-4 h-4"></span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="password">{$_("me.settings.password")}</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder={$_("me.settings.password_placeholder")}
|
||||
bind:value={password}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showPassword = !showPassword)}
|
||||
class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{#if showPassword}
|
||||
<span class="icon-[ri--eye-off-line] w-4 h-4"></span>
|
||||
{:else}
|
||||
<span class="icon-[ri--eye-line] w-4 h-4"></span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
placeholder={$_("me.settings.confirm_password_placeholder")}
|
||||
bind:value={confirmPassword}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showConfirmPassword = !showConfirmPassword)}
|
||||
class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{#if showConfirmPassword}
|
||||
<span class="icon-[ri--eye-off-line] w-4 h-4"></span>
|
||||
{:else}
|
||||
<span class="icon-[ri--eye-line] w-4 h-4"></span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="confirmPassword">{$_("me.settings.confirm_password")}</Label>
|
||||
<div class="relative">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
placeholder={$_("me.settings.confirm_password_placeholder")}
|
||||
bind:value={confirmPassword}
|
||||
required
|
||||
class="bg-background/50 border-primary/20 focus:border-primary pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showConfirmPassword = !showConfirmPassword)}
|
||||
class="cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{#if showConfirmPassword}
|
||||
<span class="icon-[ri--eye-off-line] w-4 h-4"></span>
|
||||
{:else}
|
||||
<span class="icon-[ri--eye-line] w-4 h-4"></span>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if isSecurityError}
|
||||
<div class="grid w-full items-start gap-4">
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Title class="items-center flex">
|
||||
<span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
|
||||
{$_("me.settings.error")}
|
||||
</Alert.Title>
|
||||
<Alert.Description>{securityError}</Alert.Description>
|
||||
</Alert.Root>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isSecurityError}
|
||||
<div class="grid w-full items-start gap-4">
|
||||
<Alert.Root variant="destructive">
|
||||
<Alert.Title class="items-center flex">
|
||||
<span class="icon-[ri--alert-line] inline-block w-4 h-4 mr-1"></span>
|
||||
{$_("me.settings.error")}
|
||||
</Alert.Title>
|
||||
<Alert.Description>{securityError}</Alert.Description>
|
||||
</Alert.Root>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
disabled={isSecurityLoading}
|
||||
>
|
||||
{#if isSecurityLoading}
|
||||
<div
|
||||
class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
|
||||
></div>
|
||||
{$_("me.settings.updating_security")}
|
||||
{:else}
|
||||
{$_("me.settings.update_security")}
|
||||
{/if}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
disabled={isSecurityLoading}
|
||||
>
|
||||
{#if isSecurityLoading}
|
||||
<div
|
||||
class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"
|
||||
></div>
|
||||
{$_("me.settings.updating_security")}
|
||||
{:else}
|
||||
{$_("me.settings.update_security")}
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,24 @@
|
||||
const { children, data } = $props();
|
||||
|
||||
const navLinks = $derived([
|
||||
{ name: $_("play.nav.play"), href: "/play/buttplug", icon: "icon-[ri--rocket-line]", exact: false },
|
||||
{ name: $_("play.nav.recordings"), href: "/play/recordings", icon: "icon-[ri--play-list-2-line]", exact: false },
|
||||
{ name: $_("play.nav.leaderboard"), href: "/play/leaderboard", icon: "icon-[ri--trophy-line]", exact: false },
|
||||
{
|
||||
name: $_("play.nav.play"),
|
||||
href: "/play/buttplug",
|
||||
icon: "icon-[ri--rocket-line]",
|
||||
exact: false,
|
||||
},
|
||||
{
|
||||
name: $_("play.nav.recordings"),
|
||||
href: "/play/recordings",
|
||||
icon: "icon-[ri--play-list-2-line]",
|
||||
exact: false,
|
||||
},
|
||||
{
|
||||
name: $_("play.nav.leaderboard"),
|
||||
href: "/play/leaderboard",
|
||||
icon: "icon-[ri--trophy-line]",
|
||||
exact: false,
|
||||
},
|
||||
]);
|
||||
|
||||
function isActive(link: { href: string; exact: boolean }) {
|
||||
|
||||
Reference in New Issue
Block a user