@movalib/movalib-commons 1.0.23 → 1.0.25

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';

package/dist/index.js

@@ -4,8 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MovaAppType = exports.RoleType = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = void 0;
+exports.MovaAppType = exports.RoleType = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = void 0;
 // Export des composants
+var VehiclePlateField_1 = require("./src/VehiclePlateField");
+Object.defineProperty(exports, "VehiclePlateField", { enumerable: true, get: function () { return __importDefault(VehiclePlateField_1).default; } });
 var TestButton_1 = require("./src/TestButton");
 Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });
 var MovaSnackbar_1 = require("./src/MovaSnackbar");

package/dist/src/MovaLogin.js

@@ -112,7 +112,7 @@ var MovaLogin = function (_a) {
         // Validator pour l'email
         newForm.email = (0, Tools_1.validateField)(form.email, Validator_1.validateEmail, 'Adresse email invalide');
         // Validator pour le mot de passe
-        newForm.password = (0, Tools_1.validateField)(form.password, function (value) { return value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value); }, 'Votre mot de passe doit faire au moins 8 caractères de long');
+        newForm.password = (0, Tools_1.validateField)(form.password, function (value) { return value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value); }, 'Mot de passe invalide');
         setForm(newForm);
         return newForm.email.isValid && newForm.password.isValid;
     };

package/dist/src/MovaSignUp.js

@@ -67,8 +67,7 @@ var Tools_1 = require("./helpers/Tools");
 var styles = {
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh', // Ajustez la hauteur en fonction de vos besoins
+    alignItems: 'center'
 };
 var initialUserFormState = {
     firstname: { value: '', isValid: true },

package/dist/src/VehiclePlateField.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+interface VehiclePlateFieldProps {
+    onValidVehiclePlate: (vehiclePlate: string) => void;
+}
+declare const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps>;
+export default VehiclePlateField;

package/dist/src/VehiclePlateField.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+// Regex pour une plaque d'immatriculation française
+var regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/;
+var VehiclePlateField = function (_a) {
+    var onValidVehiclePlate = _a.onValidVehiclePlate;
+    var _b = (0, react_1.useState)(''), value = _b[0], setValue = _b[1];
+    var _c = (0, react_1.useState)(false), error = _c[0], setError = _c[1];
+    var _d = (0, react_1.useState)(0), lastLength = _d[0], setLastLength = _d[1]; // Ajout d'un état pour stocker la longueur précédente
+    (0, react_1.useEffect)(function () {
+        if (!error && value !== '' && value.match(regex)) {
+            onValidVehiclePlate(value);
+        }
+    }, [error, value, onValidVehiclePlate]);
+    var handleChange = function (e) {
+        var inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides
+        // Vérifier si l'utilisateur est en train de supprimer un caractère
+        var isDeleting = inputValue.length < lastLength;
+        // Supprimer les tirets pour avoir une chaîne propre
+        var cleanInput = inputValue.replace(/-/g, '');
+        // Ajouter des tirets aux positions appropriées
+        if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
+            inputValue = "".concat(cleanInput.slice(0, 2), "-").concat(cleanInput.slice(2));
+        }
+        if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
+            inputValue = "".concat(cleanInput.slice(0, 2), "-").concat(cleanInput.slice(2, 5), "-").concat(cleanInput.slice(5, 7));
+        }
+        setValue(inputValue);
+        setError(!regex.test(inputValue));
+        setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+    };
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { label: "Plaque d'immatriculation", variant: "outlined", value: value, onChange: handleChange, error: error, autoFocus: true, sx: {
+            width: '100%',
+            '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+        }, helperText: error ? "Utilisez le format 'XX-123-XX'" : '' }));
+};
+exports.default = VehiclePlateField;

package/index.ts

@@ -1,6 +1,7 @@
 // src/index.ts
 
 // Export des composants
+export { default as VehiclePlateField } from './src/VehiclePlateField';
 export { default as TestButton } from './src/TestButton';
 export { default as MovaSnackbar } from './src/MovaSnackbar';
 export { default as MovaLogin } from './src/MovaLogin';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/MovaLogin.tsx

@@ -84,7 +84,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
         // Validator pour le mot de passe
         newForm.password = validateField(form.password, 
             value => value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value), 
-            'Votre mot de passe doit faire au moins 8 caractères de long');
+            'Mot de passe invalide');
 
         setForm(newForm);
 

package/src/MovaSignUp.tsx

@@ -16,8 +16,7 @@ import { validateField } from "./helpers/Tools";
 const styles: CSSProperties = {
     display: 'flex',
     justifyContent: 'center',
-    alignItems: 'center',
-    height: '100vh', // Ajustez la hauteur en fonction de vos besoins
+    alignItems: 'center'
 };
 
 const initialUserFormState = {

package/src/VehiclePlateField.tsx

@@ -0,0 +1,64 @@
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+
+interface VehiclePlateFieldProps {
+    onValidVehiclePlate: (vehiclePlate: string) => void;
+  }
+
+// Regex pour une plaque d'immatriculation française
+const regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/; 
+
+const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidVehiclePlate }) => {
+
+  const [value, setValue] = useState<string>('');
+  const [error, setError] = useState<boolean>(false);
+  const [lastLength, setLastLength] = useState<number>(0); // Ajout d'un état pour stocker la longueur précédente
+
+  useEffect(() => {
+    if (!error && value !== '' && value.match(regex)) {
+        onValidVehiclePlate(value);
+    }
+  }, [error, value, onValidVehiclePlate]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+
+    let inputValue = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); // Convertir en majuscules et supprimer les caractères non valides
+
+     // Vérifier si l'utilisateur est en train de supprimer un caractère
+     const isDeleting = inputValue.length < lastLength;
+
+     // Supprimer les tirets pour avoir une chaîne propre
+    const cleanInput = inputValue.replace(/-/g, '');
+
+    // Ajouter des tirets aux positions appropriées
+    if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
+      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2)}`;
+    }
+
+    if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
+      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2, 5)}-${cleanInput.slice(5, 7)}`;
+    }
+
+    setValue(inputValue);
+    setError(!regex.test(inputValue));
+    setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  };
+
+  return (
+    <TextField
+      label="Plaque d'immatriculation"
+      variant="outlined"
+      value={value}
+      onChange={handleChange}
+      error={error}
+      autoFocus
+      sx={{ 
+        width: '100%', 
+        '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+      }}
+      helperText={error ? "Utilisez le format 'XX-123-XX'" : ''}
+    />
+  );
+};
+
+export default VehiclePlateField;