mirror of
https://github.com/TomasiDeveloping/PlayerManagement.git
synced 2026-04-16 17:22:21 +00:00
ng update @angular/core@20 @angular/cli@20
This commit is contained in:
Tomasi - Developing
parent
4d47336e2b
commit
ef4c9d643a
@ -21,7 +21,7 @@
|
|||||||
"prefix": "app",
|
"prefix": "app",
|
||||||
"architect": {
|
"architect": {
|
||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-angular:application",
|
"builder": "@angular/build:application",
|
||||||
"options": {
|
"options": {
|
||||||
"outputPath": "dist/ui",
|
"outputPath": "dist/ui",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
@ -75,7 +75,7 @@
|
|||||||
"defaultConfiguration": "production"
|
"defaultConfiguration": "production"
|
||||||
},
|
},
|
||||||
"serve": {
|
"serve": {
|
||||||
"builder": "@angular-devkit/build-angular:dev-server",
|
"builder": "@angular/build:dev-server",
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"buildTarget": "Ui:build:production"
|
"buildTarget": "Ui:build:production"
|
||||||
@ -87,13 +87,13 @@
|
|||||||
"defaultConfiguration": "development"
|
"defaultConfiguration": "development"
|
||||||
},
|
},
|
||||||
"extract-i18n": {
|
"extract-i18n": {
|
||||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
"builder": "@angular/build:extract-i18n",
|
||||||
"options": {
|
"options": {
|
||||||
"buildTarget": "Ui:build"
|
"buildTarget": "Ui:build"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"test": {
|
"test": {
|
||||||
"builder": "@angular-devkit/build-angular:karma",
|
"builder": "@angular/build:karma",
|
||||||
"options": {
|
"options": {
|
||||||
"polyfills": [
|
"polyfills": [
|
||||||
"zone.js",
|
"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": "."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
module.exports = function (config) {
|
module.exports = function (config) {
|
||||||
config.set({
|
config.set({
|
||||||
basePath: '',
|
basePath: '',
|
||||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||||
@ -7,7 +7,7 @@
|
|||||||
require('karma-chrome-launcher'),
|
require('karma-chrome-launcher'),
|
||||||
require('karma-jasmine-html-reporter'),
|
require('karma-jasmine-html-reporter'),
|
||||||
require('karma-coverage'),
|
require('karma-coverage'),
|
||||||
require('@angular-devkit/build-angular/plugins/karma')
|
|
||||||
],
|
],
|
||||||
client: {
|
client: {
|
||||||
jasmine: {
|
jasmine: {
|
||||||
|
|||||||
9938
Ui/package-lock.json
generated
9938
Ui/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,14 +10,14 @@
|
|||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^19.2.18",
|
"@angular/animations": "^20.3.16",
|
||||||
"@angular/common": "^19.2.18",
|
"@angular/common": "^20.3.16",
|
||||||
"@angular/compiler": "^19.2.18",
|
"@angular/compiler": "^20.3.16",
|
||||||
"@angular/core": "^19.2.18",
|
"@angular/core": "^20.3.16",
|
||||||
"@angular/forms": "^19.2.18",
|
"@angular/forms": "^20.3.16",
|
||||||
"@angular/platform-browser": "^19.2.18",
|
"@angular/platform-browser": "^20.3.16",
|
||||||
"@angular/platform-browser-dynamic": "^19.2.18",
|
"@angular/platform-browser-dynamic": "^20.3.16",
|
||||||
"@angular/router": "^19.2.18",
|
"@angular/router": "^20.3.16",
|
||||||
"@auth0/angular-jwt": "^5.2.0",
|
"@auth0/angular-jwt": "^5.2.0",
|
||||||
"@ng-bootstrap/ng-bootstrap": "^17.0.1",
|
"@ng-bootstrap/ng-bootstrap": "^17.0.1",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
@ -39,10 +39,10 @@
|
|||||||
"zone.js": "~0.15.1"
|
"zone.js": "~0.15.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^19.2.20",
|
"@angular/build": "^20.3.16",
|
||||||
"@angular/cli": "^19.2.20",
|
"@angular/cli": "^20.3.16",
|
||||||
"@angular/compiler-cli": "^19.2.18",
|
"@angular/compiler-cli": "^20.3.16",
|
||||||
"@angular/localize": "^19.2.18",
|
"@angular/localize": "^20.3.16",
|
||||||
"@types/jasmine": "~5.1.0",
|
"@types/jasmine": "~5.1.0",
|
||||||
"jasmine-core": "~5.3.0",
|
"jasmine-core": "~5.3.0",
|
||||||
"karma": "~6.4.0",
|
"karma": "~6.4.0",
|
||||||
@ -50,6 +50,6 @@
|
|||||||
"karma-coverage": "~2.2.0",
|
"karma-coverage": "~2.2.0",
|
||||||
"karma-jasmine": "~5.1.0",
|
"karma-jasmine": "~5.1.0",
|
||||||
"karma-jasmine-html-reporter": "~2.1.0",
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
"typescript": "~5.5.4"
|
"typescript": "~5.9.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -13,85 +13,87 @@
|
|||||||
<i class="input-group-text bi bi-envelope-at-fill"></i>
|
<i class="input-group-text bi bi-envelope-at-fill"></i>
|
||||||
<!-- Email input control with dynamic classes for validation feedback -->
|
<!-- Email input control with dynamic classes for validation feedback -->
|
||||||
<input [ngClass]="{'is-invalid': email?.invalid && (email?.dirty || !email?.untouched),'is-valid': email?.valid}"
|
<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">
|
class="form-control" formControlName="email" id="email" placeholder="Email Address" type="email">
|
||||||
<!-- Email validation messages -->
|
<!-- Email validation messages -->
|
||||||
@if (email?.errors && (email?.dirty || !email?.untouched)) {
|
@if (email?.errors && (email?.dirty || !email?.untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (email?.hasError('required')) {
|
@if (email?.hasError('required')) {
|
||||||
<p>Email address is required</p>
|
<p>Email address is required</p>
|
||||||
}
|
}
|
||||||
@if (email?.hasError('email')) {
|
@if (email?.hasError('email')) {
|
||||||
<p>Please enter a valid email address</p>
|
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Password input field with validation and toggle visibility -->
|
<!-- Forgot password link -->
|
||||||
<div class="form-label-group">
|
<div class="mt-3">
|
||||||
<label class="form-label" for="password"></label>
|
<div class="text-center">
|
||||||
<div class="input-group">
|
<p (click)="onForgotPassword()" class="custom-link">Forgot your password?</p>
|
||||||
<!-- 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 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>
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Forgot password link -->
|
<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">
|
||||||
<div class="mt-3">
|
<span (click)="onCompany()" style="cursor: pointer">© {{currentYear}} Tomasi-Developing</span>
|
||||||
<div class="text-center">
|
<span>Version: <span (click)="onVersion()" class="text-info" style="cursor: pointer">{{version}}</span></span>
|
||||||
<p (click)="onForgotPassword()" class="custom-link">Forgot your password?</p>
|
<span><a routerLink="/imprint" class="text-info text-decoration-none">Legal Notice / Privacy</a></span>
|
||||||
</div>
|
</footer>
|
||||||
</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>
|
</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">© {{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>
|
|
||||||
|
|||||||
@ -44,106 +44,118 @@
|
|||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
|
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
|
||||||
'is-valid': f['playerName'].valid}"
|
'is-valid': f['playerName'].valid}"
|
||||||
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
|
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
|
||||||
<label for="playerName">Player Name</label>
|
<label for="playerName">Player Name</label>
|
||||||
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
|
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['playerName'].hasError('required')) {
|
@if (f['playerName'].hasError('required')) {
|
||||||
<p>Player name is required</p>
|
<p>Player name is required</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-floating mb-3 is-invalid">
|
<div class="form-floating mb-3 is-invalid">
|
||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
|
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
|
||||||
'is-valid': f['email'].valid}"
|
'is-valid': f['email'].valid}"
|
||||||
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
|
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
|
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['email'].hasError('required')) {
|
@if (f['email'].hasError('required')) {
|
||||||
<p>Email is required</p>
|
<p>Email is required</p>
|
||||||
}
|
}
|
||||||
@if (f['email'].hasError('email')) {
|
@if (f['email'].hasError('email')) {
|
||||||
<p>Invalid email address</p>
|
<p>Invalid email address</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="input-group has-validation mb-3">
|
<div class="input-group has-validation mb-3">
|
||||||
<div class="form-floating is-invalid">
|
<div class="form-floating is-invalid">
|
||||||
<!-- Password Input -->
|
<!-- Password Input -->
|
||||||
<input
|
<input
|
||||||
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
|
[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"
|
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
|
||||||
formControlName="password"
|
formControlName="password"
|
||||||
id="password" placeholder="password">
|
id="password" placeholder="password">
|
||||||
<!-- Email Label -->
|
<!-- Email Label -->
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- Password Icon -->
|
<!-- Password Icon -->
|
||||||
<span class="input-group-text">
|
<span class="input-group-text">
|
||||||
<i (click)="isInputText = !isInputText"
|
<i (click)="isInputText = !isInputText"
|
||||||
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
|
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
|
||||||
class="input-group-text eye-icon bi"></i>
|
class="input-group-text eye-icon bi"></i>
|
||||||
</span>
|
</span>
|
||||||
<!-- Password Invalid Feedback -->
|
<!-- Password Invalid Feedback -->
|
||||||
<div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
|
@if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
|
||||||
class="invalid-feedback">
|
<div
|
||||||
<p *ngIf="f['password'].hasError('required')">Password is required</p>
|
class="invalid-feedback">
|
||||||
<div *ngIf="!f['password'].hasError('required')">
|
@if (f['password'].hasError('required')) {
|
||||||
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
|
<p>Password is required</p>
|
||||||
<i
|
}
|
||||||
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
@if (!f['password'].hasError('required')) {
|
||||||
Must contain a number
|
<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>
|
||||||
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
|
|
||||||
<i
|
<div class="form-floating is-invalid mb-3">
|
||||||
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<!-- Confirm Password Input -->
|
||||||
Minimum length required
|
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
|
||||||
</div>
|
type="password" autocomplete="on" class="form-control"
|
||||||
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
|
formControlName="confirmPassword"
|
||||||
<i
|
id="confirmPassword" placeholder="confirmPassword">
|
||||||
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<!-- Confirm Password Label -->
|
||||||
Must contain a capital letter
|
<label for="confirmPassword">Confirm Password</label>
|
||||||
</div>
|
</div>
|
||||||
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
|
<!-- Confirm Password Invalid Feedback -->
|
||||||
<i
|
@if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
|
||||||
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<div
|
||||||
Must contain a lowercase letter
|
class="invalid-feedback">
|
||||||
</div>
|
@if (f['confirmPassword'].hasError('required')) {
|
||||||
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
|
<p>Confirmation is required</p>
|
||||||
<i
|
}
|
||||||
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
@if (f['confirmPassword'].hasError('passwordMismatch')) {
|
||||||
Must contain special characters
|
<p
|
||||||
</div>
|
>Passwords do not match</p>
|
||||||
</div>
|
}
|
||||||
|
</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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|||||||
@ -41,67 +41,79 @@
|
|||||||
|
|
||||||
@if(resetPasswordForm && (!showError && !isSuccess)) {
|
@if(resetPasswordForm && (!showError && !isSuccess)) {
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<form (ngSubmit)="onSubmit()" [formGroup]="resetPasswordForm">
|
<form (ngSubmit)="onSubmit()" [formGroup]="resetPasswordForm">
|
||||||
<!-- New Password Input -->
|
<!-- New Password Input -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label" for="password">New Password</label>
|
<label class="form-label" for="password">New Password</label>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input [ngClass]="{ 'is-invalid': password?.invalid && (password?.dirty || !password?.untouched), 'is-valid': password?.valid}"
|
<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">
|
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="password" id="password">
|
||||||
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
|
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
|
||||||
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
|
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
|
||||||
</span>
|
</span>
|
||||||
<div *ngIf="password?.hasError && (password?.dirty || !password?.untouched)" class="invalid-feedback">
|
@if (password?.hasError && (password?.dirty || !password?.untouched)) {
|
||||||
<p *ngIf="password?.hasError('required')">Password is required</p>
|
<div class="invalid-feedback">
|
||||||
<div *ngIf="!password?.hasError('required')">
|
@if (password?.hasError('required')) {
|
||||||
<div [ngClass]="password?.hasError('hasNumber') ? 'text-danger': 'text-success'">
|
<p>Password is required</p>
|
||||||
<i [ngClass]="password?.hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
}
|
||||||
Must have at least 1 number!
|
@if (!password?.hasError('required')) {
|
||||||
</div>
|
<div>
|
||||||
<!-- Additional password complexity checks -->
|
<div [ngClass]="password?.hasError('hasNumber') ? 'text-danger': 'text-success'">
|
||||||
<div [ngClass]="password?.hasError('minlength') ? 'text-danger': 'text-success'">
|
<i [ngClass]="password?.hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
<i [ngClass]="password?.hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
Must have at least 1 number!
|
||||||
Must be at least 8 characters long!
|
</div>
|
||||||
</div>
|
<!-- Additional password complexity checks -->
|
||||||
<div [ngClass]="password?.hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
|
<div [ngClass]="password?.hasError('minlength') ? 'text-danger': 'text-success'">
|
||||||
<i [ngClass]="password?.hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<i [ngClass]="password?.hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
Must contain at least 1 in capital letters!
|
Must be at least 8 characters long!
|
||||||
</div>
|
</div>
|
||||||
<div [ngClass]="password?.hasError('hasSmallCase') ? 'text-danger': 'text-success'">
|
<div [ngClass]="password?.hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
|
||||||
<i [ngClass]="password?.hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<i [ngClass]="password?.hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
Must contain at least 1 lowercase letter!
|
Must contain at least 1 in capital letters!
|
||||||
</div>
|
</div>
|
||||||
<div [ngClass]="password?.hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
|
<div [ngClass]="password?.hasError('hasSmallCase') ? 'text-danger': 'text-success'">
|
||||||
<i [ngClass]="password?.hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
<i [ngClass]="password?.hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
Must contain at least 1 special character!
|
Must contain at least 1 lowercase letter!
|
||||||
</div>
|
</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>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Confirm Password Input -->
|
<!-- Confirm Password Input -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
<label class="form-label" for="confirmPassword">Confirm Password</label>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input [ngClass]="{'is-invalid': confirmPassword?.invalid && (confirmPassword?.dirty || !confirmPassword?.untouched), 'is-valid': confirmPassword?.valid}"
|
<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">
|
[type]="isInputText ? 'text' : 'password'" class="form-control" formControlName="confirmPassword" id="confirmPassword">
|
||||||
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
|
<span (click)="isInputText = !isInputText" class="input-group-text eye-icon">
|
||||||
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
|
<i [ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi-eye-fill'" class="bi"></i>
|
||||||
</span>
|
</span>
|
||||||
<div *ngIf="confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)" class="invalid-feedback">
|
@if (confirmPassword?.errors && (confirmPassword?.dirty || !confirmPassword?.untouched)) {
|
||||||
<p *ngIf="confirmPassword?.hasError('required')">Repeat password is required</p>
|
<div class="invalid-feedback">
|
||||||
<p *ngIf="confirmPassword?.hasError('passwordMismatch')">Passwords do not match</p>
|
@if (confirmPassword?.hasError('required')) {
|
||||||
</div>
|
<p>Repeat password is required</p>
|
||||||
</div>
|
}
|
||||||
</div>
|
@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>
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|||||||
@ -6,171 +6,183 @@
|
|||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
|
'is-invalid': f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched),
|
||||||
'is-valid': f['playerName'].valid}"
|
'is-valid': f['playerName'].valid}"
|
||||||
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
|
type="text" class="form-control" id="playerName" placeholder="Player" formControlName="playerName">
|
||||||
<label for="playerName">Player name</label>
|
<label for="playerName">Player name</label>
|
||||||
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
|
@if (f['playerName'].invalid && (f['playerName'].dirty || !f['playerName'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['playerName'].hasError('required')) {
|
@if (f['playerName'].hasError('required')) {
|
||||||
<p>Player name is required</p>
|
<p>Player name is required</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-floating mb-3 is-invalid">
|
<div class="form-floating mb-3 is-invalid">
|
||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
|
'is-invalid': f['email'].invalid && (f['email'].dirty || !f['email'].untouched),
|
||||||
'is-valid': f['email'].valid}"
|
'is-valid': f['email'].valid}"
|
||||||
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
|
type="email" class="form-control" id="email" placeholder="email" formControlName="email">
|
||||||
<label for="email">Email</label>
|
<label for="email">Email</label>
|
||||||
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
|
@if (f['email'].invalid && (f['email'].dirty || !f['email'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['email'].hasError('required')) {
|
@if (f['email'].hasError('required')) {
|
||||||
<p>Email is required</p>
|
<p>Email is required</p>
|
||||||
}
|
}
|
||||||
@if (f['email'].hasError('email')) {
|
@if (f['email'].hasError('email')) {
|
||||||
<p>Invalid email format</p>
|
<p>Invalid email format</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-floating mb-3 is-invalid">
|
<div class="form-floating mb-3 is-invalid">
|
||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched),
|
'is-invalid': f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched),
|
||||||
'is-valid': f['allianceServer'].valid}"
|
'is-valid': f['allianceServer'].valid}"
|
||||||
type="number" class="form-control" id="allianceServer" placeholder="allianceServer" formControlName="allianceServer">
|
type="number" class="form-control" id="allianceServer" placeholder="allianceServer" formControlName="allianceServer">
|
||||||
<label for="allianceServer">Server</label>
|
<label for="allianceServer">Server</label>
|
||||||
@if (f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched)) {
|
@if (f['allianceServer'].invalid && (f['allianceServer'].dirty || !f['allianceServer'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['allianceServer'].hasError('required')) {
|
@if (f['allianceServer'].hasError('required')) {
|
||||||
<p>Server is required</p>
|
<p>Server is required</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-floating mb-3 is-invalid">
|
<div class="form-floating mb-3 is-invalid">
|
||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched),
|
'is-invalid': f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched),
|
||||||
'is-valid': f['allianceName'].valid}"
|
'is-valid': f['allianceName'].valid}"
|
||||||
type="text" class="form-control" id="allianceName" placeholder="allianceName" formControlName="allianceName">
|
type="text" class="form-control" id="allianceName" placeholder="allianceName" formControlName="allianceName">
|
||||||
<label for="allianceName">Alliance name</label>
|
<label for="allianceName">Alliance name</label>
|
||||||
@if (f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched)) {
|
@if (f['allianceName'].invalid && (f['allianceName'].dirty || !f['allianceName'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['allianceName'].hasError('required')) {
|
@if (f['allianceName'].hasError('required')) {
|
||||||
<p>Alliance name is required</p>
|
<p>Alliance name is required</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-floating mb-3 is-invalid">
|
<div class="form-floating mb-3 is-invalid">
|
||||||
<input [ngClass]="{
|
<input [ngClass]="{
|
||||||
'is-invalid': f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched),
|
'is-invalid': f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched),
|
||||||
'is-valid': f['allianceAbbreviation'].valid}"
|
'is-valid': f['allianceAbbreviation'].valid}"
|
||||||
type="text" class="form-control" id="allianceAbbreviation" placeholder="allianceAbbreviation" formControlName="allianceAbbreviation">
|
type="text" class="form-control" id="allianceAbbreviation" placeholder="allianceAbbreviation" formControlName="allianceAbbreviation">
|
||||||
<label for="allianceAbbreviation">Alliance abbreviation</label>
|
<label for="allianceAbbreviation">Alliance abbreviation</label>
|
||||||
@if (f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched)) {
|
@if (f['allianceAbbreviation'].invalid && (f['allianceAbbreviation'].dirty || !f['allianceAbbreviation'].untouched)) {
|
||||||
<div class="invalid-feedback">
|
<div class="invalid-feedback">
|
||||||
@if (f['allianceAbbreviation'].hasError('required')) {
|
@if (f['allianceAbbreviation'].hasError('required')) {
|
||||||
<p>Alliance abbreviation is required</p>
|
<p>Alliance abbreviation is required</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group has-validation mb-3">
|
<div class="input-group has-validation mb-3">
|
||||||
<div class="form-floating is-invalid">
|
<div class="form-floating is-invalid">
|
||||||
<!-- Password Input -->
|
<!-- Password Input -->
|
||||||
<input
|
<input
|
||||||
[ngClass]="{'is-invalid': f['password'].invalid && (f['password'].dirty || !f['password'].untouched),'is-valid': f['password'].valid}"
|
[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"
|
[type]="isInputText ? 'text' : 'password'" autocomplete="on" class="form-control"
|
||||||
formControlName="password"
|
formControlName="password"
|
||||||
id="password" placeholder="password">
|
id="password" placeholder="password">
|
||||||
<!-- Email Label -->
|
<!-- Email Label -->
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- Password Icon -->
|
<!-- Password Icon -->
|
||||||
<span class="input-group-text">
|
<span class="input-group-text">
|
||||||
<i (click)="isInputText = !isInputText"
|
<i (click)="isInputText = !isInputText"
|
||||||
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
|
[ngClass]="isInputText ? 'bi-eye-slash-fill' : 'bi bi-eye-fill'"
|
||||||
class="input-group-text eye-icon bi"></i>
|
class="input-group-text eye-icon bi"></i>
|
||||||
</span>
|
</span>
|
||||||
<!-- Password Invalid Feedback -->
|
<!-- Password Invalid Feedback -->
|
||||||
<div *ngIf="f['password'].invalid && (f['password'].dirty || !f['password'].untouched )"
|
@if (f['password'].invalid && (f['password'].dirty || !f['password'].untouched )) {
|
||||||
class="invalid-feedback">
|
<div
|
||||||
<p *ngIf="f['password'].hasError('required')">Required</p>
|
class="invalid-feedback">
|
||||||
<div *ngIf="!f['password'].hasError('required')">
|
@if (f['password'].hasError('required')) {
|
||||||
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
|
<p>Required</p>
|
||||||
<i
|
}
|
||||||
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
@if (!f['password'].hasError('required')) {
|
||||||
Number
|
<div>
|
||||||
</div>
|
<div [ngClass]="f['password'].hasError('hasNumber') ? 'text-danger': 'text-success'">
|
||||||
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
|
<i
|
||||||
<i
|
[ngClass]="f['password'].hasError('hasNumber') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
Number
|
||||||
Min length
|
</div>
|
||||||
</div>
|
<div [ngClass]="f['password'].hasError('minlength') ? 'text-danger': 'text-success'">
|
||||||
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
|
<i
|
||||||
<i
|
[ngClass]="f['password'].hasError('minlength') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
Min length
|
||||||
capital
|
</div>
|
||||||
</div>
|
<div [ngClass]="f['password'].hasError('hasCapitalCase') ? 'text-danger': 'text-success'">
|
||||||
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
|
<i
|
||||||
<i
|
[ngClass]="f['password'].hasError('hasCapitalCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
capital
|
||||||
lower case
|
</div>
|
||||||
</div>
|
<div [ngClass]="f['password'].hasError('hasSmallCase') ? 'text-danger': 'text-success'">
|
||||||
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
|
<i
|
||||||
<i
|
[ngClass]="f['password'].hasError('hasSmallCase') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
lower case
|
||||||
special
|
</div>
|
||||||
</div>
|
<div [ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'text-danger': 'text-success'">
|
||||||
</div>
|
<i
|
||||||
</div>
|
[ngClass]="f['password'].hasError('hasSpecialCharacters') ? 'bi bi-x-square-fill' : 'bi bi-check-square-fill'"></i>
|
||||||
</div>
|
special
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-floating is-invalid mb-3">
|
<div class="form-floating is-invalid mb-3">
|
||||||
<!-- Confirm Password Input -->
|
<!-- Confirm Password Input -->
|
||||||
<input [ngClass]="{'is-invalid': f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched),'is-valid': f['confirmPassword'].valid}"
|
<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"
|
type="password" autocomplete="on" class="form-control"
|
||||||
formControlName="confirmPassword"
|
formControlName="confirmPassword"
|
||||||
id="confirmPassword" placeholder="confirmPassword">
|
id="confirmPassword" placeholder="confirmPassword">
|
||||||
<!-- Confirm Password Label -->
|
<!-- Confirm Password Label -->
|
||||||
<label for="confirmPassword">Confirm Password</label>
|
<label for="confirmPassword">Confirm Password</label>
|
||||||
</div>
|
</div>
|
||||||
<!-- Confirm Password Invalid Feedback -->
|
<!-- Confirm Password Invalid Feedback -->
|
||||||
<div *ngIf="f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )"
|
@if (f['confirmPassword'].invalid && (f['confirmPassword'].dirty || !f['confirmPassword'].untouched )) {
|
||||||
class="invalid-feedback">
|
<div
|
||||||
<p *ngIf="f['confirmPassword'].hasError('required')">Confirmation password is required</p>
|
class="invalid-feedback">
|
||||||
<p
|
@if (f['confirmPassword'].hasError('required')) {
|
||||||
*ngIf="f['confirmPassword'].hasError('passwordMismatch')">Passwords do not match</p>
|
<p>Confirmation password is required</p>
|
||||||
</div>
|
}
|
||||||
|
@if (f['confirmPassword'].hasError('passwordMismatch')) {
|
||||||
|
<p
|
||||||
|
>Passwords do not match</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
<div class="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<button type="button" (click)="onCancel()" class="btn btn-warning">Cancel</button>
|
<button type="button" (click)="onCancel()" class="btn btn-warning">Cancel</button>
|
||||||
<button [disabled]="signUpForm.invalid" type="submit" class="btn btn-success">Sign Up</button>
|
<button [disabled]="signUpForm.invalid" type="submit" class="btn btn-success">Sign Up</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
} @else {
|
} @else {
|
||||||
<div class="card border-success mt-5">
|
<div class="card border-success mt-5">
|
||||||
<div class="card-header text-center">
|
<div class="card-header text-center">
|
||||||
Alliance Successfully Registered!
|
Alliance Successfully Registered!
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body text-success">
|
<div class="card-body text-success">
|
||||||
<h5 class="card-title">Welcome, {{ playerName }}!</h5>
|
<h5 class="card-title">Welcome, {{ playerName }}!</h5>
|
||||||
<p class="card-text">
|
<p class="card-text">
|
||||||
Your alliance <strong>{{ allianceName }}</strong> has been successfully registered.
|
Your alliance <strong>{{ allianceName }}</strong> has been successfully registered.
|
||||||
</p>
|
</p>
|
||||||
<p class="card-text">
|
<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.
|
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>
|
||||||
<p class="card-text">
|
<p class="card-text">
|
||||||
If you can't find the email in your inbox, please also check your spam folder.
|
If you can't find the email in your inbox, please also check your spam folder.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -10,8 +10,8 @@
|
|||||||
|
|
||||||
<!-- Toggle button for collapsed navigation on smaller screens -->
|
<!-- Toggle button for collapsed navigation on smaller screens -->
|
||||||
<button (click)="isShown = !isShown" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"
|
<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"
|
class="navbar-toggler" data-bs-target="#navbar" data-bs-toggle="collapse"
|
||||||
type="button">
|
type="button">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -67,9 +67,9 @@
|
|||||||
|
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a href="https://ko-fi.com/C0C11EVSE0"
|
<a href="https://ko-fi.com/C0C11EVSE0"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="kofi-custom-button">
|
class="kofi-custom-button">
|
||||||
<img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi" />
|
<img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi" />
|
||||||
<span>Donate</span>
|
<span>Donate</span>
|
||||||
</a>
|
</a>
|
||||||
@ -78,33 +78,37 @@
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- User menu (visible only when user is logged in) -->
|
<!-- User menu (visible only when user is logged in) -->
|
||||||
<div *ngIf="loggedInUser" class="login">
|
@if (loggedInUser) {
|
||||||
<ul class="navbar-nav me-auto">
|
<div class="login">
|
||||||
<li ngbDropdown display="dynamic" class="nav-item" role="presentation">
|
<ul class="navbar-nav me-auto">
|
||||||
<button type="button" class="nav-link" ngbDropdownToggle>
|
<li ngbDropdown display="dynamic" class="nav-item" role="presentation">
|
||||||
<i class="bi bi-person-circle"></i>
|
<button type="button" class="nav-link" ngbDropdownToggle>
|
||||||
{{loggedInUser.userName}}
|
<i class="bi bi-person-circle"></i>
|
||||||
</button>
|
{{loggedInUser.userName}}
|
||||||
<div ngbDropdownMenu>
|
</button>
|
||||||
<button (click)="isShown = false" routerLink="/account" ngbDropdownItem>Account</button>
|
<div ngbDropdownMenu>
|
||||||
<button (click)="isShown = false" routerLink="/change-password" ngbDropdownItem>Change password</button>
|
<button (click)="isShown = false" routerLink="/account" ngbDropdownItem>Account</button>
|
||||||
<button (click)="isShown = false" routerLink="/feedback" ngbDropdownItem>Submit Feedback</button>
|
<button (click)="isShown = false" routerLink="/change-password" ngbDropdownItem>Change password</button>
|
||||||
<div class="dropdown-divider"></div>
|
<button (click)="isShown = false" routerLink="/feedback" ngbDropdownItem>Submit Feedback</button>
|
||||||
<button (click)="onLogout()" ngbDropdownItem>Logout</button>
|
<div class="dropdown-divider"></div>
|
||||||
</div>
|
<button (click)="onLogout()" ngbDropdownItem>Logout</button>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
<!-- Login button (visible only when user is not logged in) -->
|
<!-- Login button (visible only when user is not logged in) -->
|
||||||
<div *ngIf="!loggedInUser" class="d-flex login" routerLink="/login">
|
@if (!loggedInUser) {
|
||||||
<button (click)="isShown = false" class="btn btn-secondary" routerLink="/login"><i
|
<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
|
class="bi bi-box-arrow-right"></i> Login
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</div>
|
||||||
|
</nav>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@
|
|||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"declaration": false,
|
"declaration": false,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "bundler",
|
||||||
"importHelpers": true,
|
"importHelpers": true,
|
||||||
"target": "ES2022",
|
"target": "ES2022",
|
||||||
"module": "ES2022",
|
"module": "ES2022",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user