feat: sincronización avanzada SIU por código ASIG, perfil con foto/nombre de Moodle y refinamiento visual violeta
This commit is contained in:
Carlos Tello
@@ -0,0 +1,127 @@
|
||||
<ion-header [translucent]="true" class="ion-no-border">
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Configuración de Perfil</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content [fullscreen]="true" color="light">
|
||||
<div class="profile-header-gradient">
|
||||
<div class="user-avatar-container">
|
||||
<div class="avatar-circle">
|
||||
<img *ngIf="authState?.userPhoto" [src]="authState?.userPhoto" class="user-photo-profile" />
|
||||
<ion-icon *ngIf="!authState?.userPhoto" name="person-circle-outline"></ion-icon>
|
||||
</div>
|
||||
<h2 *ngIf="authState?.userName">{{ authState?.userName }}</h2>
|
||||
<h2 *ngIf="!authState?.userName">Gestión de Cuentas</h2>
|
||||
<p>Unificá tus credenciales de SIU y Campus</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<!-- SIU Guaraní Card -->
|
||||
<ion-card class="auth-card" [class.connected]="authState?.siuConnected">
|
||||
<ion-card-header>
|
||||
<div class="card-title-row">
|
||||
<ion-icon name="school" color="primary" class="service-icon"></ion-icon>
|
||||
<ion-card-title>SIU Guaraní</ion-card-title>
|
||||
<ion-badge *ngIf="authState?.siuConnected" color="primary" class="status-badge">Conectado</ion-badge>
|
||||
<ion-badge *ngIf="!authState?.siuConnected" color="medium" class="status-badge">Sin Vincular</ion-badge>
|
||||
</div>
|
||||
<ion-card-subtitle>Historia Académica y Cartelera Personalizada</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content *ngIf="!authState?.siuConnected">
|
||||
<p class="auth-desc">Conectá con el SIU para traer tu historial y que la app auto-favoritee tus materias en curso.</p>
|
||||
<ion-list lines="inset" class="auth-form">
|
||||
<ion-item>
|
||||
<ion-icon name="person-outline" slot="start" color="medium"></ion-icon>
|
||||
<ion-input type="text" placeholder="DNI (Sin puntos)" [(ngModel)]="siuDni" clearInput></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-icon name="lock-closed-outline" slot="start" color="medium"></ion-icon>
|
||||
<ion-input [type]="showSiuPass ? 'text' : 'password'" placeholder="Contraseña de SIU" [(ngModel)]="siuPass"></ion-input>
|
||||
<ion-button slot="end" fill="clear" (click)="showSiuPass = !showSiuPass" color="medium">
|
||||
<ion-icon [name]="showSiuPass ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-button expand="block" (click)="loginSiu()" class="ion-margin-top btn-connect">
|
||||
<ion-icon name="log-in-outline" slot="start"></ion-icon>
|
||||
Sincronizar SIU
|
||||
</ion-button>
|
||||
<p class="error-text" *ngIf="authState?.siuError">{{ authState?.siuError }}</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-card-content *ngIf="authState?.siuConnected">
|
||||
<div class="connected-info">
|
||||
<ion-icon name="checkmark-circle" color="primary"></ion-icon>
|
||||
<div class="text">
|
||||
<strong>Cuenta Vinculada</strong>
|
||||
<span>DNI: {{ siuDni }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ion-button expand="block" fill="clear" color="danger" (click)="logoutSiu()" class="btn-logout">
|
||||
<ion-icon name="log-out-outline" slot="start"></ion-icon>
|
||||
Cerrar sesión SIU
|
||||
</ion-button>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<!-- Campus UNICABA (Moodle) Card -->
|
||||
<ion-card class="auth-card" [class.connected]="authState?.moodleConnected">
|
||||
<ion-card-header>
|
||||
<div class="card-title-row">
|
||||
<ion-icon name="book" color="secondary" class="service-icon"></ion-icon>
|
||||
<ion-card-title>Campus UNICABA</ion-card-title>
|
||||
<ion-badge *ngIf="authState?.moodleConnected" color="primary" class="status-badge">Conectado</ion-badge>
|
||||
<ion-badge *ngIf="!authState?.moodleConnected" color="medium" class="status-badge">Sin Vincular</ion-badge>
|
||||
</div>
|
||||
<ion-card-subtitle>Credencial Digital y Aulas Virtuales</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content *ngIf="!authState?.moodleConnected">
|
||||
<p class="auth-desc">Vinculá tu cuenta del campus para generar tu credencial digital offline y habilitar alertas de actividades.</p>
|
||||
<ion-list lines="inset" class="auth-form">
|
||||
<ion-item>
|
||||
<ion-icon name="person-outline" slot="start" color="medium"></ion-icon>
|
||||
<ion-input type="text" placeholder="DNI de Campus" [(ngModel)]="moodleDni" clearInput></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-icon name="lock-closed-outline" slot="start" color="medium"></ion-icon>
|
||||
<ion-input [type]="showMoodlePass ? 'text' : 'password'" placeholder="Contraseña de Campus" [(ngModel)]="moodlePass"></ion-input>
|
||||
<ion-button slot="end" fill="clear" (click)="showMoodlePass = !showMoodlePass" color="medium">
|
||||
<ion-icon [name]="showMoodlePass ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-button expand="block" color="secondary" (click)="loginMoodle()" class="ion-margin-top btn-connect">
|
||||
<ion-icon name="card-outline" slot="start"></ion-icon>
|
||||
Vincular Credencial
|
||||
</ion-button>
|
||||
<p class="error-text" *ngIf="authState?.moodleError">{{ authState?.moodleError }}</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-card-content *ngIf="authState?.moodleConnected">
|
||||
<div class="connected-info">
|
||||
<ion-icon name="checkmark-circle" color="secondary"></ion-icon>
|
||||
<div class="text">
|
||||
<strong>Cuenta Vinculada</strong>
|
||||
<span>DNI: {{ moodleDni }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ion-button expand="block" fill="clear" color="danger" (click)="logoutMoodle()" class="btn-logout">
|
||||
<ion-icon name="log-out-outline" slot="start"></ion-icon>
|
||||
Cerrar sesión Campus
|
||||
</ion-button>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<div class="security-info ion-padding">
|
||||
<ion-icon name="shield-checkmark" color="medium"></ion-icon>
|
||||
<p>Tus credenciales se almacenan de forma segura y local en tu dispositivo. No son enviadas a servidores externos ajenos a la universidad.</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
Reference in New Issue
Block a user