Wibx_Nuxt_UI_Pro/app/pages/login.vue

<script setup lang="ts">
import { z } from 'zod'

useSeoMeta({
  title: 'Connexion - Wibx Tour Layer 2',
  description: 'Connectez-vous à votre compte Wibx Tour pour gérer vos connexions réseau Layer 2'
})

const schema = z.object({
  email: z.string().email('Email invalide'),
  password: z.string().min(8, 'Le mot de passe doit contenir au moins 8 caractères'),
  rememberMe: z.boolean().optional()
})

type Schema = z.output<typeof schema>

const state = reactive({
  email: '',
  password: '',
  rememberMe: false
})

const pending = ref(false)
const error = ref('')

async function onSubmit(event: Schema) {
  try {
    pending.value = true
    error.value = ''
    
    // Simulation de l'authentification
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // Redirection vers le tableau de bord
    await navigateTo('/')
  } catch (err) {
    error.value = 'Email ou mot de passe incorrect'
  } finally {
    pending.value = false
  }
}
</script>

<template>
  <div class="min-h-screen flex">
    <!-- Left side - Form -->
    <div class="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8">
      <div class="max-w-md w-full space-y-8">
        <div class="text-center">
          <h1 class="text-3xl font-bold tracking-tight">
            Connexion
          </h1>
          <p class="mt-2 text-gray-600 dark:text-gray-400">
            Accédez à votre compte Wibx Tour
          </p>
        </div>

        <UAlert
          v-if="error"
          icon="i-lucide-alert-circle"
          color="red"
          variant="soft"
          :title="error"
          class="mb-4"
        />

        <UForm
          :schema="schema"
          :state="state"
          class="space-y-6"
          @submit="onSubmit"
        >
          <UFormGroup label="Email" name="email" required>
            <UInput
              v-model="state.email"
              type="email"
              placeholder="votre@email.com"
              icon="i-lucide-mail"
              size="lg"
            />
          </UFormGroup>

          <UFormGroup label="Mot de passe" name="password" required>
            <UInput
              v-model="state.password"
              type="password"
              placeholder="••••••••"
              icon="i-lucide-lock"
              size="lg"
            />
          </UFormGroup>

          <div class="flex items-center justify-between">
            <UCheckbox
              v-model="state.rememberMe"
              name="rememberMe"
              label="Se souvenir de moi"
            />
            
            <ULink
              to="/forgot-password"
              class="text-sm text-primary hover:text-primary-600"
            >
              Mot de passe oublié ?
            </ULink>
          </div>

          <UButton
            type="submit"
            :loading="pending"
            size="lg"
            block
          >
            Se connecter
          </UButton>
        </UForm>

        <div class="text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">
            Pas encore de compte ?
            <ULink
              to="/signup"
              class="font-medium text-primary hover:text-primary-600"
            >
              Créer un compte
            </ULink>
          </p>
        </div>

        <!-- Social Login (Optional) -->
        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300 dark:border-gray-600" />
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-2 bg-white dark:bg-gray-900 text-gray-500">
                Ou continuer avec
              </span>
            </div>
          </div>

          <div class="mt-6 grid grid-cols-2 gap-3">
            <UButton
              variant="outline"
              size="lg"
              block
            >
              <UIcon name="i-simple-icons-google" class="mr-2" />
              Google
            </UButton>
            
            <UButton
              variant="outline"
              size="lg"
              block
            >
              <UIcon name="i-simple-icons-github" class="mr-2" />
              GitHub
            </UButton>
          </div>
        </div>
      </div>
    </div>

    <!-- Right side - Image/Branding -->
    <div class="hidden lg:block relative flex-1">
      <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700">
        <div class="flex items-center justify-center h-full p-12">
          <div class="text-center text-white">
            <div class="mb-8">
              <UIcon name="i-lucide-network" size="80" class="mx-auto mb-4" />
              <h2 class="text-4xl font-bold mb-4">
                Wibx Tour Layer 2
              </h2>
              <p class="text-xl opacity-90">
                La plateforme de connectivité réseau nouvelle génération
              </p>
            </div>
            
            <div class="space-y-4 text-left max-w-md">
              <div class="flex items-center">
                <UIcon name="i-lucide-check" class="mr-3 text-green-300" />
                <span>Connexions Layer 2 instantanées</span>
              </div>
              <div class="flex items-center">
                <UIcon name="i-lucide-check" class="mr-3 text-green-300" />
                <span>150+ data centers mondiaux</span>
              </div>
              <div class="flex items-center">
                <UIcon name="i-lucide-check" class="mr-3 text-green-300" />
                <span>APIs complètes pour développeurs</span>
              </div>
              <div class="flex items-center">
                <UIcon name="i-lucide-check" class="mr-3 text-green-300" />
                <span>Support 24/7 par des experts</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>