48 lines
2.4 KiB
Vue
48 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="max-w-md mx-auto px-4 py-16">
|
|||
|
|
<div class="hms-card p-8">
|
|||
|
|
<div class="text-center mb-6">
|
|||
|
|
<HmsLogo :size="48" />
|
|||
|
|
<h1 class="text-xl font-bold mt-4" style="color: var(--text)">Admin-Login</h1>
|
|||
|
|
<p class="text-sm mt-1" style="color: var(--secondary)">Equipment-Sync Verwaltungsbereich</p>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="loggedIn" class="text-center py-8" role="status">
|
|||
|
|
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" :style="{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></div>
|
|||
|
|
<p class="font-medium" style="color: var(--text)">Eingeloggt</p>
|
|||
|
|
<p class="text-xs mt-1" style="color: var(--secondary)">(Prototyp – keine echte Session)</p>
|
|||
|
|
</div>
|
|||
|
|
<form v-else @submit.prevent="login" novalidate>
|
|||
|
|
<div class="space-y-4">
|
|||
|
|
<div><label for="admin-user" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Benutzername</label><input id="admin-user" v-model="username" type="text" class="hms-input" placeholder="admin" :aria-invalid="!!error" /></div>
|
|||
|
|
<div><label for="admin-pass" class="block text-sm font-medium mb-1" style="color: var(--text-muted)">Passwort</label><input id="admin-pass" v-model="password" type="password" class="hms-input" placeholder="••••••••" :aria-invalid="!!error" /></div>
|
|||
|
|
<p v-if="error" class="text-xs" style="color: var(--color-error)" role="alert">{{ error }}</p>
|
|||
|
|
<button type="submit" :disabled="loading" class="hms-btn hms-btn-primary w-full py-3"><span v-if="loading" class="hms-spinner" style="width:18px;height:18px;border-width:2px"></span><span v-else>Einloggen</span></button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
const username = ref('')
|
|||
|
|
const password = ref('')
|
|||
|
|
const error = ref('')
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const loggedIn = ref(false)
|
|||
|
|
|
|||
|
|
function login() {
|
|||
|
|
error.value = ''
|
|||
|
|
if (!username.value || !password.value) {
|
|||
|
|
error.value = 'Bitte Benutzername und Passwort eingeben'
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
loading.value = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loading.value = false
|
|||
|
|
loggedIn.value = true
|
|||
|
|
}, 1200)
|
|||
|
|
}
|
|||
|
|
</script>
|