@movalib/movalib-commons 1.0.15 → 1.0.17

package/devIndex.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+// Import des composants de la bibliothèque
+import MovaLogin from './src/MovaLogin';
+import { MovaLoginForm } from './src/helpers/Types';
+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';
+
+const App = () => {
+  return (
+    <div>
+      <ThemeProvider theme={theme}>
+        <MovaLogin movaAppType={MovaAppType.GARAGE} onSubmit={function (form: MovaLoginForm): void {
+          alert('Form Submitted !');
+        } } />
+
+        <MovaSignUp movaAppType={MovaAppType.USER} onSubmit={function (form: MovaLoginForm): void {
+          alert('Form Submitted !');
+        } } />
+      </ThemeProvider>
+    </div>
+  );
+};
+
+const root = createRoot(document.getElementById('root')!);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/dist/devIndex.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var client_1 = require("react-dom/client");
+// Import des composants de la bibliothèque
+var MovaLogin_1 = __importDefault(require("./src/MovaLogin"));
+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 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 !');
+                    } }), (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/index.d.ts

@@ -1,9 +1,9 @@
-export { default as TestButton } from './TestButton';
-export { default as MovaSnackbar } from './MovaSnackbar';
-export { default as MovaLogin } from './MovaLogin';
-export { default as MovaCopyright } from './MovaCopyright';
-export { default as User } from './models/User';
-export { default as Role } from './models/Role';
-export { default as Address } from './models/Address';
-export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './helpers/Types';
-export { RoleType, MovaAppType } from './helpers/Enums';
+export { default as TestButton } from './src/TestButton';
+export { default as MovaSnackbar } from './src/MovaSnackbar';
+export { default as MovaLogin } from './src/MovaLogin';
+export { default as MovaCopyright } from './src/MovaCopyright';
+export { default as User } from './src/models/User';
+export { default as Role } from './src/models/Role';
+export { default as Address } from './src/models/Address';
+export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './src/helpers/Types';
+export { RoleType, MovaAppType } from './src/helpers/Enums';

package/dist/index.js

@@ -6,22 +6,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MovaAppType = exports.RoleType = exports.Address = exports.Role = exports.User = exports.MovaCopyright = exports.MovaLogin = exports.MovaSnackbar = exports.TestButton = void 0;
 // Export des composants
-var TestButton_1 = require("./TestButton");
+var TestButton_1 = require("./src/TestButton");
 Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });
-var MovaSnackbar_1 = require("./MovaSnackbar");
+var MovaSnackbar_1 = require("./src/MovaSnackbar");
 Object.defineProperty(exports, "MovaSnackbar", { enumerable: true, get: function () { return __importDefault(MovaSnackbar_1).default; } });
-var MovaLogin_1 = require("./MovaLogin");
+var MovaLogin_1 = require("./src/MovaLogin");
 Object.defineProperty(exports, "MovaLogin", { enumerable: true, get: function () { return __importDefault(MovaLogin_1).default; } });
-var MovaCopyright_1 = require("./MovaCopyright");
+var MovaCopyright_1 = require("./src/MovaCopyright");
 Object.defineProperty(exports, "MovaCopyright", { enumerable: true, get: function () { return __importDefault(MovaCopyright_1).default; } });
 // Export des classes
-var User_1 = require("./models/User");
+var User_1 = require("./src/models/User");
 Object.defineProperty(exports, "User", { enumerable: true, get: function () { return __importDefault(User_1).default; } });
-var Role_1 = require("./models/Role");
+var Role_1 = require("./src/models/Role");
 Object.defineProperty(exports, "Role", { enumerable: true, get: function () { return __importDefault(Role_1).default; } });
-var Address_1 = require("./models/Address");
+var Address_1 = require("./src/models/Address");
 Object.defineProperty(exports, "Address", { enumerable: true, get: function () { return __importDefault(Address_1).default; } });
 // Export des enums
-var Enums_1 = require("./helpers/Enums");
+var Enums_1 = require("./src/helpers/Enums");
 Object.defineProperty(exports, "RoleType", { enumerable: true, get: function () { return Enums_1.RoleType; } });
 Object.defineProperty(exports, "MovaAppType", { enumerable: true, get: function () { return Enums_1.MovaAppType; } });

