feat(auth): put login and register templates in files

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

@@ -0,0 +1,93 @@
+<div class="min-h-screen bg-gray-900 flex items-center justify-center">
+  <div class="max-w-md w-full bg-gray-800 rounded-lg shadow-lg p-8">
+    <h2 class="text-2xl font-bold text-white mb-6 text-center">Create Account</h2>
+
+    <div *ngIf="errorMessage" class="bg-red-600 text-white p-4 rounded mb-4">
+      {{ errorMessage }}
+    </div>
+
+    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-6">
+      <div>
+        <label for="email" class="block text-sm font-medium text-gray-300">Email</label>
+        <input
+          id="email"
+          type="email"
+          formControlName="email"
+          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+          placeholder="Enter your email"
+        />
+
+        <div
+          *ngIf="form['email'].touched && form['email'].errors"
+          class="text-red-500 mt-1 text-sm"
+        >
+          <span *ngIf="form['email'].errors?.['required']">Email is required</span>
+          <span *ngIf="form['email'].errors?.['email']"
+          >Please enter a valid email address</span
+          >
+        </div>
+      </div>
+
+      <div>
+        <label for="username" class="block text-sm font-medium text-gray-300">Username</label>
+        <input
+          id="username"
+          type="text"
+          formControlName="username"
+          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+          placeholder="Choose a username"
+        />
+
+        <div
+          *ngIf="form['username'].touched && form['username'].errors"
+          class="text-red-500 mt-1 text-sm"
+        >
+          <span *ngIf="form['username'].errors?.['required']">Username is required</span>
+          <span *ngIf="form['username'].errors?.['minlength']"
+          >Username must be at least 3 characters</span
+          >
+        </div>
+      </div>
+
+      <div>
+        <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
+        <input
+          id="password"
+          type="password"
+          formControlName="password"
+          class="mt-1 block w-full bg-gray-700 border-gray-600 text-white rounded-md shadow-sm py-2 px-3"
+          placeholder="Create a password"
+        />
+
+        <div
+          *ngIf="form['password'].touched && form['password'].errors"
+          class="text-red-500 mt-1 text-sm"
+        >
+          <span *ngIf="form['password'].errors?.['required']">Password is required</span>
+          <span *ngIf="form['password'].errors?.['minlength']"
+          >Password must be at least 6 characters</span
+          >
+        </div>
+      </div>
+
+      <div>
+        <button
+          type="submit"
+          [disabled]="registerForm.invalid || isLoading"
+          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          {{ isLoading ? 'Creating account...' : 'Register' }}
+        </button>
+      </div>
+    </form>
+
+    <div class="mt-6 text-center">
+      <p class="text-sm text-gray-400">
+        Already have an account?
+        <a routerLink="/login" class="font-medium text-indigo-400 hover:text-indigo-300"
+        >Login</a
+        >
+      </p>
+    </div>
+  </div>
+</div>