padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: padreug:875bf507652338c0ed56717cd603a0baeb491fa3
Branches Tags
padreug:main
padreug:castle-web
padreug:demo-login
...
compare: padreug:8c33dc6e11331ce15bd0f34dc558bade3722e76c
Branches Tags
padreug:castle-web
padreug:demo-login
padreug:main

3 commits
875bf50765 ... 8c33dc6e11

Author SHA1 Message Date
padreug
8c33dc6e11 Initializes theme on app load 
Ensures the selected theme (dark/light mode) is applied immediately when the application loads, preventing a flash of incorrect theme on startup.
 2025-10-31 21:59:34 +01:00
padreug
9c663973b0 Implements user login and registration 
Replaces the demo login page with a dedicated login and registration component.
This allows users to create accounts and log in, enabling authentication features.

Simplify Login, remove registration for now

Adds a login page with username and password fields.
Includes input validation, loading state, error handling,
and a success message after successful login.
Registration has been temporarily disabled.
 2025-10-31 21:48:34 +01:00
padreug
2183d050cb remove obsolete well-known/lnurlp 2025-10-31 21:24:26 +01:00
14 changed files with 175 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

1
public/.well-known/lnurlp/aio
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/9UMQLs","minSendable":1000,"maxSendable":1000000000,"metadata":"[[\"text/plain\", \"Payment to aio\"], [\"text/identifier\", \"aio@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/axel
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/e2DiVc","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to axel\"], [\"text/identifier\", \"axel@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/brandon
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/Kjkhzp","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to brandon\"], [\"text/identifier\", \"brandon@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/dijiridoo
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/CyCgkp","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to dijiridoo\"], [\"text/identifier\", \"dijiridoo@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/dra
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/gqpekW","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to dra\"], [\"text/identifier\", \"dra@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/indra
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/4ucR3j","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to indra\"], [\"text/identifier\", \"indra@lnbits.atitlan.io\"]]","commentAllowed":55,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/osman
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/WzAYhR","minSendable":1000,"maxSendable":100000000,"metadata":"[[\"text/plain\", \"Payment to osman\"], [\"text/identifier\", \"osman@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/padreug
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/aHzHNm","minSendable":1000,"maxSendable":1000000000,"metadata":"[[\"text/plain\", \"Payment to padreug\"], [\"text/identifier\", \"padreug@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/rishibond
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/jhHTce","minSendable":1000,"maxSendable":1000000000,"metadata":"[[\"text/plain\", \"Payment to rishibond\"], [\"text/identifier\", \"rishibond@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

1
public/.well-known/lnurlp/tor
View file

@ -1 +0,0 @@
{"tag":"payRequest","callback":"https://lnbits.atitlan.io/lnurlp/api/v1/lnurl/cb/gYapfW","minSendable":1000,"maxSendable":1000000000,"metadata":"[[\"text/plain\", \"Payment to tor\"], [\"text/identifier\", \"tor@lnbits.atitlan.io\"]]","commentAllowed":140,"allowsNostr":true,"nostrPubkey":"66df4d7c4eab03a967ba8fd988c22e996cbfe8bdd8bd5e1e805978e6e6d51943"}

4
src/App.vue
View file

@ -9,10 +9,14 @@ import 'vue-sonner/style.css'
import { useMarketPreloader } from '@/modules/market/composables/useMarketPreloader'
import { auth } from '@/composables/useAuthService'
import { toast } from 'vue-sonner'
import { useTheme } from '@/components/theme-provider'
const route = useRoute()
const showLoginDialog = ref(false)
// Initialize theme (applies dark mode immediately)
useTheme()
// Initialize preloader
const marketPreloader = useMarketPreloader()

2
src/app.ts
View file

@ -60,7 +60,7 @@ export async function createAppInstance() {
{
path: '/login',
name: 'login',
component: () => import('./pages/LoginDemo.vue'),
component: () => import('./pages/Login.vue'),
meta: { requiresAuth: false }
},
// Pre-register module routes

170
src/pages/Login.vue Normal file
View file

@ -0,0 +1,170 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background via-background to-muted/20">
<div class="w-full max-w-md space-y-8">
<!-- Logo and Title -->
<div class="text-center space-y-6">
<div class="flex justify-center">
<img src="@/assets/logo.png" alt="Logo" class="h-24 w-24 sm:h-32 sm:w-32" />
</div>
<div class="space-y-2">
<h1 class="text-3xl font-bold tracking-tight">Virtual Realm</h1>
</div>
</div>
<!-- Auth Card -->
<Card class="border-0 shadow-lg">
<CardContent class="p-6 sm:p-8">
<!-- Mode Toggle -->
<!-- TODO: Make register tab dynamic based on server config
Once LNbits adds a public endpoint like /api/v1/server/config that returns:
{ "allow_new_accounts": boolean, "auth_methods": string[] }
We can fetch this on mount and conditionally show the Register tab.
For now, registration is disabled server-side so we hide the toggle.
-->
<!-- <div class="flex rounded-lg bg-muted p-1 mb-8">
<button
@click="activeMode = 'login'"
:class="[
'flex-1 rounded-md px-3 py-2 text-sm font-medium transition-all',
activeMode === 'login'
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
]"
>
Sign In
</button>
<button
v-if="allowRegistration"
@click="activeMode = 'register'"
:class="[
'flex-1 rounded-md px-3 py-2 text-sm font-medium transition-all',
activeMode === 'register'
? 'bg-background text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
]"
>
Register
</button>
</div> -->
<!-- Login Form -->
<form @submit.prevent="handleLogin" class="space-y-4">
<div class="space-y-2">
<Label for="login-username" class="text-sm font-medium">Username</Label>
<Input
id="login-username"
v-model="loginForm.username"
placeholder="Enter your username"
:disabled="isLoading"
class="h-11"
/>
</div>
<div class="space-y-2">
<Label for="login-password" class="text-sm font-medium">Password</Label>
<Input
id="login-password"
type="password"
v-model="loginForm.password"
placeholder="Enter your password"
:disabled="isLoading"
class="h-11"
/>
</div>
<!-- Error Display -->
<p v-if="error" class="text-sm text-destructive">
{{ error }}
</p>
<Button
type="submit"
:disabled="isLoading || !canLogin"
class="w-full h-11 text-base font-medium"
>
<span v-if="isLoading" class="mr-2">
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</span>
{{ isLoading ? 'Signing In...' : 'Sign In' }}
</Button>
</form>
<!-- Success Message -->
<div
v-if="successMessage"
class="mt-4 text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800"
>
{{ successMessage }}
</div>
</CardContent>
</Card>
<!-- Footer Text -->
<p class="text-center text-xs text-muted-foreground">
By continuing, you agree to our Terms of Service and Privacy Policy
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { auth } from '@/composables/useAuthService'
import { toast } from 'vue-sonner'
const router = useRouter()
const isLoading = ref(false)
const error = ref('')
const successMessage = ref('')
// TODO: Fetch from server config endpoint when available
// const allowRegistration = ref(false)
// const activeMode = ref<'login' | 'register'>('login')
// Login form
const loginForm = ref({
username: '',
password: ''
})
const canLogin = computed(() => {
return loginForm.value.username.trim() && loginForm.value.password.trim()
})
// Login with existing credentials
async function handleLogin() {
if (!canLogin.value) return
try {
isLoading.value = true
error.value = ''
successMessage.value = ''
await auth.login({
username: loginForm.value.username,
password: loginForm.value.password
})
successMessage.value = 'Login successful! Redirecting...'
toast.success('Login successful!')
// Redirect to home page after successful login
setTimeout(() => {
router.push('/')
}, 1500)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Login failed'
toast.error('Login failed. Please check your credentials.')
} finally {
isLoading.value = false
}
}
</script>

231
src/pages/LoginDemo.vue
View file

@ -1,231 +0,0 @@
<template>
<div
class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
<div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
<!-- Welcome Section -->
<div class="text-center space-y-2 sm:space-y-4">
<div class="flex justify-center">
<img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
</div>
<div class="space-y-1 sm:space-y-3">
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
<p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
Your secure platform for events and community management
</p>
</div>
</div>
<!-- Demo Account Creation Card -->
<Card class="w-full max-w-md">
<CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
<!-- Demo Badge -->
<div class="flex justify-center">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
<div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
<span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
</div>
</div>
<!-- Mode Toggle -->
<div class="flex justify-center">
<div class="inline-flex rounded-lg bg-muted p-1">
<Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
@click="activeMode = 'demo'">
Demo Account
</Button>
<Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
@click="activeMode = 'login'">
Sign In
</Button>
</div>
</div>
<!-- Demo Mode Content -->
<div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6 relative">
<!-- Loading Overlay -->
<div v-if="isLoading" class="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-lg">
<div class="flex flex-col items-center gap-3 text-center px-4">
<div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
<div>
<p class="text-sm font-medium">Creating your demo account...</p>
<p class="text-xs text-muted-foreground mt-1">This will only take a moment</p>
</div>
</div>
</div>
<!-- Demo Info -->
<div class="text-center space-y-2 sm:space-y-3">
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
Get instant access with a pre-funded demo account containing
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
</p>
</div>
<!-- Create Account Button -->
<Button @click="createFakeAccount" :disabled="isLoading"
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
{{ 'Create Demo Account' }}
</Button>
<!-- Info Text -->
<p class="text-xs text-center text-muted-foreground">
Your credentials will be generated automatically
</p>
</div>
<!-- Login Mode Content -->
<div v-else class="space-y-4 sm:space-y-6">
<!-- Login Info -->
<div class="text-center space-y-2 sm:space-y-3">
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
Sign in to your existing account
</p>
</div>
<!-- Login Form -->
<div class="space-y-4">
<div class="space-y-2">
<Label for="login-username">Username or Email</Label>
<Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
@keydown.enter="handleLogin" />
</div>
<div class="space-y-2">
<Label for="login-password">Password</Label>
<Input id="login-password" type="password" v-model="loginForm.password"
placeholder="Enter your password" @keydown.enter="handleLogin" />
</div>
</div>
<!-- Login Button -->
<Button @click="handleLogin" :disabled="isLoading || !canLogin"
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
{{ isLoading ? 'Signing In...' : 'Sign In' }}
</Button>
</div>
<!-- Error Display -->
<p v-if="error" class="text-sm text-destructive text-center">
{{ error }}
</p>
<!-- Success Message -->
<div v-if="successMessage"
class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
{{ successMessage }}
</div>
<!-- Demo Notice -->
<div class="text-center space-y-2">
<p class="text-xs text-muted-foreground">
This is a demo environment. All transactions use fake satoshis for testing purposes.
</p>
<div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
<span class="font-medium">Demo data may be erased at any time</span>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { auth } from '@/composables/useAuthService'
import { useDemoAccountGenerator } from '@/composables/useDemoAccountGenerator'
import { toast } from 'vue-sonner'
const router = useRouter()
const { isLoading, error, generateNewCredentials } = useDemoAccountGenerator()
const successMessage = ref('')
const activeMode = ref<'demo' | 'login'>('demo')
// Login form
const loginForm = ref({
username: '',
password: ''
})
const canLogin = computed(() => {
return loginForm.value.username.trim() && loginForm.value.password.trim()
})
// Create fake account and automatically log in
async function createFakeAccount() {
try {
isLoading.value = true
error.value = ''
successMessage.value = ''
// Generate credentials
const credentials = generateNewCredentials()
// Register the fake account
await auth.register({
username: credentials.username,
email: credentials.email,
password: credentials.password,
password_repeat: credentials.password
})
// Show success with username
successMessage.value = `Account created! Username: ${credentials.username}`
toast.success(`Logged in as ${credentials.username}!`)
// Redirect to home page after successful registration
setTimeout(() => {
router.push('/')
}, 2000)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Failed to create demo account'
toast.error('Failed to create demo account. Please try again.')
} finally {
isLoading.value = false
}
}
// Login with existing credentials
async function handleLogin() {
if (!canLogin.value) return
try {
isLoading.value = true
error.value = ''
successMessage.value = ''
await auth.login({
username: loginForm.value.username,
password: loginForm.value.password
})
successMessage.value = 'Login successful! Redirecting...'
toast.success('Login successful!')
// Redirect to home page after successful login
setTimeout(() => {
router.push('/')
}, 1500)
} catch (err) {
error.value = err instanceof Error ? err.message : 'Login failed'
toast.error('Login failed. Please check your credentials.')
} finally {
isLoading.value = false
}
}
</script>