@movalib/movalib-commons 1.1.15 → 1.1.17

package/devIndex.tsx

@@ -12,7 +12,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import DatePicker from '@mui/lab/DatePicker';
 import frLocale from 'date-fns/locale/fr';
 import QRCode from './src/QRCode';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Button, Container, Typography } from '@mui/material';
 import GarageService from './src/services/GarageService';
 import AuthenticationService from './src/services/AuthenticationService';
 import Logger from './src/helpers/Logger';
@@ -21,6 +21,7 @@ import ScheduleFields, { DaySchedule } from './src/ScheduleFields';
 import Schedule from './src/models/Schedule';
 import { flexCenter } from './src/helpers/Tools';
 import AccountValidation from './src/AccountValidation';
+import VehiclePlateField from './src/VehiclePlateField';
 
 const App = () => {
 
@@ -106,15 +107,26 @@ const App = () => {
         <ThemeProvider theme={theme}>
           <Box sx={{ mb: 4}}>
 
-            <MovaLogin movaAppType={MovaAppType.GARAGE} 
-            version="0.1.3"
-            onSubmit={function (form: MovaLoginForm): void {
-              alert('Form Submitted !');
-            } } onSubmitForgotPassword={function (email: string): void {
-              throw new Error('Function not implemented.');
-            } } />
-
-            <MovaSignUp movaAppType={MovaAppType.INDIVIDUAL} onSubmit={function (form: MovaLoginForm): void {
+          <Container style={flexCenter} sx={{ width: '400px', mt: 2}}>
+            <VehiclePlateField onValidVehiclePlate={function (vehiclePlate: string): void {
+                alert('plaque valide');
+              } } />
+          </Container>
+ 
+
+            <MovaLogin 
+              darkMode={false}
+              movaAppType={MovaAppType.GARAGE} 
+              version="0.1.3"
+              onSubmit={function (form: MovaLoginForm): void {
+                alert('Form Submitted !');
+              } } onSubmitForgotPassword={function (email: string): void {
+                throw new Error('Function not implemented.');
+              } } />
+
+            <MovaSignUp 
+              darkMode={false}
+              movaAppType={MovaAppType.INDIVIDUAL} onSubmit={function (form: MovaLoginForm): void {
               alert('Form Submitted !');
             } } />
 

package/dist/devIndex.js

@@ -58,6 +58,7 @@ var ScheduleFields_1 = __importDefault(require("./src/ScheduleFields"));
 var Schedule_1 = __importDefault(require("./src/models/Schedule"));
 var Tools_1 = require("./src/helpers/Tools");
 var AccountValidation_1 = __importDefault(require("./src/AccountValidation"));
+var VehiclePlateField_1 = __importDefault(require("./src/VehiclePlateField"));
 var App = function () {
     Logger_1.default.enableLogging();
     // Chargement de données garage de test
@@ -118,11 +119,13 @@ var App = function () {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(MovaLogin_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Container, __assign({ style: Tools_1.flexCenter, sx: { width: '400px', mt: 2 } }, { children: (0, jsx_runtime_1.jsx)(VehiclePlateField_1.default, { onValidVehiclePlate: function (vehiclePlate) {
+                                        alert('plaque valide');
+                                    } }) })), (0, jsx_runtime_1.jsx)(MovaLogin_1.default, { darkMode: false, movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
                                     alert('Form Submitted !');
                                 }, onSubmitForgotPassword: function (email) {
                                     throw new Error('Function not implemented.');
-                                } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
+                                } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
                                     alert('Form Submitted !');
                                 } }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
                             throw new Error('Function not implemented.');

package/dist/index.d.ts

@@ -40,4 +40,4 @@ export { readCookie, deleteCookie } from './src/helpers/CookieUtils';
 export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty, getApplicationShortLabel } from './src/helpers/Tools';
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
 export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLetter } from './src/helpers/DateUtils';
-export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType, DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType, ProductType, OrderPreference, OrderState, SlotAlgorithm } from './src/helpers/Enums';
+export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType, DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType, ProductType, OrderPreference, OrderState, SlotAlgorithm, VehiclePlateFormat as VehiclePlateType } from './src/helpers/Enums';

