[FEATURE] Ajouter un sélecteur de langue sur la page connexion de Pix…

… Certif domaine international (PIX-5955)

certif/app/controllers/login.js

@@ -0,0 +1,24 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+
+export default class LoginController extends Controller {
+  @service intl;
+  @service currentDomain;
+  @service router;
+  @service locale;
+
+  @tracked selectedLanguage = this.intl.primaryLocale;
+
+  get isInternationalDomain() {
+    return !this.currentDomain.isFranceDomain;
+  }
+
+  @action
+  onLanguageChange(value) {
+    this.selectedLanguage = value;
+    this.locale.setLocale(this.selectedLanguage);
+    this.router.replaceWith('login', { queryParams: { lang: null } });
+  }
+}

certif/app/styles/components/login-form.scss

@@ -1,5 +1,4 @@
 .login {
-  margin: auto;
   background-color: $pix-neutral-0;
   border-radius: 10px;
   padding: 20px 30px;
@@ -9,7 +8,7 @@
     padding: 40px 60px;
   }
 
-  &__header {
+  &__header { 
     text-align: center;
   }
 

certif/app/styles/pages/login.scss

@@ -1,9 +1,14 @@
 .login-page {
   display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   min-height: 100vh;
   background: $pix-primary-certif-gradient;
-  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
-  align-items: center;
-  padding: 8px;
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: $pix-spacing-s;
+  }
 }

certif/app/templates/login.hbs

@@ -1,7 +1,13 @@
 {{page-title (t "pages.login.title")}}
-<div class="login-page">
-  <LoginForm
-    @hasInvitationAlreadyBeenAccepted={{this.hasInvitationAlreadyBeenAccepted}}
-    @isInvitationCancelled={{this.isInvitationCancelled}}
-  />
-</div>
+<main class="login-page">
+  <div class="login-page__container">
+    <LoginForm
+      @hasInvitationAlreadyBeenAccepted={{this.hasInvitationAlreadyBeenAccepted}}
+      @isInvitationCancelled={{this.isInvitationCancelled}}
+    />
+
+    {{#if this.isInternationalDomain}}
+      <LanguageSwitcher @selectedLanguage={{this.selectedLanguage}} @onLanguageChange={{this.onLanguageChange}} />
+    {{/if}}
+  </div>
+</main>

certif/tests/acceptance/login_test.js

@@ -0,0 +1,64 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { click, currentURL } from '@ember/test-helpers';
+import { visit } from '@1024pix/ember-testing-library';
+import { setupMirage } from 'ember-cli-mirage/test-support';
+import setupIntl from '../helpers/setup-intl';
+
+module('Acceptance | Login', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+  setupIntl(hooks, ['fr', 'en']);
+
+  module('when current url does not contain french tld (.fr)', function () {
+    module('when accessing the login page with "Français" as default language', function () {
+      test('displays the login page with "Français" as selected language', async function (assert) {
+        // when
+        const screen = await visit('/connexion');
+
+        // then
+        assert.strictEqual(currentURL(), '/connexion');
+        assert.dom(screen.getByRole('heading', { name: 'Connectez-vous', level: 1 })).exists();
+      });
+
+      module('when the user select "English" as his language', function () {
+        test('displays the login page with "English" as selected language', async function (assert) {
+          // when
+          const screen = await visit('/connexion');
+          await click(screen.getByRole('button', { name: 'Français' }));
+          await screen.findByRole('listbox');
+          await click(screen.getByRole('option', { name: 'English' }));
+
+          // then
+          assert.strictEqual(currentURL(), '/connexion');
+          assert.dom(screen.getByRole('heading', { name: 'Login', level: 1 })).exists();
+        });
+      });
+    });
+
+    module('when accessing the login page with "English" as selected language', function () {
+      test('displays the login page with "English"', async function (assert) {
+        // when
+        const screen = await visit('/connexion?lang=en');
+
+        // then
+        assert.strictEqual(currentURL(), '/connexion?lang=en');
+        assert.dom(screen.getByRole('heading', { name: 'Login', level: 1 })).exists();
+      });
+
+      module('when the user select "Français" as his language', function () {
+        test('displays the login page with "Français" as selected language', async function (assert) {
+          // given & when
+          const screen = await visit('/connexion?lang=en');
+          await click(screen.getByRole('button', { name: 'English' }));
+          await screen.findByRole('listbox');
+          await click(screen.getByRole('option', { name: 'Français' }));
+
+          // then
+          assert.strictEqual(currentURL(), '/connexion');
+          assert.dom(screen.getByRole('heading', { name: 'Connectez-vous', level: 1 })).exists();
+        });
+      });
+    });
+  });
+});