package/dist/{GenderSelector.d.ts → src/GenderSelector.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SelectChangeEvent } from '@mui/material';
+import { SelectChangeEvent, SxProps, Theme } from '@mui/material';
 import { MovaFormField } from './helpers/Types';
 interface GenderSelectorProps {
     handleSelectChange: (event: SelectChangeEvent<string>) => void;
@@ -7,6 +7,7 @@ interface GenderSelectorProps {
         gender: MovaFormField;
     };
     required?: boolean;
+    sx?: SxProps<Theme>;
 }
 declare const GenderSelector: React.FC<GenderSelectorProps>;
 export default GenderSelector;

package/dist/src/GenderSelector.js

@@ -0,0 +1,20 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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", 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/{MovaCopyright.js → src/MovaCopyright.js}

@@ -14,6 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 function MovaCopyright(props) {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ color: "inherit", href: "https://www.movalib.com" }, { children: "Movalib.com" })), ' ', new Date().getFullYear(), '.'] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ color: "inherit", href: "https://www.movalib.com", target: "_blank", rel: "noopener noreferrer" }, { children: "Movalib.com" })), ' ', new Date().getFullYear(), '.'] })));
 }
 exports.default = MovaCopyright;

package/dist/{MovaLogin.js → src/MovaLogin.js}

@@ -61,6 +61,7 @@ var material_1 = require("@mui/material");
 var MovaCopyright_1 = __importDefault(require("./MovaCopyright"));
 var Enums_1 = require("./helpers/Enums");
 var Validator_1 = require("./helpers/Validator");
+var Tools_1 = require("./helpers/Tools");
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -76,7 +77,6 @@ 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)(initialFormState), form = _b[0], setForm = _b[1];
     var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