package/dist/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MovaAppType = exports.RoleType = exports.capitalizeFirstLetter = exports.getLongFormattedDateTime = exports.formatDateByCountryCode = exports.validateEmail = exports.validateText = exports.validatePhoneNumber = exports.getApplicationShortLabel = exports.isEmpty = exports.formatFrenchVehiclePlate = exports.formatVehicleTire = exports.validateField = exports.deleteCookie = exports.readCookie = exports.VehicleTire = exports.Event = exports.Schedule = exports.Garage = exports.Document = exports.Vehicle = exports.Address = exports.Role = exports.User = exports.Customer = exports.Logger = exports.Operation = exports.Prestation = exports.Product = exports.Supplier = exports.GenderSelector = exports.ConfirmationDialog = exports.MovaVehicleTireField = exports.MovaCopyright = exports.MovaSignUp = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = exports.VehiclePlateField = exports.QRCode = exports.MovaDialog = exports.Loader = exports.MovaDigitalPassport = exports.VehicleFullCard = exports.ScheduleFields = exports.AddressFields = exports.AccountValidation = exports.UserService = exports.GarageService = exports.AuthenticationService = void 0;
-exports.SlotAlgorithm = exports.OrderState = exports.OrderPreference = exports.ProductType = exports.PartsApplicationType = exports.DateFormatTypes = exports.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = void 0;
+exports.VehiclePlateType = exports.SlotAlgorithm = exports.OrderState = exports.OrderPreference = exports.ProductType = exports.PartsApplicationType = exports.DateFormatTypes = exports.Gender = exports.DocumentState = exports.DigitalPassportIndex = exports.DocumentType = exports.EventType = exports.EventState = exports.DayOfWeek = void 0;
 // Export des services
 var AuthenticationService_1 = require("./src/services/AuthenticationService");
 Object.defineProperty(exports, "AuthenticationService", { enumerable: true, get: function () { return __importDefault(AuthenticationService_1).default; } });
@@ -114,3 +114,4 @@ Object.defineProperty(exports, "ProductType", { enumerable: true, get: function
 Object.defineProperty(exports, "OrderPreference", { enumerable: true, get: function () { return Enums_1.OrderPreference; } });
 Object.defineProperty(exports, "OrderState", { enumerable: true, get: function () { return Enums_1.OrderState; } });
 Object.defineProperty(exports, "SlotAlgorithm", { enumerable: true, get: function () { return Enums_1.SlotAlgorithm; } });
+Object.defineProperty(exports, "VehiclePlateType", { enumerable: true, get: function () { return Enums_1.VehiclePlateFormat; } });

package/dist/src/MovaLogin.d.ts

@@ -14,6 +14,7 @@ interface MovaLoginProps {
     movaAppType: MovaAppType;
     onSubmit: (form: MovaLoginForm) => void;
     onSubmitForgotPassword: (email: string) => void;
+    darkMode: boolean;
     alertMessage?: string;
     alertSeverity?: AlertColor;
     loading?: boolean;

package/dist/src/MovaLogin.js

@@ -55,6 +55,8 @@ var react_1 = require("react");
 var lab_1 = require("@mui/lab");
 var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
 var logo_pro_large_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large.png"));
+var logo_large_dm_png_1 = __importDefault(require("./assets/images/logo/logo_large_dm.png"));
+var logo_pro_large_dm_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large_dm.png"));
 var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green_large.png"));
 var leaf_pink_large_png_1 = __importDefault(require("./assets/images/leaf_pink_large.png"));
 var material_1 = require("@mui/material");
@@ -83,13 +85,13 @@ var initialFormState = {
  * ATTENTION : la page attendue pour le bouton "Créer mon compte" doit pointer vers "/signup"
  */
 var MovaLogin = function (_a) {
-    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, onSubmitForgotPassword = _a.onSubmitForgotPassword, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, version = _a.version;
-    var _b = (0, react_1.useState)(initialFormState), form = _b[0], setForm = _b[1];
-    var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
+    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, onSubmitForgotPassword = _a.onSubmitForgotPassword, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, version = _a.version;
+    var _c = (0, react_1.useState)(initialFormState), form = _c[0], setForm = _c[1];
+    var _d = (0, react_1.useState)(""), message = _d[0], setMessage = _d[1];
     var theme = (0, material_1.useTheme)();
     var history = (0, react_router_dom_1.useHistory)();
-    var _d = (0, react_1.useState)(false), openForgotPassword = _d[0], setOpenForgotPassword = _d[1];
-    var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
+    var _e = (0, react_1.useState)(false), openForgotPassword = _e[0], setOpenForgotPassword = _e[1];
+    var _f = (0, react_1.useState)(false), showPassword = _f[0], setShowPassword = _f[1];
     var handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -125,9 +127,16 @@ var MovaLogin = function (_a) {
         return newForm.email.isValid && newForm.password.isValid;
     };
     var getMovaLogo = function () {
-        return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
-            movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_png_1.default :
-                movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
+        if (darkMode) {
+            return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_dm_png_1.default :
+                movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_dm_png_1.default :
+                    movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_dm_png_1.default : logo_large_dm_png_1.default;
+        }
+        else {
+            return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
+                movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_png_1.default :
+                    movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
+        }
     };
     var handleOnClickSignUp = function (e) {
         e.preventDefault();
@@ -170,9 +179,17 @@ var MovaLogin = function (_a) {
                             display: 'flex',
                             flexDirection: 'column',
                             alignItems: 'center',
-                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", autoFocus: true, onChange: function (e) { return handleInputChange(e); }, value: form.email.value, error: !form.email.isValid, helperText: form.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : 'password', id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error, InputProps: {
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", autoFocus: true, onChange: function (e) { return handleInputChange(e); }, value: form.email.value, error: !form.email.isValid, helperText: form.email.error, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : 'password', id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error, InputProps: {
                                     endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: handleClickShowPassword }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
-                                } }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Se connecter" }) })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickForgotPassword(e); }, sx: { cursor: 'pointer' } }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.INDIVIDUAL && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickSignUp(e); }, sx: { cursor: 'pointer' } }, { children: "Cr\u00E9er mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 1 } }), version && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: 'body2', color: theme.palette.grey[200], sx: { textAlign: 'center' } }, { children: version })), openForgotPassword && dialogForgotPassword()] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                                }, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Se connecter" }) })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickForgotPassword(e); }, sx: { cursor: 'pointer' } }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.INDIVIDUAL && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickSignUp(e); }, sx: { cursor: 'pointer' } }, { children: "Cr\u00E9er mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 1 } }), version && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: 'body2', color: theme.palette.grey[200], sx: { textAlign: 'center' } }, { children: version })), openForgotPassword && dialogForgotPassword()] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
                     float: 'right',
                     width: '250px',
                     height: '400px',

