@colisweb/rescript-toolkit 5.26.1 → 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.1",
+  "version": "5.27.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/form/ReSchema.res

@@ -71,7 +71,11 @@ module Make = (Lenses: Lenses) => {
         }): t
       | True({field: Lenses.field<bool>, error: option<string>}): t
       | False({field: Lenses.field<bool>, error: option<string>}): t
-      | OptionNonEmpty({field: Lenses.field<option<'a>>, error: option<string>}): t
+      | OptionNonEmpty({
+          field: Lenses.field<option<'a>>,
+          optionalPredicate?: Lenses.state => bool,
+          error: option<string>,
+        }): t
       | ArrayNonEmpty({field: Lenses.field<array<'a>>, error: option<string>}): t
 
     type schema = array<t>
@@ -96,7 +100,9 @@ module Make = (Lenses: Lenses) => {
       [CustomNestedSchema2({field, predicate})]
     }
 
-    let optionNonEmpty = (~error=?, field) => [OptionNonEmpty({field, error})]
+    let optionNonEmpty = (~error=?, ~optionalPredicate=?, field) => [
+      OptionNonEmpty({field, ?optionalPredicate, error}),
+    ]
 
     let arrayNonEmpty = (~error=?, field) => [ArrayNonEmpty({field, error})]
 
@@ -359,14 +365,16 @@ module Make = (Lenses: Lenses) => {
 
         (Field(field), NestedErrors2(results))
       }
-    | Validation.OptionNonEmpty({field, error}) => {
+    | Validation.OptionNonEmpty({field, error} as props) => {
         let value = Lenses.get(values, field)
 
         (
           Field(field),
-          value->Option.isNone
-            ? Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
-            : Valid,
+          switch value {
+          | _ if props.optionalPredicate->Option.mapWithDefault(false, fn => fn(values)) => Valid
+          | None => Error(error->Belt.Option.getWithDefault(i18n.stringNonEmpty(~value="")))
+          | Some(_) => Valid
+          },
         )
       }
     | Validation.ArrayNonEmpty({field, error}) => {

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>
+}