-    //const [loading, setLoading] = useState(false);
     var handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -100,27 +100,14 @@ var MovaLogin = function (_a) {
         });
     }); };
     var validateForm = function () {
-        var newForm = form;
-        // Validator email
-        if (!(0, Validator_1.validateEmail)(form.email.value)) {
-            var errorMsg = 'Adresse email invalide';
-            var newField = { value: form.email.value, error: errorMsg, isValid: false };
-            newForm = __assign(__assign({}, newForm), { email: newField });
-        }
-        else {
-            var newField = { value: form.email.value, error: '', isValid: true };
-            newForm = __assign(__assign({}, newForm), { email: newField });
-        }
-        // Validator password
-        if (form.password.value.length < 8) {
-            var errorMsg = 'Votre mot de passe doit faire au moins 8 caractères de long.';
-            var newField = { value: form.password.value, error: errorMsg, isValid: false };
-            newForm = __assign(__assign({}, newForm), { password: newField });
-        }
-        else {
-            var newField = { value: form.password.value, error: '', isValid: true };
-            newForm = __assign(__assign({}, newForm), { password: newField });
-        }
+        var newForm = __assign({}, form);
+        // Validator pour les champs obligatoires
+        newForm.email = (0, Tools_1.validateField)(form.email, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.password = (0, Tools_1.validateField)(form.password, function (value) { return !!value; }, 'Champ obligatoire');
+        // Validator pour l'email
+        newForm.email = (0, Tools_1.validateField)(form.email, Validator_1.validateEmail, 'Adresse email invalide');
+        // Validator pour le mot de passe
+        newForm.password = (0, Tools_1.validateField)(form.password, function (value) { return value.length >= 8; }, 'Votre mot de passe doit faire au moins 8 caractères de long');
         setForm(newForm);
         return newForm.email.isValid && newForm.password.isValid;
     };
@@ -141,7 +128,7 @@ 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({ href: "#", variant: "body2", color: "text.secondary" }, { children: "Mot de passe oubli\u00E9 ?" })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "#", variant: "body2", color: "text.secondary" }, { children: "Créer un compte" })) }))] }))] })), (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: '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({ href: "/forgot-password", variant: "body2", color: "text.secondary" }, { 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({ href: "/signup", variant: "body2", color: "text.secondary" }, { children: "Créer un compte" })) }))] }))] })), (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/{MovaSignUp.js → src/MovaSignUp.js}

@@ -62,6 +62,7 @@ var MovaCopyright_1 = __importDefault(require("./MovaCopyright"));
 var Enums_1 = require("./helpers/Enums");
 var Validator_1 = require("./helpers/Validator");
 var GenderSelector_1 = __importDefault(require("./GenderSelector"));
+var Tools_1 = require("./helpers/Tools");
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -82,7 +83,6 @@ 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 _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
-    //const [loading, setLoading] = useState(false);
     var handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -120,29 +120,23 @@ var MovaLogin = function (_a) {
         });
     }); };
     var validateForm = function () {
-        var newForm = userForm;
-        // Validator email
-        if (!(0, Validator_1.validateEmail)(userForm.email.value)) {
-            var errorMsg = 'Adresse email invalide';
-            var newField = { value: userForm.email.value, error: errorMsg, isValid: false };
-            newForm = __assign(__assign({}, newForm), { email: newField });
-        }
-        else {
-            var newField = { value: userForm.email.value, error: '', isValid: true };
-            newForm = __assign(__assign({}, newForm), { email: newField });
-        }
-        // Validator password
-        if (userForm.password.value.length < 8) {
-            var errorMsg = 'Votre mot de passe doit faire au moins 8 caractères de long.';
-            var newField = { value: userForm.password.value, error: errorMsg, isValid: false };
-            newForm = __assign(__assign({}, newForm), { password: newField });
-        }
-        else {
-            var newField = { value: userForm.password.value, error: '', isValid: true };
-            newForm = __assign(__assign({}, newForm), { password: newField });
-        }
+        var newForm = __assign({}, userForm);
+        // Validator pour les champs obligatoires
+        newForm.firstname = (0, Tools_1.validateField)(userForm.firstname, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.lastname = (0, Tools_1.validateField)(userForm.lastname, function (value) { return !!value; }, 'Champ obligatoire');
+        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');
+        // Validator pour l'email
+        newForm.email = (0, Tools_1.validateField)(userForm.email, Validator_1.validateEmail, 'Adresse email invalide');
+        // Validator pour le mot de passe
+        newForm.password = (0, Tools_1.validateField)(userForm.password, function (value) { return value.length >= 8; }, 'Votre mot de passe doit faire au moins 8 caractères de long');
+        // Validator pour les CGU
+        newForm.acceptsTerms = (0, Tools_1.validateField)(userForm.acceptsTerms, function (value) { return Boolean(value); }, 'Vous devez accepter les termes de nos CGU');
         setUserForm(newForm);
-        return newForm.email.isValid && newForm.password.isValid;
+        return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid
+            && newForm.password.isValid && newForm.gender.isValid && newForm.birthDate.isValid;
     };
     var getMovaLogo = function () {
         return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
@@ -161,9 +155,9 @@ 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: "h2" }, { 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", autoFocus: true, 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: userForm.password.error }), (0, jsx_runtime_1.jsx)(GenderSelector_1.default, { handleSelectChange: handleSelectChange, form: userForm, required: true }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, label: "Date de naissance", type: "date", InputLabelProps: {
+                        } }, { 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.password.value, error: !userForm.password.isValid, helperText: userForm.password.error, onChange: function (e) { return handleInputChange(e); } }), (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, { 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)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                                }, 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)(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/helpers/Tools.d.ts

@@ -0,0 +1,10 @@
+import { MovaFormField } from "./Types";
+/**
+ * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
+ *
+ * @param {MovaFormField} field - Le champ de formulaire à valider.
+ * @param {(value: string) => boolean} validator - La fonction de validation à utiliser pour le champ.
+ * @param {string} errorMsg - Le message d'erreur à associer au champ si la validation échoue.
+ * @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
+ */
+export declare const validateField: (field: MovaFormField, validator: (value: string) => boolean, errorMsg: string) => MovaFormField;

package/dist/src/helpers/Tools.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateField = void 0;
+/**
+ * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
+ *
+ * @param {MovaFormField} field - Le champ de formulaire à valider.
+ * @param {(value: string) => boolean} validator - La fonction de validation à utiliser pour le champ.
+ * @param {string} errorMsg - Le message d'erreur à associer au champ si la validation échoue.
+ * @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
+ */
+var validateField = function (field, validator, errorMsg) {
+    if (!validator(field.value)) {
+        return { value: field.value, error: errorMsg, isValid: false };
+    }
+    return { value: field.value, error: '', isValid: true };
+};
+exports.validateField = validateField;

package/dist/theme.d.ts

@@ -0,0 +1,2 @@
+declare const theme: import("@mui/material/styles").Theme;
+export default theme;

package/dist/theme.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var styles_1 = require("@mui/material/styles");
+var theme = (0, styles_1.createTheme)({
+    palette: {
+        background: {
+            paper: '#F0F0F0',
+        },
+        primary: {
+            main: '#BCD46C',
+            light: '#D2EDAB'
+        },
+        secondary: {
+            main: '#FFD25C',
+            light: '#FEE08E' //'#F1C0D9'
+        },
+        success: {
+            main: '#A8DB5EFF'
+        },
+        warning: {
+            main: '#FFD25C'
+        }
+        /*  text: {
+           //light: '#E4E4E4',
+         } */
+    },
+    typography: {
+        fontFamily: 'Outfit, sans-serif', // Police de caractère par défaut
+    },
+    components: {
+        MuiAutocomplete: {
+            styleOverrides: {
+                noOptions: {
+                //display: 'none'
+                }
+            }
+        },
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    display: 'flex',
+                    alignItems: 'center'
+                }
+            }
+        },
+        MuiTooltip: {
+            styleOverrides: {
+                // Name of the slot
+                tooltip: {
+                    fontSize: 14,
+                },
+            },
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    color: '#5f6368',
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                // Name of the slot
+                paper: {
+                    backgroundColor: 'white',
+                    margin: '18px'
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    margin: '8px'
+                }
+            }
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white'
+                }
+            }
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    "&.Mui-selected": {
+                        "backgroundColor": "#BCD46C"
+                    }
+                }
+            }
+        }
+    }
+});
+exports.default = theme;