package/dist/src/MovaSignUp.d.ts

@@ -13,6 +13,7 @@ import { MovaAppType } from "./helpers/Enums";
 interface MovaSignUpProps {
     movaAppType: MovaAppType;
     onSubmit: (form: MovaUserSignUpForm) => void;
+    darkMode: boolean;
     alertMessage?: string;
     alertSeverity?: AlertColor;
     loading?: boolean;

package/dist/src/MovaSignUp.js

@@ -56,6 +56,8 @@ var lab_1 = require("@mui/lab");
 var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
 var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
 var logo_pro_large_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large.png"));
+var logo_large_dm_png_1 = __importDefault(require("./assets/images/logo/logo_large_dm.png"));
+var logo_pro_large_dm_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large_dm.png"));
 var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green_large.png"));
 var leaf_pink_large_png_1 = __importDefault(require("./assets/images/leaf_pink_large.png"));
 var material_1 = require("@mui/material");
@@ -89,11 +91,12 @@ var initialUserFormState = {
  * ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
  */
 var MovaLogin = function (_a) {
-    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity;
-    var _b = (0, react_1.useState)(initialUserFormState), userForm = _b[0], setUserForm = _b[1];
+    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity;
+    var _c = (0, react_1.useState)(initialUserFormState), userForm = _c[0], setUserForm = _c[1];
     var history = (0, react_router_dom_1.useHistory)();
-    var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
-    var _d = (0, react_1.useState)(false), showPassword = _d[0], setShowPassword = _d[1];
+    var _d = (0, react_1.useState)(""), message = _d[0], setMessage = _d[1];
+    var theme = (0, material_1.useTheme)();
+    var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
     var handleDateChange = function (name, date) {
         var _a;
         console.log(date);
@@ -162,9 +165,16 @@ var MovaLogin = function (_a) {
             && newForm.gender.isValid && newForm.birthDate.isValid && newForm.acceptsTerms.isValid;
     };
     var getMovaLogo = function () {
-        return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
-            movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_png_1.default :
-                movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
+        if (darkMode) {
+            return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_dm_png_1.default :
+                movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_dm_png_1.default :
+                    movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_dm_png_1.default : logo_large_dm_png_1.default;
+        }
+        else {
+            return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
+                movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_png_1.default :
+                    movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
+        }
     };
     var handleOnClickLogin = function (e) {
         e.preventDefault();
@@ -188,20 +198,43 @@ var MovaLogin = function (_a) {
                             display: 'flex',
                             flexDirection: 'column',
                             alignItems: 'center',
-                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '50%' } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "button", sx: { pt: 2 } }, { children: "Nouveau compte utilisateur" }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, autoFocus: true, fullWidth: true, id: "firstname", label: "Pr\u00E9nom", name: "firstname", autoComplete: "given-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.firstname.value, error: Boolean(userForm.firstname.error), helperText: userForm.firstname.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "lastname", label: "Nom", name: "lastname", autoComplete: "family-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.lastname.value, error: Boolean(userForm.lastname.error), helperText: userForm.lastname.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", onChange: function (e) { return handleInputChange(e); }, value: userForm.email.value, error: !userForm.email.isValid, helperText: userForm.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : 'password', id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: userForm.password.value, error: !userForm.password.isValid, helperText: Boolean(userForm.password.error) ? userForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '50%' } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "button", sx: { pt: 2 } }, { children: "Nouveau compte utilisateur" }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, autoFocus: true, fullWidth: true, id: "firstname", label: "Pr\u00E9nom", name: "firstname", autoComplete: "given-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.firstname.value, error: Boolean(userForm.firstname.error), helperText: userForm.firstname.error, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "lastname", label: "Nom", name: "lastname", autoComplete: "family-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.lastname.value, error: Boolean(userForm.lastname.error), helperText: userForm.lastname.error, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", onChange: function (e) { return handleInputChange(e); }, value: userForm.email.value, error: !userForm.email.isValid, helperText: userForm.email.error, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : 'password', id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: userForm.password.value, error: !userForm.password.isValid, helperText: Boolean(userForm.password.error) ? userForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
                                     endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: handleClickShowPassword }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
-                                } }), (0, jsx_runtime_1.jsx)(GenderSelector_1.default, { handleSelectChange: handleSelectChange, form: userForm, required: true, sx: { width: '40%', mr: 2 } }), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { label: "Date de naissance", value: userForm.birthDate.value, format: 'dd / MM / yyyy', formatDensity: 'dense', 
-                                //views={['day']}
-                                displayWeekNumber: true, onChange: function (newValue) { return handleDateChange('birthDate', newValue); }, slotProps: {
+                                }, sx: {
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(GenderSelector_1.default, { handleSelectChange: handleSelectChange, form: userForm, required: true, sx: {
+                                    width: '40%',
+                                    mr: 2,
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
+                                } }), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { label: "Date de naissance", value: userForm.birthDate.value, format: 'dd / MM / yyyy', formatDensity: 'dense', openTo: "year", views: ['year', 'month', 'day'], onChange: function (newValue) { return handleDateChange('birthDate', newValue); }, slotProps: {
                                     textField: {
                                         required: true,
                                         error: !userForm.birthDate.isValid,
                                         sx: {
                                             width: '50%', mt: 2, float: 'right',
                                             padding: 0,
+                                            '& .MuiOutlinedInput-notchedOutline': {
+                                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                            }
                                         },
                                     },
-                                } }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !userForm.acceptsTerms.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: "acceptsTerms", color: "primary", checked: userForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte les", ' ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/terms-and-conditions", target: "_blank" }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" }))] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: userForm.acceptsTerms.error })] })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Cr\u00E9er mon compte" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickLogin(e); }, sx: { cursor: 'pointer' } }, { children: "Se connecter" })) })) }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                                } }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !userForm.acceptsTerms.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: "acceptsTerms", color: "primary", checked: userForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte les", ' ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/terms-and-conditions", target: "_blank" }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" }))] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: userForm.acceptsTerms.error })] })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Cr\u00E9er mon compte" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickLogin(e); }, sx: { cursor: 'pointer' } }, { children: "Se connecter" })) })) }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
                     float: 'right',
                     width: '250px',
                     height: '400px',

