@movalib/movalib-commons 1.0.14 → 1.0.16

package/PV_README.md

@@ -12,4 +12,12 @@
 Make shure that "private=true" in your package.json
 
 ### `npm login`
-### `npm publish --access=restricted`
+### `npm publish --access=restricted`
+
+Pour lier la librairie aux projets qui l'utilise, executer la commande suivnte
+
+###  `npm run link`
+
+Les commandes exécutées (ci-dessous) permettent de contourner un problème de double référence vers react et react-dom lorsque les deux appli utilisent des Hook
+
+  "link": "npm link --only=production && npm link \"/home/dimitri/Projets/5 - MOVALIB/02 - Développement/Front-End/movalib-user-app/node_modules/react\" && npm link \"/home/dimitri/Projets/5 - MOVALIB/02 - Développement/Front-End/movalib-user-app/node_modules/react-dom\"",

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/src/GenderSelector.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectChangeEvent, SxProps, Theme } from '@mui/material';
+import { MovaFormField } from './helpers/Types';
+interface GenderSelectorProps {
+    handleSelectChange: (event: SelectChangeEvent<string>) => void;
+    form: {
+        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/src/MovaSignUp.d.ts

@@ -0,0 +1,21 @@
+import { FunctionComponent } from "react";
+import { AlertColor } from "@mui/material";
+import { MovaLoginForm } from "./helpers/Types";
+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
+ * 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
+ */
+interface MovaSignUpProps {
+    movaAppType: MovaAppType;
+    onSubmit: (form: MovaLoginForm) => void;
+    alertMessage?: string;
+    alertSeverity?: AlertColor;
+    loading?: boolean;
+}
+declare const MovaLogin: FunctionComponent<MovaSignUpProps>;
+export default MovaLogin;

package/dist/src/MovaSignUp.js

@@ -0,0 +1,169 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var lab_1 = require("@mui/lab");
+var logo_large_png_1 = __importDefault(require("./assets/images/logo/logo_large.png"));
+var logo_pro_large_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large.png"));
+var leaf_green_large_png_1 = __importDefault(require("./assets/images/leaf_green_large.png"));
+var leaf_pink_large_png_1 = __importDefault(require("./assets/images/leaf_pink_large.png"));
+var material_1 = require("@mui/material");
+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',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh', // Ajustez la hauteur en fonction de vos besoins
+};
+var initialUserFormState = {
+    firstname: { value: '', isValid: true },
+    lastname: { value: '', isValid: true },
+    email: { value: '', isValid: true },
+    password: { value: '', isValid: true },
+    gender: { value: '', isValid: true },
+    birthDate: { value: '', isValid: true },
+    acceptsTerms: { value: false, isValid: true },
+};
+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];
+    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));
+    };
+    var handleCheckboxChange = function (e, checked) {
+        var _a;
+        var fieldName = e.target.name;
+        var fieldValue = checked;
+        var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
+        setUserForm(__assign(__assign({}, userForm), newField));
+    };
+    var handleSelectChange = 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));
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.preventDefault();
+            try {
+                if (validateForm() && onSubmit) {
+                    // Si le formulaire est valide, on appel la function callback transmise en props
+                    onSubmit(userForm);
+                }
+            }
+            catch (error) {
+                console.error('Error occurred during submission:', error);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var validateForm = function () {
+        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.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 :
+            movaAppType === Enums_1.MovaAppType.USER ? logo_large_png_1.default :
+                movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
+    };
+    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',
+                    height: '400px',
+                    top: '-20%',
+                    left: '3%',
+                    opacity: '0.3',
+                    zIndex: -8 }, alt: 'Feuille Verte Movalib' }), (0, jsx_runtime_1.jsxs)(material_1.Container, __assign({ component: "main", maxWidth: "sm" }, { children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
+                            marginTop: 6,
+                            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)(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',
+                    bottom: '-20%',
+                    right: '3%',
+                    opacity: '0.3',
+                    zIndex: '-10' }, alt: 'Feuille Rose Movalib' })] })));
+};
+exports.default = MovaLogin;

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/src/helpers/Types.d.ts

@@ -0,0 +1,18 @@
+export type MovaUserSignUpForm = {
+    firstname: MovaFormField;
+    lastname: MovaFormField;
+    email: MovaFormField;
+    password: MovaFormField;
+    gender: MovaFormField;
+    birthDate: MovaFormField;
+    acceptsTerms: MovaFormField;
+};
+export type MovaLoginForm = {
+    email: MovaFormField;
+    password: MovaFormField;
+};
+export type MovaFormField = {
+    value?: any;
+    error?: string;
+    isValid?: boolean;
+};

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

@@ -5,7 +5,5 @@ 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 } from './helpers/Types';
-export type { MovaLoginForm } from './helpers/Types';
-export { RoleType } from './helpers/Enums';
-export { MovaAppType } from './helpers/Enums';
+export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './helpers/Types';
+export { RoleType, MovaAppType } from './helpers/Enums';

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

@@ -24,5 +24,4 @@ Object.defineProperty(exports, "Address", { enumerable: true, get: function () {
 // Export des enums
 var Enums_1 = require("./helpers/Enums");
 Object.defineProperty(exports, "RoleType", { enumerable: true, get: function () { return Enums_1.RoleType; } });
-var Enums_2 = require("./helpers/Enums");
-Object.defineProperty(exports, "MovaAppType", { enumerable: true, get: function () { return Enums_2.MovaAppType; } });
+Object.defineProperty(exports, "MovaAppType", { enumerable: true, get: function () { return Enums_1.MovaAppType; } });

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

@@ -1,11 +1,12 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "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",
@@ -15,11 +16,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/node": "^16.18.53",
+    "@types/react": "^18.2.22",
     "react": "^18.2.0",
-    "react-scripts": "5.0.1",
     "react-dom": "^18.2.0",
-    "@types/node": "^16.18.53",
-    "@types/react": "^18.2.22"
+    "react-scripts": "5.0.1"
   },
   "eslintConfig": {
     "extends": [
@@ -27,13 +28,17 @@
     ]
   },
   "devDependencies": {
-    "@mui/material": "^5.13.5",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/lab": "^5.0.0-alpha.134",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "typescript": "^4.9.5"
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.4.4",
+    "typescript": "^4.9.5",
+    "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>