From 9c663973b0056749e49e249cacb86671a201836a Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 30 Oct 2025 17:30:16 +0100
Subject: [PATCH] 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.
---
 src/app.ts              |   2 +-
 src/pages/Login.vue     | 170 +++++++++++++++++++++++++++++
 src/pages/LoginDemo.vue | 231 ----------------------------------------
 3 files changed, 171 insertions(+), 232 deletions(-)
 create mode 100644 src/pages/Login.vue
 delete mode 100644 src/pages/LoginDemo.vue

diff --git a/src/app.ts b/src/app.ts
index 5ee12b8..459283e 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -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
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
new file mode 100644
index 0000000..1d04f16
--- /dev/null
+++ b/src/pages/Login.vue
@@ -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>
diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
deleted file mode 100644
index f90aaa7..0000000
--- a/src/pages/LoginDemo.vue
+++ /dev/null
@@ -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>