join/src/app/components/login/register/register.component.html

<section>
  <app-header [signUpBtn]="false"></app-header>
  <form
    id="form"
    #taskForm="ngForm"
    (ngSubmit)="onSubmit(taskForm)"
    onsubmit="return false"
  >
    <div class="content">
      <div class="header">
        <app-btn-back></app-btn-back>
        <div class="headline">{{ "register.signup" | translate }}</div>
        <div class="spacer"></div>
      </div>
      <div class="line">
        <img src="./../../../assets/img/login/blue-line.svg" alt="" />
      </div>
      <div class="input-fields">
        <input
          type="name"
          id="name"
          name="name"
          #name="ngModel"
          maxlength="20"
          placeholder="{{ 'register.name' | translate }}"
          class="custom-input"
          autocomplete="name"
          [(ngModel)]="registerData.name"
          pattern="[A-Za-z ]+"
          required
        />
        @if(!registerData.name) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/user.svg"
          alt=""
        />
        } @else {
        <img class="custom-img" alt="" />
        }
        <div class="error-msg">
          @if (name.hasError('pattern') && name.touched && !isButtonDisabled())
          {
          <p>{{ "register.errorPattern" | translate }}</p>
          } @else { @if (!name.valid && name.touched && !isButtonDisabled()) {
          <p>{{ "register.errorName" | translate }}</p>
          }}
        </div>
        <input
          type="email"
          id="email"
          name="email"
          #mail="ngModel"
          placeholder="{{ 'register.email' | translate }}"
          class="custom-input"
          autocomplete="email"
          [(ngModel)]="registerData.email"
          required
        />
        @if(!registerData.email) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/mail.svg"
          alt=""
        />
        } @else {
        <img class="custom-img" alt="" />
        }
        <div class="error-msg">
          @if(!mail.valid && mail.touched &&
          !isEmailValid(registerData.email.toLowerCase()) &&
          !isButtonDisabled()) {
          <p>{{ "register.errorMail0" | translate }}</p>
          } @else { @if (mail.touched &&
          !isEmailValid(registerData.email.toLowerCase()) &&
          !isButtonDisabled()) {
          <p>{{ "register.errorMail1" | translate }}</p>
          } @else { @if (errorHttpMessage === 'Email already exists' &&
          !isButtonDisabled()) {
          <p>{{ "register.errorMail2" | translate }}</p>
          } } }
        </div>
        <input
          type="password"
          id="password"
          name="password"
          #password="ngModel"
          [type]="pwVisibility.passwordFieldType"
          placeholder="{{ 'register.password' | translate }}"
          class="custom-input"
          autocomplete="new-password"
          [(ngModel)]="registerData.password"
          pattern="[^<>]*"
          required
        />
        @if(!registerData.password) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/lock.svg"
          alt=""
        />
        } @else {
        <img
          class="passwordEye"
          (click)="pwVisibility.togglePasswordVisibility()"
          [src]="pwVisibility.passwordIcon"
        />
        }
        <div class="error-msg">
          @if (!password.valid && password.touched && !isButtonDisabled()) {
          <p>{{ "register.errorPassword0" | translate }}</p>
          } @else { @if (registerData.password.length < 8 && password.touched &&
          !isButtonDisabled()) {
          <p>{{ "register.errorPassword1" | translate }}</p>
          } }
        </div>
        <input
          type="passwordConfirm"
          id="passwordConfirm"
          name="passwordConfirm"
          #passwordConfirm="ngModel"
          [type]="pwVisibility.passwordFieldType"
          placeholder="{{ 'register.passwordConfirm' | translate }}"
          class="custom-input"
          autocomplete="new-password"
          [(ngModel)]="registerData.passwordConfirm"
          pattern="[^<>]*"
          required
        />
        @if(!registerData.passwordConfirm) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/lock.svg"
          alt=""
        />
        } @else {
        <img
          class="passwordEyeConfirm"
          (click)="pwVisibility.togglePasswordVisibility()"
          [src]="pwVisibility.passwordIcon"
        />
        }
        <div class="error-msg">
          @if (!passwordConfirm.valid && passwordConfirm.touched &&
          !isButtonDisabled()) {
          <p>{{ "register.errorPassword0" | translate }}</p>
          } @if (registerData.password !== registerData.passwordConfirm &&
          registerData.password !== "" && registerData.passwordConfirm !== "" &&
          !isButtonDisabled()) {
          <p>{{ "register.errorPassword2" | translate }}</p>
          }
        </div>
        <div class="privacy-policy">
          <input
            type="checkbox"
            id="checkbox"
            name="checkbox"
            #checkbox="ngModel"
            [(ngModel)]="registerData.checkboxState"
            required
          />
          <div class="label">
            <p>
              {{ "register.privacyPolicy0" | translate }}
              <a routerLink="/login/privacy-policy">{{
                "register.privacyPolicy1" | translate
              }}</a>
            </p>
          </div>
        </div>
        <div class="error-msg">
          @if (!checkbox.valid && checkbox.touched) {
          <p>{{ "register.privacyPolicyError" | translate }}</p>
          }
        </div>
      </div>
      <div class="form-buttons">
        <app-form-btn
          [class]="'btn-login'"
          [type]="'submit'"
          [value]="'register.signup' | translate"
          [disabled]="
            mail.invalid ||
            !registerData.email ||
            password.invalid ||
            !registerData.password ||
            !checkbox.valid ||
            isButtonDisabled() ||
            registerData.password.length < 6 ||
            registerData.password !== registerData.passwordConfirm ||
            !isEmailValid(registerData.email)
          "
        ></app-form-btn>
      </div>
    </div>
  </form>
  <app-footer></app-footer>
</section>
<app-login-loader></app-login-loader>