[FEATURE] Affichage de l'utilisateur identifié sur toutes les pages pertinentes (PIX-16095)

junior/app/components/challenge/challenge.gjs

@@ -8,6 +8,7 @@ import ENV from 'junior/config/environment';
 
 import Bubble from '../bubble';
 import DelayedElement from '../delayed-element';
+import IdentifiedLearner from '../identified-learner';
 import RobotDialog from '../robot-dialog';
 import ChallengeContent from './challenge-content';
 import ChallengeLayout from './challenge-layout';
@@ -141,22 +142,25 @@ export default class Challenge extends Component {
   <template>
     {{pageTitle (t "pages.challenge.title")}}
     <ChallengeLayout>
-      <RobotDialog @class={{this.robotMood}}>
-        {{#each @challenge.instructions as |instruction index|}}
-          <DelayedElement @shouldDisplayIn={{this.bubbleDisplayDelay index}}>
-            <Bubble @message={{instruction}} @oralization={{@oralization}} />
-          </DelayedElement>
-        {{/each}}
-
-        {{#if this.robotFeedback.message}}
-          <Bubble
-            @message={{this.robotFeedback.message}}
-            @status={{this.robotFeedback.status}}
-            @oralization={{@oralization}}
-            aria-live="polite"
-          />
-        {{/if}}
-      </RobotDialog>
+      <div class="header_container">
+        <RobotDialog @class={{this.robotMood}}>
+          {{#each @challenge.instructions as |instruction index|}}
+            <DelayedElement @shouldDisplayIn={{this.bubbleDisplayDelay index}}>
+              <Bubble @message={{instruction}} @oralization={{@oralization}} />
+            </DelayedElement>
+          {{/each}}
+
+          {{#if this.robotFeedback.message}}
+            <Bubble
+              @message={{this.robotFeedback.message}}
+              @status={{this.robotFeedback.status}}
+              @oralization={{@oralization}}
+              aria-live="polite"
+            />
+          {{/if}}
+        </RobotDialog>
+        <IdentifiedLearner />
+      </div>
       <DelayedElement @shouldDisplayIn={{this.challengeItemDisplayDelay}}>
         <ChallengeContent
           @setAnswerValue={{this.setAnswerValue}}

junior/app/components/challenge/content/qrocm.gjs

@@ -40,8 +40,6 @@ export default class Qrocm extends Component {
       block.ariaLabel = block.autoAriaLabel ? `Réponse {${block.ariaLabel}}` : block.ariaLabel;
       return block;
     });
-    console.log(this.args.challenge);
-    console.log(proposals);
     return proposals;
   }
 

junior/app/components/identified-learner.gjs

@@ -0,0 +1,32 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class IdentifiedLearner extends Component {
+  @service router;
+  @service currentLearner;
+
+  get currentUserDisplayName() {
+    return this.currentLearner.learner?.displayName;
+  }
+
+  @action
+  disconnect() {
+    this.router.transitionTo(this.currentLearner.learner?.schoolUrl);
+  }
+
+  <template>
+    <div class="identified-learner">
+      <div class="identified-learner__informations">
+        <p>{{this.currentUserDisplayName}}</p>
+        <PixButton @variant="tertiary" @iconBefore="logout" @triggerAction={{this.disconnect}}>
+          {{t "components.login.logout-button"}}
+        </PixButton>
+      </div>
+      <PixIcon class="identified-learner__icon" @name="userCircle" />
+    </div>
+  </template>
+}

junior/app/controllers/school/students.js

@@ -14,6 +14,7 @@ export default class Students extends Controller {
   identifyUser(learner) {
     this.currentLearner.setLearner({
       id: learner.id,
+      displayName: learner.displayName,
       schoolUrl: this.model.schoolUrl,
     });
     styleToolkit.backgroundBlob.reset();

junior/app/styles/app.scss

@@ -11,6 +11,7 @@
 @import 'globals/fonts';
 
 // Components
+@import 'components/challenge/challenge';
 @import 'components/challenge/challenge-actions';
 @import 'components/challenge/challenge-embed-simulator';
 @import 'components/challenge/challenge-content';
@@ -23,6 +24,7 @@
 @import 'components/bubble';
 @import 'components/footer';
 @import 'components/issue';
+@import 'components/identified-learner';
 @import 'components/oralization-button';
 @import 'components/robot-dialog';
 

junior/app/styles/components/challenge/challenge.scss

@@ -0,0 +1,11 @@
+.header_container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .identified-learner {
+    // Negative margin to set identified user outside the container on the far right
+    // Equals half of the total margin outside the challenge content + offset
+    margin-right: calc(((100% - 100vw) / 2) + 45px);
+  }
+}

junior/app/styles/components/identified-learner.scss

@@ -0,0 +1,30 @@
+.identified-learner {
+  display: flex;
+  gap: var(--pix-spacing-3x);
+  align-items: center;
+  font-weight: var(--font-medium);
+
+  &__informations {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+
+    button {
+      padding: 0;
+    }
+
+    p {
+      font-weight: var(--pix-font-bold);
+      white-space: nowrap;
+    }
+  }
+
+  &__icon {
+    width: 40px;
+    height: 40px;
+    padding: var(--pix-spacing-1x);
+    background-color: var(--pix-primary-300);
+    border-radius: 50%;
+    fill: var(--pix-neutral-0);
+  }
+}

junior/app/styles/pages/identified/missions/introduction.scss

@@ -3,6 +3,12 @@
   flex-direction: column;
   align-content: center;
 
+  .header_container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
   .button-actions__icon {
     width: 20px;
     height: 20px;

junior/app/styles/pages/identified/missions/list.scss

@@ -34,3 +34,9 @@
     }
   }
 }
+
+.header_container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}

junior/app/styles/pages/identified/missions/mission.scss

@@ -1,6 +1,12 @@
 .mission-page {
   margin-top: 20px;
 
+  .header_container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
   &__body {
     display: flex;
     margin-top: 16px;

junior/app/templates/assessment/results.hbs

@@ -1,8 +1,11 @@
 {{page-title (t "pages.missions.end-page.title")}}
 <div class="mission-page">
-  <RobotDialog @class={{this.robotMood}}>
-    <Bubble @message={{t this.resultMessage}} @status="success" />
-  </RobotDialog>
+  <div class="header_container">
+    <RobotDialog @class={{this.robotMood}}>
+      <Bubble @message={{t this.resultMessage}} @status="success" />
+    </RobotDialog>
+    <IdentifiedLearner />
+  </div>
   <div class="mission-page__body">
     <MissionCard::CompletedMissionCard
       @missionLabelStatus={{t "pages.missions.list.status.completed.label"}}

junior/app/templates/identified/missions/list.hbs

@@ -1,16 +1,18 @@
 {{page-title (t "pages.missions.list.title")}}
 <div>
-  <RobotDialog>
-    <Bubble @message={{t "pages.missions.list.instruction" prenom=this.model.organizationLearner.firstName}} />
-    <Bubble
-      @message={{t
-        "pages.missions.list.back-to-students"
-        prenom=this.model.organizationLearner.firstName
-        backUrl=this.schoolUrl
-      }}
-    />
-  </RobotDialog>
-
+  <div class="header_container">
+    <RobotDialog>
+      <Bubble @message={{t "pages.missions.list.instruction" prenom=this.model.organizationLearner.firstName}} />
+      <Bubble
+        @message={{t
+          "pages.missions.list.back-to-students"
+          prenom=this.model.organizationLearner.firstName
+          backUrl=this.schoolUrl
+        }}
+      />
+    </RobotDialog>
+    <IdentifiedLearner />
+  </div>
   <div class="cards">
     {{#each this.orderedMissionList as |mission|}}
       <PixButton @triggerAction={{fn this.goToMission mission.id}} class="card">

junior/app/templates/identified/missions/mission/index.hbs

@@ -1,8 +1,11 @@
 {{page-title (t "pages.missions.start-page.title")}}
 <div class="mission-page">
-  <RobotDialog>
-    <Bubble @message={{t "pages.missions.start-page.welcome"}} />
-  </RobotDialog>
+  <div class="header_container">
+    <RobotDialog>
+      <Bubble @message={{t "pages.missions.start-page.welcome"}} />
+    </RobotDialog>
+    <IdentifiedLearner />
+  </div>
   <div class="mission-page__body">
 
     <MissionCard::MissionCard

junior/app/templates/identified/missions/mission/introduction.hbs

@@ -2,12 +2,15 @@
 
 <Challenge::ChallengeLayout>
   <div class="mission-introduction">
-    <RobotDialog>
-      <Bubble
-        @message={{t "pages.missions.introduction-page.welcome"}}
-        @oralization={{@model.learnerHasOralizationFeature}}
-      />
-    </RobotDialog>
+    <div class="header_container">
+      <RobotDialog>
+        <Bubble
+          @message={{t "pages.missions.introduction-page.welcome"}}
+          @oralization={{@model.learnerHasOralizationFeature}}
+        />
+      </RobotDialog>
+      <IdentifiedLearner />
+    </div>
     <div class="mission-introduction__container">
       <div class="mission-introduction__media">
         <Challenge::Content::ChallengeMedia

junior/tests/acceptance/access-school-test.js

@@ -214,6 +214,7 @@ module('Acceptance | School', function (hooks) {
         // then
         assert.deepEqual(currentLearner.learner, {
           id: 1,
+          displayName: 'Sara A.',
           schoolUrl: '/schools/MINIPIXOU',
         });
       });

junior/tests/acceptance/display-missions-list-test.js

@@ -20,6 +20,7 @@ module('Acceptance | Display missions list', function (hooks) {
 
     identifyLearner(this.owner, {
       id: learner.id,
+      displayName: 'learner',
       completedMissionIds: learner.completedMissionIds,
       startedMissionIds: learner.startedMissionIds,
     });
@@ -68,7 +69,12 @@ module('Acceptance | Display missions list', function (hooks) {
       )
       .exists();
 
-    const missionsList = screen.getAllByRole('button');
+    const allButton = screen.getAllByRole('button');
+    //Permet de retirer le boutton de logout de <identifiedLearner/>
+    const missionsList = allButton.filter(
+      (mission) => !mission.textContent.includes(t('components.login.logout-button')),
+    );
+
     assert.strictEqual(missionsList.length, 3);
 
     assert.true(missionsList[0].innerHTML.includes('mission_2'));

junior/translations/fr.json

@@ -26,6 +26,9 @@
       },
       "title": "Écran dans le mauvais sens"
     },
+    "login": {
+      "logout-button": "Se déconnecter"
+    },
     "oralization-button": {
       "label": "Lire la consigne à haute voix",
       "play": "J'écoute",