@movalib/movalib-commons 1.0.65 → 1.0.67

package/devIndex.tsx

@@ -7,21 +7,27 @@ import { MovaAppType } from './src/helpers/Enums';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme'; // Import du thème personnalisé
 import MovaSignUp from './src/MovaSignUp';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import DatePicker from '@mui/lab/DatePicker';
+import frLocale from 'date-fns/locale/fr';
 
 const App = () => {
   return (
     <div>
-      <ThemeProvider theme={theme}>
-        <MovaLogin movaAppType={MovaAppType.GARAGE} onSubmit={function (form: MovaLoginForm): void {
-          alert('Form Submitted !');
-        } } onSubmitForgotPassword={function (email: string): void {
-          throw new Error('Function not implemented.');
-        } } />
+      <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={frLocale}>
+        <ThemeProvider theme={theme}>
+          <MovaLogin movaAppType={MovaAppType.GARAGE} onSubmit={function (form: MovaLoginForm): void {
+            alert('Form Submitted !');
+          } } onSubmitForgotPassword={function (email: string): void {
+            throw new Error('Function not implemented.');
+          } } />
 
-        <MovaSignUp movaAppType={MovaAppType.USER} onSubmit={function (form: MovaLoginForm): void {
-          alert('Form Submitted !');
-        } } />
-      </ThemeProvider>
+          <MovaSignUp movaAppType={MovaAppType.USER} onSubmit={function (form: MovaLoginForm): void {
+            alert('Form Submitted !');
+          } } />
+        </ThemeProvider>
+      </LocalizationProvider>
     </div>
   );
 };

package/dist/devIndex.js

@@ -23,14 +23,17 @@ var Enums_1 = require("./src/helpers/Enums");
 var styles_1 = require("@mui/material/styles");
 var theme_1 = __importDefault(require("./theme")); // Import du thème personnalisé
 var MovaSignUp_1 = __importDefault(require("./src/MovaSignUp"));
+var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+var AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+var fr_1 = __importDefault(require("date-fns/locale/fr"));
 var App = function () {
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsx)(MovaLogin_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, 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.USER, onSubmit: function (form) {
-                        alert('Form Submitted !');
-                    } })] })) }));
+    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.jsx)(MovaLogin_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, 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.USER, onSubmit: function (form) {
+                            alert('Form Submitted !');
+                        } })] })) })) }));
 };
 var root = (0, client_1.createRoot)(document.getElementById('root'));
 root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App, {}) }));

package/dist/src/MovaLogin.js

@@ -63,6 +63,9 @@ var Enums_1 = require("./helpers/Enums");
 var Validator_1 = require("./helpers/Validator");
 var Tools_1 = require("./helpers/Tools");
 var react_router_dom_1 = require("react-router-dom");
+var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -85,6 +88,7 @@ var MovaLogin = function (_a) {
     var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
     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 handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -143,6 +147,9 @@ var MovaLogin = function (_a) {
             onSubmitForgotPassword(form.email.value);
         }
     };
+    var handleClickShowPassword = function () {
+        setShowPassword(function (prev) { return !prev; });
+    };
     /**
      * Boite de diaogue pour la perte du mot de passe
      */
