Files
SimpleCloudNotifier/webapp/src/app/features/auth/login/login.component.html

76 lines
2.0 KiB
HTML

<div class="login-container">
<nz-card class="login-card">
<div class="login-header">
<img src="/logo.png" alt="SimpleCloudNotifier" class="login-logo" />
<h1>SimpleCloudNotifier</h1>
</div>
@if (error()) {
<nz-alert
nzType="error"
[nzMessage]="error()!"
nzShowIcon
class="mb-16"
></nz-alert>
}
<form nz-form nzLayout="horizontal" (ngSubmit)="login()">
<nz-form-item>
<nz-form-label [nzSpan]="7">User ID</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-input-group nzPrefixIcon="user">
<input
type="text"
nz-input
placeholder="Enter your User ID"
[(ngModel)]="userId"
name="userId"
[disabled]="loading()"
/>
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7">Admin Key</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-input-group nzPrefixIcon="key" [nzSuffix]="keySuffix">
<input
[type]="showKey() ? 'text' : 'password'"
nz-input
placeholder="Enter your Admin Key"
[(ngModel)]="adminKey"
name="adminKey"
[disabled]="loading()"
/>
</nz-input-group>
<ng-template #keySuffix>
<span
nz-icon
[nzType]="showKey() ? 'eye' : 'eye-invisible'"
class="key-toggle"
(click)="toggleShowKey()"
></span>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item class="mb-0">
<button
nz-button
nzType="primary"
nzBlock
type="submit"
[nzLoading]="loading()"
>
Sign In
</button>
</nz-form-item>
</form>
<div class="login-footer">
<p>You need an admin key to access.</p>
</div>
</nz-card>
</div>