prototype_design/src/views/LoginView.vue

<template>
  <div class="min-h-screen flex bg-gradient-to-b from-white to-purple-500">
    <div class="w-full flex flex-col items-center justify-center p-8">
      <div class="max-w-md w-full mx-auto mt-8">
        <div class="mb-8">
          <h2 class="text-3xl font-semibold text-gray-800 mb-2">Login</h2>
          <p class="text-gray-500">Welcome back!</p>
        </div>

        <form @submit.prevent="handleLogin" class="space-y-6">
          <div>
            <label for="username" class="block text-gray-700">Username</label>
            <input
                type="text"
                id="username"
                v-model="username"
                placeholder="Enter your username"
                class="w-full px-4 py-3 rounded-lg bg-gray-100 border border-gray-300 text-gray-700 focus:outline-none focus:border-purple-500"
            />
          </div>

          <div>
            <label for="password" class="block text-gray-700">Password</label>
            <input
                type="password"
                id="password"
                v-model="password"
                placeholder="Enter your password"
                class="w-full px-4 py-3 rounded-lg bg-gray-100 border border-gray-300 text-gray-700 focus:outline-none focus:border-purple-500"
            />
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input
                  type="checkbox"
                  id="remember"
                  v-model="rememberMe"
                  class="w-4 h-4 rounded border-gray-300 bg-gray-100 text-purple-500 focus:ring-purple-500"
              />
              <label for="remember" class="ml-2 text-gray-500">Remember me</label>
            </div>
            <a href="#" class="text-purple-500 hover:text-purple-600">Forgot password?</a>
          </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="mt-4">
            <label for="language" class="block text-gray-700">Language</label>
            <select
                id="language"
                v-model="language"
                class="w-full px-4 py-3 rounded-lg bg-gray-100 border border-gray-300 text-gray-700 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 handleLogin = () => {
  if (username.value === 'admin' && password.value === 'admin') {
    router.push('/portal')
  } else {
    alert('Invalid username or password')
  }
}
</script>