@movalib/movalib-commons 1.0.13 → 1.0.15

package/PV_README.md

@@ -0,0 +1,23 @@
+# 1. build this movalib commons lib
+
+### `npm build`
+
+# 2. publish this movalib commons lib (public)
+
+### `npm login`
+### `npm publish --access=public`
+
+# 3. publish this movalib commons lib (private)
+
+Make shure that "private=true" in your package.json
+
+### `npm login`
+### `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/dist/GenderSelector.d.ts

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

package/dist/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;
+    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/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/MovaSignUp.js

@@ -0,0 +1,175 @@
+"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"));
+// 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];
+    //const [loading, setLoading] = useState(false);
+    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 = 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 });
+        }
+        setUserForm(newForm);
+        return newForm.email.isValid && newForm.password.isValid;
+    };
+    var getMovaLogo = function () {
+        return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
+            movaAppType === Enums_1.MovaAppType.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: "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: {
+                                    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',
+                    float: 'right',
+                    width: '250px',
+                    height: '400px',
+                    bottom: '-20%',
+                    right: '3%',
+                    opacity: '0.3',
+                    zIndex: '-10' }, alt: 'Feuille Rose Movalib' })] })));
+};
+exports.default = MovaLogin;

package/dist/helpers/Types.d.ts

@@ -1,3 +1,12 @@
+export type MovaUserSignUpForm = {
+    firstname: MovaFormField;
+    lastname: MovaFormField;
+    email: MovaFormField;
+    password: MovaFormField;
+    gender: MovaFormField;
+    birthDate: MovaFormField;
+    acceptsTerms: MovaFormField;
+};
 export type MovaLoginForm = {
     email: MovaFormField;
     password: MovaFormField;

package/dist/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

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

@@ -1,15 +1,12 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "build": "tsc && npm run copy-assets",
+    "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",
     "clean": "rm -rf dist node_modules package-lock.json"
@@ -18,11 +15,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/node": "^16.18.53",
     "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": [
@@ -30,13 +26,20 @@
     ]
   },
   "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"
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "prop-types": "^15.8.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.88.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

package/src/GenderSelector.tsx

