admin firs step
This commit is contained in:
Roo
262
frontend/admin/pages/login.vue
Normal file
262
frontend/admin/pages/login.vue
Normal file
@@ -0,0 +1,262 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user