128 lines
5.1 KiB
HTML
128 lines
5.1 KiB
HTML
<div class="login-page">
|
|
<!-- Ambient glows -->
|
|
<div class="glow-tl"></div>
|
|
<div class="glow-br"></div>
|
|
|
|
<div class="login-card">
|
|
|
|
<!-- Brand -->
|
|
<div class="login-brand">
|
|
<div class="login-logo-wrap">
|
|
<!-- K logotipo SVG -->
|
|
<svg class="login-logo-icon" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8 6L17 17L8 28" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M17 6H26" stroke="white" stroke-width="3.5" stroke-linecap="round" />
|
|
<path d="M17 28H26" stroke="white" stroke-width="3.5" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
<p class="login-eyebrow">Portal Corporativo</p>
|
|
<h1 class="login-title">App <span class="login-title-gold">ECO</span></h1>
|
|
<p class="login-sub">WAVE · Intranet 2026</p>
|
|
</div>
|
|
|
|
<div class="login-sep"></div>
|
|
|
|
<!-- Form -->
|
|
<form class="login-form" (submit)="onSubmit($event)" novalidate>
|
|
|
|
<div class="field">
|
|
<label class="field-lbl">
|
|
<svg class="field-lbl-icon" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="5" r="3" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M2 14c0-3.314 2.686-6 6-6s6 2.686 6 6" stroke="currentColor" stroke-width="1.5"
|
|
stroke-linecap="round" />
|
|
</svg>
|
|
Usuario corporativo
|
|
</label>
|
|
<input id="login-email" type="email" class="field-input" placeholder="nombre@App.com" [value]="email()"
|
|
(input)="email.set(getVal($event))" autocomplete="email" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="field-lbl">
|
|
<svg class="field-lbl-icon" viewBox="0 0 16 16" fill="none">
|
|
<rect x="3" y="7" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M5.5 7V5a2.5 2.5 0 015 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
<circle cx="8" cy="11" r="1" fill="currentColor" />
|
|
</svg>
|
|
Contraseña
|
|
</label>
|
|
<input id="login-password" type="password" class="field-input" placeholder="••••••••••" [value]="password()"
|
|
(input)="password.set(getVal($event))" autocomplete="current-password" />
|
|
</div>
|
|
|
|
<button id="btn-login" type="submit" class="btn-cta" [disabled]="loading()">
|
|
@if (loading()) {
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="animation: spin 0.8s linear infinite;">
|
|
<circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,0.3)" stroke-width="3" />
|
|
<path d="M12 2a10 10 0 0110 10" stroke="#fff" stroke-width="3" stroke-linecap="round" />
|
|
</svg>
|
|
Autenticando...
|
|
} @else {
|
|
<svg width="14" height="14" viewBox="0 0 20 20" fill="none">
|
|
<path d="M10 3v14M3 10l7 7 7-7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
|
|
stroke-linejoin="round" style="transform:rotate(-90deg);transform-origin:center" />
|
|
</svg>
|
|
Ingresar a la Intranet
|
|
}
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Error -->
|
|
@if (errorMsg()) {
|
|
<div class="login-error" role="alert">
|
|
<svg viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M8 5v3M8 10.5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
{{ errorMsg() }}
|
|
</div>
|
|
}
|
|
|
|
<!-- SSO Divider -->
|
|
<div class="sso-divider">
|
|
<span class="sso-line"></span>
|
|
<span class="sso-label">O acceder con</span>
|
|
<span class="sso-line"></span>
|
|
</div>
|
|
|
|
<!-- Microsoft SSO -->
|
|
<button id="btn-sso" type="button" class="btn-sso" (click)="loginSSO()" [disabled]="loading()">
|
|
<!-- Microsoft logo -->
|
|
<svg class="ms-logo" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="0" y="0" width="10.5" height="10.5" fill="#f25022" />
|
|
<rect x="12.5" y="0" width="10.5" height="10.5" fill="#7fba00" />
|
|
<rect x="0" y="12.5" width="10.5" height="10.5" fill="#00a4ef" />
|
|
<rect x="12.5" y="12.5" width="10.5" height="10.5" fill="#ffb900" />
|
|
</svg>
|
|
<div class="sso-text">
|
|
<span class="sso-provider">Microsoft Entra ID</span>
|
|
<span class="sso-hint">Active Directory SSO · Inicio único</span>
|
|
</div>
|
|
<svg class="sso-arr" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3 8h10M9 5l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Security footer -->
|
|
<div class="login-security">
|
|
<svg viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 1.5L13.5 4v4c0 3-2 5-5.5 6.5C2.5 13 .5 11 .5 8V4L8 1.5z" stroke="currentColor" stroke-width="1.2"
|
|
stroke-linejoin="round" />
|
|
<path d="M5 8l2 2 4-4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
Acceso restringido · SSL/TLS · Políticas Entra ID
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style> |