package/dist/src/VehiclePlateField.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,20 +17,71 @@ 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 Enums_1 = require("./helpers/Enums");
+var Logger_1 = __importDefault(require("./helpers/Logger"));
+var material_1 = require("@mui/material");
+var SearchRounded_1 = __importDefault(require("@mui/icons-material/SearchRounded"));
+// Regex pour une plaque d'immatriculation française (nouveau format SIV)
 var regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/;
+// Regex pour une plaque d'immatriculation française (ancien format FNI)
+var oldRegex = /^\d{1,4}[ -]?[A-Z]{1,4}[ -]?\d{1,4}$/;
 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
+    var _e = (0, react_1.useState)(''), helperText = _e[0], setHelperText = _e[1];
+    // Hook de validation de la plaque
     (0, react_1.useEffect)(function () {
         if (!error && value !== '' && value.match(regex)) {
             onValidVehiclePlate(value);
         }
     }, [error, value, onValidVehiclePlate]);
+    var getPlateFormat = function (plate) {
+        if (/^[A-Za-z]/.test(plate)) {
+            // Commence par une lettre => nouveau format
+            return Enums_1.VehiclePlateFormat.FRENCH_NEW;
+        }
+        else if (/^\d/.test(plate)) {
+            // Commence par un chiffre => ancien format
+            return Enums_1.VehiclePlateFormat.FRENCH_OLD;
+        }
+        else {
+            Logger_1.default.error("Format de plaque inconnu");
+            // On retourne le nouveau format par défaut
+            return Enums_1.VehiclePlateFormat.FRENCH_NEW;
+        }
+    };
     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
+        // Si la saisie commence par une lettre, on contrôle l'ancien format, sinon le nouveau
+        switch (getPlateFormat(inputValue)) {
+            case Enums_1.VehiclePlateFormat.FRENCH_NEW: {
+                setHelperText((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Format d\u00E9tect\u00E9 : ", (0, jsx_runtime_1.jsx)("b", { children: "AA-111-AA" })] }));
+                handleChangeFrenchNew(inputValue);
+                break;
+            }
+            case Enums_1.VehiclePlateFormat.FRENCH_OLD: {
+                setHelperText((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Format d\u00E9tect\u00E9 (ancien) : ", (0, jsx_runtime_1.jsx)("b", { children: "1111 AAAA 1111" })] }));
+                handleChangeFrenchOld(inputValue);
+                break;
+            }
+        }
+    };
+    var validatePlate = function () {
+        if (oldRegex.test(value)) {
+            onValidVehiclePlate(value);
+        }
+        setError(!oldRegex.test(value));
+    };
+    var handleChangeFrenchOld = function (inputValue) {
+        // ON bloque la saisie à 12 caractères max (limite des anciennes plaques)
+        if (!(inputValue.length > 12)) {
+            setValue(inputValue);
+        }
+        setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+    };
+    var handleChangeFrenchNew = function (inputValue) {
         // 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
@@ -32,12 +94,20 @@ var VehiclePlateField = function (_a) {
             inputValue = "".concat(cleanInput.slice(0, 2), "-").concat(cleanInput.slice(2, 5), "-").concat(cleanInput.slice(5, 7));
         }
         setValue(inputValue);
-        setError(!regex.test(inputValue));
+        // On teste la plaque une fois la saisie terminée
+        if (inputValue.length == 9) {
+            setError(!regex.test(inputValue));
+        }
+        else {
+            setError(false);
+        }
         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'" : '' }));
+        }, helperText: lastLength > 0 ? helperText : '', InputProps: {
+            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, __assign({ position: "end", sx: { mr: 1, display: getPlateFormat(value) === Enums_1.VehiclePlateFormat.FRENCH_OLD ? 'inherit' : 'none' } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: validatePlate }, { children: (0, jsx_runtime_1.jsx)(SearchRounded_1.default, {}) })) }))),
+        } }));
 };
 exports.default = VehiclePlateField;

package/dist/src/helpers/Enums.d.ts

@@ -1,3 +1,7 @@
+export declare enum VehiclePlateFormat {
+    FRENCH_NEW = "FRENCH_NEW",
+    FRENCH_OLD = "FRENCH_OLD"
+}
 export declare enum SlotAlgorithm {
     /**
      * Calcul des créneaux à l'heure

package/dist/src/helpers/Enums.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RoleType = exports.MovaAppType = exports.DocumentType = exports.DocumentState = exports.DayOfWeek = exports.EventType = exports.EventState = exports.DigitalPassportIndex = exports.Gender = exports.DateFormatTypes = exports.APIMethod = exports.PartsApplicationType = exports.ProductType = exports.OrderPreference = exports.OrderState = exports.SlotAlgorithm = void 0;
+exports.RoleType = exports.MovaAppType = exports.DocumentType = exports.DocumentState = exports.DayOfWeek = exports.EventType = exports.EventState = exports.DigitalPassportIndex = exports.Gender = exports.DateFormatTypes = exports.APIMethod = exports.PartsApplicationType = exports.ProductType = exports.OrderPreference = exports.OrderState = exports.SlotAlgorithm = exports.VehiclePlateFormat = void 0;
+var VehiclePlateFormat;
+(function (VehiclePlateFormat) {
+    VehiclePlateFormat["FRENCH_NEW"] = "FRENCH_NEW";
+    VehiclePlateFormat["FRENCH_OLD"] = "FRENCH_OLD";
+})(VehiclePlateFormat = exports.VehiclePlateFormat || (exports.VehiclePlateFormat = {}));
 var SlotAlgorithm;
 (function (SlotAlgorithm) {
     /**

package/index.ts

@@ -56,5 +56,5 @@ export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLette
 // Export des enums
 export { RoleType, MovaAppType, DayOfWeek, EventState, EventType, DocumentType,
     DigitalPassportIndex, DocumentState, Gender, DateFormatTypes, PartsApplicationType,
-    ProductType, OrderPreference, OrderState, SlotAlgorithm } from './src/helpers/Enums';
+    ProductType, OrderPreference, OrderState, SlotAlgorithm, VehiclePlateFormat as VehiclePlateType } from './src/helpers/Enums';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "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

@@ -2,6 +2,8 @@ import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
 import { LoadingButton } from '@mui/lab';
 import LogoLarge from './assets/images/logo/logo_large.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large.png';
+import LogoLargeDarkMode from './assets/images/logo/logo_large_dm.png';
+import LogoProLargeDarkMode from './assets/images/logo/logo_pro_large_dm.png';
 import GreenLeafImage from "./assets/images/leaf_green_large.png";
 import PinkLeafImage from "./assets/images/leaf_pink_large.png";
 import { Alert, AlertColor, Box, Button, Checkbox, Container, CssBaseline, Dialog, DialogActions, DialogContent, DialogContentText, 
@@ -41,6 +43,7 @@ interface MovaLoginProps {
     movaAppType: MovaAppType,
     onSubmit: (form: MovaLoginForm) => void,
     onSubmitForgotPassword: (email: string) => void,
+    darkMode: boolean,
     alertMessage?: string,
     alertSeverity?: AlertColor,
     loading?: boolean,
@@ -52,7 +55,7 @@ interface MovaLoginProps {
  * ATTENTION : la page attendue pour le bouton "Mot de passe oublié" doit pointer vers "/forgot-password"
  * ATTENTION : la page attendue pour le bouton "Créer mon compte" doit pointer vers "/signup"
  */
-const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, onSubmitForgotPassword, alertMessage, alertSeverity, version }) => {
+const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, onSubmitForgotPassword, darkMode = false, alertMessage, alertSeverity, version }) => {
 
     const [form, setForm] = useState<MovaLoginForm>(initialFormState);
     const [message, setMessage] = useState<string>("");
@@ -104,9 +107,15 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
 
     const getMovaLogo = () => {
 
-        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+        if(darkMode){
+            return movaAppType === MovaAppType.GARAGE ? LogoProLargeDarkMode :
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLargeDarkMode : 
+            movaAppType === MovaAppType.ADMIN ? LogoLargeDarkMode : LogoLargeDarkMode;
+        } else {
+            return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
             movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+        }
     }
 
     const handleOnClickSignUp = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -221,6 +230,11 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                         value={form.email.value}
                         error={!form.email.isValid}
                         helperText={form.email.error}
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                     />
                     <TextField
                         margin="normal"
@@ -241,12 +255,18 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                                 <IconButton
                                   edge="end"
                                   onClick={handleClickShowPassword}
+                                  
                                 >
                                   {showPassword ? <VisibilityOff /> : <Visibility />}
                                 </IconButton>
                               </InputAdornment>
                             ),
-                          }}                  
+                          }}  
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                     />
                     <FormControlLabel control={<Checkbox value="remember" color="primary" />}
                         label="Se souvenir de moi"
@@ -257,7 +277,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                         type="submit"
                         fullWidth
                         variant="contained"
-                        sx={{ mt: 3, mb: 2 }}>
+                        sx={{ mt: 3, mb: 2, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main }}>
                         <span>Se connecter</span>
                     </LoadingButton>
                     

package/src/MovaSignUp.tsx

@@ -3,10 +3,12 @@ import { LoadingButton } from '@mui/lab';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import LogoLarge from './assets/images/logo/logo_large.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large.png';
+import LogoLargeDarkMode from './assets/images/logo/logo_large_dm.png';
+import LogoProLargeDarkMode from './assets/images/logo/logo_pro_large_dm.png';
 import GreenLeafImage from "./assets/images/leaf_green_large.png";
 import PinkLeafImage from "./assets/images/leaf_pink_large.png";
 import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControl, FormControlLabel, FormHelperText, Grid, 
-    IconButton, Link, SelectChangeEvent, TextField, Typography, TextFieldProps } from "@mui/material";
+    IconButton, Link, SelectChangeEvent, TextField, Typography, TextFieldProps, useTheme } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -47,6 +49,7 @@ const initialUserFormState = {
 interface MovaSignUpProps {
     movaAppType: MovaAppType,
     onSubmit: (form: MovaUserSignUpForm) => void,
+    darkMode: boolean,
     alertMessage?: string,
     alertSeverity?: AlertColor,
     loading?: boolean
@@ -56,11 +59,12 @@ interface MovaSignUpProps {
  * Formulaire de création d'un compte Movalib (Garage / Utilisateur)
  * ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
  */
-const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, alertMessage, alertSeverity }) => {
+const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, darkMode = false, alertMessage, alertSeverity }) => {
 
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
     const history = useHistory();
     const [message, setMessage] = useState<string>("");
+    const theme = useTheme();
     const [showPassword, setShowPassword] = useState(false);
 
     const handleDateChange = (name: string, date: Date | null) => {
@@ -143,10 +147,15 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     }   
   
     const getMovaLogo = () => {
-
-        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+        if(darkMode){
+            return movaAppType === MovaAppType.GARAGE ? LogoProLargeDarkMode :
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLargeDarkMode : 
+            movaAppType === MovaAppType.ADMIN ? LogoLargeDarkMode : LogoLargeDarkMode;
+        } else {
+            return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
             movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+        }
     }
 
     const handleOnClickLogin = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -201,6 +210,11 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         value={userForm.firstname.value}
                         error={Boolean(userForm.firstname.error)}
                         helperText={userForm.firstname.error}
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                     />
                     <TextField
                         margin="normal"
@@ -214,6 +228,11 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         value={userForm.lastname.value}
                         error={Boolean(userForm.lastname.error)}
                         helperText={userForm.lastname.error}
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                       />                    
                     <TextField
                         margin="normal"
@@ -227,6 +246,11 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         value={userForm.email.value}
                         error={!userForm.email.isValid}
                         helperText={userForm.email.error}
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                     />
                     <TextField
                         margin="normal"
@@ -253,9 +277,20 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                               </InputAdornment>
                             ),
                           }}   
+                        sx={{
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                            }
+                        }}  
                     />
 
-                    <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{ width:'40%', mr: 2}} />
+                    <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{ 
+                        width:'40%', 
+                        mr: 2,
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                        }
+                        }} />
 
                     {/* <TextField 
                         margin="normal"
@@ -279,8 +314,8 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         value={userForm.birthDate.value}
                         format='dd / MM / yyyy'
                         formatDensity='dense'
-                        //views={['day']}
-                        displayWeekNumber
+                        openTo="year"
+                        views={['year', 'month', 'day']}
                         onChange={(newValue) => handleDateChange('birthDate', newValue)}
                         slotProps={{
                             textField: {
@@ -289,6 +324,9 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                                 sx: {
                                     width:'50%', mt: 2, float: 'right',
                                     padding: 0,
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
+                                    }
                                 },
                             },
                         }}
@@ -323,7 +361,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         type="submit"
                         fullWidth
                         variant="contained"
-                        sx={{ mt: 3, mb: 2 }}>
+                        sx={{ mt: 3, mb: 2, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main }}>
                         <span>Créer mon compte</span>
                     </LoadingButton>
 

package/src/VehiclePlateField.tsx

@@ -1,48 +1,118 @@
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react';
 import TextField from '@mui/material/TextField';
+import { VehiclePlateFormat } from './helpers/Enums';
+import Logger from './helpers/Logger';
+import { IconButton, InputAdornment } from '@mui/material';
+import SearchIcon from '@mui/icons-material/SearchRounded';
 
 interface VehiclePlateFieldProps {
     onValidVehiclePlate: (vehiclePlate: string) => void;
   }
 
-// Regex pour une plaque d'immatriculation française
+// Regex pour une plaque d'immatriculation française (nouveau format SIV)
 const regex = /^[A-Z]{2}-\d{3}-[A-Z]{2}$/; 
+// Regex pour une plaque d'immatriculation française (ancien format FNI)
+const oldRegex = /^\d{1,4}[ -]?[A-Z]{1,4}[ -]?\d{1,4}$/;
+
 
 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
+  const [helperText, setHelperText] = useState<ReactNode>('');
 
+  // Hook de validation de la plaque
   useEffect(() => {
     if (!error && value !== '' && value.match(regex)) {
         onValidVehiclePlate(value);
     }
+
   }, [error, value, onValidVehiclePlate]);
 
+  const getPlateFormat = (plate: string): VehiclePlateFormat => {
+    if (/^[A-Za-z]/.test(plate)) {
+      // Commence par une lettre => nouveau format
+      return VehiclePlateFormat.FRENCH_NEW;
+    } else if (/^\d/.test(plate)) {
+      // Commence par un chiffre => ancien format
+      return VehiclePlateFormat.FRENCH_OLD;
+    } else {
+      Logger.error("Format de plaque inconnu");
+      // On retourne le nouveau format par défaut
+      return VehiclePlateFormat.FRENCH_NEW;
+    }
+  }
+
   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;
+    // Si la saisie commence par une lettre, on contrôle l'ancien format, sinon le nouveau
+    switch(getPlateFormat(inputValue)){
 
-     // Supprimer les tirets pour avoir une chaîne propre
-    const cleanInput = inputValue.replace(/-/g, '');
+      case VehiclePlateFormat.FRENCH_NEW :{
+        setHelperText(<>Format détecté : <b>AA-111-AA</b></>);
+        handleChangeFrenchNew(inputValue);
+        break;
+      }
 
-    // Ajouter des tirets aux positions appropriées
-    if (cleanInput.length > 1 && !(cleanInput.length == 2 && isDeleting)) {
-      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2)}`;
+      case VehiclePlateFormat.FRENCH_OLD: {
+        setHelperText(<>Format détecté (ancien) : <b>1111 AAAA 1111</b></>);
+        handleChangeFrenchOld(inputValue);
+        break;
+      }
     }
 
-    if (cleanInput.length > 4 && !(cleanInput.length == 5 && isDeleting)) {
-      inputValue = `${cleanInput.slice(0, 2)}-${cleanInput.slice(2, 5)}-${cleanInput.slice(5, 7)}`;
+  };
+
+  const validatePlate = () => {
+
+    if(oldRegex.test(value)){
+      onValidVehiclePlate(value);
     }
 
-    setValue(inputValue);
-    setError(!regex.test(inputValue));
-    setLastLength(inputValue.length); // Mettre à jour la longueur précédente
-  };
+    setError(!oldRegex.test(value));
+  }
+
+  const handleChangeFrenchOld = (inputValue: string) => {
+    
+      // ON bloque la saisie à 12 caractères max (limite des anciennes plaques)
+      if(!(inputValue.length > 12)){
+        setValue(inputValue);
+      } 
+
+      setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  }
+
+  const handleChangeFrenchNew = (inputValue: string) => {
+
+      // 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);
+
+      // On teste la plaque une fois la saisie terminée
+      if(inputValue.length == 9){
+        setError(!regex.test(inputValue));
+      } else {
+        setError(false);
+      }
+
+      setLastLength(inputValue.length); // Mettre à jour la longueur précédente
+  }
 
   return (
     <TextField
@@ -56,7 +126,21 @@ const VehiclePlateField: FunctionComponent<VehiclePlateFieldProps> = ({ onValidV
         width: '100%', 
         '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
       }}
-      helperText={error ? "Utilisez le format 'XX-123-XX'" : ''}
+      helperText={lastLength > 0 ? helperText : ''}
+      InputProps={{
+        endAdornment: (
+             
+          <InputAdornment position="end" sx={{ mr: 1, display: getPlateFormat(value) === VehiclePlateFormat.FRENCH_OLD ? 'inherit' : 'none' }} >
+            <IconButton
+              edge="end"
+              onClick={validatePlate}
+            >
+              <SearchIcon />
+            </IconButton>
+          </InputAdornment>
+          
+        ),
+      }} 
     />
   );
 };

package/src/helpers/Enums.ts

@@ -1,16 +1,21 @@
+export enum VehiclePlateFormat {
+    FRENCH_NEW = "FRENCH_NEW",
+    FRENCH_OLD ="FRENCH_OLD"
+}
+
 export enum SlotAlgorithm {
     /**
      * Calcul des créneaux à l'heure
      */
-    HOUR ="HOUR",
+    HOUR = "HOUR",
     /**
      * Calcul des créneaux à demi-heure
      */
-    HALF_HOUR ="HALF_HOUR",
+    HALF_HOUR = "HALF_HOUR",
     /**
      * Calcul des créneaux à la période du jour (AM/PM)
      */
-    DAY_PERIOD ="DAY_PERIOD"
+    DAY_PERIOD = "DAY_PERIOD"
 }
 
 export enum OrderState {