@@ -162,7 +169,9 @@ 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: "password", id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error }), (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); } }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.USER && (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); } }, { children: "Cr\u00E9er mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } }), openForgotPassword && dialogForgotPassword()] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                        } }, { 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: {
+                                    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); } }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.USER && (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); } }, { children: "Cr\u00E9er mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } }), 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

@@ -5,7 +5,7 @@ import { MovaAppType } from "./helpers/Enums";
 /**
  * Propriétés du composant
  * movaAppType : type d'application Movalib au sein de laquelle le composant est injectée
- * onSubmit : callbakc invoquée en cas de formulaire valide
+ * onSubmit : callback invoquée en cas de formulaire valide
  * alertMessage : éventuel message à afficher
  * alertSeverity : niveau d'alerte pour le message à afficher
  * loading : permet de mettre éventuellement le bouton de soumission en état de chargement

package/dist/src/MovaSignUp.js

@@ -53,6 +53,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 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 leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green_large.png"));
@@ -64,6 +65,10 @@ var Validator_1 = require("./helpers/Validator");
 var GenderSelector_1 = __importDefault(require("./GenderSelector"));
 var Tools_1 = require("./helpers/Tools");
 var react_router_dom_1 = require("react-router-dom");
+var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
+var isValid_1 = __importDefault(require("date-fns/isValid"));
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -76,7 +81,7 @@ var initialUserFormState = {
     email: { value: '', isValid: true },
     password: { value: '', isValid: true },
     gender: { value: '', isValid: true },
-    birthDate: { value: '', isValid: true },
+    birthDate: { value: null, isValid: true },
     acceptsTerms: { value: false, isValid: true },
 };
 /**
@@ -88,12 +93,25 @@ var MovaLogin = function (_a) {
     var _b = (0, react_1.useState)(initialUserFormState), userForm = _b[0], setUserForm = _b[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 handleDateChange = function (name, date) {
+        var _a;
+        console.log(date);
+        if (name && date) {
+            var fieldName = name;
+            var fieldValue = date;
+            var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
+            setUserForm(__assign(__assign({}, userForm), newField));
+        }
+    };
     var handleInputChange = function (e) {
         var _a;
-        var fieldName = e.target.name;
-        var fieldValue = e.target.value;
-        var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
-        setUserForm(__assign(__assign({}, userForm), newField));
+        if (e) {
+            var fieldName = e.target.name;
+            var fieldValue = e.target.value;
+            var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
+            setUserForm(__assign(__assign({}, userForm), newField));
+        }
     };
     var handleCheckboxChange = function (e, checked) {
         var _a;
@@ -132,7 +150,7 @@ var MovaLogin = function (_a) {
         newForm.email = (0, Tools_1.validateField)(userForm.email, function (value) { return !!value; }, 'Champ obligatoire');
         newForm.password = (0, Tools_1.validateField)(userForm.password, function (value) { return !!value; }, 'Champ obligatoire');
         newForm.gender = (0, Tools_1.validateField)(userForm.gender, function (value) { return !!value; }, 'Champ obligatoire');
-        newForm.birthDate = (0, Tools_1.validateField)(userForm.birthDate, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.birthDate = (0, Tools_1.validateField)(userForm.birthDate, function (value) { return !!value && (0, isValid_1.default)(value); }, 'Champ obligatoire');
         // Validator pour l'email
         newForm.email = (0, Tools_1.validateField)(userForm.email, Validator_1.validateEmail, 'Adresse email invalide');
         // Validator pour le mot de passe
@@ -155,6 +173,9 @@ var MovaLogin = function (_a) {
             history.push('/login');
         }
     };
+    var handleClickShowPassword = function () {
+        setShowPassword(function (prev) { return !prev; });
+    };
     return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: styles }, { children: [(0, jsx_runtime_1.jsx)("img", { src: leaf_green_large_png_1.default, style: { position: 'fixed',
                     float: 'left',
                     width: '250px',
@@ -167,9 +188,20 @@ 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: "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 : "8 caractères minimum" }), (0, jsx_runtime_1.jsx)(GenderSelector_1.default, { handleSelectChange: handleSelectChange, form: userForm, required: true, sx: { width: '40%', mr: 2 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, name: "birthDate", label: "Date de naissance", type: "date", InputLabelProps: {
-                                    shrink: true,
-                                }, autoComplete: "bday", value: userForm.birthDate.value, error: !userForm.birthDate.isValid, helperText: userForm.birthDate.error, onChange: function (e) { return handleInputChange(e); }, sx: { width: '50%', float: 'right' } }), (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); } }, { 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',
+                        } }, { 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: {
+                                    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: {
+                                    textField: {
+                                        required: true,
+                                        error: !userForm.birthDate.isValid,
+                                        sx: {
+                                            width: '50%', mt: 2, float: 'right',
+                                            padding: 0,
+                                        },
+                                    },
+                                } }), (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); } }, { 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/VehicleFullCard.js

@@ -217,7 +217,7 @@ var VehicleFullCard = function (_a) {
                                                     '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
                                                 }, helperText: Boolean(form.currentMileage.error && form.currentMileage.value > 0)
                                                     ? form.currentMileage.error : "Sur ton tableau de bord 😉" }) })), !localEditMode && (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, textAlign: 'justify', sx: { pt: 2 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 8 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: "Km moyen annuel :" })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 4, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: (0, jsx_runtime_1.jsxs)("b", { children: [vehicle.averageMileagePerYear, " km"] }) })) }))] })), localEditMode && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", error: Boolean(form.averageMileagePerYear.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "averageMileagePerYear-label" }, { children: "Kilom\u00E9trage moyen annuel" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "averageMileagePerYear-label", id: "averageMileagePerYear", name: "averageMileagePerYear", value: form.averageMileagePerYear.value ?
-                                                            String(form.averageMileagePerYear.value) : '', onChange: function (e) { return handleSelectChange(e); }, label: "Kilom\u00E9trage moyen annuel" }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 5000 }, { children: "5 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 10000 }, { children: "10 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 15000 }, { children: "15 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 20000 }, { children: "20 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 25000 }, { children: "25 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 30000 }, { children: "30 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 50000 }, { children: "50 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 75000 }, { children: "75 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 100000 }, { children: "100 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 999999 }, { children: "+100 000" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: form.averageMileagePerYear.error })] })) })), !localEditMode && (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, textAlign: 'justify', sx: { pt: 2 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: "Pneumatiques :" })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: isVehicleTireSizeDefined(vehicle) ? (0, jsx_runtime_1.jsx)("b", { children: (0, Tools_1.formatVehicleTire)(vehicle.tireSize) }) : '-' })) }))] })), localEditMode && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: (0, jsx_runtime_1.jsx)(MovaVehicleTireField_1.default, { vehicleTire: form.tireSize.value, onChangeVehicleTire: handleOnChangeVehicleTire }) }))] })), !localEditMode && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "h6", component: "div", align: "center", sx: { mt: 3, mb: 1 }, color: (0, material_1.darken)(theme.palette.primary.main, 0.2) }, { children: "CARNET DU V\u00C9HICULE" })) })), vehicle.documents && ((_b = vehicle.documents) === null || _b === void 0 ? void 0 : _b.filter(function (doc) { return doc.type === Enums_1.DocumentType.VEHICLE_MAINTENANCE_INVOICE; }).map(function (invoice, index) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, sx: { justifyContent: 'center', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 11, sm: 6, md: 4, sx: { textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Link, __assign({ color: (0, material_1.darken)('#F29ABA', 0.2), href: invoice.fileSignedUrl, target: "_blank", rel: "noopener" }, { children: ["Facture du ", (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, DateUtils_1.formatDateByCountryCode)(invoice.creationDate, 'fr', Enums_1.DateFormatTypes.SHORT_FORMAT_DATE) })] })) }), (index + 1) * 50), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sm: 1, md: 1, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: function (e) { return handleDeleteDocument(e, invoice.id); } }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_2.default, {}) })) }), (index + 1) * 100)] }), index + 1)); })), vehicle.documents && ((_c = vehicle.documents) === null || _c === void 0 ? void 0 : _c.filter(function (doc) { return doc.type === Enums_1.DocumentType.VEHICLE_TIRE_PHOTO; }).map(function (tirePhoto, index) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, sx: { justifyContent: 'center', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 11, sm: 6, md: 4, sx: { textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Link, __assign({ color: (0, material_1.darken)('#F29ABA', 0.2), href: tirePhoto.fileSignedUrl, target: "_blank", rel: "noopener" }, { children: ["Photo pneu du ", (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, DateUtils_1.formatDateByCountryCode)(tirePhoto.creationDate, 'fr', Enums_1.DateFormatTypes.SHORT_FORMAT_DATE) })] })) }), (index + 1) * 50), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sm: 1, md: 1, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: function (e) { return handleDeleteDocument(e, tirePhoto.id); } }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_2.default, {}) })) }), (index + 1) * 100)] }), index + 1)); })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { mt: 2 } }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { accept: "image/*, application/pdf", type: "file", style: { display: 'none' }, ref: invoiceInputRef, id: "raised-button-invoice", onChange: function (e) { return handleFileChange(e, Enums_1.DocumentType.VEHICLE_MAINTENANCE_INVOICE); } }), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "raised-button-invoice" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ size: 'large', component: "span", variant: "outlined", sx: { alignItems: 'normal', width: '90%', mt: 2, mb: 1, height: '70px', p: 1,
+                                                            String(form.averageMileagePerYear.value) : '', onChange: function (e) { return handleSelectChange(e); }, label: "Kilom\u00E9trage moyen annuel" }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 5000 }, { children: "5 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 10000 }, { children: "10 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 15000 }, { children: "15 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 20000 }, { children: "20 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 25000 }, { children: "25 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 30000 }, { children: "30 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 50000 }, { children: "50 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 75000 }, { children: "75 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 100000 }, { children: "100 000" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: 999999 }, { children: "+100 000" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: form.averageMileagePerYear.error })] })) })), !localEditMode && (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, textAlign: 'justify', sx: { pt: 2 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: "Pneumatiques :" })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body1", color: "text.secondary" }, { children: isVehicleTireSizeDefined(vehicle) ? (0, jsx_runtime_1.jsx)("b", { children: (0, Tools_1.formatVehicleTire)(vehicle.tireSize) }) : '-' })) }))] })), localEditMode && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: (0, jsx_runtime_1.jsx)(MovaVehicleTireField_1.default, { vehicleTire: form.tireSize.value, onChangeVehicleTire: handleOnChangeVehicleTire }) }))] })), !localEditMode && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "h6", component: "div", align: "center", sx: { mt: 3, mb: 1 }, color: (0, material_1.darken)(theme.palette.primary.main, 0.2) }, { children: "CARNET DU V\u00C9HICULE" })) })), vehicle.documents && ((_b = vehicle.documents) === null || _b === void 0 ? void 0 : _b.filter(function (doc) { return doc.type === Enums_1.DocumentType.VEHICLE_MAINTENANCE_INVOICE; }).map(function (invoice, index) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, sx: { justifyContent: 'space-between', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 11, sx: { textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ color: (0, material_1.darken)('#F29ABA', 0.2), href: invoice.fileSignedUrl, target: "_blank", rel: "noopener" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "body1" }, { children: ["Facture du ", (0, DateUtils_1.formatDateByCountryCode)(invoice.creationDate, 'fr', Enums_1.DateFormatTypes.SHORT_FORMAT_DATE)] })) })) }), (index + 1) * 50), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: function (e) { return handleDeleteDocument(e, invoice.id); } }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_2.default, {}) })) }), (index + 1) * 100)] }), index + 1)); })), vehicle.documents && ((_c = vehicle.documents) === null || _c === void 0 ? void 0 : _c.filter(function (doc) { return doc.type === Enums_1.DocumentType.VEHICLE_TIRE_PHOTO; }).map(function (tirePhoto, index) { return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true, sx: { justifyContent: 'space-between', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 11, sx: { textAlign: 'left' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ color: (0, material_1.darken)('#F29ABA', 0.2), href: tirePhoto.fileSignedUrl, target: "_blank", rel: "noopener" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "body1" }, { children: ["Photo pneu du ", (0, DateUtils_1.formatDateByCountryCode)(tirePhoto.creationDate, 'fr', Enums_1.DateFormatTypes.SHORT_FORMAT_DATE)] })) })) }), (index + 1) * 50), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 1, sx: { textAlign: 'right' } }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ onClick: function (e) { return handleDeleteDocument(e, tirePhoto.id); } }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_2.default, {}) })) }), (index + 1) * 100)] }), index + 1)); })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { mt: 2, textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { accept: "image/*, application/pdf", type: "file", style: { display: 'none' }, ref: invoiceInputRef, id: "raised-button-invoice", onChange: function (e) { return handleFileChange(e, Enums_1.DocumentType.VEHICLE_MAINTENANCE_INVOICE); } }), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "raised-button-invoice" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ size: 'large', component: "span", variant: "outlined", sx: { alignItems: 'normal', width: '90%', mt: 2, mb: 1, height: '70px', p: 1,
                                                                         color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "Ajouter Facture" })) }))] }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6, sx: { mt: 2, textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { accept: "image/*", type: "file", style: { display: 'none' }, ref: tirePictureInputRef, id: "raised-button-tire", onChange: function (e) { return handleFileChange(e, Enums_1.DocumentType.VEHICLE_TIRE_PHOTO); } }), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "raised-button-tire" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ component: "span", variant: "outlined", sx: { alignItems: 'normal', width: '90%', mt: 2, mb: 1, height: '70px', p: 1,
                                                                         color: (0, material_1.darken)(theme.palette.primary.main, 0.2) } }, { children: "Ajouter Photo Pneu" })) }))] }) }))] }))] })] })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, __assign({ sx: { mt: 3, justifyContent: localEditMode ? 'center' : 'end' } }, { children: [!localEditMode &&
                                     (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, __assign({ onClick: handleOnClickEdit, color: "inherit", sx: { width: '45%' }, variant: 'text' }, { children: [(0, jsx_runtime_1.jsx)(EditRounded_1.default, { sx: { mr: 1 } }), "MODIFIER"] })) }), localEditMode &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/x-date-pickers": "^6.9.1",
     "@mui/material": "^5.13.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",

package/public/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Movalib Commons App</title>
+  <title>Movalib Commons</title>
 </head>
 <body>
   <div id="root"></div>

package/src/MovaLogin.tsx

@@ -5,13 +5,16 @@ import LogoProLarge from './assets/images/logo/logo_pro_large.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, 
-    DialogTitle, FormControlLabel, Grid, Link, TextField } from "@mui/material";
+    DialogTitle, FormControlLabel, Grid, IconButton, Link, TextField } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaLoginForm, MovaFormField } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import { validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -54,6 +57,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
     const [message, setMessage] = useState<string>("");
     const history = useHistory();
     const [openForgotPassword, setOpenForgotPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
         const fieldName: string = e.target.name;
@@ -126,6 +130,9 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
         }
     }
 
+    const handleClickShowPassword = () => {
+      setShowPassword((prev) => !prev);
+    };
 
     /**
      * Boite de diaogue pour la perte du mot de passe
@@ -219,13 +226,25 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                         fullWidth
                         name="password"
                         label="Mot de passe"
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         id="password"
                         autoComplete="current-password"
                         onChange={e => handleInputChange(e)}
                         value={form.password.value}
                         error={!form.password.isValid}
-                        helperText={form.password.error}                    
+                        helperText={form.password.error}  
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={handleClickShowPassword}
+                                >
+                                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}                  
                     />
                     <FormControlLabel control={<Checkbox value="remember" color="primary" />}
                         label="Se souvenir de moi"

package/src/MovaSignUp.tsx

@@ -1,10 +1,12 @@
 import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
 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 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, Link, SelectChangeEvent, TextField, Typography } from "@mui/material";
+import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControl, FormControlLabel, FormHelperText, Grid, 
+    IconButton, Link, SelectChangeEvent, TextField, Typography, TextFieldProps } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -12,6 +14,10 @@ import { validateEmail } from "./helpers/Validator";
 import GenderSelector from "./GenderSelector";
 import { validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import isValid from 'date-fns/isValid';
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -26,14 +32,14 @@ const initialUserFormState = {
     email: { value: '', isValid: true },
     password: { value: '', isValid: true },
     gender:  { value: '', isValid: true },
-    birthDate:  { value: '', isValid: true },
+    birthDate:  { value: null, isValid: true },
     acceptsTerms:  { value: false, isValid: true },
 };
 
 /**
  * Propriétés du composant
  * movaAppType : type d'application Movalib au sein de laquelle le composant est injectée
- * onSubmit : callbakc invoquée en cas de formulaire valide
+ * onSubmit : callback invoquée en cas de formulaire valide
  * alertMessage : éventuel message à afficher
  * alertSeverity : niveau d'alerte pour le message à afficher
  * loading : permet de mettre éventuellement le bouton de soumission en état de chargement
@@ -55,14 +61,27 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
     const history = useHistory();
     const [message, setMessage] = useState<string>("");
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleDateChange = (name: string, date: Date | null) => {
+        console.log(date)
+        if(name && date){
+            const fieldName: string = name;
+            const fieldValue: Date = date;
+            const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+    
+            setUserForm({ ...userForm, ...newField});
+        }
+    }
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-
-        const fieldName: string = e.target.name;
-        const fieldValue: string = e.target.value;
-        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
-
-        setUserForm({ ...userForm, ...newField});
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | null): void => {
+        if(e){
+            const fieldName: string = e.target.name;
+            const fieldValue: string = e.target.value;
+            const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+    
+            setUserForm({ ...userForm, ...newField});
+        }
     }
 
     const handleCheckboxChange = (e: SelectChangeEvent<string>, checked: boolean): void => {
@@ -104,7 +123,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
         newForm.email = validateField(userForm.email, value => !!value, 'Champ obligatoire');
         newForm.password = validateField(userForm.password, value => !!value, 'Champ obligatoire');
         newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
-        newForm.birthDate = validateField(userForm.birthDate, value => !!value, 'Champ obligatoire');
+        newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
 
         // Validator pour l'email
         newForm.email = validateField(userForm.email, validateEmail, 'Adresse email invalide');
@@ -138,6 +157,10 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
         }
     }
 
+    const handleClickShowPassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+
     return (
         <div style={styles}>
             <img src={GreenLeafImage} style={{position: 'fixed', 
@@ -211,18 +234,30 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         fullWidth
                         name="password"
                         label="Mot de passe"
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         id="password"
                         autoComplete="current-password"
                         onChange={e => handleInputChange(e)}
                         value={userForm.password.value}
                         error={!userForm.password.isValid}
-                        helperText={Boolean(userForm.password.error) ? userForm.password.error : "8 caractères minimum"}                    
+                        helperText={Boolean(userForm.password.error) ? userForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule"}
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={handleClickShowPassword}
+                                >
+                                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}   
                     />
 
                     <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{ width:'40%', mr: 2}} />
 
-                    <TextField 
+                    {/* <TextField 
                         margin="normal"
                         required
                         name="birthDate"
@@ -237,7 +272,28 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         helperText={userForm.birthDate.error}        
                         onChange={(e) => handleInputChange(e)}
                         sx={{ width:'50%', float: 'right'}} 
+                    /> */}
+
+                    <DatePicker
+                        label="Date de naissance"
+                        value={userForm.birthDate.value}
+                        format='dd / MM / yyyy'
+                        formatDensity='dense'
+                        //views={['day']}
+                        displayWeekNumber
+                        onChange={(newValue) => handleDateChange('birthDate', newValue)}
+                        slotProps={{
+                            textField: {
+                                required: true,
+                                error:!userForm.birthDate.isValid,
+                                sx: {
+                                    width:'50%', mt: 2, float: 'right',
+                                    padding: 0,
+                                },
+                            },
+                        }}
                     />