package/index.ts

@@ -0,0 +1,19 @@
+// src/index.ts
+
+// Export des composants
+export { default as TestButton } from './src/TestButton';
+export { default as MovaSnackbar } from './src/MovaSnackbar';
+export { default as MovaLogin } from './src/MovaLogin';
+export { default as MovaCopyright } from './src/MovaCopyright';
+
+// Export des classes
+export { default as User } from './src/models/User';
+export { default as Role } from './src/models/Role';
+export { default as Address } from './src/models/Address';
+
+// Export des types
+export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './src/helpers/Types';
+
+
+// Export des enums
+export { RoleType, MovaAppType } from './src/helpers/Enums';

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
   "scripts": {
+    "start": "webpack-dev-server --entry ./devIndex.tsx --open",
     "build": "rm -rf dist && tsc && npm run copy-assets",
     "copy-assets": "cp -r src/assets/ dist/assets/",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -16,6 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "@types/node": "^16.18.53",
+    "@types/react": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
@@ -33,13 +35,10 @@
     "@mui/material": "^5.13.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "prop-types": "^15.8.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.4.4",
     "typescript": "^4.9.5",
-    "webpack": "^5.88.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "webpack-cli": "^5.1.4"
   }
 }

package/public/index.html

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

package/src/GenderSelector.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent, SxProps, Theme, FormHelperText } from '@mui/material';
 import { MovaFormField } from './helpers/Types';
 
 interface GenderSelectorProps {
@@ -7,12 +7,13 @@ interface GenderSelectorProps {
     form: {
         gender: MovaFormField
       };
-    required?: boolean;
+    required?: boolean,
+    sx?: SxProps<Theme>;
 }
 
-const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required }) => {
+const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required, sx }) => {
   return (
-    <FormControl fullWidth margin="normal" required={required}>
+    <FormControl fullWidth margin="normal" required={required} sx={{ ...sx }} error={!form.gender.isValid}>
       <InputLabel id="gender-label">Sexe</InputLabel>
       <Select
         labelId="gender-label"
@@ -25,6 +26,7 @@ const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, for
         <MenuItem value="FEMALE">Femme</MenuItem>
         <MenuItem value="OTHER">Autre</MenuItem>
       </Select>
+      <FormHelperText>{form.gender.error}</FormHelperText>
     </FormControl>
   );
 };

