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="headline">
        <app-btn-back></app-btn-back>
        <p>{{ "register.signup" | translate }}</p>
        <div class="line">
          <img src="./../../../assets/img/login/blue-line.svg" alt="" />
        </div>
      </div>
      <div class="input-fields">
        <input
          type="name"
          id="name"
          name="name"
          #name="ngModel"
          placeholder="{{ 'register.name' | translate }}"
          class="custom-input"
          autocomplete="name"
          [(ngModel)]="registerData.name"
          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.valid && name.touched) {
          <p>{{ "register.errorName" | translate }}</p>
          }
        </div>
        <input
          type="mail"
          id="mail"
          name="mail"
          #mail="ngModel"
          placeholder="{{ 'register.email' | translate }}"
          class="custom-input"
          autocomplete="email"
          [(ngModel)]="registerData.mail"
          required
        />
        @if(!registerData.mail) {
        <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 &&
          !checkIfUserEmailIsValid(registerData.mail)) {
          <p>{{ "register.errorMail0" | translate }}</p>
          } @else { @if (mail.touched &&
          !checkIfUserEmailIsValid(registerData.mail)) {
          <p>{{ "register.errorMail1" | translate }}</p>
          } @else { @if (existEmailonServer(registerData.mail).length > 0) {
          <p>{{ "register.errorMail2" | translate }}</p>
          } } }
        </div>
        <input
          type="password"
          id="password"
          name="password"
          #password="ngModel"
          [type]="loginSerivce.passwordFieldType"
          placeholder="{{ 'register.password' | translate }}"
          class="custom-input"
          autocomplete="new-password"
          [(ngModel)]="registerData.password"
          required
        />
        @if(!registerData.password) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/lock.svg"
          alt=""
        />
        } @else {
        <img
          class="passwordEye"
          (click)="loginSerivce.togglePasswordVisibility()"
          [src]="loginSerivce.passwordIcon"
        />
        }
        <div class="error-msg">
          @if (!password.valid && password.touched) {
          <p>{{ "register.errorPassword0" | translate }}</p>
          } @else { @if (registerData.password.length < 6 && password.touched) {
          <p>{{ "register.errorPassword1" | translate }}</p>
          } }
        </div>
        <input
          type="passwordConfirm"
          id="passwordConfirm"
          name="passwordConfirm"
          #passwordConfirm="ngModel"
          [type]="loginSerivce.passwordFieldType"
          placeholder="{{ 'register.passwordConfirm' | translate }}"
          class="custom-input"
          autocomplete="new-password"
          [(ngModel)]="registerData.passwordConfirm"
          required
        />
        @if(!registerData.passwordConfirm) {
        <img
          class="custom-img"
          src="./../../../assets/img/login/lock.svg"
          alt=""
        />
        } @else {
        <img
          class="passwordEyeConfirm"
          (click)="loginSerivce.togglePasswordVisibility()"
          [src]="loginSerivce.passwordIcon"
        />
        }
        <div class="error-msg">
          @if (!passwordConfirm.valid && passwordConfirm.touched) {
          <p>{{ "register.errorPassword0" | translate }}</p>
          } @if (registerData.password !== registerData.passwordConfirm &&
          registerData.password !== "" && registerData.passwordConfirm !== "") {
          <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.mail ||
            password.invalid ||
            !registerData.password ||
            sharedService.isBtnDisabled ||
            registerData.password.length < 6 ||
            registerData.password !== registerData.passwordConfirm ||
            !checkIfUserEmailIsValid(registerData.mail)
          "
        ></app-form-btn>
      </div>
    </div>
  </form>
  <app-footer></app-footer>
</section>