Simple Managment webapp [LLM]

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

@@ -0,0 +1,75 @@
+<div class="login-container">
+  <nz-card class="login-card">
+    <div class="login-header">
+      <h1>SimpleCloudNotifier</h1>
+      <p>Sign in to manage your notifications</p>
+    </div>
+
+    @if (error()) {
+      <nz-alert
+        nzType="error"
+        [nzMessage]="error()!"
+        nzShowIcon
+        class="mb-16"
+      ></nz-alert>
+    }
+
+    <form (ngSubmit)="login()">
+      <nz-form-item>
+        <nz-form-label>User ID</nz-form-label>
+        <nz-form-control>
+          <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>Admin Key</nz-form-label>
+        <nz-form-control>
+          <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 (with "A" permission) to access the dashboard.</p>
+    </div>
+  </nz-card>
+</div>