|
|
@@ -0,0 +1,100 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen flex bg-gradient-to-br from-white to-purple-600">
|
|
|
+ <!-- Right side - Login Form -->
|
|
|
+ <div class="w-full flex flex-col justify-between p-8 lg:p-12">
|
|
|
+ <div class="max-w-md w-full mx-auto mt-8">
|
|
|
+ <div class="mb-8">
|
|
|
+ <h2 class="text-3xl font-semibold text-white mb-2">Login</h2>
|
|
|
+ <p class="text-gray-400">Welcome back!</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <form @submit.prevent="handleLogin" class="space-y-6">
|
|
|
+ <div>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="username"
|
|
|
+ placeholder="Username"
|
|
|
+ class="w-full px-4 py-3 rounded-lg bg-gray-900/50 border border-gray-700 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500"
|
|
|
+ />
|
|
|
+ <p v-if="errors.username" class="text-red-500 text-sm">{{ errors.username }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <input
|
|
|
+ type="password"
|
|
|
+ v-model="password"
|
|
|
+ placeholder="Password"
|
|
|
+ class="w-full px-4 py-3 rounded-lg bg-gray-900/50 border border-gray-700 text-white placeholder-gray-400 focus:outline-none focus:border-purple-500"
|
|
|
+ />
|
|
|
+ <p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ id="remember"
|
|
|
+ v-model="rememberMe"
|
|
|
+ class="w-4 h-4 rounded border-gray-700 bg-gray-900/50 text-purple-500 focus:ring-purple-500"
|
|
|
+ />
|
|
|
+ <label for="remember" class="ml-2 text-gray-400">Remember me</label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button
|
|
|
+ type="submit"
|
|
|
+ class="w-full py-3 rounded-lg bg-purple-500 hover:bg-purple-600 text-white font-medium transition-colors"
|
|
|
+ >
|
|
|
+ Login
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div class="text-center">
|
|
|
+ <a href="#/forgot-password" class="text-purple-400 hover:text-purple-300">Forgot password?</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Language Selector -->
|
|
|
+ <div class="mt-8 flex items-center justify-center gap-2">
|
|
|
+ <span class="text-gray-400">Language:</span>
|
|
|
+ <select
|
|
|
+ v-model="language"
|
|
|
+ class="px-3 py-1.5 rounded bg-gray-900/50 border border-gray-700 text-gray-300 focus:outline-none focus:border-purple-500"
|
|
|
+ >
|
|
|
+ <option value="en">English</option>
|
|
|
+ <option value="es">Español</option>
|
|
|
+ <option value="fr">Français</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const username = ref('')
|
|
|
+const password = ref('')
|
|
|
+const rememberMe = ref(false)
|
|
|
+const language = ref('en')
|
|
|
+const errors = ref({})
|
|
|
+
|
|
|
+const handleLogin = () => {
|
|
|
+ errors.value = {}
|
|
|
+
|
|
|
+ if (!username.value) {
|
|
|
+ errors.value.username = 'Username is required.'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!password.value) {
|
|
|
+ errors.value.password = 'Password is required.'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (username.value === 'admin' && password.value === 'admin') {
|
|
|
+ router.push('/portal')
|
|
|
+ } else {
|
|
|
+ alert('Invalid username or password.')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
genlitex