package/src/MovaCopyright.tsx

@@ -5,7 +5,7 @@ function MovaCopyright(props: any) {
     return (
         <Typography variant="body2" color="text.secondary" align="center" {...props}>
             {'Copyright © '}
-            <Link color="inherit" href="https://www.movalib.com">
+            <Link color="inherit" href="https://www.movalib.com" target="_blank" rel="noopener noreferrer">
                 Movalib.com
             </Link>{' '}
             {new Date().getFullYear()}

package/src/MovaLogin.tsx

@@ -9,6 +9,7 @@ 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";
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -42,8 +43,7 @@ interface MovaLoginProps {
 const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, alertMessage, alertSeverity }) => {
 
     const [form, setForm] = useState<MovaLoginForm>(initialFormState);
-    const [message, setMessage] = useState<string>("");    
-    //const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string>("");
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
         const fieldName: string = e.target.name;
@@ -67,27 +67,17 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
     }
 
     const validateForm = () => {
-        let newForm: MovaLoginForm = form;
-
-        // Validator email
-        if(!validateEmail(form.email.value)) {
-            const errorMsg: string = 'Adresse email invalide';
-            const newField: MovaFormField = { value: form.email.value, error: errorMsg, isValid: false };
-            newForm = { ...newForm, ...{ email: newField } };
-        } else {
-            const newField: MovaFormField = { value: form.email.value, error: '', isValid: true };
-            newForm = { ...newForm, ...{ email: newField } };
-        }
+        let newForm: MovaLoginForm = { ...form };
+        
+        // Validator pour les champs obligatoires
+        newForm.email = validateField(form.email, value => !!value, 'Champ obligatoire');
+        newForm.password = validateField(form.password, value => !!value, 'Champ obligatoire');
 
-        // Validator password
-        if(form.password.value.length < 8) {
-            const errorMsg: string = 'Votre mot de passe doit faire au moins 8 caractères de long.';
-            const newField: MovaFormField = {value: form.password.value, error: errorMsg, isValid: false};
-            newForm = { ...newForm, ...{ password: newField } };
-        } else {
-            const newField: MovaFormField = { value: form.password.value, error: '', isValid: true };
-            newForm = { ...newForm, ...{ password: newField } };
-        }
+        // Validator pour l'email
+        newForm.email = validateField(form.email, validateEmail, 'Adresse email invalide');
+
+        // Validator pour le mot de passe
+        newForm.password = validateField(form.password, value => value.length >= 8, 'Votre mot de passe doit faire au moins 8 caractères de long');
 
         setForm(newForm);
 
@@ -173,15 +163,15 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
 
                     <Grid container>
                         <Grid item xs>
-                            <Link href="#" variant="body2" color="text.secondary">
+                            <Link href="/forgot-password" variant="body2" color="text.secondary">
                                 Mot de passe oublié ?
                             </Link>
                         </Grid>
-                        <Grid item>
-                            <Link href="#" variant="body2" color="text.secondary">
+                        {movaAppType === MovaAppType.USER && <Grid item>
+                            <Link href="/signup" variant="body2" color="text.secondary">
                             {"Créer un compte"}
                             </Link>
-                        </Grid>
+                        </Grid>}
                     </Grid>
                 </Box>
                 <MovaCopyright sx={{ mt: 8, mb: 4 }} />

package/src/MovaSignUp.tsx

@@ -10,6 +10,7 @@ import { MovaLoginForm, MovaFormField, MovaUserSignUpForm } from "./helpers/Type
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import GenderSelector from "./GenderSelector";
+import { validateField } from "./helpers/Tools";
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -49,10 +50,10 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
 
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
 
-    const [message, setMessage] = useState<string>("");    
-    //const [loading, setLoading] = useState(false);
+    const [message, setMessage] = useState<string>("");
 
     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 } };
@@ -61,10 +62,11 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     }
 
     const handleCheckboxChange = (e: SelectChangeEvent<string>, checked: boolean): void => {
+
         const fieldName: string = e.target.name;
         const fieldValue: boolean = checked;
         const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
-  
+
         setUserForm({ ...userForm, ...newField});
     }  
 
