feat(junior): Add style to login component

junior/app/components/login.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 Login 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="login">
+      <div class="login__informations">
+        <p>{{this.currentUserDisplayName}}</p>
+        <PixButton @variant="tertiary" @iconBefore="logout" @triggerAction={{this.disconnect}}>
+          {{t "components.login.logout-button"}}
+        </PixButton>
+      </div>
+      <PixIcon class="login__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/routes/school/students.js

@@ -13,7 +13,6 @@ export default class StudentsRoute extends Route {
     const division = params.division;
     if (division) {
       const divisionLearners = school.organizationLearners.filter((learner) => learner.division === division);
-      console.log(divisionLearners);
       return {
         division,
         organizationLearners: divisionLearners,

junior/app/styles/app.scss

@@ -22,6 +22,7 @@
 @import 'components/bubble';
 @import 'components/footer';
 @import 'components/issue';
+@import 'components/login';
 @import 'components/oralization-button';
 @import 'components/robot-dialog';
 

junior/app/styles/components/login.scss

@@ -0,0 +1,30 @@
+.login {
+  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;
+  }
+}

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

@@ -38,4 +38,5 @@
 .header_container {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
 }

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

@@ -12,7 +12,7 @@
       />
     </RobotDialog>
 
-    <LoginInformation @learner={{this.model.organizationLearner}} />
+    <Login />
   </div>
   <div class="cards">
     {{#each this.orderedMissionList as |mission|}}

junior/translations/fr.json

@@ -12,9 +12,8 @@
       "play": "J'écoute",
       "stop": "Stop"
     },
-    "login-information": {
-      "connected-user" : "Elève connecté : ",
-      "button-label": "Déconnection"
+    "login": {
+      "logout-button": "Se déconnecter"
     }
   },
   "navigation": {