feat(orga): add generate username password modal component

orga/app/components/sco-organization-participant/generate-username-password-modal.gjs

@@ -0,0 +1,39 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixMessage from '@1024pix/pix-ui/components/pix-message';
+import PixModal from '@1024pix/pix-ui/components/pix-modal';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+import { not } from 'ember-truth-helpers';
+
+export default class GenerateUsernamePasswordModal extends Component {
+  get isEnabled() {
+    return this.args.totalAffectedStudents > 0;
+  }
+
+  <template>
+    <PixModal
+      @title={{t "pages.sco-organization-participants.generate-username-password-modal.title"}}
+      @showModal={{@showModal}}
+      @onCloseButtonClick={{@onCloseModal}}
+    >
+      <:content>
+        <section class="generate-username-password-modal__content">
+          <PixMessage @type="warning" @withIcon={{true}}>{{t
+              "pages.sco-organization-participants.generate-username-password-modal.warning-message"
+            }}</PixMessage>
+          <p>{{t "pages.sco-organization-participants.generate-username-password-modal.content-message-1"}}</p>
+          <p>{{t "pages.sco-organization-participants.generate-username-password-modal.content-message-2"}}</p>
+          <p>{{t "pages.sco-organization-participants.generate-username-password-modal.content-message-3"}}</p>
+        </section>
+      </:content>
+      <:footer>
+        <PixButton @variant="secondary" @triggerAction={{@onCloseModal}}>
+          {{t "common.actions.cancel"}}
+        </PixButton>
+        <PixButton @triggerAction={{@onTriggerAction}} @isDisabled={{not this.isEnabled}}>
+          {{t "common.actions.confirm"}}
+        </PixButton>
+      </:footer>
+    </PixModal>
+  </template>
+}

orga/app/components/sco-organization-participant/generate-username-password-modal.scss

@@ -0,0 +1,5 @@
+.generate-username-password-modal__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-4x);
+}

orga/app/styles/app.scss

@@ -85,6 +85,9 @@
 @import 'pages/authenticated/team/new';
 @import 'pages/authenticated/terms-of-service';
 
