@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproTable/__tests__/__snapshots__/AmeliproTable.spec.ts.snap

@@ -234,196 +234,370 @@ exports[`AmeliproTable > render correctly 1`] = `
     </div>
   </div>
   <div
-    class="amelipro-table__wrapper--desktop"
     id="amelipro-table-id-desktop"
-    style="
-      overflow-x: auto;
-      max-width: 100%;
-      width: 100%;
-    "
+    style="overflow-x: auto;"
   >
-    <table
-      aria-label="Titre du tableau"
-      class="amelipro-table__table--desktop"
-      id="amelipro-table-id-table"
+    <div
+      class="amelipro-table__wrapper--desktop"
+      style="
+        max-width: 100%;
+        width: 100%;
+      "
     >
-      <thead>
-        <tr id="amelipro-table-id-table-header">
-          <th
-            class="
-              bg-ap-grey-lighten-4
-              font-weight-semibold
-            "
-            id="amelipro-table-id-table-header-cell-0"
-            scope="col"
-            style="
-              min-width: 20%;
-              width: 25%;
-              max-width: 25%;
-              text-align: left;
-            "
-          >
-            <p class="mb-0">
-              Nom
-            </p>
-          </th>
-          <th
-            class="
-              bg-ap-grey-lighten-4
-              font-weight-semibold
-            "
-            id="amelipro-table-id-table-header-cell-1"
-            scope="col"
-            style="
-              min-width: 20%;
-              width: 25%;
-              max-width: 25%;
-              text-align: left;
-            "
-          >
-            <p class="mb-0">
-              Prénom
-            </p>
-          </th>
-          <th
-            class="
-              bg-ap-grey-lighten-4
-              font-weight-semibold
-            "
-            id="amelipro-table-id-table-header-cell-2"
-            scope="col"
-            style="
-              min-width: 20%;
-              width: 25%;
-              max-width: 25%;
-              text-align: left;
-            "
-          >
-            <p class="mb-0">
-              E-mail
-            </p>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr id="amelipro-table-id-table-row-0">
-          <td
-            class=""
-            id="amelipro-table-id-table-row-0-cell-0"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Bernard
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-0-cell-1"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Jean
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-0-cell-2"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              jean.bernard@gmail.com
-            </p>
-          </td>
-        </tr>
-        <tr id="amelipro-table-id-table-row-1">
-          <td
-            class=""
-            id="amelipro-table-id-table-row-1-cell-0"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Pierre
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-1-cell-1"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Simon
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-1-cell-2"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              simon.pierre@gmail.com
-            </p>
-          </td>
-        </tr>
-        <tr id="amelipro-table-id-table-row-2">
-          <td
-            class=""
-            id="amelipro-table-id-table-row-2-cell-0"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Souris
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-2-cell-1"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Michel
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-2-cell-2"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              michel.souris@gmail.com
-            </p>
-          </td>
-        </tr>
-        <tr id="amelipro-table-id-table-row-3">
-          <td
-            class=""
-            id="amelipro-table-id-table-row-3-cell-0"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Jabot
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-3-cell-1"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              Amandine
-            </p>
-          </td>
-          <td
-            class=""
-            id="amelipro-table-id-table-row-3-cell-2"
-            style="text-align: left;"
-          >
-            <p class="mb-0">
-              amandine.jabot@gmail.com
-            </p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+      <table
+        aria-label="Titre du tableau"
+        class="amelipro-table__table--desktop"
+        id="amelipro-table-id-table"
+      >
+        <thead>
+          <tr id="amelipro-table-id-table-header">
+            <th
+              class="
+                bg-ap-grey-lighten-4
+                font-weight-semibold
+              "
+              id="amelipro-table-id-table-header-cell-0"
+              scope="col"
+              style="
+                min-width: 20%;
+                width: 25%;
+                max-width: 25%;
+                text-align: left;
+              "
+            >
+              <p class="
+                d-flex
+                mb-0
+              ">
+                Nom
+                <button
+                  class="
+                    btn--icon
+                    elevation-0
+                    ml-2
+                    rounded-0
+                    sort-btn
+                    v-btn
+                    v-btn--density-default
+                    v-btn--elevated
+                    v-btn--icon
+                    v-btn--size-default
+                    v-btn--variant-elevated
+                    v-theme--light
+                  "
+                  id="amelipro-table-id-table-header-cell-0-asc-sort-btn"
+                  plain=""
+                  style="
+                    height: auto;
+                    width: auto;
+                  "
+                  title="tri asc"
+                  type="button"
+                >
+                  <span class="v-btn__overlay"></span>
+                  <span class="v-btn__underlay"></span>
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <span
+                      class="d-sr-only"
+                      id="amelipro-table-id-table-header-cell-0-asc-sort-btn-btn-label"
+                    >
+                      tri asc
+                    </span>
+                    <span
+                      class="
+                        amelipro-icon
+                        icon-custom
+                      "
+                      id="amelipro-table-id-table-header-cell-0-asc-sort-btn-icon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="
+                          amelipro-custom-icon
+                          custom-color
+                        "
+                        focusable="false"
+                        role="img"
+                        style="
+                          color: #1A1B1B;
+                          height: 9px;
+                          width: 9px;
+                        "
+                      >
+                        <span>
+                          <svg
+                            aria-hidden="true"
+                            style="enable-background:new 0 0 42 42;"
+                            version="1.1"
+                            viewBox="0 0 42 42"
+                            x="0px"
+                            xml:space="preserve"
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                            y="0px"
+                          >
+                            <polygon
+                              class="shape-color"
+                              points="21,2.8 0,39.2 42,39.2 "
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+                <button
+                  class="
+                    btn--icon
+                    elevation-0
+                    rounded-0
+                    sort-btn
+                    v-btn
+                    v-btn--density-default
+                    v-btn--disabled
+                    v-btn--icon
+                    v-btn--size-default
+                    v-btn--variant-elevated
+                    v-theme--light
+                  "
+                  disabled=""
+                  id="amelipro-table-id-table-header-cell-0-desc-sort-btn"
+                  plain=""
+                  style="
+                    height: auto;
+                    width: auto;
+                  "
+                  title="tri desc"
+                  type="button"
+                >
+                  <span class="v-btn__overlay"></span>
+                  <span class="v-btn__underlay"></span>
+                  <!---->
+                  <span
+                    class="v-btn__content"
+                    data-no-activator=""
+                  >
+                    <span
+                      class="d-sr-only"
+                      id="amelipro-table-id-table-header-cell-0-desc-sort-btn-btn-label"
+                    >
+                      tri desc
+                    </span>
+                    <span
+                      class="
+                        amelipro-icon
+                        icon-custom
+                      "
+                      id="amelipro-table-id-table-header-cell-0-desc-sort-btn-icon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="
+                          amelipro-custom-icon
+                          custom-color
+                        "
+                        focusable="false"
+                        role="img"
+                        style="
+                          color: #DDDEDE;
+                          height: 9px;
+                          width: 9px;
+                        "
+                      >
+                        <span>
+                          <svg
+                            aria-hidden="true"
+                            style="enable-background:new 0 0 42 42;"
+                            version="1.1"
+                            viewBox="0 0 42 42"
+                            x="0px"
+                            xml:space="preserve"
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                            y="0px"
+                          >
+                            <polygon
+                              class="shape-color"
+                              points="21,39.2 42,2.8 0,2.8 "
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </span>
+                  <!---->
+                  <!---->
+                </button>
+              </p>
+            </th>
+            <th
+              class="
+                bg-ap-grey-lighten-4
+                font-weight-semibold
+              "
+              id="amelipro-table-id-table-header-cell-1"
+              scope="col"
+              style="
+                min-width: 20%;
+                width: 25%;
+                max-width: 25%;
+                text-align: left;
+              "
+            >
+              <p class="mb-0">
+                Prénom
+                <!-- v-if -->
+                <!-- v-if -->
+              </p>
+            </th>
+            <th
+              class="
+                bg-ap-grey-lighten-4
+                font-weight-semibold
+              "
+              id="amelipro-table-id-table-header-cell-2"
+              scope="col"
+              style="
+                min-width: 20%;
+                width: 25%;
+                max-width: 25%;
+                text-align: left;
+              "
+            >
+              <p class="mb-0">
+                E-mail
+                <!-- v-if -->
+                <!-- v-if -->
+              </p>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr id="amelipro-table-id-table-row-0">
+            <td
+              class=""
+              id="amelipro-table-id-table-row-0-cell-0"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Bernard
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-0-cell-1"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Jean
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-0-cell-2"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                jean.bernard@gmail.com
+              </p>
+            </td>
+          </tr>
+          <tr id="amelipro-table-id-table-row-1">
+            <td
+              class=""
+              id="amelipro-table-id-table-row-1-cell-0"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Pierre
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-1-cell-1"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Simon
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-1-cell-2"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                simon.pierre@gmail.com
+              </p>
+            </td>
+          </tr>
+          <tr id="amelipro-table-id-table-row-2">
+            <td
+              class=""
+              id="amelipro-table-id-table-row-2-cell-0"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Souris
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-2-cell-1"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Michel
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-2-cell-2"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                michel.souris@gmail.com
+              </p>
+            </td>
+          </tr>
+          <tr id="amelipro-table-id-table-row-3">
+            <td
+              class=""
+              id="amelipro-table-id-table-row-3-cell-0"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Jabot
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-3-cell-1"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                Amandine
+              </p>
+            </td>
+            <td
+              class=""
+              id="amelipro-table-id-table-row-3-cell-2"
+              style="text-align: left;"
+            >
+              <p class="mb-0">
+                amandine.jabot@gmail.com
+              </p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
   <!-- v-if -->
   <!-- v-if -->

package/src/components/Amelipro/AmeliproTable/types.d.ts

@@ -14,6 +14,17 @@ export interface AmeliproTableHeader {
 	width: string
 	maxWidth: string
 	descriptionId?: string
+	sort?: IHeaderSort
+}
+
+export interface ISortBtn {
+	label: string
+	disabled: boolean
+}
+
+export interface IHeaderSort {
+	ascendant?: ISortBtn
+	descendant?: ISortBtn
 }
 
 export interface AmeliproCurrentPage {

package/src/components/Captcha/Captcha.mdx

@@ -0,0 +1,72 @@
+import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
+import * as CaptchaStories from './Captcha.stories';
+
+<Meta of={CaptchaStories} />
+
+<div className="header">
+  <h1>Captcha</h1>
+  <p>Le composant `Captcha` est utilisé pour afficher un captcha à l’utilisateur. </p>
+</div>
+
+<Canvas
+  of={CaptchaStories.Default}
+  	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { captcha } from '@cnamts/synapse'
+		</script>
+
+		<template>
+			<VCard class="pa-8" width="400">
+        <Captcha 
+          url-create="..."
+          url-get-image="..."
+          url-get-audio="/..."
+          service="(e) => {
+            // call the API to verify the captcha and return the response
+          }"
+          @validation:success="(e) => { ... }"
+          @validation:error="(e) => { ... }"
+        />
+      </VCard>
+		</template>
+		`
+	}}
+/>
+
+<Story
+  of={CaptchaStories.WarningDocProps}
+/>
+
+## API
+
+<Controls of={CaptchaStories.Default} />
+
+## Context d'utilisation
+
+Le composant Captcha permet d'intéragir avec l'api d'OBS [Live Identity Captcha](https://www.orange-business.com/fr/solutions/securite/live-identity-captcha) (directement ou indirectement).
+
+Pour implementer le composant avec l'api OBS, se referer à la documentation suivante : [la documentation et le postman de l'api d'OBS version 1.16](https://gitlab.cnqd.cnamts.fr/captcha/capt_postman/-/tree/v1.16).
+
+### Détails d'implementation
+
+Les api Captcha d'OBS sont exposées en https.
+
+Pour les appels réalisés depuis un back-end, il est nécessaire d'ajouter le root CA (autorité de certifications racine) au niveau du truststore du serveur hébergeant ce back-end.
+Pour la production et la pré-production, le root CA "DigiCert Global Root CA" est accessible (voir informations de sécurité) depuis le site : [https://captcha.liveidentity.com/documentation](https://captcha.liveidentity.com/documentation).
+
+De plus, les api Captcha d'OBS sont externes / non hébergées par la CNAM.
+Il est donc nécessaire :
+- d'autoriser ces appels sortant dans la liste blanche du firewall Cnam pour la production et le hors prod
+- de réaliser l'ouverture des flux depuis la plateforme d'hébergement (ex : csh-dijon.cnamts.fr)
+Logiquement, ces deux points ont été déjà réalisés.
+
+## Précautions d'utilisation
+
+Pour permettre une bonne expérience utilisateur et éviter de bloquer des utilisateurs légitimes potentiellement en situation de handicap, il est recommandé de suivre les bonnes pratiques suivantes :
+
+ - Ne pas utiliser de captcha lorsque l'utilisateur est déjà authentifié.
+ - Préférer l'utilisation de captcha invisible (API scoring) lorsque c'est possible.
+ - Préferer l'utilisation de captcha uniquement lorsqu'un comportement suspect est détecté (ex : trop de tentatives de connexion échouées).