zik/PlayerManagement
1
0
Fork 0
mirror of https://github.com/TomasiDeveloping/PlayerManagement.git synced 2026-04-16 17:22:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

ng update @angular/core@20 @angular/cli@20

Browse Source
This commit is contained in:
Tomasi - Developing 2026-02-17 13:07:59 +01:00
parent 4d47336e2b
commit ef4c9d643a
10 changed files with 2806 additions and 8040 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
Ui/angular.json
View File

@ -21,7 +21,7 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"builder": "@angular/build:application",
"options": {
"outputPath": "dist/ui",
"index": "src/index.html",
@ -75,7 +75,7 @@
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "Ui:build:production"
@ -87,13 +87,13 @@
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"builder": "@angular/build:extract-i18n",
"options": {
"buildTarget": "Ui:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"builder": "@angular/build:karma",
"options": {
"polyfills": [
"zone.js",
@ -114,5 +114,31 @@
}
}
}
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
}
}

4
Ui/karma.conf.js
View File

@ -1,4 +1,4 @@
module.exports = function (config) {
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -7,7 +7,7 @@
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {

9938
Ui/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
Ui/package.json
View File

@ -10,14 +10,14 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^19.2.18",
"@angular/common": "^19.2.18",
"@angular/compiler": "^19.2.18",
"@angular/core": "^19.2.18",
"@angular/forms": "^19.2.18",
"@angular/platform-browser": "^19.2.18",
"@angular/platform-browser-dynamic": "^19.2.18",
"@angular/router": "^19.2.18",
"@angular/animations": "^20.3.16",
"@angular/common": "^20.3.16",
"@angular/compiler": "^20.3.16",
"@angular/core": "^20.3.16",
"@angular/forms": "^20.3.16",
"@angular/platform-browser": "^20.3.16",
"@angular/platform-browser-dynamic": "^20.3.16",
"@angular/router": "^20.3.16",
"@auth0/angular-jwt": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^17.0.1",
"@popperjs/core": "^2.11.8",
@ -39,10 +39,10 @@
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.2.20",
"@angular/cli": "^19.2.20",
"@angular/compiler-cli": "^19.2.18",
"@angular/localize": "^19.2.18",
"@angular/build": "^20.3.16",
"@angular/cli": "^20.3.16",
"@angular/compiler-cli": "^20.3.16",
"@angular/localize": "^20.3.16",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.3.0",
"karma": "~6.4.0",
@ -50,6 +50,6 @@
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.5.4"
"typescript": "~5.9.3"
}
}

152
Ui/src/app/Authentication/login/login.component.html
View File

