LukeParke/Sveltey
1
0
Fork 0
mirror of https://github.com/LukeHagar/Sveltey.git synced 2025-12-06 04:21:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding logs

Browse Source
This commit is contained in:
Luke Hagar
2025-05-28 13:37:54 -05:00
parent cff5fccdee
commit c8a032a16e
4 changed files with 148 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/hooks.server.ts
View File

@@ -67,10 +67,12 @@ const authGuard: Handle = async ({ event, resolve }) => {
event.locals.session = session;
event.locals.user = user;
console.log(event.locals);
// Protect routes that require authentication
if (event.url.pathname.startsWith('/app')) {
if (!session) {
throw redirect(303, '/auth/login');
throw redirect(303, '/auth');
}
}

108
src/routes/auth/+page.svelte
View File

@@ -2,7 +2,7 @@
import { supabase } from '$lib/supabaseClient';
import { goto } from '$app/navigation';
import { toaster } from '$lib';
import { Mail, Lock, LogIn, UserPlus, Github, Chrome, MessageCircle, Twitter, Star, Eye, EyeOff } from '@lucide/svelte';
import { Mail, Lock, LogIn, UserPlus, Github, Chrome, MessageCircle, Twitter, Star, Eye, EyeOff, AlertTriangle } from '@lucide/svelte';
import { onMount } from 'svelte';
let activeTab = $state('login'); // 'login' or 'signup'
@@ -26,40 +26,55 @@
let oauthLoading = $state('');
let message = $state('');
// OAuth providers configuration
// OAuth providers configuration - only GitHub enabled for demo
const oauthProviders = [
{
name: 'GitHub',
provider: 'github',
icon: Github,
color: 'bg-[#333] hover:bg-[#555] text-white',
description: 'Continue with GitHub'
description: 'Continue with GitHub',
enabled: true
},
{
name: 'Google',
provider: 'google',
icon: Chrome,
color: 'bg-white hover:bg-gray-50 text-gray-900 border border-gray-300',
description: 'Continue with Google'
color: 'bg-gray-300 text-gray-500 cursor-not-allowed',
description: 'Continue with Google (Demo Disabled)',
enabled: false
},
{
name: 'Discord',
provider: 'discord',
icon: MessageCircle,
color: 'bg-[#5865F2] hover:bg-[#4752C4] text-white',
description: 'Continue with Discord'
color: 'bg-gray-300 text-gray-500 cursor-not-allowed',
description: 'Continue with Discord (Demo Disabled)',
enabled: false
},
{
name: 'Twitter',
provider: 'twitter',
icon: Twitter,
color: 'bg-[#1DA1F2] hover:bg-[#1A91DA] text-white',
description: 'Continue with Twitter'
color: 'bg-gray-300 text-gray-500 cursor-not-allowed',
description: 'Continue with Twitter (Demo Disabled)',
enabled: false
}
];
async function handleSubmit(e: Event) {
e.preventDefault();
// Disable email/password authentication for demo
toaster.create({
type: 'warning',
title: 'Demo Mode',
description: 'Email/password authentication is disabled in this demo. Please use GitHub login instead.'
});
return;
// Original code commented out for demo
/*
loading = true;
message = '';
@@ -110,9 +125,20 @@
} finally {
loading = false;
}
*/
}
async function handleOAuth(provider: string) {
// Only allow GitHub for demo
if (provider !== 'github') {
toaster.create({
type: 'warning',
title: 'Demo Mode',
description: `${provider.charAt(0).toUpperCase() + provider.slice(1)} login is disabled in this demo. Only GitHub login is available.`
});
return;
}
oauthLoading = provider;
try {
const { error } = await supabase.auth.signInWithOAuth({
@@ -149,6 +175,20 @@
<div class="container mx-auto py-20">
<div class="max-w-md mx-auto space-y-8">
<!-- Demo Notice -->
<div class="card preset-outlined-warning-500 p-4">
<div class="flex items-start gap-3">
<AlertTriangle class="size-5 text-warning-500 flex-shrink-0 mt-0.5" />
<div class="space-y-2">
<h3 class="font-semibold text-warning-700 dark:text-warning-300">Demo Mode</h3>
<p class="text-sm text-warning-600 dark:text-warning-400">
This is a demo deployment. Only <strong>GitHub login</strong> is enabled.
Email/password authentication and other OAuth providers are disabled for demonstration purposes.
</p>
</div>
</div>
</div>
<!-- Header -->
<header class="text-center space-y-4">
<div class="flex items-center justify-center gap-2 mb-4">
@@ -202,22 +242,21 @@
</div>
{/if}
<!-- Email/Password Form -->
<!-- Email/Password Form (Disabled for demo) -->
<form onsubmit={handleSubmit} class="space-y-6">
<div class="space-y-4">
<div class="space-y-4 opacity-50">
<div class="space-y-2">
<label class="label font-medium" for="email">
<Mail class="size-4 inline mr-2" />
Email Address
</label>
<input
class="input preset-outlined-primary-500"
class="input preset-outlined-surface-200-800"
type="email"
id="email"
bind:value={formData.email}
placeholder="Enter your email"
required
disabled={loading || oauthLoading !== ''}
placeholder="Enter your email (disabled in demo)"
disabled={true}
autocomplete="email"
/>
</div>
@@ -229,21 +268,19 @@
</label>
<div class="relative">
<input
class="input preset-outlined-primary-500 pr-10"
class="input preset-outlined-surface-200-800 pr-10"
type={showPassword ? 'text' : 'password'}
id="password"
bind:value={formData.password}
placeholder={activeTab === 'login' ? 'Enter your password' : 'Create a strong password'}
required
disabled={loading || oauthLoading !== ''}
placeholder={activeTab === 'login' ? 'Enter your password (disabled)' : 'Create a strong password (disabled)'}
disabled={true}
minlength={activeTab === 'signup' ? 6 : undefined}
autocomplete={activeTab === 'login' ? 'current-password' : 'new-password'}
/>
<button
type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
onclick={() => showPassword = !showPassword}
disabled={loading || oauthLoading !== ''}
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500"
disabled={true}
>
{#if showPassword}
<EyeOff class="size-4" />
@@ -260,20 +297,15 @@
<button
type="submit"
class="btn preset-filled-primary-500 w-full flex items-center justify-center gap-2"
disabled={loading || oauthLoading !== ''}
class="btn preset-outlined-surface-200-800 w-full flex items-center justify-center gap-2 opacity-50 cursor-not-allowed"
disabled={true}
>
{#if loading}
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
{activeTab === 'login' ? 'Signing you in...' : 'Creating your account...'}
{#if activeTab === 'login'}
<LogIn class="size-4" />
Sign In (Demo Disabled)
{:else}
{#if activeTab === 'login'}
<LogIn class="size-4" />
Sign In
{:else}
<UserPlus class="size-4" />
Create Account
{/if}
<UserPlus class="size-4" />
Create Account (Demo Disabled)
{/if}
</button>
</form>
@@ -291,9 +323,9 @@
<!-- Forgot Password for Login -->
{#if activeTab === 'login'}
<div class="text-center">
<a href="/auth/reset-password" class="text-sm text-primary-500 hover:text-primary-600 transition-colors">
Forgot your password?
</a>
<span class="text-sm text-surface-500 opacity-50">
Forgot your password? (Demo disabled)
</span>
</div>
{/if}
@@ -311,7 +343,7 @@
type="button"
class="btn w-full flex items-center justify-center gap-3 {provider.color}"
onclick={() => handleOAuth(provider.provider)}
disabled={loading || oauthLoading !== ''}
disabled={!provider.enabled || loading || oauthLoading !== ''}
>
{#if oauthLoading === provider.provider}
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>

49
src/routes/auth/reset-password/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { supabase } from '$lib/supabaseClient';
import { toaster } from '$lib';
import { Mail, Send, ArrowLeft, KeyRound } from '@lucide/svelte';
import { Mail, Send, ArrowLeft, KeyRound, AlertTriangle } from '@lucide/svelte';
let email = $state('');
let loading = $state(false);
@@ -9,6 +9,17 @@
async function handleReset(e: Event) {
e.preventDefault();
// Disable password reset for demo
toaster.create({
type: 'warning',
title: 'Demo Mode',
description: 'Password reset is disabled in this demo. Please use GitHub login instead.'
});
return;
// Original code commented out for demo
/*
loading = true;
try {
@@ -33,6 +44,7 @@
} finally {
loading = false;
}
*/
}
</script>
@@ -43,6 +55,19 @@
<div class="container mx-auto py-20">
<div class="max-w-md mx-auto space-y-8">
<!-- Demo Notice -->
<div class="card preset-outlined-warning-500 p-4">
<div class="flex items-start gap-3">
<AlertTriangle class="size-5 text-warning-500 flex-shrink-0 mt-0.5" />
<div class="space-y-2">
<h3 class="font-semibold text-warning-700 dark:text-warning-300">Demo Mode</h3>
<p class="text-sm text-warning-600 dark:text-warning-400">
Password reset is disabled in this demo. Only <strong>GitHub login</strong> is available.
</p>
</div>
</div>
</div>
<!-- Header -->
<header class="text-center space-y-4">
<div class="flex items-center justify-center gap-2 mb-4">
@@ -58,19 +83,18 @@
<div class="card preset-outlined-primary-500 p-8 space-y-6">
{#if !sent}
<form onsubmit={handleReset} class="space-y-6">
<div class="space-y-2">
<div class="space-y-2 opacity-50">
<label class="label font-medium" for="email">
<Mail class="size-4 inline mr-2" />
Email Address
</label>
<input
class="input preset-outlined-secondary-500"
class="input preset-outlined-surface-200-800"
type="email"
id="email"
bind:value={email}
placeholder="Enter your email address"
required
disabled={loading}
placeholder="Enter your email address (disabled in demo)"
disabled={true}
autocomplete="email"
/>
<p class="text-xs opacity-75">
@@ -80,16 +104,11 @@
<button
type="submit"
class="btn preset-filled-primary-500 w-full flex items-center justify-center gap-2"
disabled={loading}
class="btn preset-outlined-surface-200-800 w-full flex items-center justify-center gap-2 opacity-50 cursor-not-allowed"
disabled={true}
>
{#if loading}
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
Sending reset email...
{:else}
<Send class="size-4" />
Send Reset Email
{/if}
<Send class="size-4" />
Send Reset Email (Demo Disabled)
</button>
</form>
{:else}

67
src/routes/auth/update-password/+page.svelte
View File

@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { toaster } from '$lib';
import { supabase } from '$lib/supabaseClient';
import { Eye, EyeOff, KeyRound, Lock, Save } from '@lucide/svelte';
import { Eye, EyeOff, KeyRound, Lock, Save, AlertTriangle } from '@lucide/svelte';
import type { Session } from '@supabase/supabase-js';
import { onMount } from 'svelte';
@@ -31,6 +31,16 @@
async function handleUpdatePassword(e: Event) {
e.preventDefault();
// Disable password update for demo
toaster.create({
type: 'warning',
title: 'Demo Mode',
description: 'Password update is disabled in this demo. Please use GitHub login instead.'
});
return;
// Original code commented out for demo
/*
if (password !== confirmPassword) {
toaster.create({
type: 'error',
@@ -64,7 +74,7 @@
description: 'Your password has been successfully updated.'
});
goto('/app/dashboard');
goto('/dashboard');
} catch (error: any) {
toaster.create({
type: 'error',
@@ -74,6 +84,7 @@
} finally {
loading = false;
}
*/
}
</script>
@@ -84,6 +95,19 @@
<div class="container mx-auto py-20">
<div class="max-w-md mx-auto space-y-8">
<!-- Demo Notice -->
<div class="card preset-outlined-warning-500 p-4">
<div class="flex items-start gap-3">
<AlertTriangle class="size-5 text-warning-500 flex-shrink-0 mt-0.5" />
<div class="space-y-2">
<h3 class="font-semibold text-warning-700 dark:text-warning-300">Demo Mode</h3>
<p class="text-sm text-warning-600 dark:text-warning-400">
Password update is disabled in this demo. Only <strong>GitHub login</strong> is available.
</p>
</div>
</div>
</div>
<!-- Header -->
<header class="text-center space-y-4">
<div class="flex items-center justify-center gap-2 mb-4">
@@ -98,7 +122,7 @@
<!-- Update Form Card -->
<div class="card preset-outlined-surface-200-800 p-8 space-y-6">
<form onsubmit={handleUpdatePassword} class="space-y-6">
<div class="space-y-4">
<div class="space-y-4 opacity-50">
<div class="space-y-2">
<label class="label font-medium" for="password">
<Lock class="size-4 inline mr-2" />
@@ -110,17 +134,15 @@
type={showPassword ? 'text' : 'password'}
id="password"
bind:value={password}
placeholder="Create a strong password"
required
disabled={loading}
placeholder="Create a strong password (disabled in demo)"
disabled={true}
minlength="6"
autocomplete="new-password"
/>
<button
type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
onclick={() => showPassword = !showPassword}
disabled={loading}
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500"
disabled={true}
>
{#if showPassword}
<EyeOff class="size-4" />
@@ -143,16 +165,14 @@
type={showConfirmPassword ? 'text' : 'password'}
id="confirmPassword"
bind:value={confirmPassword}
placeholder="Confirm your password"
required
disabled={loading}
placeholder="Confirm your password (disabled in demo)"
disabled={true}
autocomplete="new-password"
/>
<button
type="button"
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500 hover:text-surface-700 dark:hover:text-surface-300"
onclick={() => showConfirmPassword = !showConfirmPassword}
disabled={loading}
class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-500"
disabled={true}
>
{#if showConfirmPassword}
<EyeOff class="size-4" />
@@ -166,7 +186,7 @@
<!-- Password Strength Indicator -->
{#if password.length > 0}
<div class="space-y-2">
<div class="space-y-2 opacity-50">
<p class="text-sm font-medium">Password Strength:</p>
<div class="flex gap-1">
<div class="h-2 flex-1 rounded {password.length >= 6 ? 'bg-success-500' : 'bg-surface-300'}"></div>
@@ -189,7 +209,7 @@
<!-- Password Match Indicator -->
{#if confirmPassword.length > 0}
<div class="flex items-center gap-2 text-sm">
<div class="flex items-center gap-2 text-sm opacity-50">
{#if password === confirmPassword}
<div class="w-2 h-2 bg-success-500 rounded-full"></div>
<span class="text-success-600 dark:text-success-400">Passwords match</span>
@@ -202,16 +222,11 @@
<button
type="submit"
class="btn preset-filled-primary-500 w-full flex items-center justify-center gap-2"
disabled={loading || password !== confirmPassword || password.length < 6}
class="btn preset-outlined-surface-200-800 w-full flex items-center justify-center gap-2 opacity-50 cursor-not-allowed"
disabled={true}
>
{#if loading}
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
Updating password...
{:else}
<Save class="size-4" />
Update Password
{/if}
<Save class="size-4" />
Update Password (Demo Disabled)
</button>
</form>
</div>