@@ -90,33 +92,31 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     }
 
     const validateForm = () => {
-        let newForm: MovaUserSignUpForm = userForm;
-
-        // Validator email
-        if(!validateEmail(userForm.email.value)) {
-            const errorMsg: string = 'Adresse email invalide';
-            const newField: MovaFormField = { value: userForm.email.value, error: errorMsg, isValid: false };
-            newForm = { ...newForm, ...{ email: newField } };
-        } else {
-            const newField: MovaFormField = { value: userForm.email.value, error: '', isValid: true };
-            newForm = { ...newForm, ...{ email: newField } };
-        }
+        let newForm: MovaUserSignUpForm = { ...userForm };
 
-        // Validator password
-        if(userForm.password.value.length < 8) {
-            const errorMsg: string = 'Votre mot de passe doit faire au moins 8 caractères de long.';
-            const newField: MovaFormField = {value: userForm.password.value, error: errorMsg, isValid: false};
-            newForm = { ...newForm, ...{ password: newField } };
-        } else {
-            const newField: MovaFormField = { value: userForm.password.value, error: '', isValid: true };
-            newForm = { ...newForm, ...{ password: newField } };
-        }
+        // Validator pour les champs obligatoires
+        newForm.firstname = validateField(userForm.firstname, value => !!value, 'Champ obligatoire');
+        newForm.lastname = validateField(userForm.lastname, value => !!value, 'Champ obligatoire');
+        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');
 
-        setUserForm(newForm);
+        // Validator pour l'email
+        newForm.email = validateField(userForm.email, validateEmail, 'Adresse email invalide');
 
-        return newForm.email.isValid && newForm.password.isValid;
-    }    
+        // Validator pour le mot de passe
+        newForm.password = validateField(userForm.password, value => value.length >= 8, 'Votre mot de passe doit faire au moins 8 caractères de long');
 
+        // Validator pour les CGU
+        newForm.acceptsTerms = validateField(userForm.acceptsTerms, value => Boolean(value), 'Vous devez accepter les termes de nos CGU');
+
+        setUserForm(newForm);
+
+        return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid 
+            && newForm.password.isValid && newForm.gender.isValid && newForm.birthDate.isValid;
+    }   
+  
     const getMovaLogo = () => {
 
         return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
@@ -148,7 +148,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                     >
                     <img src={getMovaLogo()} style={{width:'50%'}}/>
                     <br />
-                    <Typography variant="h2">Nouveau compte utilisateur</Typography>
+                    <Typography variant="button" sx={{ pt: 2 }}>Nouveau compte utilisateur</Typography>
                 </Box>
 
                 <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
@@ -187,7 +187,6 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         label="Adresse email"
                         name="email"
                         autoComplete="email"
-                        autoFocus
                         onChange={e => handleInputChange(e)}
                         value={userForm.email.value}
                         error={!userForm.email.isValid}
@@ -205,27 +204,32 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         onChange={e => handleInputChange(e)}
                         value={userForm.password.value}
                         error={!userForm.password.isValid}
-                        helperText={userForm.password.error}                    
+                        helperText={Boolean(userForm.password.error) ? userForm.password.error : "8 caractères minimum"}                    
                     />
-                    <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required/>
+
+                    <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{ width:'40%', mr: 2}} />
+
                     <TextField 
                         margin="normal"
                         required
+                        name="birthDate"
                         label="Date de naissance" 
                         type="date" 
                         InputLabelProps={{
                             shrink: true,
                         }}
                         autoComplete="bday"
-                        value={userForm.password.value}
-                        error={!userForm.password.isValid}
-                        helperText={userForm.password.error}        
+                        value={userForm.birthDate.value}
+                        error={!userForm.birthDate.isValid}
+                        helperText={userForm.birthDate.error}        
                         onChange={(e) => handleInputChange(e)}