@ -13,85 +13,87 @@
<i class="input-group-text bi bi-envelope-at-fill"></i>
<!-- Email input control with dynamic classes for validation feedback -->
<input [ngClass]="{'is-invalid': email?.invalid && (email?.dirty || !email?.untouched),'is-valid': email?.valid}"
class="form-control" formControlName="email" id="email" placeholder="Email Address" type="email">
<!-- Email validation messages -->
@if (email?.errors && (email?.dirty || !email?.untouched)) {
<div class="invalid-feedback">
@if (email?.hasError('required')) {
<p>Email address is required</p>
}
@if (email?.hasError('email')) {
<p>Please enter a valid email address</p>
class="form-control" formControlName="email" id="email" placeholder="Email Address" type="email">
<!-- Email validation messages -->
@if (email?.errors && (email?.dirty || !email?.untouched)) {
<div class="invalid-feedback">
@if (email?.hasError('required')) {
<p>Email address is required</p>
}
@if (email?.hasError('email')) {
<p>Please enter a valid email address</p>
}
</div>
}
</div>
</div>
<!-- Password input field with validation and toggle visibility -->
<div class="form-label-group">
<label class="form-label" for="password"></label>
<div class="input-group">
<!-- Password icon -->
<i class="input-group-text bi bi-key-fill"></i>
<!-- Password input control with dynamic classes for validation feedback and visibility toggle -->
<input
[ngClass]="{'is-invalid': password?.invalid && (password?.dirty || !password?.untouched),'is-valid': password?.valid}"
[type]="isPasswordType ? 'password' : 'text'" autocomplete="on" class="form-control"
formControlName="password" id="password" placeholder="Password">
<!-- Eye icon to toggle password visibility -->
<i (click)="isPasswordType = !isPasswordType"
[ngClass]="isPasswordType ? 'bi bi-eye-fill' : 'bi-eye-slash-fill'" class="input-group-text eye-icon bi">
</i>
<!-- Password validation messages -->
@if (password?.errors && (password?.dirty || !password?.untouched)) {
<div class="invalid-feedback">
@if (password?.hasError('required')) {
<p>Password is required</p>
}
</div>
}
</div>
}
</div>
</div>
</div>
<!-- Password input field with validation and toggle visibility -->
<div class="form-label-group">
<label class="form-label" for="password"></label>
<div class="input-group">
<!-- Password icon -->
<i class="input-group-text bi bi-key-fill"></i>
<!-- Password input control with dynamic classes for validation feedback and visibility toggle -->
<input
[ngClass]="{'is-invalid': password?.invalid && (password?.dirty || !password?.untouched),'is-valid': password?.valid}"
[type]="isPasswordType ? 'password' : 'text'" autocomplete="on" class="form-control"
formControlName="password" id="password" placeholder="Password">
<!-- Eye icon to toggle password visibility -->
<i (click)="isPasswordType = !isPasswordType"
[ngClass]="isPasswordType ? 'bi bi-eye-fill' : 'bi-eye-slash-fill'" class="input-group-text eye-icon bi">
</i>
<!-- Password validation messages -->
@if (password?.errors && (password?.dirty || !password?.untouched)) {
<div class="invalid-feedback">
@if (password?.hasError('required')) {
<p>Password is required</p>
}
<!-- Forgot password link -->
<div class="mt-3">
<div class="text-center">
<p (click)="onForgotPassword()" class="custom-link">Forgot your password?</p>
</div>
}
</div>
<div class="mt-3">
<div class="text-center">
<p (click)="onSignUp()" class="custom-link">Don’t have an account? Sign up</p>
</div>
</div>
<!-- Login button, disabled if form is invalid -->
<button [disabled]="loginForm.invalid" class="btn" type="submit">
<i class="bi bi-box-arrow-in-right"></i> Log In
</button>
<!-- Documentation link -->
<div class="mt-3 text-center">
<a href="../../../assets/docs/player-manager-doc-en.pdf" target="_blank" class="custom-link text-info text-decoration-none">
📘 View Documentation
</a>
</div>
</form>
</div>
@if (allianceCount !== null) {
<div class="alliance-counter">
<span>Currently </span>
<span class="count">
<span [countUp]="allianceCount"></span>
</span>
<span> alliances use the tool</span>
</div>
</div>
}
</div>
<!-- Forgot password link -->
<div class="mt-3">
<div class="text-center">
<p (click)="onForgotPassword()" class="custom-link">Forgot your password?</p>
</div>
</div>
<div class="mt-3">
<div class="text-center">
<p (click)="onSignUp()" class="custom-link">Don’t have an account? Sign up</p>
</div>
</div>
<!-- Login button, disabled if form is invalid -->
<button [disabled]="loginForm.invalid" class="btn" type="submit">
<i class="bi bi-box-arrow-in-right"></i> Log In
</button>
<!-- Documentation link -->
<div class="mt-3 text-center">
<a href="../../../assets/docs/player-manager-doc-en.pdf" target="_blank" class="custom-link text-info text-decoration-none">
📘 View Documentation
</a>
</div>
</form>
<footer class="footer d-flex flex-wrap justify-content-center justify-content-md-between align-items-center px-3 py-3 mt-auto shadow-sm gap-2 small text-center">
<span (click)="onCompany()" style="cursor: pointer">&copy; {{currentYear}} Tomasi-Developing</span>
<span>Version: <span (click)="onVersion()" class="text-info" style="cursor: pointer">{{version}}</span></span>
<span><a routerLink="/imprint" class="text-info text-decoration-none">Legal Notice / Privacy</a></span>
</footer>
</div>
<div class="alliance-counter" *ngIf="allianceCount !== null">
<span>Currently </span>
<span class="count">
<span [countUp]="allianceCount"></span>
</span>
<span> alliances use the tool</span>
</div>
</div>
<footer class="footer d-flex flex-wrap justify-content-center justify-content-md-between align-items-center px-3 py-3 mt-auto shadow-sm gap-2 small text-center">
<span (click)="onCompany()" style="cursor: pointer">&copy; {{currentYear}} Tomasi-Developing</span>
<span>Version: <span (click)="onVersion()" class="text-info" style="cursor: pointer">{{version}}</span></span>
<span><a routerLink="/imprint" class="text-info text-decoration-none">Legal Notice / Privacy</a></span>
</footer>
</div>

198
Ui/src/app/Authentication/register/register.component.html
View File

@ -44,106 +44,118 @@
<input [ngClass]="{
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
'is-valid': f['playerName'].valid}"
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
<label for="playerName">Player Name</label>
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
<div class="invalid-feedback">
@if (f['playerName'].hasError('required')) {
<p>Player name is required</p>
}
</div>
}
</div>
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
<label for="playerName">Player Name</label>
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
<div class="invalid-feedback">
@if (f['playerName'].hasError('required')) {
<p>Player name is required</p>
}
</div>
}
</div>
<div class="form-floating mb-3 is-invalid">
<div class="form-floating mb-3 is-invalid">
<input [ngClass]="{
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
'is-valid': f['email'].valid}"
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
<label for="email">Email</label>
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
<div class="invalid-feedback">
@if (f['email'].hasError('required')) {
<p>Email is required</p>
}
@if (f['email'].hasError('email')) {
<p>Invalid email address</p>
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
<label for="email">Email</label>
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
<div class="invalid-feedback">
@if (f['email'].hasError('required')) {
<p>Email is required</p>
}
@if (f['email'].hasError('email')) {
<p>Invalid email address</p>
}
</div>
}
</div>
}
</div>
<div class="input-group has-validation mb-3">
<div class="form-floating is-invalid">
<!-- Password Input -->
<input
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
formControlName="password"
id="password" placeholder="password">
<!-- Email Label -->
<label for="password">Password</label>
</div>
<!-- Password Icon -->
<span class="input-group-text">
<div class="input-group has-validation mb-3">
<div class="form-floating is-invalid">
<!-- Password Input -->
<input
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
formControlName="password"
id="password" placeholder="password">
<!-- Email Label -->
<label for="password">Password</label>
</div>
<!-- Password Icon -->
<span class="input-group-text">
<i (click)="isInputText = !isInputText"
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
class="input-group-text eye-icon bi"></i>
</span>
<!-- Password Invalid Feedback -->
<div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
class="invalid-feedback">
<p *ngIf="f['password'].hasError('required')">Password is required</p>
<div *ngIf="!f['password'].hasError('required')">
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a number
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
class="input-group-text eye-icon bi"></i>
</span>
<!-- Password Invalid Feedback -->
@if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
<div
class="invalid-feedback">
@if (f['password'].hasError('required')) {
<p>Password is required</p>
}
@if (!f['password'].hasError('required')) {
<div>
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a number
</div>
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Minimum length required
</div>
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a capital letter
</div>
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a lowercase letter
</div>
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain special characters
</div>
</div>
}
</div>
}
</div>
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Minimum length required
</div>
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a capital letter
</div>
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain a lowercase letter
</div>
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain special characters
</div>
</div>
<div class="form-floating is-invalid mb-3">
<!-- Confirm Password Input -->
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
type="password" autocomplete="on" class="form-control"
formControlName="confirmPassword"
id="confirmPassword" placeholder="confirmPassword">
<!-- Confirm Password Label -->
<label for="confirmPassword">Confirm Password</label>
</div>
<!-- Confirm Password Invalid Feedback -->
@if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
<div
class="invalid-feedback">
@if (f['confirmPassword'].hasError('required')) {
<p>Confirmation is required</p>
}
@if (f['confirmPassword'].hasError('passwordMismatch')) {
<p
>Passwords do not match</p>
}
</div>
}
<div class="d-grid gap-2 col-6 mx-auto">
<button [disabled]="registerForm.invalid" type="submit" class="btn btn-success">Register</button>
</div>
</form>
}
</div>
</div>
<div class="form-floating is-invalid mb-3">
<!-- Confirm Password Input -->
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
type="password" autocomplete="on" class="form-control"
formControlName="confirmPassword"
id="confirmPassword" placeholder="confirmPassword">
<!-- Confirm Password Label -->
<label for="confirmPassword">Confirm Password</label>
</div>
<!-- Confirm Password Invalid Feedback -->
<div *ngIf="f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )"
class="invalid-feedback">
<p *ngIf="f['confirmPassword'].hasError('required')">Confirmation is required</p>
<p
*ngIf="f['confirmPassword'].hasError('passwordMismatch')">Passwords do not match</p>
</div>
<div class="d-grid gap-2 col-6 mx-auto">
<button [disabled]="registerForm.invalid" type="submit" class="btn btn-success">Register</button>
</div>
</form>
}
</div>

