121 lines
4.8 KiB
HTML
121 lines
4.8 KiB
HTML
<!-- Header container -->
|
|
<div class="header-container">
|
|
<div class="header-image">
|
|
<div class="water-drop-container">
|
|
<img src="img/gota.png" alt="gota" class="water-drop" width="41" height="60" fetchpriority="high">
|
|
<div class="text-drop">1.0</div>
|
|
</div>
|
|
<div class="header-text">
|
|
<div class="sub-title">Administrador de Cronogramas</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast para mensajes -->
|
|
<p-toast></p-toast>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="main-content flex align-items-center justify-content-center">
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<!-- Contenedor principal con posición relativa -->
|
|
<div class="position-relative overflow-hidden">
|
|
|
|
<!-- PANEL DE LOGIN -->
|
|
<div class="panel-container w-full"
|
|
[ngClass]="{'animate__animated animate__fadeOut d-none': showRecovery,
|
|
'animate__animated animate__fadeIn': !showRecovery && !isInitialLoad}">
|
|
<div class="login-card shadow-2 border-round">
|
|
<div class="login-header">
|
|
<h2>Iniciar Sesión</h2>
|
|
</div>
|
|
|
|
<form (ngSubmit)="onLogin()" class="p-3">
|
|
<!-- Email -->
|
|
<div class="field mb-3">
|
|
<input type="email" pInputText [(ngModel)]="email" name="email" placeholder="Email"
|
|
class="input-with-icon w-full" required />
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="field mb-3">
|
|
<input type="password" pInputText [(ngModel)]="password" name="password" placeholder="Password"
|
|
class="input-with-lock w-full" required />
|
|
</div>
|
|
|
|
<!-- Mensaje de error -->
|
|
<div *ngIf="errorMessage" class="error-message my-2">
|
|
<p-message severity="error" [text]="errorMessage"></p-message>
|
|
</div>
|
|
|
|
<!-- Botón -->
|
|
<div class="login-actions">
|
|
<button pButton type="submit" [label]="loading ? 'Autenticando...' : 'Autenticar'"
|
|
class="p-button-primary w-full" [disabled]="loading || !email || !password">
|
|
<i *ngIf="loading" class="pi pi-spin pi-spinner mr-2"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Recuperar contraseña -->
|
|
<div class="password-recovery px-3 pb-3">
|
|
<a href="#" (click)="toggleRecovery($event)">Recuperar Contraseña</a>
|
|
</div>
|
|
|
|
<!-- Credenciales de prueba -->
|
|
<div class="test-credentials mx-3 mb-3 p-2 border-round bg-gray-100">
|
|
<p class="mb-1 font-bold">Credenciales de prueba:</p>
|
|
<p class="mb-1">Email: admin@example.com</p>
|
|
<p>Password: admin123</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PANEL DE RECUPERACIÓN -->
|
|
<div class="panel-container w-full"
|
|
[ngClass]="{'animate__animated animate__fadeIn': showRecovery,
|
|
'animate__animated animate__fadeOut d-none': !showRecovery && !isInitialLoad}">
|
|
<div class="login-card shadow-2 border-round">
|
|
<div class="login-header">
|
|
<h2>Recuperar Contraseña</h2>
|
|
</div>
|
|
|
|
<form (ngSubmit)="onRecoverPassword()" class="p-3">
|
|
<!-- Email para recuperación -->
|
|
<div class="field mb-3">
|
|
<input type="email" pInputText [(ngModel)]="recoveryEmail" name="recoveryEmail"
|
|
placeholder="Ingresa tu email" class="input-with-icon w-full" required />
|
|
</div>
|
|
|
|
<!-- Mensaje informativo -->
|
|
<div class="info-message mb-3">
|
|
<p class="text-sm">Te enviaremos un enlace para restablecer tu contraseña.</p>
|
|
</div>
|
|
|
|
<!-- Mensaje de estado de recuperación -->
|
|
<div *ngIf="recoveryMessage" class="recovery-message my-2">
|
|
<p-message [severity]="recoveryStatus" [text]="recoveryMessage"></p-message>
|
|
</div>
|
|
|
|
<!-- Botón de enviar -->
|
|
<div class="login-actions">
|
|
<button pButton type="submit" [label]="recoveryLoading ? 'Enviando...' : 'Enviar Enlace'"
|
|
class="p-button-primary w-full" [disabled]="recoveryLoading || !recoveryEmail">
|
|
<i *ngIf="recoveryLoading" class="pi pi-spin pi-spinner mr-2"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Volver al login -->
|
|
<div class="password-recovery px-3 pb-3">
|
|
<a href="#" (click)="toggleRecovery($event)">Volver al Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<app-footer></app-footer> |