Updated
This commit is contained in:
173
src/pages/dashboard/settings.astro
Normal file
173
src/pages/dashboard/settings.astro
Normal file
@@ -0,0 +1,173 @@
|
||||
---
|
||||
import DashboardLayout from '../../layouts/DashboardLayout.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const user = Astro.locals.user;
|
||||
if (!user) return Astro.redirect('/login');
|
||||
|
||||
const url = new URL(Astro.request.url);
|
||||
const successType = url.searchParams.get('success');
|
||||
---
|
||||
|
||||
<DashboardLayout title="Account Settings - Chronus">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold mb-6 sm:mb-8 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
Account Settings
|
||||
</h1>
|
||||
|
||||
{/* Success Messages */}
|
||||
{successType === 'profile' && (
|
||||
<div class="alert alert-success mb-6">
|
||||
<Icon name="heroicons:check-circle" class="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0" />
|
||||
<span class="text-sm sm:text-base">Profile updated successfully!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successType === 'password' && (
|
||||
<div class="alert alert-success mb-6">
|
||||
<Icon name="heroicons:check-circle" class="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0" />
|
||||
<span class="text-sm sm:text-base">Password changed successfully!</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Profile Information -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h2 class="card-title mb-6 text-lg sm:text-xl">
|
||||
<Icon name="heroicons:user-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
Profile Information
|
||||
</h2>
|
||||
|
||||
<form action="/api/user/update-profile" method="POST" class="space-y-5">
|
||||
<div class="form-control">
|
||||
<label class="label pb-2">
|
||||
<span class="label-text font-medium text-sm sm:text-base">Full Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={user.name}
|
||||
placeholder="Your full name"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label pb-2">
|
||||
<span class="label-text font-medium text-sm sm:text-base">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={user.email}
|
||||
placeholder="your@email.com"
|
||||
class="input input-bordered w-full"
|
||||
disabled
|
||||
/>
|
||||
<div class="label pt-2">
|
||||
<span class="label-text-alt text-base-content/60 text-xs sm:text-sm">Email cannot be changed</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="submit" class="btn btn-primary w-full sm:w-auto">
|
||||
<Icon name="heroicons:check" class="w-5 h-5" />
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h2 class="card-title mb-6 text-lg sm:text-xl">
|
||||
<Icon name="heroicons:key" class="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
Change Password
|
||||
</h2>
|
||||
|
||||
<form action="/api/user/change-password" method="POST" class="space-y-5">
|
||||
<div class="form-control">
|
||||
<label class="label pb-2">
|
||||
<span class="label-text font-medium text-sm sm:text-base">Current Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
placeholder="Enter current password"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label pb-2">
|
||||
<span class="label-text font-medium text-sm sm:text-base">New Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
placeholder="Enter new password"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
minlength="8"
|
||||
/>
|
||||
<div class="label pt-2">
|
||||
<span class="label-text-alt text-base-content/60 text-xs sm:text-sm">Minimum 8 characters</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label pb-2">
|
||||
<span class="label-text font-medium text-sm sm:text-base">Confirm New Password</span>
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
placeholder="Confirm new password"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
minlength="8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="submit" class="btn btn-primary w-full sm:w-auto">
|
||||
<Icon name="heroicons:lock-closed" class="w-5 h-5" />
|
||||
Update Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Info -->
|
||||
<div class="card bg-base-100 shadow-xl border border-base-200">
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h2 class="card-title mb-6 text-lg sm:text-xl">
|
||||
<Icon name="heroicons:information-circle" class="w-5 h-5 sm:w-6 sm:h-6" />
|
||||
Account Information
|
||||
</h2>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Account ID</span>
|
||||
<span class="font-mono text-xs sm:text-sm break-all">{user.id}</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 border-b border-base-300 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Email</span>
|
||||
<span class="text-sm sm:text-base break-all">{user.email}</span>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between py-3 gap-2 sm:gap-0">
|
||||
<span class="text-base-content/70 text-sm sm:text-base">Site Administrator</span>
|
||||
<span class={user.isSiteAdmin ? "badge badge-primary" : "badge badge-ghost"}>
|
||||
{user.isSiteAdmin ? "Yes" : "No"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
Reference in New Issue
Block a user