130
Ui/src/app/Authentication/reset-password/reset-password.component.html
View File

@ -41,67 +41,79 @@
@if(resetPasswordForm && (!showError && !isSuccess)) {
<div class="form-container">
<form (ngSubmit)="onSubmit()" [formGroup]="resetPasswordForm">
<!-- New Password Input -->
<div class="form-group">
<label class="form-label" for="password">New Password</label>
<div class="input-group">
<input [ngClass]="{ 'is-invalid': password?.invalid && (password?.dirty || !password?.untouched), 'is-valid': password?.valid}"
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="password" id="password">
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
</span>
<div *ngIf="password?.hasError && (password?.dirty || !password?.untouched)" class="invalid-feedback">
<p *ngIf="password?.hasError('required')">Password is required</p>
<div *ngIf="!password?.hasError('required')">
<div [ngClass]="password?.hasError('hasNumber') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must have at least 1 number!
</div>
<!-- Additional password complexity checks -->
<div [ngClass]="password?.hasError('minlength') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must be at least 8 characters long!
</div>
<div [ngClass]="password?.hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 in capital letters!
</div>
<div [ngClass]="password?.hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 lowercase letter!
</div>
<div [ngClass]="password?.hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 special character!
</div>
<form (ngSubmit)="onSubmit()" [formGroup]="resetPasswordForm">
<!-- New Password Input -->
<div class="form-group">
<label class="form-label" for="password">New Password</label>
<div class="input-group">
<input [ngClass]="{ 'is-invalid': password?.invalid && (password?.dirty || !password?.untouched), 'is-valid': password?.valid}"
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="password" id="password">
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
</span>
@if (password?.hasError && (password?.dirty || !password?.untouched)) {
<div class="invalid-feedback">
@if (password?.hasError('required')) {
<p>Password is required</p>
}
@if (!password?.hasError('required')) {
<div>
<div [ngClass]="password?.hasError('hasNumber') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must have at least 1 number!
</div>
<!-- Additional password complexity checks -->
<div [ngClass]="password?.hasError('minlength') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must be at least 8 characters long!
</div>
<div [ngClass]="password?.hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 in capital letters!
</div>
<div [ngClass]="password?.hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 lowercase letter!
</div>
<div [ngClass]="password?.hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i [ngClass]="password?.hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Must contain at least 1 special character!
</div>
</div>
}
</div>
}
</div>
</div>
</div>
</div>
<!-- Confirm Password Input -->
<div class="form-group">
<label class="form-label" for="confirmPassword">Confirm Password</label>
<div class="input-group">
<input [ngClass]="{'is-invalid': confirmPassword?.invalid && (confirmPassword?.dirty || !confirmPassword?.untouched), 'is-valid': confirmPassword?.valid}"
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="confirmPassword" id="confirmPassword">
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
</span>
<div *ngIf="confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)" class="invalid-feedback">
<p *ngIf="confirmPassword?.hasError('required')">Repeat password is required</p>
<p *ngIf="confirmPassword?.hasError('passwordMismatch')">Passwords do not match</p>
</div>
</div>
</div>
<!-- Confirm Password Input -->
<div class="form-group">
<label class="form-label" for="confirmPassword">Confirm Password</label>
<div class="input-group">
<input [ngClass]="{'is-invalid': confirmPassword?.invalid && (confirmPassword?.dirty || !confirmPassword?.untouched), 'is-valid': confirmPassword?.valid}"
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="confirmPassword" id="confirmPassword">
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
</span>
@if (confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)) {
<div class="invalid-feedback">
@if (confirmPassword?.hasError('required')) {
<p>Repeat password is required</p>
}
@if (confirmPassword?.hasError('passwordMismatch')) {
<p>Passwords do not match</p>
}
</div>
}
</div>
</div>
<!-- Submit Button -->
<div class="mt-5 d-grid gap-2 col-6 mx-auto">
<button [disabled]="resetPasswordForm.invalid" class="btn btn-success" type="submit">Submit</button>
</div>
</form>
</div>
}
<!-- Submit Button -->
<div class="mt-5 d-grid gap-2 col-6 mx-auto">
<button [disabled]="resetPasswordForm.invalid" class="btn btn-success" type="submit">Submit</button>
</div>
</form>
</div>
}
</div>

