NowChess/NowChess-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: NCWF-4 Token Issues (#8)

Browse Source 
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de>
Co-authored-by: shahdlala66 <shahd.lala66@gmail.com>
Reviewed-on: #8
This commit was merged in pull request #8.
This commit is contained in:
Shahd Lala
2026-06-02 21:55:55 +02:00
parent 873bfe3bae
commit 95eff42dfe
37 changed files with 2522 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/register-dialog/register-dialog.component.html
+48 -23
View File
@@ -1,40 +1,65 @@
<div class="dialog-overlay" (click)="closeDialog()">
<div class="dialog-card" (click)="$event.stopPropagation()">
<div class="dialog-title">CREATE ACCOUNT</div>
<div class="dialog-head">
<span class="brand-tag">NowChess // Register</span>
<button type="button" class="close-btn" (click)="closeDialog()" aria-label="Close">×</button>
</div>
<h2 class="dialog-title">Create account</h2>
<div class="dialog-subtitle">Join the board and start playing</div>
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<input id="username" type="text" class="dialog-input" formControlName="username" placeholder="Username" />
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
<small class="text-danger">Username must be at least 3 characters</small>
}
<div class="field">
<label for="username" class="field-label">Username</label>
<input id="username" type="text" class="dialog-input" formControlName="username"
placeholder="your_handle" autocomplete="username" />
@if (registerForm.get('username')?.invalid && registerForm.get('username')?.touched) {
<small class="text-danger">Username must be at least 3 characters</small>
}
</div>
<input id="email" type="email" class="dialog-input" formControlName="email" placeholder="Email" />
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
<small class="text-danger">Please enter a valid email</small>
}
<div class="field">
<label for="email" class="field-label">Email</label>
<input id="email" type="email" class="dialog-input" formControlName="email"
placeholder="you@domain.com" autocomplete="email" />
@if (registerForm.get('email')?.invalid && registerForm.get('email')?.touched) {
<small class="text-danger">Please enter a valid email</small>
}
</div>
<input id="password" type="password" class="dialog-input" formControlName="password" placeholder="Password" />
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
<small class="text-danger">Password must be at least 6 characters</small>
}
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
placeholder="Confirm Password" />
<div class="field-row">
<div class="field">
<label for="password" class="field-label">Password</label>
<input id="password" type="password" class="dialog-input" formControlName="password"
placeholder="••••••••" autocomplete="new-password" />
@if (registerForm.get('password')?.invalid && registerForm.get('password')?.touched) {
<small class="text-danger">Min 6 characters</small>
}
</div>
<div class="field">
<label for="confirmPassword" class="field-label">Confirm</label>
<input id="confirmPassword" type="password" class="dialog-input" formControlName="confirmPassword"
placeholder="••••••••" autocomplete="new-password" />
</div>
</div>
@if (errorMessage) {
<div class="error-banner">{{ errorMessage }}</div>
<div class="error-banner">{{ errorMessage }}</div>
}
<div class="dialog-actions">
<button type="button" class="app-btn" (click)="openLogin()">Already have an account?</button>
<button type="button" class="app-btn" (click)="closeDialog()">Cancel</button>
<button type="submit" class="app-btn" [disabled]="isLoading || registerForm.invalid">
<button type="button" class="btn btn-ghost" (click)="closeDialog()">Cancel</button>
<button type="submit" class="btn btn-primary" [disabled]="isLoading || registerForm.invalid">
@if (isLoading) {
<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
<span class="spinner" aria-hidden="true"></span>
}
Register
{{ isLoading ? 'Creating…' : 'Create account' }}
</button>
</div>
<div class="alt-line">
Already have an account?<a (click)="openLogin()">Sign in</a>
</div>
</form>
</div>
</div>
</div>