+/* App/Components */
+@import 'sco-organization-participant/generate-username-password-modal';
+
 body,
 html {
   height: 100%;

orga/ember-cli-build.js

@@ -11,7 +11,7 @@ const sourceMapConfig = {
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
     sassOptions: {
-      includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
+      includePaths: ['node_modules/@1024pix/pix-ui/addon/styles', 'app/components'],
     },
     'ember-simple-auth': {
       useSessionSetupMethod: true,

orga/tests/integration/components/sco-organization-participant/generate-username-password-modal-test.gjs

@@ -0,0 +1,82 @@
+import { clickByName, render } from '@1024pix/ember-testing-library';
+import { t } from 'ember-intl/test-support';
+import GenerateUsernamePasswordModal from 'pix-orga/components/sco-organization-participant/generate-username-password-modal';
+import { module, test } from 'qunit';
+import sinon from 'sinon';
+
+import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
+
+module('Integration | Component | ScoOrganizationParticipant::GenerateUsernamePasswordModal', function (hooks) {
+  setupIntlRenderingTest(hooks);
+
+  test('renders the modal', async function (assert) {
+    const onCloseModal = sinon.spy();
+    const onTriggerAction = sinon.spy();
+    const totalAffectedStudents = 1;
+
+    const screen = await render(
+      <template>
+        <GenerateUsernamePasswordModal
+          @showModal={{true}}
+          @onCloseModal={{onCloseModal}}
+          @onTriggerAction={{onTriggerAction}}
+          @totalAffectedStudents={{totalAffectedStudents}}
+        />
+      </template>,
+    );
+
+    assert.ok(
+      screen.getByRole('heading', {
+        name: t('pages.sco-organization-participants.generate-username-password-modal.title'),
+      }),
+    );
+
+    await clickByName(t('common.actions.confirm'));
+    assert.ok(onTriggerAction.calledOnce);
+  });
+
+  test('disable submit button when no affected students', async function (assert) {
+    const onCloseModal = sinon.spy();
+    const onTriggerAction = sinon.spy();
+    const totalAffectedStudents = 0;
+
+    const screen = await render(
+      <template>
+        <GenerateUsernamePasswordModal
+          @showModal={{true}}
+          @onCloseModal={{onCloseModal}}
+          @onTriggerAction={{onTriggerAction}}
+          @totalAffectedStudents={{totalAffectedStudents}}
+        />
+      </template>,
+    );
+
+    const heading = screen.getByRole('heading', {
+      name: t('pages.sco-organization-participants.generate-username-password-modal.title'),
+    });
+    const button = screen.getByRole('button', { name: t('common.actions.confirm') });
+
+    assert.ok(heading);
+    assert.dom(button).hasAttribute('disabled');
+  });
+
+  test('close the modal', async function (assert) {
+    const onCloseModal = sinon.spy();
+    const onTriggerAction = sinon.spy();
+    const totalAffectedStudents = 1;
+
+    await render(
+      <template>
+        <GenerateUsernamePasswordModal
+          @showModal={{true}}
+          @onCloseModal={{onCloseModal}}
+          @onTriggerAction={{onTriggerAction}}
+          @totalAffectedStudents={{totalAffectedStudents}}
+        />
+      </template>,
+    );
+
+    await clickByName(t('common.actions.cancel'));
+    assert.ok(onCloseModal.calledOnce);
+  });
+});

orga/translations/en.json

@@ -1245,6 +1245,13 @@
         },
         "students-count": "{count, plural, =0 {0 students} =1 {1 student} other {{count} students}}"
       },
+      "generate-username-password-modal": {
+        "content-message-1": "Students who do not yet have a login method must go through a campaign at your school to create their PIX account.",
+        "content-message-2": "A CSV file containing login details and one-time passwords will be generated.",
+        "content-message-3": "Give these new one-time passwords to the students. When they log in with this password, Pix will ask them to enter a new one.",
+        "title": "Generate logins and/or passwords for selected students",
+        "warning-message": "A login and password will be generated for students who have access to the Mediacentre and/or an e-mail address. Students who already have a login will have their password reset."
+      },
       "manage-authentication-method-modal": {
         "title": "Managing the student's Pix account",
         "authentication-methods": "Log in methods",

orga/translations/fr.json

@@ -1253,6 +1253,13 @@
         },
         "students-count": "{count, plural, =0 {0 élève} =1 {1 élève} other {{count} élèves}}"
       },
+      "generate-username-password-modal": {
+        "title": "Générer les identifiants et/ou les mots de passe des élèves sélectionnés",
+        "content-message-1": "Les élèves qui ne disposent pas encore d’une méthode de connexion doivent passer par une campagne de votre établissement pour créer leur compte PIX.",
+        "content-message-2": "Un fichier CSV contenant les identifiants ainsi que les mots de passe à usage unique sera généré.",
+        "content-message-3": "Communiquez ces nouveaux mots de passe à usage unique aux élèves. Lorsqu'ils se connecteront avec ce mot de passe, Pix leur demandera d'en saisir un nouveau",
+        "warning-message": "Un identifiant et un mot de passe seront générés pour les élèves ayant un accès au Médiacentre et/ou une adresse e-mail. Les élèves possédant déjà un identifiant verront leur mot de passe réinitialisé."
+      },
       "manage-authentication-method-modal": {
         "title": "Gestion du compte Pix de l’élève",
         "authentication-methods": "Méthodes de connexion",

orga/translations/nl.json

@@ -1281,6 +1281,13 @@
         },
         "students-count": "{count, plural, =0 {0 studenten} =1 {1 student} other {{count} studenten}}"
       },
+      "generate-username-password-modal": {
+        "content-message-1": "Students who do not yet have a login method must go through a campaign at your school to create their PIX account.",
+        "content-message-2": "A CSV file containing login details and one-time passwords will be generated.",
+        "content-message-3": "Give these new one-time passwords to the students. When they log in with this password, Pix will ask them to enter a new one.",
+        "title": "Generate logins and/or passwords for selected students",
+        "warning-message": "A login and password will be generated for students who have access to the Mediacentre and/or an e-mail address. Students who already have a login will have their password reset."
+      },
       "manage-authentication-method-modal": {
         "authentication-methods": "Inlogmethoden",
         "copied": "Gekopieerd",