68 lines
2.7 KiB
HTML
68 lines
2.7 KiB
HTML
<ion-header>
|
|
<ion-toolbar color="primary">
|
|
<ion-title>Credencial Digital</ion-title>
|
|
<ion-buttons slot="end">
|
|
<ion-button (click)="close()">Cerrar</ion-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content class="ion-padding">
|
|
|
|
<!-- Loading State -->
|
|
<div class="state-container" *ngIf="state === 'loading'">
|
|
<ion-spinner name="crescent" color="primary"></ion-spinner>
|
|
<p class="loading-text">Conectando con el campus y generando credencial...</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div class="state-container error-container" *ngIf="state === 'error'">
|
|
<ion-icon name="alert-circle-outline" color="danger"></ion-icon>
|
|
<p class="error-text">{{ errorMessage }}</p>
|
|
<ion-button color="primary" fill="outline" (click)="resetState()">Intentar nuevamente</ion-button>
|
|
</div>
|
|
|
|
<!-- Login State -->
|
|
<div class="state-container login-container" *ngIf="state === 'login'">
|
|
<div class="login-card">
|
|
<h2 class="ion-text-center">Mi Credencial</h2>
|
|
<p class="ion-text-center text-muted">Ingresa con tus datos del campus virtual para generar tu credencial digital. Los datos se procesan de forma segura en tu dispositivo.</p>
|
|
|
|
<ion-item>
|
|
<ion-label position="floating">DNI</ion-label>
|
|
<ion-input type="number" [(ngModel)]="dni"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label position="floating">Contraseña</ion-label>
|
|
<ion-input [type]="showPassword ? 'text' : 'password'" [(ngModel)]="password"></ion-input>
|
|
<ion-button fill="clear" slot="end" class="ion-align-self-end" (click)="showPassword = !showPassword" style="margin-top: 15px;">
|
|
<ion-icon slot="icon-only" [name]="showPassword ? 'eye-off-outline' : 'eye-outline'" color="medium"></ion-icon>
|
|
</ion-button>
|
|
</ion-item>
|
|
|
|
<ion-button expand="block" class="ion-margin-top" (click)="generate()" [disabled]="!dni || !password">
|
|
Generar / Ver
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Credential State -->
|
|
<div class="state-container credential-container" *ngIf="state === 'success'">
|
|
<img [src]="'data:image/png;base64,' + credentialImage" class="credential-img" alt="Credencial UNICABA" />
|
|
|
|
<div class="credential-actions">
|
|
<ion-button expand="block" color="primary" fill="outline" (click)="generate(true)">
|
|
<ion-icon name="refresh-outline" slot="start"></ion-icon>
|
|
Actualizar Credencial
|
|
</ion-button>
|
|
|
|
<ion-button expand="block" color="danger" fill="clear" (click)="logout()">
|
|
<ion-icon name="log-out-outline" slot="start"></ion-icon>
|
|
Cerrar Sesión
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
|
|
</ion-content>
|