ddd test 2

src/app/domains/auth/feature/register/register.component.html

@@ -0,0 +1,89 @@
+<div class="h-full grid place-items-center bg-background">
+  <div class="w-[380px] bg-card border border-border rounded-xl p-6 shadow-sm">
+    <div class="flex items-center gap-2 mb-4">
+      <ng-icon
+        name="lucideUserPlus"
+        class="w-5 h-5 text-primary"
+      />
+      <h1 class="text-lg font-semibold text-foreground">Register</h1>
+    </div>
+
+    <div class="space-y-3">
+      <div>
+        <label
+          for="register-username"
+          class="block text-xs text-muted-foreground mb-1"
+          >Username</label
+        >
+        <input
+          [(ngModel)]="username"
+          type="text"
+          id="register-username"
+          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
+        />
+      </div>
+      <div>
+        <label
+          for="register-display-name"
+          class="block text-xs text-muted-foreground mb-1"
+          >Display Name</label
+        >
+        <input
+          [(ngModel)]="displayName"
+          type="text"
+          id="register-display-name"
+          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
+        />
+      </div>
+      <div>
+        <label
+          for="register-password"
+          class="block text-xs text-muted-foreground mb-1"
+          >Password</label
+        >
+        <input
+          [(ngModel)]="password"
+          type="password"
+          id="register-password"
+          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
+        />
+      </div>
+      <div>
+        <label
+          for="register-server"
+          class="block text-xs text-muted-foreground mb-1"
+          >Server App</label
+        >
+        <select
+          [(ngModel)]="serverId"
+          id="register-server"
+          class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
+        >
+          @for (s of servers(); track s.id) {
+            <option [value]="s.id">{{ s.name }}</option>
+          }
+        </select>
+      </div>
+      @if (error()) {
+        <p class="text-xs text-destructive">{{ error() }}</p>
+      }
+      <button
+        (click)="submit()"
+        type="button"
+        class="w-full px-3 py-2 rounded bg-primary text-primary-foreground hover:bg-primary/90"
+      >
+        Create Account
+      </button>
+      <div class="text-xs text-muted-foreground text-center mt-2">
+        Have an account?
+        <button
+          type="button"
+          (click)="goLogin()"
+          class="text-primary hover:underline"
+        >
+          Login
+        </button>
+      </div>
+    </div>
+  </div>
+</div>