304
Ui/src/app/Authentication/sign-up/sign-up.component.html
View File

@ -6,171 +6,183 @@
<input [ngClass]="{
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
'is-valid': f['playerName'].valid}"
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
<label for="playerName">Player name</label>
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
<div class="invalid-feedback">
@if (f['playerName'].hasError('required')) {
<p>Player name is required</p>
}
</div>
}
</div>
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
<label for="playerName">Player name</label>
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
<div class="invalid-feedback">
@if (f['playerName'].hasError('required')) {
<p>Player name is required</p>
}
</div>
}
</div>
<div class="form-floating mb-3 is-invalid">
<div class="form-floating mb-3 is-invalid">
<input [ngClass]="{
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
'is-valid': f['email'].valid}"
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
<label for="email">Email</label>
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
<div class="invalid-feedback">
@if (f['email'].hasError('required')) {
<p>Email is required</p>
}
@if (f['email'].hasError('email')) {
<p>Invalid email format</p>
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
<label for="email">Email</label>
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
<div class="invalid-feedback">
@if (f['email'].hasError('required')) {
<p>Email is required</p>
}
@if (f['email'].hasError('email')) {
<p>Invalid email format</p>
}
</div>
}
</div>
}
</div>
<div class="form-floating mb-3 is-invalid">
<div class="form-floating mb-3 is-invalid">
<input [ngClass]="{
'is-invalid': f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched),
'is-valid': f['allianceServer'].valid}"
type="number" class="form-control" id="allianceServer" placeholder="allianceServer" formControlName="allianceServer">
<label for="allianceServer">Server</label>
@if (f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceServer'].hasError('required')) {
<p>Server is required</p>
}
</div>
}
</div>
type="number" class="form-control" id="allianceServer" placeholder="allianceServer" formControlName="allianceServer">
<label for="allianceServer">Server</label>
@if (f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceServer'].hasError('required')) {
<p>Server is required</p>
}
</div>
}
</div>
<div class="form-floating mb-3 is-invalid">
<div class="form-floating mb-3 is-invalid">
<input [ngClass]="{
'is-invalid': f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched),
'is-valid': f['allianceName'].valid}"
type="text" class="form-control" id="allianceName" placeholder="allianceName" formControlName="allianceName">
<label for="allianceName">Alliance name</label>
@if (f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceName'].hasError('required')) {
<p>Alliance name is required</p>
}
</div>
}
</div>
type="text" class="form-control" id="allianceName" placeholder="allianceName" formControlName="allianceName">
<label for="allianceName">Alliance name</label>
@if (f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceName'].hasError('required')) {
<p>Alliance name is required</p>
}
</div>
}
</div>
<div class="form-floating mb-3 is-invalid">
<div class="form-floating mb-3 is-invalid">
<input [ngClass]="{
'is-invalid': f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched),
'is-valid': f['allianceAbbreviation'].valid}"
type="text" class="form-control" id="allianceAbbreviation" placeholder="allianceAbbreviation" formControlName="allianceAbbreviation">
<label for="allianceAbbreviation">Alliance abbreviation</label>
@if (f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceAbbreviation'].hasError('required')) {
<p>Alliance abbreviation is required</p>
}
</div>
}
</div>
type="text" class="form-control" id="allianceAbbreviation" placeholder="allianceAbbreviation" formControlName="allianceAbbreviation">
<label for="allianceAbbreviation">Alliance abbreviation</label>
@if (f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched)) {
<div class="invalid-feedback">
@if (f['allianceAbbreviation'].hasError('required')) {
<p>Alliance abbreviation is required</p>
}
</div>
}
</div>
<div class="input-group has-validation mb-3">
<div class="form-floating is-invalid">
<!-- Password Input -->
<input
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
formControlName="password"
id="password" placeholder="password">
<!-- Email Label -->
<label for="password">Password</label>
</div>
<!-- Password Icon -->
<span class="input-group-text">
<i (click)="isInputText = !isInputText"
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
class="input-group-text eye-icon bi"></i>
</span>
<!-- Password Invalid Feedback -->
<div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
class="invalid-feedback">
<p *ngIf="f['password'].hasError('required')">Required</p>
<div *ngIf="!f['password'].hasError('required')">
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Number
</div>
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Min length
</div>
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
capital
</div>
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
lower case
</div>
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
special
</div>
</div>
</div>
</div>
<div class="input-group has-validation mb-3">
<div class="form-floating is-invalid">
<!-- Password Input -->
<input
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
formControlName="password"
id="password" placeholder="password">
<!-- Email Label -->
<label for="password">Password</label>
</div>
<!-- Password Icon -->
<span class="input-group-text">
<i (click)="isInputText = !isInputText"
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
class="input-group-text eye-icon bi"></i>
</span>
<!-- Password Invalid Feedback -->
@if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
<div
class="invalid-feedback">
@if (f['password'].hasError('required')) {
<p>Required</p>
}
@if (!f['password'].hasError('required')) {
<div>
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Number
</div>
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
Min length
</div>
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
capital
</div>
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
lower case
</div>
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
<i
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
special
</div>
</div>
}
</div>
}
</div>
<div class="form-floating is-invalid mb-3">
<!-- Confirm Password Input -->
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
type="password" autocomplete="on" class="form-control"
formControlName="confirmPassword"
id="confirmPassword" placeholder="confirmPassword">
<!-- Confirm Password Label -->
<label for="confirmPassword">Confirm Password</label>
</div>
<!-- Confirm Password Invalid Feedback -->
<div *ngIf="f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )"
class="invalid-feedback">
<p *ngIf="f['confirmPassword'].hasError('required')">Confirmation password is required</p>
<p
*ngIf="f['confirmPassword'].hasError('passwordMismatch')">Passwords do not match</p>
</div>
<div class="form-floating is-invalid mb-3">
<!-- Confirm Password Input -->
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
type="password" autocomplete="on" class="form-control"
formControlName="confirmPassword"
id="confirmPassword" placeholder="confirmPassword">
<!-- Confirm Password Label -->
<label for="confirmPassword">Confirm Password</label>
</div>
<!-- Confirm Password Invalid Feedback -->
@if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
<div
class="invalid-feedback">
@if (f['confirmPassword'].hasError('required')) {
<p>Confirmation password is required</p>
}
@if (f['confirmPassword'].hasError('passwordMismatch')) {
<p
>Passwords do not match</p>
}
</div>
}
<div class="d-flex justify-content-between">
<button type="button" (click)="onCancel()" class="btn btn-warning">Cancel</button>
<button [disabled]="signUpForm.invalid" type="submit" class="btn btn-success">Sign Up</button>
</div>
</form>
} @else {
<div class="card border-success mt-5">
<div class="card-header text-center">
Alliance Successfully Registered!
</div>
<div class="card-body text-success">
<h5 class="card-title">Welcome, {{ playerName }}!</h5>
<p class="card-text">
Your alliance <strong>{{ allianceName }}</strong> has been successfully registered.
</p>
<p class="card-text">
A confirmation email has been sent to the email address you provided. Please check your inbox and confirm the email to complete the registration.
</p>
<p class="card-text">
If you can't find the email in your inbox, please also check your spam folder.
</p>
</div>
</div>
}
</div>
<div class="d-flex justify-content-between">
<button type="button" (click)="onCancel()" class="btn btn-warning">Cancel</button>
<button [disabled]="signUpForm.invalid" type="submit" class="btn btn-success">Sign Up</button>
</div>
</form>
} @else {
<div class="card border-success mt-5">
<div class="card-header text-center">
Alliance Successfully Registered!
</div>
<div class="card-body text-success">
<h5 class="card-title">Welcome, {{ playerName }}!</h5>
<p class="card-text">
Your alliance <strong>{{ allianceName }}</strong> has been successfully registered.
</p>
<p class="card-text">
A confirmation email has been sent to the email address you provided. Please check your inbox and confirm the email to complete the registration.
</p>
<p class="card-text">
If you can't find the email in your inbox, please also check your spam folder.
</p>
</div>
</div>
}
</div>

