[TECH] Passer la page de connexion à l'espace surveillant en .gjs (PIX-13332)

certif/app/components/login-session-supervisor/footer.gjs

@@ -0,0 +1,14 @@
+import { LinkTo } from '@ember/routing';
+import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import { t } from 'ember-intl';
+
+<template>
+  <div class='login-session-supervisor-page-content__current-user-email'>
+    <span><FaIcon @icon='user-circle' />
+      {{@currentUserEmail}}
+    </span>
+    <LinkTo class='login-session-supervisor-page-content__logout' @route='logout'>
+      {{t 'pages.session-supervising.login.form.actions.switch-account'}}
+    </LinkTo>
+  </div>
+</template>

certif/app/components/login-session-supervisor/form.gjs

@@ -0,0 +1,51 @@
+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>
+  <div class='login-session-supervisor-form'>
+    <img src='/illu-espace-surveillant.svg' alt='' />
+
+    <h1 class='login-session-supervisor-form__title'>{{t 'pages.session-supervising.login.form.title'}}</h1>
+
+    <h2 class='login-session-supervisor-form__subtitle'>{{t 'pages.session-supervising.login.form.sub-title'}}</h2>
+
+    <p class='login-session-supervisor-form__required-fields-notice'>{{t 'common.form-errors.mandatory-all-fields'}}</p>
+
+    {{#if @errorMessage}}
+      <p
+        id='login-session-supervisor-form-error-message'
+        class='login-session-supervisor-form__error-message error-message'
+      >
+        {{@errorMessage}}
+      </p>
+    {{/if}}
+
+    <form class='login-session-supervisor-form__form' {{on 'submit' @superviseSession}}>
+      <PixInput @id='session-id' type='number' {{on 'input' @setSessionId}}>
+        <:label>{{t 'pages.session-supervising.login.form.session-number'}}</:label>
+      </PixInput>
+
+      <PixInputPassword
+        @id='session-password'
+        @ariaLabel={{t 'pages.session-supervising.login.form.session-password.aria-label'}}
+        @subLabel={{t 'pages.session-supervising.login.form.example'}}
+        @prefix='C-'
+        placeholder='XXXXXX'
+        {{on 'input' @setSupervisorPassword}}
+      >
+        <:label>{{t 'pages.session-supervising.login.form.session-password.label'}}</:label>
+      </PixInputPassword>
+
+      <PixButton @type='submit'>
+        {{t 'pages.session-supervising.login.form.actions.invigilate'}}
+      </PixButton>
+    </form>
+
+    <p class='login-session-supervisor-form__description'>
+      {{t 'pages.session-supervising.login.form.description'}}
+    </p>
+  </div>
+</template>

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

@@ -4,7 +4,10 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import get from 'lodash/get';
 
-export default class LoginSessionSupervisorForm extends Component {
+import LoginSessionSupervisorFooter from './footer';
+import LoginSessionSupervisorForm from './form';
+
+export default class LoginSessionSupervisor extends Component {
   @service intl;
   @tracked errorMessage = null;
   sessionId;
@@ -30,7 +33,7 @@ export default class LoginSessionSupervisorForm extends Component {
     }
 
     try {
-      await this.args.onFormSubmit({
+      await this.args.authenticateSupervisor({
         sessionId: this.sessionId,
         supervisorPassword: this.supervisorPassword,
       });
@@ -48,4 +51,19 @@ export default class LoginSessionSupervisorForm extends Component {
   _displayError(message) {
     this.errorMessage = message;
   }
+
+  <template>
+    <div class='login-session-supervisor-page'>
+      <div class='login-session-supervisor-page-content'>
+        <LoginSessionSupervisorForm
+          @superviseSession={{this.superviseSession}}
+          @setSessionId={{this.setSessionId}}
+          @setSupervisorPassword={{this.setSupervisorPassword}}
+          @errorMessage={{this.errorMessage}}
+        />
+
+        <LoginSessionSupervisorFooter @currentUserEmail={{@currentUserEmail}} />
+      </div>
+    </div>
+  </template>
 }

certif/app/styles/app.scss

@@ -11,7 +11,6 @@ $navbar-height: 60px;
 @import 'globals/texts';
 @import 'globals/titles';
 @import 'pages/login';
-@import 'pages/login-session-supervisor';
 @import 'pages/session-supervising';
 @import 'pages/session-supervising-error';
 @import 'pages/authenticated';
@@ -36,7 +35,8 @@ $navbar-height: 60px;
 @import 'components/issue-report-modal';
 @import 'components/layout/footer';
 @import 'components/login-form';
-@import 'components/login-session-supervisor-form';
+@import 'components/login-session-supervisor/index';
+@import 'components/login-session-supervisor/form';
 @import 'components/login-or-register';
 @import 'components/finalize';
 @import 'components/new-candidate-modal';

certif/app/templates/login-session-supervisor.hbs

@@ -1,15 +1,6 @@
 {{page-title (t "pages.session-supervising.login.title")}}
-<div class="login-session-supervisor-page">
-  <div class="login-session-supervisor-page-content">
-    <LoginSessionSupervisorForm @onFormSubmit={{this.authenticateSupervisor}} />
 
-    <div class="login-session-supervisor-page-content__current-user-email">
-      <span><FaIcon @icon="user-circle" />
-        {{this.currentUserEmail}}
-      </span>
-      <LinkTo class="login-session-supervisor-page-content__logout" @route="logout">
-        {{t "pages.session-supervising.login.form.actions.switch-account"}}
-      </LinkTo>
-    </div>
-  </div>
-</div>
+<LoginSessionSupervisor
+  @authenticateSupervisor={{this.authenticateSupervisor}}
+  @currentUserEmail={{this.currentUserEmail}}
+/>

certif/tests/acceptance/login-session-supervisor_test.js

@@ -12,9 +12,9 @@ module('Acceptance | Login session supervisor', function (hooks) {
 
   hooks.beforeEach(async function () {
     const certificationPointOfContact = server.create('certification-point-of-contact', {
-      firstName: 'Buffy',
-      lastName: 'Summers',
-      email: 'toto@example.net',
+      firstName: 'Lara',
+      lastName: 'Pafromage',
+      email: 'lara.pafromage@example.com',
       pixCertifTermsOfServiceAccepted: true,
       allowedCertificationCenterAccesses: [],
     });
@@ -28,7 +28,7 @@ module('Acceptance | Login session supervisor', function (hooks) {
     const screen = await visitScreen('/connexion-espace-surveillant');
 
     // then
-    assert.dom(screen.getByText('toto@example.net')).exists();
+    assert.dom(screen.getByText('lara.pafromage@example.com')).exists();
     assert.dom(screen.getByText('Changer de compte')).exists();
   });
 

certif/tests/integration/components/login-session-supervisor-form_test.js → certif/tests/integration/components/login-session-supervisor/index_test.gjs

@@ -1,18 +1,27 @@
 import { render as renderScreen } from '@1024pix/ember-testing-library';
 import { click, fillIn } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import LoginSessionSupervisor from 'pix-certif/components/login-session-supervisor';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
-import setupIntlRenderingTest from '../../helpers/setup-intl-rendering';
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
 
-module('Integration | Component | login-session-supervisor-form', function (hooks) {
+module('Integration | Component | index', function (hooks) {
   setupIntlRenderingTest(hooks);
 
   test('it should render supervisor login form', async function (assert) {
     // when
-    this.onFormSubmit = sinon.stub();
-    const screen = await renderScreen(hbs`<LoginSessionSupervisorForm @onFormSubmit={{this.onFormSubmit}}/>`);
+    const authenticateSupervisor = sinon.stub();
+    const currentUserEmail = '[email protected]';
+
+    const screen = await renderScreen(
+      <template>
+        <LoginSessionSupervisor
+          @authenticateSupervisor={{authenticateSupervisor}}
+          @currentUserEmail={{currentUserEmail}}
+        />
+      </template>,
+    );
 
     // then
     assert.dom(screen.getByRole('heading', { name: 'Espace Surveillant' })).exists();
@@ -25,8 +34,18 @@ module('Integration | Component | login-session-supervisor-form', function (hook
   module('On click on supervise button', function () {
     test('it should display an error message when the session id is empty', async function (assert) {
       // given
-      this.onFormSubmit = sinon.stub();
-      const screen = await renderScreen(hbs`<LoginSessionSupervisorForm @onFormSubmit={{this.onFormSubmit}} />`);
+      const authenticateSupervisor = sinon.stub();
+      const currentUserEmail = '[email protected]';
+
+      const screen = await renderScreen(
+        <template>
+          <LoginSessionSupervisor
+            @authenticateSupervisor={{authenticateSupervisor}}
+            @currentUserEmail={{currentUserEmail}}
+          />
+        </template>,
+      );
+
       await fillIn(screen.getByLabelText('Mot de passe de la session Exemple : C-12345'), '12345');
 
       // when
@@ -40,8 +59,18 @@ module('Integration | Component | login-session-supervisor-form', function (hook
 
     test('it should display an error message when the supervisor password is empty', async function (assert) {
       // given
-      this.onFormSubmit = sinon.stub();
-      const screen = await renderScreen(hbs`<LoginSessionSupervisorForm @onFormSubmit={{this.onFormSubmit}} />`);
+      const authenticateSupervisor = sinon.stub();
+      const currentUserEmail = '[email protected]';
+
+      const screen = await renderScreen(
+        <template>
+          <LoginSessionSupervisor
+            @authenticateSupervisor={{authenticateSupervisor}}
+            @currentUserEmail={{currentUserEmail}}
+          />
+        </template>,
+      );
+
       await fillIn(screen.getByLabelText('Numéro de la session'), '12345');
 
       // when
@@ -55,16 +84,26 @@ module('Integration | Component | login-session-supervisor-form', function (hook
 
     test('it should call onFormSubmit when all the fields are filled', async function (assert) {
       // given
-      this.onFormSubmit = sinon.stub();
-      const screen = await renderScreen(hbs`<LoginSessionSupervisorForm @onFormSubmit={{this.onFormSubmit}} />`);
+      const authenticateSupervisor = sinon.stub();
+      const currentUserEmail = '[email protected]';
+
+      const screen = await renderScreen(
+        <template>
+          <LoginSessionSupervisor
+            @authenticateSupervisor={{authenticateSupervisor}}
+            @currentUserEmail={{currentUserEmail}}
+          />
+        </template>,
+      );
+
       await fillIn(screen.getByRole('spinbutton', { name: 'Numéro de la session' }), '12345');
       await fillIn(screen.getByLabelText('Mot de passe de la session Exemple : C-12345'), '6789');
 
       // when
       await click(screen.getByRole('button', { name: 'Surveiller la session' }));
 
       // then
-      sinon.assert.calledWith(this.onFormSubmit, { sessionId: '12345', supervisorPassword: '6789' });
+      sinon.assert.calledWith(authenticateSupervisor, { sessionId: '12345', supervisorPassword: '6789' });
       assert.ok(true);
     });
   });