@@ -0,0 +1,32 @@
+import React, { ChangeEvent } from 'react';
+import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { MovaFormField } from './helpers/Types';
+
+interface GenderSelectorProps {
+    handleSelectChange: (event: SelectChangeEvent<string>) => void;
+    form: {
+        gender: MovaFormField
+      };
+    required?: boolean;
+}
+
+const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required }) => {
+  return (
+    <FormControl fullWidth margin="normal" required={required}>
+      <InputLabel id="gender-label">Sexe</InputLabel>
+      <Select
+        labelId="gender-label"
+        id="gender"
+        name="gender"
+        value={form.gender.value}
+        onChange={e => handleSelectChange(e)}
+      >
+        <MenuItem value="MALE">Homme</MenuItem>
+        <MenuItem value="FEMALE">Femme</MenuItem>
+        <MenuItem value="OTHER">Autre</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default GenderSelector;

package/src/MovaCopyright.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+import { Link, Typography } from "@mui/material";
+
+function MovaCopyright(props: any) {
+    return (
+        <Typography variant="body2" color="text.secondary" align="center" {...props}>
+            {'Copyright © '}
+            <Link color="inherit" href="https://www.movalib.com">
+                Movalib.com
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}
+
+export default MovaCopyright;

package/src/MovaLogin.tsx

@@ -0,0 +1,202 @@
+import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
+import { LoadingButton } from '@mui/lab';
+import LogoLarge from './assets/images/logo/logo_large.png';
+import LogoProLarge from './assets/images/logo/logo_pro_large.png';
+import GreenLeafImage from "./assets/images/leaf_green_large.png";
+import PinkLeafImage from "./assets/images/leaf_pink_large.png";
+import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControlLabel, Grid, Link, TextField } from "@mui/material";
+import MovaCopyright from "./MovaCopyright";
+import { MovaLoginForm, MovaFormField } from "./helpers/Types";
+import { MovaAppType } from "./helpers/Enums";
+import { validateEmail } from "./helpers/Validator";
+
+// Permet de centrer le contenu de l'application
+const styles: CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh', // Ajustez la hauteur en fonction de vos besoins
+};
+
+const initialFormState = {
+    email: { value: '', isValid: true },
+    password: { value: '', isValid: true },
+};
+
+/**
+ * Propriétés du composant
+ * movaAppType : type d'application Movalib au sein de laquelle le composant est injectée
+ * onSubmit : callbakc invoquée en cas de formulaire valide
+ * 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 MovaLoginProps {
+    movaAppType: MovaAppType,
+    onSubmit: (form: MovaLoginForm) => void,
+    alertMessage?: string,
+    alertSeverity?: AlertColor,
+    loading?: boolean
+}
+
+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 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 } };
+
+        setForm({ ...form, ...newField});
+    }
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        try {
+            if(validateForm() && onSubmit) {
+                // Si le formulaire est valide, on appel la function callback transmise en props
+                onSubmit(form);
+            }
+
+        }catch (error){
+            console.error('Error occurred during submission:', error);
+        }
+    }
+
+    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 } };
+        }
+
+        // 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 } };
+        }
+
+        setForm(newForm);
+
+        return newForm.email.isValid && newForm.password.isValid;
+    }    
+
+    const getMovaLogo = () => {
+
+        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+    }
+
+
+    return (
+        <div style={styles}>
+            <img src={GreenLeafImage} style={{position: 'fixed', 
+                float:'left',
+                width: '250px',
+                height: '400px',
+                top: '-20%',
+                left: '3%',
+                opacity: '0.3',
+                zIndex: -8}} alt='Feuille Verte Movalib'></img>
+        
+            <Container component="main" maxWidth="xs">
+                <CssBaseline />
+                <Box
+                    sx={{
+                        marginTop: 6,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                    >
+                    <img src={getMovaLogo()} style={{width:'80%'}}/>
+                    <br />
+                </Box>
+
+                <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="email"
+                        label="Adresse email"
+                        name="email"
+                        autoComplete="email"
+                        autoFocus
+                        onChange={e => handleInputChange(e)}
+                        value={form.email.value}
+                        error={!form.email.isValid}
+                        helperText={form.email.error}
+                    />
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        name="password"
+                        label="Mot de passe"
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        onChange={e => handleInputChange(e)}
+                        value={form.password.value}
+                        error={!form.password.isValid}
+                        helperText={form.password.error}                    
+                    />
+                    <FormControlLabel control={<Checkbox value="remember" color="primary" />}
+                        label="Se souvenir de moi"
+                    />
+                                            
+                    <LoadingButton
+                        loading={loading}
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        sx={{ mt: 3, mb: 2 }}>
+                        <span>Se connecter</span>
+                    </LoadingButton>
+                    
+                    {alertMessage && alertSeverity && <Alert severity={alertSeverity} sx={{ mb: 2 }}>{alertMessage}</Alert>}
+
+                    <Grid container>
+                        <Grid item xs>
+                            <Link href="#" variant="body2" color="text.secondary">
+                                Mot de passe oublié ?
+                            </Link>
+                        </Grid>
+                        <Grid item>
+                            <Link href="#" variant="body2" color="text.secondary">
+                            {"Créer un compte"}
+                            </Link>
+                        </Grid>
+                    </Grid>
+                </Box>
+                <MovaCopyright sx={{ mt: 8, mb: 4 }} />
+            </Container>
+
+            <img src={PinkLeafImage} style={{position: 'fixed', 
+                float:'right',
+                width: '250px',
+                height: '400px',
+                bottom: '-20%',
+                right: '3%',
+                opacity: '0.3',
+                zIndex: '-10'}} alt='Feuille Rose Movalib'></img>
+        </div>
+    );
+};
+
+export default MovaLogin;