feat(junior): display identified learner on every relevant pages

1024pix · Jan 16, 2025 · 177a8b6 · 177a8b6
1 parent be52f04
commit 177a8b6
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 45 deletions.
diff --git a/docs/security/authenticate_external_IDP.puml b/docs/security/authenticate_external_IDP.puml
@@ -10,7 +10,7 @@ participant DB
 end box
 
 == Connexion au GAR ==
-utilisateur -> navigateur: saisit identifiant et mot de passe \net clique sur "Login"
+utilisateur -> navigateur: saisit identifiant et mot de passe \net clique sur "IdentifiedLearner"
 navigateur -> GAR : POST /auth/login \nQP: email=<EMAIL>&password=<PASSWORD>
 GAR -> navigateur: 302_FOUND Header Set-Cookie: oneSessionId="090967(..)khpt0TA="
 navigateur -> GAR : GET / \n Header Cookie: oneSessionId="090967(..)khpt0TA="

diff --git a/junior/app/components/challenge/challenge.gjs b/junior/app/components/challenge/challenge.gjs
@@ -1,16 +1,17 @@
-import { action } from '@ember/object';
-import { service } from '@ember/service';
+import {action} from '@ember/object';
+import {service} from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { t } from 'ember-intl';
-import { pageTitle } from 'ember-page-title';
+import {tracked} from '@glimmer/tracking';
+import {t} from 'ember-intl';
+import {pageTitle} from 'ember-page-title';
 import ENV from 'junior/config/environment';
 
 import Bubble from '../bubble';
 import DelayedElement from '../delayed-element';
 import RobotDialog from '../robot-dialog';
 import ChallengeContent from './challenge-content';
 import ChallengeLayout from './challenge-layout';
+import IdentifiedLearner from '../identified-learner';
 const CHALLENGE_DISPLAY_DELAY = ENV.APP.CHALLENGE_DISPLAY_DELAY;
 
 export default class Challenge extends Component {
@@ -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}}

diff --git a/junior/app/components/identified-learner.gjs b/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>
+}
diff --git a/junior/app/controllers/school/students.js b/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();

diff --git a/junior/app/styles/app.scss b/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';
 

diff --git a/junior/app/styles/components/challenge/challenge.scss b/junior/app/styles/components/challenge/challenge.scss
@@ -0,0 +1,11 @@
+.header_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .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);
+  }
+}
diff --git a/junior/app/styles/components/identified-learner.scss b/junior/app/styles/components/identified-learner.scss
@@ -0,0 +1,30 @@
+.identified-learner {
+  align-items: center;
+  display: flex;
+  gap: var(--pix-spacing-3x);
+  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 {
+    background-color: var(--pix-primary-300);
+    border-radius: 50%;
+    fill: var(--pix-neutral-0);
+    padding: var(--pix-spacing-1x);
+    height: 40px;
+    width: 40px;
+  }
+}
diff --git a/junior/app/styles/pages/identified/missions/introduction.scss b/junior/app/styles/pages/identified/missions/introduction.scss
@@ -3,6 +3,12 @@
   flex-direction: column;
   align-content: center;
 
+  .header_container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
   .button-actions__icon {
     width: 20px;
     height: 20px;

diff --git a/junior/app/styles/pages/identified/missions/list.scss b/junior/app/styles/pages/identified/missions/list.scss
@@ -34,3 +34,9 @@
     }
   }
 }
+
+.header_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
diff --git a/junior/app/styles/pages/identified/missions/mission.scss b/junior/app/styles/pages/identified/missions/mission.scss
@@ -1,6 +1,12 @@
 .mission-page {
   margin-top: 20px;
 
+  .header_container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
   &__body {
     display: flex;
     margin-top: 16px;

diff --git a/junior/app/templates/assessment/results.hbs b/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"}}

diff --git a/junior/app/templates/identified/missions/list.hbs b/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">

diff --git a/junior/app/templates/identified/missions/mission/index.hbs b/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

diff --git a/junior/app/templates/identified/missions/mission/introduction.hbs b/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

diff --git a/junior/translations/fr.json b/junior/translations/fr.json
@@ -30,6 +30,9 @@
       "label": "Lire la consigne à haute voix",
       "play": "J'écoute",
       "stop": "Stop"
+    },
+    "login": {
+      "logout-button": "Se déconnecter"
     }
   },
   "navigation": {