56
Ui/src/app/navigation/navigation.component.html
View File

@ -10,8 +10,8 @@
<!-- Toggle button for collapsed navigation on smaller screens -->
<button (click)="isShown = !isShown" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse"
type="button">
class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
@ -67,9 +67,9 @@
<li class="nav-item">
<a href="https://ko-fi.com/C0C11EVSE0"
target="_blank"
rel="noopener noreferrer"
class="kofi-custom-button">
target="_blank"
rel="noopener noreferrer"
class="kofi-custom-button">
<img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi" />
<span>Donate</span>
</a>
@ -78,33 +78,37 @@
</ul>
<!-- User menu (visible only when user is logged in) -->
<div *ngIf="loggedInUser" class="login">
<ul class="navbar-nav me-auto">
<li ngbDropdown display="dynamic" class="nav-item" role="presentation">
<button type="button" class="nav-link" ngbDropdownToggle>
<i class="bi bi-person-circle"></i>
{{loggedInUser.userName}}
</button>
<div ngbDropdownMenu>
<button (click)="isShown = false" routerLink="/account" ngbDropdownItem>Account</button>
<button (click)="isShown = false" routerLink="/change-password" ngbDropdownItem>Change password</button>
<button (click)="isShown = false" routerLink="/feedback" ngbDropdownItem>Submit Feedback</button>
<div class="dropdown-divider"></div>
<button (click)="onLogout()" ngbDropdownItem>Logout</button>
</div>
</li>
</ul>
</div>
@if (loggedInUser) {
<div class="login">
<ul class="navbar-nav me-auto">
<li ngbDropdown display="dynamic" class="nav-item" role="presentation">
<button type="button" class="nav-link" ngbDropdownToggle>
<i class="bi bi-person-circle"></i>
{{loggedInUser.userName}}
</button>
<div ngbDropdownMenu>
<button (click)="isShown = false" routerLink="/account" ngbDropdownItem>Account</button>
<button (click)="isShown = false" routerLink="/change-password" ngbDropdownItem>Change password</button>
<button (click)="isShown = false" routerLink="/feedback" ngbDropdownItem>Submit Feedback</button>
<div class="dropdown-divider"></div>
<button (click)="onLogout()" ngbDropdownItem>Logout</button>
</div>
</li>
</ul>
</div>
}
<!-- Login button (visible only when user is not logged in) -->
<div *ngIf="!loggedInUser" class="d-flex login" routerLink="/login">
<button (click)="isShown = false" class="btn btn-secondary" routerLink="/login"><i
@if (!loggedInUser) {
<div class="d-flex login" routerLink="/login">
<button (click)="isShown = false" class="btn btn-secondary" routerLink="/login"><i
class="bi bi-box-arrow-right"></i> Login
</button>
</div>
</div>
}
</div>
</nav>
</div>
</nav>
}

2
Ui/tsconfig.json
View File

@ -14,7 +14,7 @@
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",