Added login design

frontend/pages/login.vue

@@ -1,110 +1,31 @@
+<script setup lang="ts">
+import { LayoutGrid } from 'lucide-vue-next'
+import LoginForm from '@/components/LoginForm.vue'
+</script>
+
 <template>
-  <div class="min-h-screen bg-background flex items-center justify-center">
-    <div class="w-full max-w-md p-8 border rounded-lg bg-card">
-      <h1 class="text-3xl font-bold mb-6 text-center">Login</h1>
-      
-      <div v-if="error" class="mb-4 p-3 bg-destructive/10 text-destructive rounded">
-        {{ error }}
-      </div>
-
-      <form @submit.prevent="handleLogin" class="space-y-4">
-        <div>
-          <label class="block text-sm font-medium mb-2">Tenant ID</label>
-          <input
-            v-model="tenantId"
-            type="text"
-            required
-            class="w-full px-3 py-2 border rounded-md bg-background"
-            placeholder="123"
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium mb-2">Email</label>
-          <input
-            v-model="email"
-            type="email"
-            required
-            class="w-full px-3 py-2 border rounded-md bg-background"
-            placeholder="user@example.com"
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium mb-2">Password</label>
-          <input
-            v-model="password"
-            type="password"
-            required
-            class="w-full px-3 py-2 border rounded-md bg-background"
-            placeholder="••••••••"
-          />
-        </div>
-
-        <button
-          type="submit"
-          :disabled="loading"
-          class="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
-        >
-          {{ loading ? 'Logging in...' : 'Login' }}
-        </button>
-      </form>
-
-      <div class="mt-4 text-center text-sm text-muted-foreground">
-        Don't have an account? 
-        <NuxtLink to="/register" class="text-primary hover:underline">
-          Register
+  <div class="grid min-h-svh lg:grid-cols-2">
+    <div class="flex flex-col gap-4 p-6 md:p-10">
+      <div class="flex justify-center gap-2 md:justify-start">
+        <NuxtLink to="/" class="flex items-center gap-2 font-medium">
+          <div class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <LayoutGrid class="size-4" />
+          </div>
+          Neo Platform
         </NuxtLink>
       </div>
+      <div class="flex flex-1 items-center justify-center">
+        <div class="w-full max-w-xs">
+          <LoginForm />
+        </div>
+      </div>
+    </div>
+    <div class="bg-muted relative hidden lg:block">
+      <img
+        src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1200&auto=format&fit=crop&q=80"
+        alt="Login cover"
+        class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-const config = useRuntimeConfig()
-const router = useRouter()
-
-const tenantId = ref('123')
-const email = ref('')
-const password = ref('')
-const loading = ref(false)
-const error = ref('')
-
-const handleLogin = async () => {
-  try {
-    loading.value = true
-    error.value = ''
-
-    const response = await fetch(`${config.public.apiBaseUrl}/api/auth/login`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-tenant-id': tenantId.value,
-      },
-      body: JSON.stringify({
-        email: email.value,
-        password: password.value,
-      }),
-    })
-
-    if (!response.ok) {
-      const data = await response.json()
-      throw new Error(data.message || 'Login failed')
-    }
-
-    const data = await response.json()
-
-    // Store credentials
-    localStorage.setItem('tenantId', tenantId.value)
-    localStorage.setItem('token', data.access_token)
-    localStorage.setItem('user', JSON.stringify(data.user))
-
-    // Redirect to home
-    router.push('/')
-  } catch (e: any) {
-    error.value = e.message || 'Login failed'
-  } finally {
-    loading.value = false
-  }
-}
-</script>