+                        sx={{ width:'50%', float: 'right'}} 
                     />
                     <FormControl error={!userForm.acceptsTerms.isValid}>
                         <FormControlLabel
                             control={
                             <Checkbox
+                                name="acceptsTerms"
                                 color="primary"
                                 checked={userForm.acceptsTerms.value}
                                 onChange={(e, checked) => handleCheckboxChange(e, checked)}
@@ -245,7 +249,6 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         
                     {alertMessage && alertSeverity && <Alert severity={alertSeverity} sx={{ mb: 2 }}>{alertMessage}</Alert>}
 
-
                     <LoadingButton
                         loading={loading}
                         type="submit"

package/src/helpers/Tools.ts

@@ -1 +1,17 @@
-export {}
+import { MovaFormField } from "./Types";
+
+/**
+ * Valide un champ de formulaire en utilisant une fonction de validation personnalisée.
+ *
+ * @param {MovaFormField} field - Le champ de formulaire à valider.
+ * @param {(value: string) => boolean} validator - La fonction de validation à utiliser pour le champ.
+ * @param {string} errorMsg - Le message d'erreur à associer au champ si la validation échoue.
+ * @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
+ */
+export const validateField = (field: MovaFormField, validator: (value: string) => boolean, errorMsg: string): MovaFormField => {
+    if (!validator(field.value)) {
+      return { value: field.value, error: errorMsg, isValid: false };
+    }
+    return { value: field.value, error: '', isValid: true };
+  };
+  

package/theme.ts

@@ -0,0 +1,95 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+      background: {
+        paper: '#F0F0F0',
+      },
+      primary: {
+        main: '#BCD46C', // Définissez votre couleur primaire
+        light: '#D2EDAB'
+      },
+      secondary: {        
+        main: '#FFD25C',//'#F29ABA', // Définissez votre couleur secondaire  // FFC700
+        light: '#FEE08E'//'#F1C0D9'
+      },
+      success: {
+        main: '#A8DB5EFF'
+      },
+      warning: {
+        main: '#FFD25C'
+      }
+     /*  text: {
+        //light: '#E4E4E4',
+      } */
+    },
+    typography: {
+      fontFamily: 'Outfit, sans-serif', // Police de caractère par défaut
+    },
+    components: {
+      MuiAutocomplete: {
+        styleOverrides: {
+          noOptions: {
+            //display: 'none'
+          }
+        }
+      },
+      MuiSelect: {
+        styleOverrides: {
+          select: {
+            display: 'flex',
+            alignItems: 'center'
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          // Name of the slot
+          tooltip: {
+            fontSize: 14,
+          },
+        },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: '#5f6368',
+          },
+        },
+      },
+      MuiDialog: {
+        styleOverrides: {
+          // Name of the slot
+          paper: {
+            backgroundColor: 'white',
+            margin: '18px'
+          },
+        },
+      },
+      MuiDialogActions: {
+        styleOverrides: {
+          root: {
+            margin: '8px'
+          }
+        }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            backgroundColor: 'white'
+          }
+        }
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            "&.Mui-selected": {
+              "backgroundColor": "#BCD46C"
+            }
+          }
+        }
+      }
+    }
+  });
+  
+export default theme;  

package/tsconfig.json

@@ -110,5 +110,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["src"]
+  "include": ["src", "devIndex.tsx", "index.ts"]
 }

package/webpack.config.js

@@ -0,0 +1,35 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+
+module.exports = {
+    mode: 'development', // ou 'production' ou 'none'
+    module: {
+        rules: [
+          {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/,
+          },
+          {
+            test: /\.(png|jpg|gif|svg)$/,
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name].[ext]',
+                  outputPath: 'images/',
+                },
+              },
+            ],
+          },
+        ],        
+      },
+      resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+      },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'public', 'index.html'), // Chemin vers votre fichier HTML de base
+      }),
+    ],      
+};  

package/dist/GenderSelector.js

@@ -1,20 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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;
-    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required }, { 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", 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" }))] }))] })));
-};
-exports.default = GenderSelector;

package/dist/helpers/Tools.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/index.ts

@@ -1,19 +0,0 @@
-// src/index.ts
-
-// Export des composants
-export { default as TestButton } from './TestButton';
-export { default as MovaSnackbar } from './MovaSnackbar';
-export { default as MovaLogin } from './MovaLogin';
-export { default as MovaCopyright } from './MovaCopyright';
-
-// Export des classes
-export { default as User } from './models/User';
-export { default as Role } from './models/Role';
-export { default as Address } from './models/Address';
-
-// Export des types
-export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './helpers/Types';
-
-
-// Export des enums
-export { RoleType, MovaAppType } from './helpers/Enums';