131 lines
3.8 KiB
PHP
131 lines
3.8 KiB
PHP
<?= $this->extend('layouts/main') ?>
|
|
|
|
<?= $this->section('content') ?>
|
|
|
|
<div class="login-container">
|
|
<div class="login-card card card-glass fade-in" x-data="loginForm" x-ref="loginCard">
|
|
|
|
<!-- Header -->
|
|
<div class="login-header">
|
|
<div class="login-logo">
|
|
<i data-lucide="flask-conical"></i>
|
|
</div>
|
|
<h1 class="login-title">Welcome Back!</h1>
|
|
<p class="login-subtitle">Sign in to your CLQMS account</p>
|
|
</div>
|
|
|
|
<!-- Error Alert -->
|
|
<template x-if="error">
|
|
<div class="alert alert-error" x-transition>
|
|
<i data-lucide="alert-circle" style="width: 18px; height: 18px;"></i>
|
|
<span x-text="error"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Login Form -->
|
|
<form @submit.prevent="submitLogin">
|
|
|
|
<!-- Username Field -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="username">Username</label>
|
|
<div class="form-input-icon">
|
|
<i data-lucide="user" class="icon" style="width: 18px; height: 18px;"></i>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
class="form-input"
|
|
placeholder="Enter your username"
|
|
x-model="username"
|
|
:disabled="isLoading"
|
|
autocomplete="username"
|
|
autofocus
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password</label>
|
|
<div class="form-input-icon">
|
|
<i data-lucide="lock" class="icon" style="width: 18px; height: 18px;"></i>
|
|
<input
|
|
:type="showPassword ? 'text' : 'password'"
|
|
id="password"
|
|
class="form-input"
|
|
placeholder="Enter your password"
|
|
x-model="password"
|
|
:disabled="isLoading"
|
|
autocomplete="current-password"
|
|
style="padding-right: 3rem;"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="password-toggle"
|
|
@click="togglePassword"
|
|
:title="showPassword ? 'Hide password' : 'Show password'"
|
|
>
|
|
<i :data-lucide="showPassword ? 'eye-off' : 'eye'" style="width: 18px; height: 18px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember Me & Forgot Password -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<label class="checkbox-wrapper">
|
|
<input
|
|
type="checkbox"
|
|
class="checkbox-input"
|
|
x-model="rememberMe"
|
|
:disabled="isLoading"
|
|
>
|
|
<span class="checkbox-label">Remember me</span>
|
|
</label>
|
|
<a href="#" class="text-sm text-primary">Forgot password?</a>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary btn-lg btn-block"
|
|
:disabled="isLoading"
|
|
>
|
|
<template x-if="isLoading">
|
|
<div class="spinner"></div>
|
|
</template>
|
|
<template x-if="!isLoading">
|
|
<i data-lucide="log-in" style="width: 20px; height: 20px;"></i>
|
|
</template>
|
|
<span x-text="isLoading ? 'Signing in...' : 'Sign In'"></span>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<!-- Footer -->
|
|
<div class="login-footer">
|
|
<p class="text-muted">
|
|
© <?= date('Y') ?> CLQMS • Clinical Laboratory QMS
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<?= $this->endSection() ?>
|
|
|
|
<?= $this->section('scripts') ?>
|
|
<script>
|
|
// Re-initialize Lucide icons after Alpine updates the DOM
|
|
document.addEventListener('alpine:initialized', () => {
|
|
// Watch for DOM changes and re-create icons
|
|
const observer = new MutationObserver(() => {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
});
|
|
</script>
|
|
<?= $this->endSection() ?>
|