oslo_boating_project/boat-reservation-view/src/app/register-view/register-view.component.html

<div style="text-align: center;">
  <h2>REGISTER NEW USER</h2>
</div>
<form (submit)="registerUser()" [formGroup]="formData"
      style="text-align: center; font-family: Courier New, monospace;">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text"
           id="username"
           name="name" formControlName="username"
           minlength="5"
           maxlength="20">
  </div>
  <div style="color: #b70b0b" *ngIf="formData.controls['username'].hasError('required') &&
  (formData.controls['username'].dirty || formData.controls['username'].touched)">
    Username is required!<br><br>
  </div>
  <div style="color: #b70b0b" *ngIf="(formData.controls['username'].hasError('minlength') ||
  formData.controls['username'].hasError('maxlength')) &&
  (formData.controls['username'].dirty || formData.controls['username'].touched)">
    Password length has to be between 5 and 20!<br><br>
  </div>

  <div class="form-group">
    <label for="password">Password:</label>
    <input type="text"
           id="password"
           name="name" formControlName="password"
           minlength="5"
           maxlength="20">
  </div>
  <div style="color: #b70b0b" *ngIf="formData.controls['password'].hasError('required') &&
  (formData.controls['password'].dirty || formData.controls['password'].touched)">
    Password is required!<br><br>
  </div>
  <div style="color: #b70b0b" *ngIf="(formData.controls['password'].hasError('minlength') ||
  formData.controls['password'].hasError('maxlength')) &&
  (formData.controls['password'].dirty || formData.controls['password'].touched)">
    Password length has to be between 5 and 20!<br><br>
  </div>

  <div class="form-group">
    <label for="email">Email:</label>
    <input type="text"
           id="email"
           name="name" formControlName="email">
  </div>
  <div style="color: #b70b0b" *ngIf="formData.controls['email'].hasError('required') &&
  (formData.controls['email'].dirty || formData.controls['email'].touched)">
    Email is required!<br><br>
  </div>
  <div style="color: #b70b0b" *ngIf="formData.controls['email'].hasError('email') &&
  (formData.controls['email'].dirty || formData.controls['email'].touched)">
    Invalid email format<br><br>
  </div>

  <br>
  <label>Captcha:</label>
  <re-captcha
    (resolved)="resolved($event)"
    siteKey="6LcqrYQlAAAAAHEGNg4O9yPxxwgBTFYqAndYs6Js"
  ></re-captcha>

  <br>
  <div style="color: #b70b0b" *ngIf="(formData.invalid) &&
      ((formData.controls['username'].dirty || formData.controls['username'].touched)||
      (formData.controls['password'].dirty || formData.controls['password'].touched)||
      (formData.controls['email'].dirty || formData.controls['email'].touched))">
    <b>Fix the errors above to proceed.</b><br>
  </div>
  <br>
  <div style="color: #b70b0b">
    <b>{{errors}}</b><br>
  </div>
  <br>
  <input type="submit" value="Register"
         [ngClass]="{
         'disabled': formData.invalid || !isCaptchaResolved,
         'enabled': !(formData.invalid || !isCaptchaResolved)}"
         [disabled]="formData.invalid || !isCaptchaResolved">
</form>