♻️ certif: refacto login form to gjs

certif/app/components/language-switcher.gjs

@@ -0,0 +1,43 @@
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+import { FRENCH_INTERNATIONAL_LOCALE } from 'pix-certif/services/locale';
+
+export default class LanguageSwitcher extends Component {
+  @service locale;
+
+  get alphabeticallySortedLanguages() {
+    const availableLanguages = this.locale.getAvailableLanguages();
+
+    const options = Object.entries(availableLanguages)
+      .filter(([_, config]) => config.languageSwitcherDisplayed)
+      .map(([key, config]) => ({
+        label: config.value,
+        value: key,
+      }));
+
+    const optionsWithoutFrSortedByLabel = options
+      .filter((option) => option.value !== FRENCH_INTERNATIONAL_LOCALE)
+      .sort((option) => option.label);
+
+    const frenchLanguageOption = options.find((option) => option.value === FRENCH_INTERNATIONAL_LOCALE);
+
+    return [frenchLanguageOption, ...optionsWithoutFrSortedByLabel];
+  }
+
+  <template>
+    <PixSelect
+      @id='language-switcher'
+      @icon='earth-europe'
+      @value={{@selectedLanguage}}
+      @options={{this.alphabeticallySortedLanguages}}
+      @onChange={{@onLanguageChange}}
+      @hideDefaultOption='true'
+      @screenReaderOnly='true'
+      ...attributes
+    >
+      <:label>{{t 'common.forms.login.choose-language-aria-label'}}</:label>
+    </PixSelect>
+  </template>
+}

certif/app/components/login/form.gjs

@@ -0,0 +1,44 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import PixInputPassword from '@1024pix/pix-ui/components/pix-input-password';
+import { on } from '@ember/modifier';
+import { t } from 'ember-intl';
+
+<template>
+  <form class='login-main__form' {{on 'submit' @onSubmit}}>
+
+    <p class='login-main-form__mandatory-information'>
+      {{t 'common.form-errors.mandatory-all-fields'}}
+    </p>
+
+    <PixInput @id='login-email' name='login' autocomplete='email' type='email' required='true' {{on 'input' @setEmail}}>
+      <:label>{{t 'common.forms.login.email'}}</:label>
+    </PixInput>
+
+    <PixInputPassword
+      @id='login-password'
+      name='password'
+      autocomplete='current-password'
+      required='true'
+      {{on 'input' @setPassword}}
+    >
+      <:label>{{t 'common.forms.login.password'}}</:label>
+    </PixInputPassword>
+
+    {{#if @isErrorMessagePresent}}
+      <div class='error-message'>
+        <p>{{@errorMessage}}</p>
+      </div>
+    {{/if}}
+
+    <PixButton @type='submit' class='login-main-form__button'>
+      {{t 'pages.login.actions.login.label'}}
+    </PixButton>
+
+    <div class='login-main-form__forgotten-password'>
+      <a href={{@forgottenPasswordUrl}} target='_blank' rel='noopener noreferrer' class='link'>{{t
+          'common.forms.login.forgot-password'
+        }}</a>
+    </div>
+  </form>
+</template>

certif/app/components/login/header.gjs

@@ -0,0 +1,21 @@
+import { t } from 'ember-intl';
+
+<template>
+  <header class='login__header'>
+    <img src='/pix-certif-logo.svg' alt='Pix Certif' />
+
+    <h1 class='page-title'>{{t 'pages.login.title'}}</h1>
+
+    <p class='login-header__information'>
+      {{t 'pages.login.accessible-to'}}
+    </p>
+
+    {{#if @hasInvitationAlreadyBeenAccepted}}
+      <p class='login-header__invitation-error'>{{t 'pages.login.errors.invitation-already-accepted' htmlSafe=true}}</p>
+    {{/if}}
+
+    {{#if @isInvitationCancelled}}
+      <p class='login-header__invitation-error'>{{t 'pages.login.errors.invitation-was-cancelled' htmlSafe=true}}</p>
+    {{/if}}
+  </header>
+</template>

certif/app/components/login-form.js → certif/app/components/login/index.gjs

@@ -5,7 +5,10 @@ import { tracked } from '@glimmer/tracking';
 import get from 'lodash/get';
 import ENV from 'pix-certif/config/environment';
 
-export default class LoginForm extends Component {
+import LoginForm from './form';
+import LoginHeader from './header';
+
+export default class Login extends Component {
   @service url;
   @service intl;
   @service session;
@@ -87,4 +90,25 @@ export default class LoginForm extends Component {
         return ENV.APP.API_ERROR_MESSAGES.INTERNAL_SERVER_ERROR.I18N_KEY;
     }
   }
+
+  <template>
+    <div class='login'>
+      <LoginHeader
+        @hasInvitationAlreadyBeenAccepted={{@hasInvitationAlreadyBeenAccepted}}
+        @isInvitationCancelled={{@isInvitationCancelled}}
+      />
+
+      <main class='login__main'>
+
+        <LoginForm
+          @onSubmit={{this.authenticate}}
+          @setEmail={{this.setEmail}}
+          @setPassword={{this.setPassword}}
+          @isErrorMessagePresent={{this.isErrorMessagePresent}}
+          @errorMessage={{this.errorMessage}}
+          @forgottenPasswordUrl={{this.forgottenPasswordUrl}}
+        />
+      </main>
+    </div>
+  </template>
 }

certif/app/services/locale.js

@@ -16,6 +16,10 @@ export default class LocaleService extends Service {
   @service intl;
   @service dayjs;
 
+  getAvailableLanguages() {
+    return languages;
+  }
+
   handleUnsupportedLanguage(language) {
     if (!language) return;
     return this.isLanguageSupported(language) ? language : DEFAULT_LOCALE;

certif/app/templates/login.hbs

@@ -1,7 +1,7 @@
 {{page-title (t "pages.login.title")}}
 <main class="login-page">
   <div>
-    <LoginForm
+    <Login
       @hasInvitationAlreadyBeenAccepted={{this.hasInvitationAlreadyBeenAccepted}}
       @isInvitationCancelled={{this.isInvitationCancelled}}
     />

certif/tests/integration/components/auth/toggable-login-form-test.js

@@ -34,6 +34,7 @@ module('Integration | Component | Auth::ToggableLoginForm', function (hooks) {
       // then
       assert.dom(screen.getByRole('textbox', { name: emailInputLabel })).exists();
       assert.dom(screen.getByLabelText(passwordInputLabel)).exists();
+      assert.dom(screen.getByText(loginLabel)).exists();
     });
 
     test('[a11y] it should display a message that all inputs are required', async function (assert) {