PlayerManagement/Ui/src/app/Authentication/reset-password/reset-password.component.html

<div class="container mt-3">
  <h2 class="text-center">Reset Password</h2>

  @if (showError) {
    <div class="card border-danger mt-5">
      <div class="card-header text-center">
        Reset Password Failed!
      </div>
      <div class="card-body text-danger">
        <h5 class="card-title">An Error Occurred</h5>
        <p class="card-text">
          Some required information is missing, or a technical issue has occurred.
        </p>
        <p class="card-text">
          Please check the reset-password link or contact support if the issue persists.
        </p>
      </div>
    </div>
  }

  @if (isSuccess) {
    <div class="card border-success mt-5">
      <div class="card-header text-center">
        Password Reset Successful!
      </div>
      <div class="card-body text-success">
        <h5 class="card-title">Your Password Has Been Reset</h5>
        <p class="card-text">
          You can now log in with your new password.
        </p>
        <p class="card-text">
          If you encounter any issues, please contact support.
        </p>
        <!-- Login Button -->
        <div class="text-center">
          <a routerLink="/login" class="btn btn-success">Go to Login</a>
        </div>
      </div>
    </div>
  }

  @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>
              @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>

          <!-- 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>
      }

    </div>