gitea/omotomo_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login with supabase working

Browse Source
This commit is contained in:
gitea
2026-02-13 12:00:39 +01:00
commit 43486d7c39
21 changed files with 2406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.svelte
+56
View File
@@ -0,0 +1,56 @@
<script>
import { onMount } from 'svelte';
import Navbar from './lib/Navbar.svelte';
import Footer from './lib/Footer.svelte';
import Card from './lib/Card.svelte';
import { auth } from './lib/stores/auth.js';
import { cards } from './lib/cards.js';
onMount(() => {
auth.init();
});
</script>
<Navbar />
<main class="main">
<div class="grid">
{#each cards as card (card.id)}
<Card {card} />
{/each}
</div>
</main>
<Footer />
<style>
.main {
width: 100%;
padding: 1.5rem;
box-sizing: border-box;
}
.grid {
display: grid;
gap: 1.5rem;
width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1400px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
</style>
src/app.css
+56
View File
@@ -0,0 +1,56 @@
:root {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Dark theme only */
color-scheme: dark;
--bg: #0f0f0f;
--nav-bg: #161616;
--card-bg: #1a1a1a;
--bg-muted: #252525;
--text-primary: #f0f0f0;
--text-muted: #a0a0a0;
--border: #333;
--border-hover: #444;
--hover-bg: #222;
--accent: #3b82f6;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background: var(--bg);
color: var(--text-primary);
}
#app {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button {
font-family: inherit;
}
src/assets/svelte.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/lib/Card.svelte
+88
View File
@@ -0,0 +1,88 @@
<script>
export let card;
function useCard() {
console.log(card.title);
}
</script>
<article class="card">
<div class="card-image-wrap">
<img src={card.imageUrl} alt={card.title} class="card-image" loading="lazy" />
</div>
<div class="card-body">
<h3 class="card-title">{card.title}</h3>
<p class="card-description">{card.description}</p>
<button type="button" class="btn-use" onclick={useCard}>Use</button>
</div>
</article>
<style>
.card {
display: flex;
flex-direction: column;
background: var(--card-bg, #1a1a1a);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.card-image-wrap {
aspect-ratio: 400 / 240;
overflow: hidden;
background: var(--bg-muted, #252525);
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-body {
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.card-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary, #f0f0f0);
}
.card-description {
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
color: var(--text-muted, #a0a0a0);
flex: 1;
}
.btn-use {
align-self: flex-start;
margin-top: 0.25rem;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid var(--border, #333);
border-radius: 6px;
background: var(--accent, #3b82f6);
color: #fff;
cursor: pointer;
transition: background 0.2s, filter 0.2s;
}
.btn-use:hover {
filter: brightness(1.1);
}
</style>
src/lib/Counter.svelte
+10
View File
@@ -0,0 +1,10 @@
<script>
let count = $state(0)
const increment = () => {
count += 1
}
</script>
<button onclick={increment}>
count is {count}
</button>
src/lib/Footer.svelte
+37
View File
@@ -0,0 +1,37 @@
<footer class="footer">
<div class="footer-inner">
<span class="footer-brand">Omotomo</span>
<p class="footer-copy">© {new Date().getFullYear()} Omotomo. All rights reserved.</p>
</div>
</footer>
<style>
.footer {
margin-top: auto;
width: 100%;
padding: 1.25rem 1.5rem;
background: var(--nav-bg, #161616);
border-top: 1px solid var(--border, #333);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.5rem 1rem;
max-width: 100%;
}
.footer-brand {
font-weight: 600;
color: var(--text-primary, #f0f0f0);
}
.footer-copy {
margin: 0;
font-size: 0.875rem;
color: var(--text-muted, #a0a0a0);
}
</style>
src/lib/Navbar.svelte
+341
View File
@@ -0,0 +1,341 @@
<script>
import { auth } from './stores/auth.js';
let showPopup = false;
let mode = 'login'; // 'login' | 'register'
let email = '';
let password = '';
let submitting = false;
let registerSuccess = false;
function openPopup() {
auth.clearError();
showPopup = true;
mode = 'login';
email = '';
password = '';
registerSuccess = false;
}
function closePopup() {
showPopup = false;
email = '';
password = '';
registerSuccess = false;
}
function handleBackdropClick(e) {
if (e.target === e.currentTarget) closePopup();
}
async function handleSubmit() {
if (!email.trim() || !password) return;
submitting = true;
registerSuccess = false;
if (mode === 'login') {
const ok = await auth.login(email.trim(), password);
if (ok) closePopup();
} else {
const result = await auth.register(email.trim(), password);
if (result?.success) {
if (result.needsConfirmation) {
registerSuccess = true;
} else {
closePopup();
}
}
}
submitting = false;
}
function handleLogout() {
auth.logout();
}
$: displayName = $auth.user?.user_metadata?.name ?? $auth.user?.email ?? null;
</script>
<nav class="navbar">
<span class="app-name">Omotomo</span>
<div class="nav-actions">
{#if $auth.loading}
<span class="username">…</span>
{:else if $auth.user}
<span class="username">{displayName}</span>
<button type="button" class="btn btn-logout" onclick={handleLogout}>Logout</button>
{:else}
<button type="button" class="btn btn-login" onclick={openPopup}>Login</button>
{/if}
</div>
</nav>
{#if showPopup}
<div class="popup-backdrop" onclick={handleBackdropClick} role="presentation">
<div class="popup" role="dialog" aria-modal="true" aria-labelledby="auth-popup-title">
<div class="popup-header">
<h2 id="auth-popup-title" class="popup-title">Sign in</h2>
<button type="button" class="popup-close" onclick={closePopup} aria-label="Close">×</button>
</div>
<div class="popup-tabs">
<button
type="button"
class="tab"
class:active={mode === 'login'}
onclick={() => { mode = 'login'; auth.clearError(); registerSuccess = false; }}
>
Log in
</button>
<button
type="button"
class="tab"
class:active={mode === 'register'}
onclick={() => { mode = 'register'; auth.clearError(); registerSuccess = false; }}
>
Register
</button>
</div>
{#if registerSuccess && !$auth.user}
<p class="auth-message auth-success">
Check your email to confirm your account.
</p>
{:else}
<form class="popup-form" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
<input
type="email"
bind:value={email}
placeholder="Email"
class="input"
disabled={submitting}
autocomplete={mode === 'login' ? 'email' : 'email'}
/>
<input
type="password"
bind:value={password}
placeholder="Password"
class="input"
disabled={submitting}
autocomplete={mode === 'login' ? 'current-password' : 'new-password'}
/>
{#if $auth.error}
<p class="auth-error">{$auth.error}</p>
{/if}
<button
type="submit"
class="btn btn-primary btn-block"
disabled={submitting || !email.trim() || !password}
>
{#if submitting}
{mode === 'login' ? 'Logging in…' : 'Creating account…'}
{:else}
{mode === 'login' ? 'Log in' : 'Create account'}
{/if}
</button>
</form>
{/if}
</div>
</div>
{/if}
<style>
.navbar {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1.5rem;
background: var(--nav-bg, #161616);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.app-name {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary, #f0f0f0);
}
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.username {
font-size: 0.9rem;
color: var(--text-muted, #a0a0a0);
}
.btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid var(--border, #333);
border-radius: 6px;
background: var(--card-bg, #1e1e1e);
color: var(--text-primary, #f0f0f0);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.btn:hover:not(:disabled) {
background: var(--hover-bg, #2a2a2a);
border-color: var(--border-hover, #444);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-login,
.btn-primary {
background: var(--accent, #3b82f6);
border-color: var(--accent, #3b82f6);
}
.btn-login:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
background: #2563eb;
border-color: #2563eb;
}
.btn-logout {
background: transparent;
}
.btn-block {
width: 100%;
}
/* Popup */
.popup-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.popup {
width: 100%;
max-width: 380px;
padding: 1.5rem;
background: var(--card-bg, #1a1a1a);
border: 1px solid var(--border, #333);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.popup-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary, #f0f0f0);
}
.popup-close {
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1.5rem;
line-height: 1;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-muted, #a0a0a0);
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.popup-close:hover {
color: var(--text-primary, #f0f0f0);
background: var(--hover-bg, #222);
}
.popup-tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 1.25rem;
padding: 0.25rem;
background: var(--bg-muted, #252525);
border-radius: 8px;
}
.tab {
flex: 1;
padding: 0.5rem 1rem;
font-size: 0.9rem;
font-weight: 500;
border: none;
border-radius: 6px;
background: transparent;
color: var(--text-muted, #a0a0a0);
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.tab:hover {
color: var(--text-primary, #f0f0f0);
}
.tab.active {
background: var(--card-bg, #1a1a1a);
color: var(--text-primary, #f0f0f0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.popup-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.input {
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 0.95rem;
border: 1px solid var(--border, #333);
border-radius: 6px;
background: var(--bg, #0f0f0f);
color: var(--text-primary, #f0f0f0);
}
.input::placeholder {
color: var(--text-muted, #a0a0a0);
}
.input:focus {
outline: none;
border-color: var(--accent, #3b82f6);
}
.auth-error {
margin: 0;
font-size: 0.85rem;
color: #ef4444;
}
.auth-message {
margin: 0;
font-size: 0.9rem;
}
.auth-success {
color: #22c55e;
}
</style>
src/lib/cards.js
+50
View File
@@ -0,0 +1,50 @@
export const cards = [
{
id: 1,
title: 'Alpha',
description: 'First card with a short description for the grid.',
imageUrl: 'https://picsum.photos/seed/alpha/400/240',
},
{
id: 2,
title: 'Beta',
description: 'Second card. Another brief description here.',
imageUrl: 'https://picsum.photos/seed/beta/400/240',
},
{
id: 3,
title: 'Gamma',
description: 'Third card. Keep descriptions short and clear.',
imageUrl: 'https://picsum.photos/seed/gamma/400/240',
},
{
id: 4,
title: 'Delta',
description: 'Fourth card in the responsive grid layout.',
imageUrl: 'https://picsum.photos/seed/delta/400/240',
},
{
id: 5,
title: 'Epsilon',
description: 'Fifth card. Placeholder image from Picsum.',
imageUrl: 'https://picsum.photos/seed/epsilon/400/240',
},
{
id: 6,
title: 'Zeta',
description: 'Sixth card with a subtle shadow and dark theme.',
imageUrl: 'https://picsum.photos/seed/zeta/400/240',
},
{
id: 7,
title: 'Eta',
description: 'Seventh card. Full-width grid, 4+ columns on desktop.',
imageUrl: 'https://picsum.photos/seed/eta/400/240',
},
{
id: 8,
title: 'Theta',
description: 'Eighth card. Click Use to log the card name.',
imageUrl: 'https://picsum.photos/seed/theta/400/240',
},
];
src/lib/stores/auth.js
+72
View File
@@ -0,0 +1,72 @@
import { writable } from 'svelte/store';
import { supabase } from '../supabase.js';
function createAuthStore() {
const { subscribe, set, update } = writable({
user: null,
loading: true,
error: null,
});
function setSession(session) {
const user = session?.user ?? null;
set({
user,
loading: false,
error: null,
});
}
return {
subscribe,
init: async () => {
try {
const { data: { session } } = await supabase.auth.getSession();
setSession(session);
} catch (e) {
set({ user: null, loading: false, error: e?.message ?? 'Auth error' });
}
supabase.auth.onAuthStateChange((_event, session) => {
setSession(session);
});
},
login: async (email, password) => {
update((s) => ({ ...s, error: null }));
try {
const { error } = await supabase.auth.signInWithPassword({ email, password });
if (error) {
update((s) => ({ ...s, error: error.message }));
return false;
}
update((s) => ({ ...s, error: null }));
return true;
} catch (e) {
update((s) => ({ ...s, error: e?.message ?? 'Login failed' }));
return false;
}
},
register: async (email, password) => {
update((s) => ({ ...s, error: null }));
try {
const { data, error } = await supabase.auth.signUp({ email, password });
if (error) {
update((s) => ({ ...s, error: error.message }));
return { success: false };
}
update((s) => ({ ...s, error: null }));
const needsConfirmation = data?.user && !data?.session;
return { success: true, needsConfirmation, data };
} catch (e) {
update((s) => ({ ...s, error: e?.message ?? 'Registration failed' }));
return { success: false };
}
},
logout: async () => {
await supabase.auth.signOut();
set({ user: null, loading: false, error: null });
},
clearError: () => update((s) => ({ ...s, error: null })),
};
}
export const auth = createAuthStore();
src/lib/supabase.js
+6
View File
@@ -0,0 +1,6 @@
import { createClient } from '@supabase/supabase-js';
const url = import.meta.env.VITE_SUPABASE_URL;
const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(url ?? '', anonKey ?? '');
src/main.js
+9
View File
@@ -0,0 +1,9 @@
import { mount } from 'svelte'
import './app.css'
import App from './App.svelte'
const app = mount(App, {
target: document.getElementById('app'),
})
export default app