service-finder/frontend/admin/pages/login.vue

<template>
  <v-app>
    <v-main class="d-flex align-center justify-center" style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <v-card width="400" class="pa-6" elevation="12">
        <v-card-title class="text-h4 font-weight-bold text-center mb-4">
          <v-icon icon="mdi-rocket-launch" class="mr-2" size="40"></v-icon>
          Mission Control
        </v-card-title>
        
        <v-card-subtitle class="text-center mb-6">
          Service Finder Admin Dashboard
        </v-card-subtitle>
        
        <v-form @submit.prevent="handleLogin" ref="loginForm">
          <v-text-field
            v-model="email"
            label="Email"
            type="email"
            prepend-icon="mdi-email"
            :rules="emailRules"
            required
            class="mb-4"
          ></v-text-field>
          
          <v-text-field
            v-model="password"
            label="Password"
            :type="showPassword ? 'text' : 'password'"
            prepend-icon="mdi-lock"
            :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
            @click:append-inner="showPassword = !showPassword"
            :rules="passwordRules"
            required
            class="mb-2"
          ></v-text-field>
          
          <div class="d-flex justify-end mb-4">
            <v-btn variant="text" size="small" @click="navigateTo('/forgot-password')">
              Forgot Password?
            </v-btn>
          </div>
          
          <v-btn
            type="submit"
            color="primary"
            size="large"
            block
            :loading="isLoading"
            class="mb-4"
          >
            <v-icon icon="mdi-login" class="mr-2"></v-icon>
            Sign In
          </v-btn>
          
          <!-- Real API Login Only - No Dev Bypass -->
          
          <v-alert
            v-if="error"
            type="error"
            variant="tonal"
            class="mb-4"
          >
            {{ error }}
          </v-alert>
          
          <v-divider class="my-4"></v-divider>
          
          <div class="text-center">
            <p class="text-caption text-disabled">
              Demo Credentials
            </p>
            <v-chip-group class="justify-center">
              <v-chip size="small" variant="outlined" @click="setDemoCredentials('superadmin')">
                Superadmin
              </v-chip>
              <v-chip size="small" variant="outlined" @click="setDemoCredentials('admin')">
                Admin
              </v-chip>
              <v-chip size="small" variant="outlined" @click="setDemoCredentials('tester')">
                Tester
              </v-chip>
            </v-chip-group>
          </div>
        </v-form>
      </v-card>
      
      <!-- Footer -->
      <v-footer absolute class="px-4" color="transparent">
        <v-spacer></v-spacer>
        <div class="text-caption text-white">
          Service Finder Admin v1.0.0 • Epic 10 - Mission Control
        </div>
      </v-footer>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '~/stores/auth'
import { navigateTo } from '#app'

// State
const email = ref('')
const password = ref('')
const showPassword = ref(false)
const isLoading = ref(false)
const error = ref('')
const loginForm = ref()

// Validation rules
const emailRules = [
  (v: string) => !!v || 'Email is required',
  (v: string) => /.+@.+\..+/.test(v) || 'Email must be valid'
]

const passwordRules = [
  (v: string) => !!v || 'Password is required',
  (v: string) => v.length >= 6 || 'Password must be at least 6 characters'
]

// Store
const authStore = useAuthStore()

// Demo credentials - Using real credentials from the task
const demoCredentials = {
  superadmin: {
    email: 'superadmin@profibot.hu',
    password: 'Superadmin123!',
    role: 'superadmin',
    rank: 100,
    scope_level: 'global'
  },
  admin: {
    email: 'admin@profibot.hu',
    password: 'Admin123!',
    role: 'admin',
    rank: 50,
    scope_level: 'global'
  },
  tester: {
    email: 'tester_pro@profibot.hu',
    password: 'Tester123!',
    role: 'tester',
    rank: 30,
    scope_level: 'global'
  }
}

// Set demo credentials
function setDemoCredentials(role: keyof typeof demoCredentials) {
  const creds = demoCredentials[role]
  email.value = creds.email
  password.value = creds.password
  
  // Show role info
  error.value = `Demo ${role} credentials loaded. Role: ${creds.role}, Rank: ${creds.rank}, Scope: ${creds.scope_level}`
}

// Handle login - REAL API AUTHENTICATION ONLY
async function handleLogin() {
  // Validate form
  const { valid } = await loginForm.value.validate()
  if (!valid) return
  
  isLoading.value = true
  error.value = ''
  
  try {
    // Debug: Log the input values
    console.log('Attempting login with:', email.value, password.value)
    console.log('Email type:', typeof email.value, 'Password type:', typeof password.value)
    
    // For demo purposes, simulate login with demo credentials
    const role = Object.keys(demoCredentials).find(key =>
      demoCredentials[key as keyof typeof demoCredentials].email === email.value
    )
    
    if (role) {
      const creds = demoCredentials[role as keyof typeof demoCredentials]
      
      // In development mode, use the auth store's login function which has the mock bypass
      // This will trigger the dev mode bypass in auth.ts for admin@servicefinder.com
      const success = await authStore.login(email.value, password.value)
      if (!success) {
        error.value = 'Invalid credentials. Please try again.'
      } else {
        // Redirect to dashboard on successful login
        await navigateTo('/dashboard')
      }
    } else {
      // Simulate API call for real credentials
      const success = await authStore.login(email.value, password.value)
      if (!success) {
        error.value = 'Invalid credentials. Please try again.'
      } else {
        // Redirect to dashboard on successful login
        await navigateTo('/dashboard')
      }
    }
  } catch (err) {
    console.error('Login error:', err)
    error.value = err instanceof Error ? err.message : 'Login failed'
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.v-card {
  border-radius: 16px;
}

.v-chip {
  cursor: pointer;
}

.v-chip:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}
</style>