@colisweb/rescript-toolkit 5.26.2 → 5.27.0

package/locale/fr.json

@@ -1,4 +1,9 @@
 [
+  {
+    "id": "_0195a359",
+    "defaultMessage": "Au moins 1 majuscule",
+    "message": "Au moins 1 majuscule"
+  },
   {
     "id": "_0475def8",
     "defaultMessage": "Fin",
@@ -19,6 +24,11 @@
     "defaultMessage": "Mardi",
     "message": "Mardi"
   },
+  {
+    "id": "_10b714f3",
+    "defaultMessage": "Au moins 10 caractères",
+    "message": "Au moins 10 caractères"
+  },
   {
     "id": "_1484eaf0",
     "defaultMessage": "Format requis : 14 chiffres",
@@ -54,6 +64,11 @@
     "defaultMessage": "Jeudi",
     "message": "Jeudi"
   },
+  {
+    "id": "_356c2591",
+    "defaultMessage": "Au moins 1 minuscule",
+    "message": "Au moins 1 minuscule"
+  },
   {
     "id": "_435887be",
     "defaultMessage": "Seulement",
@@ -104,6 +119,11 @@
     "defaultMessage": "Une erreur est survenue lors de la recherche",
     "message": "Une erreur est survenue lors de la recherche"
   },
+  {
+    "id": "_6f6118f7",
+    "defaultMessage": "Votre mot de passe ne doit pas contenir :",
+    "message": "Votre mot de passe ne doit pas contenir :"
+  },
   {
     "id": "_703b9075",
     "defaultMessage": "Valeur non valide.",
@@ -144,6 +164,11 @@
     "defaultMessage": "Doit être un entier positif",
     "message": "Doit être un entier positif"
   },
+  {
+    "id": "_8b33a5ae",
+    "defaultMessage": "Votre identifiant",
+    "message": "Votre identifiant"
+  },
   {
     "id": "_8f8eb0df",
     "defaultMessage": "Vendredi",
@@ -219,6 +244,11 @@
     "defaultMessage": "Mauvais format (req: {exemple})",
     "message": "Mauvais format (req: {exemple})"
   },
+  {
+    "id": "_d4abc929",
+    "defaultMessage": "Le mot de passe doit contenir :",
+    "message": "Le mot de passe doit contenir :"
+  },
   {
     "id": "_d56f025d",
     "defaultMessage": "Champs requis",
@@ -254,6 +284,11 @@
     "defaultMessage": "Nbr colis",
     "message": "Nbr colis"
   },
+  {
+    "id": "_f1737662",
+    "defaultMessage": "Au moins 1 chiffre",
+    "message": "Au moins 1 chiffre"
+  },
   {
     "id": "clipboard.copied",
     "defaultMessage": "Copied to clipboard",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.26.2",
+  "version": "5.27.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/Toolkit__Ui.res

@@ -43,3 +43,4 @@ module WeekdayNavigation = Toolkit__Ui_WeekdayNavigation
 module Popover = Toolkit__Ui_Popover
 module DropdownMenu = Toolkit__Ui_DropdownMenu
 module ScrollArea = Toolkit__Ui_ScrollArea
+module PasswordRulesNotice = Toolkit__Ui_PasswordRulesNotice

package/src/ui/Toolkit__Ui_PasswordRulesNotice.res

@@ -0,0 +1,75 @@
+open ReactIntl
+
+module PasswordHint = {
+  @react.component
+  let make = (~isValid, ~children) => {
+    <div
+      className={cx([
+        "flex flex-row gap-1 items-center transition-colors duration-150 ease-in",
+        isValid ? "text-success-700 font-semibold" : "",
+      ])}>
+      <ReactIcons.MdCheckCircle
+        className={cx([
+          "transition-colors duration-150 ease-in",
+          isValid ? "text-success-700" : "text-info-400",
+        ])}
+      />
+      children
+    </div>
+  }
+}
+@react.component
+let make = (~login=?, ~password) => {
+  let passwordHasEnoughCharacters = password->Js.String2.length >= 10
+  let passwordHasMinusCharacter = React.useMemo(
+    () => {Js.Re.test_(%re("/(?=.*[a-z])./"), password)},
+    [password],
+  )
+  let passwordHasUpperCharacter = React.useMemo(
+    () => Js.Re.test_(%re("/(?=.*[A-Z])./"), password),
+    [password],
+  )
+  let passwordHasDigit = React.useMemo(() => Js.Re.test_(%re("/(?=.*\d)./"), password), [password])
+
+  <div
+    className="bg-info-50 rounded-lg p-2 flex flex-row items-center gap-2 border border-info-600">
+    <ReactIcons.FaInfoCircle size={30} className="text-info-600 mr-2" />
+    <div className="text-info-600">
+      <p className="mb-2 font-semibold">
+        <FormattedMessage defaultMessage={"Le mot de passe doit contenir :"} />
+      </p>
+      <div className="grid grid-cols-2 text-sm gap-2">
+        <PasswordHint isValid={passwordHasEnoughCharacters}>
+          <FormattedMessage defaultMessage={"Au moins 10 caractères"} />
+        </PasswordHint>
+        <PasswordHint isValid={passwordHasMinusCharacter}>
+          <FormattedMessage defaultMessage={"Au moins 1 minuscule"} />
+        </PasswordHint>
+        <PasswordHint isValid={passwordHasDigit}>
+          <FormattedMessage defaultMessage={"Au moins 1 chiffre"} />
+        </PasswordHint>
+        <PasswordHint isValid={passwordHasUpperCharacter}>
+          <FormattedMessage defaultMessage={"Au moins 1 majuscule"} />
+        </PasswordHint>
+      </div>
+      {login->Option.mapWithDefault(React.null, login => {
+        let passwordDontContainLogin = !(
+          password
+          ->Js.String2.toLowerCase
+          ->Js.String2.includes(login->Js.String2.toLowerCase)
+        )
+
+        <>
+          <p className="mt-4 mb-2 font-semibold">
+            <FormattedMessage defaultMessage={"Votre mot de passe ne doit pas contenir :"} />
+          </p>
+          <div className="grid grid-cols-2 text-sm gap-2">
+            <PasswordHint isValid={passwordDontContainLogin && password !== ""}>
+              <FormattedMessage defaultMessage={"Votre identifiant"} />
+            </PasswordHint>
+          </div>
+        </>
+      })}
+    </div>
+  </div>
+}