[FEATURE] Créer le composant des autres moyens de connexion/inscription (PIX-14159)

api/src/identity-access-management/infrastructure/serializers/jsonapi/oidc-identity-providers.serializer.js

@@ -9,11 +9,12 @@ const serialize = function (oidcIdentityProviders) {
         id: oidcIdentityProvider.slug,
         code: oidcIdentityProvider.code,
         organizationName: oidcIdentityProvider.organizationName,
+        slug: oidcIdentityProvider.slug,
         shouldCloseSession: oidcIdentityProvider.shouldCloseSession,
         source: oidcIdentityProvider.source,
       };
     },
-    attributes: ['code', 'organizationName', 'shouldCloseSession', 'source'],
+    attributes: ['code', 'organizationName', 'slug', 'shouldCloseSession', 'source'],
   }).serialize(oidcIdentityProviders);
 };
 

api/tests/identity-access-management/acceptance/application/oidc-provider.admin.route.test.js

@@ -77,6 +77,7 @@ describe('Acceptance | Identity Access Management | Route | Admin | oidc-provide
           attributes: {
             code: 'OIDC_EXAMPLE_NET',
             'organization-name': 'OIDC Example',
+            slug: 'oidc-example-net',
             'should-close-session': true,
             source: 'oidcexamplenet',
           },

api/tests/identity-access-management/acceptance/application/oidc-provider.route.test.js

@@ -43,6 +43,7 @@ describe('Acceptance | Identity Access Management | Application | Route | oidc-p
           attributes: {
             code: 'OIDC_EXAMPLE_NET',
             'organization-name': 'OIDC Example',
+            slug: 'oidc-example-net',
             'should-close-session': true,
             source: 'oidcexamplenet',
           },

api/tests/identity-access-management/unit/application/oidc-provider.admin.controller.test.js

@@ -132,6 +132,7 @@ describe('Unit | Identity Access Management | Application | Controller | Admin |
           attributes: {
             code: 'LIMONADE_OIDC_PROVIDER',
             'organization-name': 'Limonade OIDC Provider',
+            slug: 'limonade-oidc-provider',
             'should-close-session': false,
             source: 'limonade_oidc_provider',
           },
@@ -142,6 +143,7 @@ describe('Unit | Identity Access Management | Application | Controller | Admin |
           attributes: {
             code: 'KOMBUCHA_OIDC_PROVIDER',
             'organization-name': 'Kombucha OIDC Provider',
+            slug: 'kombucha-oidc-provider',
             'should-close-session': true,
             source: 'kombucha_oidc_provider',
           },

api/tests/identity-access-management/unit/application/oidc-provider.controller.test.js

@@ -262,6 +262,7 @@ describe('Unit | Identity Access Management | Application | Controller | oidc-pr
           code: 'SOME_OIDC_PROVIDER',
           source: 'some_oidc_provider',
           'organization-name': 'Some OIDC Provider',
+          slug: 'some-oidc-provider',
           'should-close-session': false,
         },
       });

api/tests/identity-access-management/unit/infrastructure/serializers/jsonapi/oidc-identity-providers.serializer.test.js

@@ -20,6 +20,7 @@ describe('Unit | Identity Access Management | Infrastructure | Serializer | JSON
           attributes: {
             code: 'OIDC_PARTNER',
             'organization-name': 'Partenaire OIDC',
+            slug: 'oidc-partner',
             'should-close-session': true,
             source: 'oidc-external',
           },

mon-pix/app/components/authentication/other-authentication-providers.gjs

@@ -0,0 +1,57 @@
+import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class OtherAuthenticationProviders extends Component {
+  @service oidcIdentityProviders;
+  @service router;
+
+  <template>
+    <section class="authentication-other-authentication-providers-section">
+      <h2 class="authentication-other-authentication-providers-section__heading">
+        {{#if @isForSignup}}
+          {{t "components.authentication.other-authentication-providers.signup-heading"}}
+        {{else}}
+          {{t "components.authentication.other-authentication-providers.login-heading"}}
+        {{/if}}
+      </h2>
+
+      {{#if this.oidcIdentityProviders.featuredIdentityProvider}}
+        <PixButtonLink
+          @route="authentication.login-oidc"
+          @model="{{this.oidcIdentityProviders.featuredIdentityProvider.slug}}"
+          @variant="secondary"
+          @size="large"
+          class="authentication-other-authentication-providers-section__button-link"
+        >
+          <img
+            src="/images/logo/{{this.oidcIdentityProviders.featuredIdentityProvider.slug}}-connect-logo.svg"
+            alt=""
+            class="authentication-other-authentication-providers-section__featured-identity-provider-logo"
+          />
+
+          {{t
+            "components.authentication.other-authentication-providers.continue-with-featured-identity-provider-link"
+            featuredIdentityProvider=this.oidcIdentityProviders.featuredIdentityProvider.organizationName
+          }}</PixButtonLink>
+      {{/if}}
+
+      {{#if this.oidcIdentityProviders.hasOtherIdentityProviders}}
+        <PixButtonLink
+          @route="authentication.sso-selection"
+          @variant="secondary"
+          @size="large"
+          class="authentication-other-authentication-providers-section__button-link"
+        >
+          {{t "components.authentication.other-authentication-providers.select-another-organization-link"}}
+
+          <span class="authentication-other-authentication-providers-section__chevron-right">
+            {{! template-lint-disable "no-bare-strings" }}
+            &#x3009;
+          </span>
+        </PixButtonLink>
+      {{/if}}
+    </section>
+  </template>
+}

mon-pix/app/components/authentication/other-authentication-providers.scss

@@ -0,0 +1,36 @@
+.authentication-other-authentication-providers-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pix-spacing-4x);
+
+  &__heading {
+    display: flex;
+    gap: var(--pix-spacing-6x);
+    margin-top: var(--pix-spacing-10x);
+    margin-bottom: var(--pix-spacing-10x);
+    color: var(--pix-neutral-500);
+  }
+
+  &__heading::before,
+  &__heading::after {
+    flex: 1 1;
+    margin: auto;
+    border-bottom: 1px solid var(--pix-neutral-100);
+    content: "";
+  }
+
+  &__button-link {
+    border: 1px solid;
+  }
+
+  &__featured-identity-provider-logo {
+    width: var(--pix-spacing-6x);
+    margin-right: var(--pix-spacing-4x);
+  }
+
+  // TODO: Use @iconAfter="chevronRight" when possible
+  &__chevron-right {
+    padding-left: var(--pix-spacing-6x);
+    font-weight: 1000;
+  }
+}

mon-pix/app/models/oidc-identity-provider.js

@@ -3,6 +3,7 @@ import Model, { attr } from '@ember-data/model';
 export default class OidcIdentityProvider extends Model {
   @attr() code;
   @attr() organizationName;
+  @attr() slug;
   @attr() shouldCloseSession;
   @attr() source;
 }

mon-pix/app/services/oidc-identity-providers.js

@@ -1,8 +1,14 @@
 import Service, { inject as service } from '@ember/service';
 import isEmpty from 'lodash/isEmpty';
 
+// TODO: Manage this through the API
+const FR_FEATURED_IDENTITY_PROVIDER_CODE = 'POLE_EMPLOI';
+const ORG_FEATURED_IDENTITY_PROVIDER_CODE = 'FWB';
+const FEATURED_IDENTITY_PROVIDER_CODES = [FR_FEATURED_IDENTITY_PROVIDER_CODE, ORG_FEATURED_IDENTITY_PROVIDER_CODE];
+
 export default class OidcIdentityProviders extends Service {
   @service store;
+  @service currentDomain;
 
   get list() {
     return this.store.peekAll('oidc-identity-provider');
@@ -15,6 +21,26 @@ export default class OidcIdentityProviders extends Service {
       .map((provider) => provider.organizationName);
   }
 
+  // TODO: Manage this through the API
+  get featuredIdentityProvider() {
+    return this.list.find((identityProvider) => {
+      const featuredIdentityProviderCode = this.currentDomain.isFranceDomain
+        ? FR_FEATURED_IDENTITY_PROVIDER_CODE
+        : ORG_FEATURED_IDENTITY_PROVIDER_CODE;
+
+      return identityProvider.code === featuredIdentityProviderCode;
+    });
+  }
+
+  // TODO: Manage this through the API
+  get hasOtherIdentityProviders() {
+    if (!this.currentDomain.isFranceDomain) {
+      return false;
+    }
+
+    return this.list.some((identityProvider) => !FEATURED_IDENTITY_PROVIDER_CODES.includes(identityProvider.code));
+  }
+
   isFwbActivated() {
     const identityProviderSlug = 'fwb';
     const oidcIdentityProviders = this.list.filter((provider) => provider.id === identityProviderSlug);

mon-pix/app/styles/app.scss

@@ -137,6 +137,7 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @import 'authentication/oidc-provider-selector';
 @import 'authentication/signin-form';
 @import 'authentication/sso-selection-form';
+@import 'authentication/other-authentication-providers';
 @import 'authentication/password-input/password-checklist';
 @import 'authentication/password-input/password-rule';
 

mon-pix/app/templates/authentication/login.hbs

@@ -11,6 +11,7 @@
     <:content>
       <h1 class="pix-title-m">{{t "pages.sign-in.first-title"}}</h1>
       <Authentication::SigninForm />
+      <Authentication::OtherAuthenticationProviders />
     </:content>
   </AuthenticationLayout>
 {{else}}

mon-pix/mirage/routes/authentication/oidc/index.js

@@ -41,6 +41,7 @@ export default function (config) {
           attributes: {
             code: 'OIDC_PARTNER',
             'organization-name': 'Partenaire OIDC',
+            slug: 'partenaire-oidc',
             'should-close-session': false,
             source: 'oidc-externe',
           },

mon-pix/tests/integration/components/authentication/login-or-register-oidc-test.js

@@ -16,6 +16,7 @@ module('Integration | Component | authentication | login-or-register-oidc', func
       id: 'oidc-partner',
       code: 'OIDC_PARTNER',
       organizationName: 'Partenaire OIDC',
+      slug: 'partenaire-oidc',
       shouldCloseSession: false,
       source: 'oidc-externe',
     };