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="password"
            prepend-icon="mdi-lock"
            :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>
          
          <!-- Dev Login Button (ALWAYS VISIBLE - BULLETPROOF FIX) -->
          <v-btn
            color="warning"
            size="large"
            block
            :loading="isLoading"
            class="mb-4"
            @click="handleDevLogin"
          >
            <v-icon icon="mdi-bug" class="mr-2"></v-icon>
            Dev Login (Bypass)
          </v-btn>
          
          <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('moderator')">
                Moderator
              </v-chip>
              <v-chip size="small" variant="outlined" @click="setDemoCredentials('salesperson')">
                Salesperson
              </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'

// State
const email = ref('')
const password = ref('')
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
const demoCredentials = {
  superadmin: {
    email: 'superadmin@servicefinder.com',
    password: 'superadmin123',
    role: 'superadmin',
    rank: 10,
    scope_level: 'global'
  },
  admin: {
    email: 'admin@servicefinder.com',
    password: 'admin123',
    role: 'admin',
    rank: 7,
    scope_level: 'region',
    region_code: 'HU-BU',
    scope_id: 123
  },
  moderator: {
    email: 'moderator@servicefinder.com',
    password: 'moderator123',
    role: 'moderator',
    rank: 5,
    scope_level: 'city',
    region_code: 'HU-BU',
    scope_id: 456
  },
  salesperson: {
    email: 'sales@servicefinder.com',
    password: 'sales123',
    role: 'salesperson',
    rank: 3,
    scope_level: 'district',
    region_code: 'HU-BU',
    scope_id: 789
  }
}

// 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 dev login (bypass authentication)
async function handleDevLogin() {
  isLoading.value = true
  error.value = ''
  
  try {
    console.log('[DEV MODE] Using development login bypass')
    
    // Use the exact mock JWT string provided in the task
    const mockJwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzdXBlcmFkbWluQHNlcnZpY2VmaW5kZXIuY29tIiwicm9sZSI6InN1cGVyYWRtaW4iLCJyYW5rIjoxMDAsInNjb3BlX2xldmVsIjoiZ2xvYmFsIiwiZXhwIjozMDAwMDAwMDAwLCJpYXQiOjE3MDAwMDAwMDB9.dummy_signature'
    
    // Store token and parse
    if (typeof window !== 'undefined') {
      localStorage.setItem('admin_token', mockJwtToken)
    }
    authStore.token = mockJwtToken
    authStore.parseToken()
    
    // Navigate to dashboard
    navigateTo('/dashboard')
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Dev login failed'
  } finally {
    isLoading.value = false
  }
}

// Handle login
async function handleLogin() {
  // Validate form
  const { valid } = await loginForm.value.validate()
  if (!valid) return
  
  isLoading.value = true
  error.value = ''
  
  try {
    // 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 {
      // Simulate API call for real credentials
      const success = await authStore.login(email.value, password.value)
      if (!success) {
        error.value = 'Invalid credentials. Please try again.'
      }
    }
  } catch (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>