login-or-register-oidc.hbs

<h1 class="login-or-register-oidc-form__title">{{t "pages.login-or-register-oidc.title"}}</h1>
<div class="login-or-register-oidc-form__container">
  <div class="login-or-register-oidc-form__register-container">
    <h2 class="login-or-register-oidc-form__subtitle">{{t "pages.login-or-register-oidc.register-form.title"}}</h2>
    {{#if this.userClaimsToDisplay.length}}
      <div>
        <p class="login-or-register-oidc-form__description">
          {{! template-lint-disable "no-bare-strings" }}
          {{t "pages.login-or-register-oidc.register-form.description"}}
          <em>{{this.identityProviderOrganizationName}}</em>&nbsp;:
        </p>
        <div class="login-or-register-oidc-form__information">
          <ul>
            {{#each this.userClaimsToDisplay as |userClaimToDisplay|}}
              <li>{{userClaimToDisplay}}</li>
            {{/each}}
          </ul>
        </div>
      </div>
      <div class="login-or-register-oidc-form__cgu-container">
        <PixCheckbox {{on "change" this.onChange}}>
          <:label>{{t
              "common.cgu.message"
              cguUrl=this.cguUrl
              dataProtectionPolicyUrl=this.dataProtectionPolicyUrl
              htmlSafe=true
            }}</:label>
        </PixCheckbox>
      </div>

      {{#if this.registerErrorMessage}}
        <PixNotificationAlert @type="error" class="login-or-register-oidc-form__cgu-error">
          {{this.registerErrorMessage}}
        </PixNotificationAlert>
      {{/if}}

      <PixButton @type="submit" @triggerAction={{this.register}} @isLoading={{this.isRegisterLoading}}>
        {{t "pages.login-or-register-oidc.register-form.button"}}
      </PixButton>
    {{else}}
      <PixNotificationAlert @type="error" class="login-or-register-oidc-form__cgu-error">
        {{this.userClaimsErrorMessage}}
      </PixNotificationAlert>
    {{/if}}
  </div>

  <div class="login-or-register-oidc-form__divider"></div>

  <div class="login-or-register-oidc-form__login-container">
    <h2 class="login-or-register-oidc-form__subtitle">{{t "pages.login-or-register-oidc.login-form.title"}}</h2>
    <p class="login-or-register-oidc-form__description">
      {{t "pages.login-or-register-oidc.login-form.description"}}
    </p>
    <form {{on "submit" this.login}}>
      <p class="login-or-register-oidc-form__mandatory-description">{{t "common.form.mandatory-all-fields"}}</p>

      <div class="login-or-register-oidc-form__input-container">
        <PixInput
          @id="email"
          name="email"
          @errorMessage={{this.emailValidationMessage}}
          @validationStatus={{this.emailValidationStatus}}
          {{on "change" this.validateEmail}}
          autocomplete="off"
          required
        >
          <:label>{{t "pages.login-or-register-oidc.login-form.email"}}</:label>
        </PixInput>
      </div>

      <div class="login-or-register-oidc-form__input-container login-or-register-oidc-form__input-container--password">
        <PixInputPassword
          @id="password"
          @value={{this.password}}
          autocomplete="off"
          required
          {{on "change" this.setPassword}}
        >
          <:label>{{t "pages.login-or-register-oidc.login-form.password"}}</:label>
        </PixInputPassword>
        <LinkTo @route="password-reset-demand" class="login-or-register-oidc-form__forgotten-password-link">
          {{t "pages.sign-in.forgotten-password"}}
        </LinkTo>
      </div>

      {{#if this.loginErrorMessage}}
        <PixNotificationAlert @type="error" class="login-or-register-oidc-form__cgu-error">
          {{this.loginErrorMessage}}
        </PixNotificationAlert>
      {{/if}}

      <PixButton @type="submit" @isLoading={{this.isLoginLoading}} class="login-or-register-oidc-form__submit-button">
        {{t "pages.login-or-register-oidc.login-form.button"}}
      </PixButton>
    </form>
  </div>
</div>