98 lines
3.3 KiB
Svelte
98 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { onMount } from 'svelte';
|
|
let email = '';
|
|
let currentPassword = '';
|
|
let newPassword = '';
|
|
let confirmPassword = '';
|
|
|
|
// Use $page as a reactive value
|
|
$: fullName = $page.data?.user?.username || '';
|
|
|
|
let storageUsed = 0;
|
|
const MAX_STORAGE = 1024 * 1024 * 1024; // 1GB in bytes
|
|
let loadingStorage = true;
|
|
|
|
onMount(async () => {
|
|
loadingStorage = true;
|
|
try {
|
|
const res = await fetch('/api/user-storage');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
storageUsed = data.usage;
|
|
}
|
|
} finally {
|
|
loadingStorage = false;
|
|
}
|
|
});
|
|
|
|
function formatBytes(bytes: number) {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
|
}
|
|
|
|
function handleEmailChange(e: Event) {
|
|
e.preventDefault();
|
|
alert('Email change submitted (dummy)');
|
|
}
|
|
|
|
function handlePasswordChange(e: Event) {
|
|
e.preventDefault();
|
|
if (newPassword !== confirmPassword) {
|
|
alert('Passwords do not match!');
|
|
return;
|
|
}
|
|
alert('Password change submitted (dummy)');
|
|
}
|
|
</script>
|
|
|
|
<h1 class="text-2xl font-bold mb-4">Profile</h1>
|
|
|
|
<!-- Storage Usage Bar -->
|
|
<div class="mb-8 p-4 bg-muted rounded">
|
|
<div class="font-medium mb-2">Storage Usage</div>
|
|
{#if loadingStorage}
|
|
<div>Loading...</div>
|
|
{:else}
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class="flex-1 h-4 bg-gray-200 rounded overflow-hidden">
|
|
<div class="h-4 bg-primary" style="width: {Math.min(100, (storageUsed / MAX_STORAGE) * 100)}%"></div>
|
|
</div>
|
|
<div class="text-sm text-muted-foreground whitespace-nowrap">{formatBytes(storageUsed)} / 1 GB</div>
|
|
</div>
|
|
{#if storageUsed > MAX_STORAGE}
|
|
<div class="text-red-600 text-xs mt-1">You have exceeded your storage limit!</div>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="mb-8 p-4 bg-muted rounded">
|
|
<div class="font-medium">Full Name</div>
|
|
<div class="text-lg">{fullName}</div>
|
|
</div>
|
|
|
|
<form class="space-y-4 mb-8" on:submit|preventDefault={handleEmailChange}>
|
|
<div>
|
|
<label class="block mb-1 font-medium" for="email">Email Address</label>
|
|
<input id="email" type="email" bind:value={email} class="border rounded px-3 py-2 w-full" required />
|
|
</div>
|
|
<button type="submit" class="bg-primary text-primary-foreground rounded px-4 py-2">Change Email</button>
|
|
</form>
|
|
|
|
<form class="space-y-4" on:submit|preventDefault={handlePasswordChange}>
|
|
<div>
|
|
<label class="block mb-1 font-medium" for="currentPassword">Current Password</label>
|
|
<input id="currentPassword" type="password" bind:value={currentPassword} class="border rounded px-3 py-2 w-full" required />
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 font-medium" for="newPassword">New Password</label>
|
|
<input id="newPassword" type="password" bind:value={newPassword} class="border rounded px-3 py-2 w-full" required />
|
|
</div>
|
|
<div>
|
|
<label class="block mb-1 font-medium" for="confirmPassword">Confirm New Password</label>
|
|
<input id="confirmPassword" type="password" bind:value={confirmPassword} class="border rounded px-3 py-2 w-full" required />
|
|
</div>
|
|
<button type="submit" class="bg-primary text-primary-foreground rounded px-4 py-2">Change Password</button>
|
|
</form> |