pwa fixes
This commit is contained in:
parent
6b41eafc55
commit
9bbc8cd0b3
2 changed files with 127 additions and 118 deletions
|
|
@ -1,79 +1,87 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { login } from '$lib/api/auth';
|
import { login } from "$lib/api/auth";
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from "$app/navigation";
|
||||||
import { auth } from '$lib/auth/store.svelte';
|
import { auth } from "$lib/auth/store.svelte";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from "svelte";
|
||||||
import { today } from '$lib/utils/date';
|
import { today } from "$lib/utils/date";
|
||||||
|
|
||||||
let username = $state('');
|
let username = $state("");
|
||||||
let password = $state('');
|
let password = $state("");
|
||||||
let error = $state('');
|
let error = $state("");
|
||||||
let loading = $state(false);
|
let loading = $state(false);
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (auth.isAuthenticated) goto(`/diary/${today()}`);
|
if (auth.isAuthenticated) goto(`/diary/${today()}`);
|
||||||
});
|
});
|
||||||
|
|
||||||
async function handleSubmit(e: SubmitEvent) {
|
async function handleSubmit(e: SubmitEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
error = '';
|
error = "";
|
||||||
loading = true;
|
loading = true;
|
||||||
try {
|
try {
|
||||||
await login(username, password);
|
await login(username, password);
|
||||||
goto(`/diary/${today()}`);
|
goto(`/diary/${today()}`);
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
error = 'Invalid username or password';
|
error = "Invalid username or password";
|
||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen flex items-center justify-center px-4">
|
<div class="min-h-screen flex items-center justify-center px-4">
|
||||||
<div class="w-full max-w-sm">
|
<div class="w-full max-w-sm">
|
||||||
<h1 class="text-3xl font-bold text-center mb-8 text-green-500">Fooder</h1>
|
<h1 class="text-3xl font-bold text-center mb-8 text-green-500">Fooder</h1>
|
||||||
|
|
||||||
<form onsubmit={handleSubmit} class="space-y-4">
|
<form onsubmit={handleSubmit} class="space-y-4">
|
||||||
<div>
|
<div>
|
||||||
<label for="username" class="block text-sm font-medium text-zinc-400 mb-1">Username</label>
|
<label
|
||||||
<input
|
for="username"
|
||||||
id="username"
|
class="block text-sm font-medium text-zinc-400 mb-1">Username</label
|
||||||
type="text"
|
>
|
||||||
bind:value={username}
|
<input
|
||||||
autocomplete="username"
|
id="username"
|
||||||
required
|
type="text"
|
||||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
bind:value={username}
|
||||||
/>
|
autocomplete="username"
|
||||||
</div>
|
required
|
||||||
|
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="password" class="block text-sm font-medium text-zinc-400 mb-1">Password</label>
|
<label
|
||||||
<input
|
for="password"
|
||||||
id="password"
|
class="block text-sm font-medium text-zinc-400 mb-1">Password</label
|
||||||
type="password"
|
>
|
||||||
bind:value={password}
|
<input
|
||||||
autocomplete="current-password"
|
id="password"
|
||||||
required
|
type="password"
|
||||||
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
bind:value={password}
|
||||||
/>
|
autocomplete="current-password"
|
||||||
</div>
|
required
|
||||||
|
class="w-full bg-zinc-900 border border-zinc-700 rounded-xl px-4 py-3 text-zinc-100 focus:outline-none focus:border-green-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if error}
|
{#if error}
|
||||||
<p class="text-red-400 text-sm">{error}</p>
|
<p class="text-red-400 text-sm">{error}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
|
class="w-full bg-green-600 hover:bg-green-500 disabled:opacity-50 rounded-xl py-3 font-semibold transition-colors"
|
||||||
>
|
>
|
||||||
{loading ? 'Signing in…' : 'Sign in'}
|
{loading ? "Signing in…" : "Sign in"}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<p class="text-center mt-6 text-zinc-500 text-sm">
|
<p class="text-center mt-6 text-zinc-500 text-sm">
|
||||||
No account?
|
No account?
|
||||||
<a href="/register" class="text-green-500 hover:text-green-400">Register</a>
|
<a href="/register" class="text-green-500 hover:text-green-400"
|
||||||
</p>
|
>Register</a
|
||||||
</div>
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
105
vite.config.ts
105
vite.config.ts
|
|
@ -4,56 +4,57 @@ import { VitePWA } from 'vite-plugin-pwa';
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
import tailwindcss from '@tailwindcss/vite';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: process.env.VITE_API_URL ?? 'http://localhost:8000',
|
target: process.env.VITE_API_URL ?? 'http://localhost:8000',
|
||||||
changeOrigin: true
|
changeOrigin: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
sveltekit(),
|
sveltekit(),
|
||||||
VitePWA({
|
VitePWA({
|
||||||
registerType: 'autoUpdate',
|
registerType: 'autoUpdate',
|
||||||
manifestFilename: 'manifest.json',
|
manifestFilename: 'manifest.json',
|
||||||
includeAssets: ['icons/icon.svg', 'icons/apple-touch-icon-180x180.png'],
|
includeAssets: ['icons/icon.svg', 'icons/apple-touch-icon-180x180.png'],
|
||||||
devOptions: { enabled: true },
|
devOptions: { enabled: true },
|
||||||
manifest: {
|
manifest: {
|
||||||
name: 'Fooder',
|
name: 'Fooder',
|
||||||
short_name: 'Fooder',
|
short_name: 'Fooder',
|
||||||
description: 'Simple calorie and macro tracker',
|
description: 'Simple calorie and macro tracker',
|
||||||
theme_color: '#16a34a',
|
theme_color: '#16a34a',
|
||||||
background_color: '#09090b',
|
background_color: '#09090b',
|
||||||
display: 'standalone',
|
display: 'standalone',
|
||||||
orientation: 'portrait',
|
orientation: 'portrait',
|
||||||
start_url: '/diary/today',
|
start_url: '/diary/today',
|
||||||
id: '/',
|
scope: '/',
|
||||||
categories: ['health', 'food'],
|
id: '/',
|
||||||
icons: [
|
categories: ['health', 'food'],
|
||||||
{ src: '/icons/pwa-64x64.png', sizes: '64x64', type: 'image/png' },
|
icons: [
|
||||||
{ src: '/icons/pwa-192x192.png', sizes: '192x192', type: 'image/png' },
|
{ src: '/icons/pwa-64x64.png', sizes: '64x64', type: 'image/png' },
|
||||||
{ src: '/icons/pwa-512x512.png', sizes: '512x512', type: 'image/png' },
|
{ src: '/icons/pwa-192x192.png', sizes: '192x192', type: 'image/png' },
|
||||||
{ src: '/icons/maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
|
{ src: '/icons/pwa-512x512.png', sizes: '512x512', type: 'image/png' },
|
||||||
]
|
{ src: '/icons/maskable-icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
|
||||||
},
|
]
|
||||||
workbox: {
|
},
|
||||||
navigateFallback: '/index.html',
|
workbox: {
|
||||||
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
navigateFallback: '/index.html',
|
||||||
runtimeCaching: [
|
globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
|
||||||
{
|
runtimeCaching: [
|
||||||
// Cache same-origin API responses (NetworkFirst: try network, fall back to cache)
|
{
|
||||||
urlPattern: ({ url }) => url.pathname.startsWith('/api/'),
|
// Cache same-origin API responses (NetworkFirst: try network, fall back to cache)
|
||||||
handler: 'NetworkFirst',
|
urlPattern: ({ url }) => url.pathname.startsWith('/api/'),
|
||||||
options: {
|
handler: 'NetworkFirst',
|
||||||
cacheName: 'api-cache',
|
options: {
|
||||||
networkTimeoutSeconds: 5,
|
cacheName: 'api-cache',
|
||||||
cacheableResponse: { statuses: [200] }
|
networkTimeoutSeconds: 5,
|
||||||
}
|
cacheableResponse: { statuses: [200] }
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
}
|
]
|
||||||
})
|
}
|
||||||
]
|
})
|
||||||
|
]
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue