@movalib/movalib-commons 1.1.14 → 1.1.16

package/devIndex.tsx

@@ -106,15 +106,19 @@ 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 {
+            <MovaLogin 
+              darkMode={true}
+              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={true}
+              movaAppType={MovaAppType.INDIVIDUAL} onSubmit={function (form: MovaLoginForm): void {
               alert('Form Submitted !');
             } } />
 

package/dist/devIndex.js

@@ -118,11 +118,11 @@ 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)(MovaLogin_1.default, { darkMode: true, 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: true, 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/src/GenderSelector.js

@@ -15,6 +15,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var GenderSelector = function (_a) {
     var handleSelectChange = _a.handleSelectChange, form = _a.form, required = _a.required, sx = _a.sx;
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx), error: !form.gender.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); } }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: form.gender.error })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); } }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: form.gender.error })] })));
 };
 exports.default = GenderSelector;

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/package.json

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

package/src/GenderSelector.tsx

@@ -13,7 +13,7 @@ interface GenderSelectorProps {
 
 const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required, sx }) => {
   return (
-    <FormControl fullWidth margin="normal" required={required} sx={{ ...sx }} error={!form.gender.isValid}>
+    <FormControl fullWidth margin="normal" required={required} sx={{ ...sx }} >
       <InputLabel id="gender-label">Sexe</InputLabel>
       <Select
         labelId="gender-label"

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>