93 lines
3.3 KiB
HTML
93 lines
3.3 KiB
HTML
<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>
|