+                    
                     <FormControl error={!userForm.acceptsTerms.isValid}>
                         <FormControlLabel
                             control={

package/src/VehicleFullCard.tsx

@@ -367,13 +367,15 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError
                                 {/** Les FACTURES du véhicule */}
                                 {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_MAINTENANCE_INVOICE)
                                 .map((invoice, index) => (
-                                    <Grid container sx={{ justifyContent: 'center', alignItems: 'center' }} key={index+1}>
-                                        <Grid item xs={11} sm={6} md={4} key={(index+1)*50} sx={{ textAlign: 'left' }} >
+                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
+                                        <Grid item xs={11}  key={(index+1)*50} sx={{ textAlign: 'left' }} >
                                             <Link color={darken('#F29ABA', 0.2)} href={invoice.fileSignedUrl} target="_blank" rel="noopener">
-                                                Facture du <>{formatDateByCountryCode(invoice.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}</>
+                                                <Typography variant="body1">
+                                                    Facture du {formatDateByCountryCode(invoice.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
+                                                </Typography>
                                             </Link>
                                         </Grid>
-                                        <Grid item xs={1} sm={1} md={1} key={(index+1)*100} sx={{ textAlign: 'right' }}>
+                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
                                             <IconButton onClick={(e) => handleDeleteDocument(e, invoice.id)}>
                                                 <CloseIcon />
                                             </IconButton>
@@ -384,13 +386,15 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError
                                 {/** Les PHOTOS du véhicule */}
                                 {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_TIRE_PHOTO)
                                 .map((tirePhoto, index) => (
-                                    <Grid container sx={{ justifyContent: 'center', alignItems: 'center' }} key={index+1}>
-                                        <Grid item xs={11} sm={6} md={4} key={(index+1)*50} sx={{ textAlign: 'left' }} >
+                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
+                                        <Grid item xs={11} key={(index+1)*50} sx={{ textAlign: 'left' }} >
                                             <Link color={darken('#F29ABA', 0.2)} href={tirePhoto.fileSignedUrl} target="_blank" rel="noopener">
-                                                Photo pneu du <>{formatDateByCountryCode(tirePhoto.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}</>
+                                                <Typography variant="body1">
+                                                    Photo pneu du {formatDateByCountryCode(tirePhoto.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
+                                                </Typography>
                                             </Link>
                                         </Grid>
-                                        <Grid item xs={1} sm={1} md={1} key={(index+1)*100} sx={{ textAlign: 'right' }}>
+                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
                                             <IconButton onClick={(e) => handleDeleteDocument(e, tirePhoto.id)}>
                                                 <CloseIcon />
                                             </IconButton>
@@ -399,7 +403,7 @@ const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError
                                 ))}
 
                                 <Grid container >
-                                    <Grid item xs={6} sx={{ mt: 2 }} >
+                                    <Grid item xs={6} sx={{ mt: 2, textAlign: 'center' }} >
                                         {/* Input caché de type "file" */}
                                         <div>
                                             <input