@movalib/movalib-commons 1.0.2 → 1.0.4

package/dist/MovaCopyright.d.ts

@@ -0,0 +1,2 @@
+declare function MovaCopyright(props: any): import("react/jsx-runtime").JSX.Element;
+export default MovaCopyright;

package/dist/MovaCopyright.js

@@ -0,0 +1,17 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Typography } from "@mui/material";
+function MovaCopyright(props) {
+    return (_jsxs(Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', _jsx(Link, __assign({ color: "inherit", href: "https://www.movalib.com" }, { children: "Movalib.com" })), ' ', new Date().getFullYear(), '.'] })));
+}
+export default MovaCopyright;

package/dist/MovaLogin.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from "react";
+import { MovaLoginForm } from "./helpers/Types";
+import { MovaAppType } from "./helpers/Enums";
+interface MovaLoginProps {
+    movaAppType: MovaAppType;
+    onSubmit: (form: MovaLoginForm) => void;
+}
+declare const MovaLogin: FunctionComponent<MovaLoginProps>;
+export default MovaLogin;

package/dist/MovaLogin.js

@@ -0,0 +1,152 @@
+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 };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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/logo/leaf_green_large.png';
+import PinkLeafImage from './assets/images/logo/leaf_pink_large.png';
+import { Alert, Box, Checkbox, Container, CssBaseline, FormControlLabel, Grid, Link, TextField } from "@mui/material";
+import MovaCopyright from "./MovaCopyright";
+import { MovaAppType } from "./helpers/Enums";
+import { validateEmail } from "./helpers/Validator";
+// 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 initialFormState = {
+    email: { value: '', isValid: true },
+    password: { value: '', isValid: true },
+};
+var MovaLogin = function (_a) {
+    var movaAppType = _a.movaAppType, onSubmit = _a.onSubmit;
+    var _b = useState(initialFormState), form = _b[0], setForm = _b[1];
+    var _c = useState(""), message = _c[0], setMessage = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[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);
+        setForm(__assign(__assign({}, form), newField));
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.preventDefault();
+            setLoading(true);
+            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);
+            }
+            finally {
+                setLoading(false);
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    var validateForm = function () {
+        var newForm = form;
+        // Validator email
+        if (!validateEmail(form.email.value.length)) {
+            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 });
+        }
+        setForm(newForm);
+        return newForm.email.isValid && newForm.password.isValid;
+    };
+    var getMovaLogo = function () {
+        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+            movaAppType === MovaAppType.USER ? LogoLarge :
+                movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+    };
+    return (_jsxs("div", __assign({ style: styles }, { children: [_jsx("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' }), _jsxs(Container, __assign({ component: "main", maxWidth: "xs" }, { children: [_jsx(CssBaseline, {}), _jsxs(Box, __assign({ sx: {
+                            marginTop: 6,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                        } }, { children: [_jsx("img", { src: getMovaLogo(), style: { width: '80%' } }), _jsx("br", {})] })), _jsxs(Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [_jsx(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 }), _jsx(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 }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), _jsx(LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: _jsx("span", { children: "Se connecter" }) })), message && _jsx(Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message })), _jsxs(Grid, __assign({ container: true }, { children: [_jsx(Grid, __assign({ item: true, xs: true }, { children: _jsx(Link, __assign({ href: "#", variant: "body2", color: "text.secondary" }, { children: "Mot de passe oubli\u00E9 ?" })) })), _jsx(Grid, __assign({ item: true }, { children: _jsx(Link, __assign({ href: "#", variant: "body2", color: "text.secondary" }, { children: "Créer un compte" })) }))] }))] })), _jsx(MovaCopyright, { sx: { mt: 8, mb: 4 } })] })), _jsx("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' })] })));
+};
+export default MovaLogin;

package/dist/MovaSnackbar.js

@@ -1,12 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const MovaSnackbar = ({ snackbar, setSnackbar }) => {
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Snackbar, Alert, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+var MovaSnackbar = function (_a) {
+    var snackbar = _a.snackbar, setSnackbar = _a.setSnackbar;
     /**
      * Gestion de la fermeture de la snackbar. Si la raison de cette fermeture est
      * un clic en dehors de la zone de contenu on intercepte et annule la fermeture 'clickaway'.
@@ -14,14 +21,14 @@ const MovaSnackbar = ({ snackbar, setSnackbar }) => {
      * @param reason Origine de l'événnement de fermeture
      * @returns
      */
-    const handleClose = (event, reason) => {
+    var handleClose = function (event, reason) {
         if (reason === 'clickaway')
             return;
         setSnackbar({ open: false, message: '', severity: undefined });
     };
-    const handleCloseAlert = (event) => {
+    var handleCloseAlert = function (event) {
         setSnackbar({ open: false, message: '', severity: undefined });
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Snackbar, Object.assign({ open: snackbar.open, autoHideDuration: 5000, onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: snackbar.severity, variant: "filled", sx: { width: '100%' }, action: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", "aria-label": "close", color: "inherit", onClick: handleCloseAlert }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, { fontSize: "small" }) })) }) }, { children: snackbar.message })) })));
+    return (_jsx(Snackbar, __assign({ open: snackbar.open, autoHideDuration: 5000, onClose: handleClose }, { children: _jsx(Alert, __assign({ severity: snackbar.severity, variant: "filled", sx: { width: '100%' }, action: _jsx(_Fragment, { children: _jsx(IconButton, __assign({ size: "small", "aria-label": "close", color: "inherit", onClick: handleCloseAlert }, { children: _jsx(CloseIcon, { fontSize: "small" }) })) }) }, { children: snackbar.message })) })));
 };
-exports.default = MovaSnackbar;
+export default MovaSnackbar;

package/dist/TestButton.js

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TestButton = ({ label }) => {
-    return (0, jsx_runtime_1.jsx)("button", { children: label });
+import { jsx as _jsx } from "react/jsx-runtime";
+var TestButton = function (_a) {
+    var label = _a.label;
+    return _jsx("button", { children: label });
 };
-exports.default = TestButton;
+export default TestButton;

package/dist/helpers/Enums.d.ts

@@ -0,0 +1,14 @@
+export declare enum MovaAppType {
+    /**
+    * Application Garagiste
+    */
+    GARAGE = "GARAGE",
+    /**
+    * Application Utilisateur (automobiliste)
+    */
+    USER = "USER",
+    /**
+     * Application Administrateur (MovaTeam)
+     */
+    ADMIN = "ADMIN"
+}

package/dist/helpers/Enums.js

@@ -0,0 +1,15 @@
+export var MovaAppType;
+(function (MovaAppType) {
+    /**
+    * Application Garagiste
+    */
+    MovaAppType["GARAGE"] = "GARAGE";
+    /**
+    * Application Utilisateur (automobiliste)
+    */
+    MovaAppType["USER"] = "USER";
+    /**
+     * Application Administrateur (MovaTeam)
+     */
+    MovaAppType["ADMIN"] = "ADMIN";
+})(MovaAppType || (MovaAppType = {}));

package/dist/helpers/Tools.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/helpers/Tools.js

@@ -0,0 +1 @@
+export {};

package/dist/helpers/Types.d.ts

@@ -0,0 +1,9 @@
+export type MovaLoginForm = {
+    email: MovaFormField;
+    password: MovaFormField;
+};
+export type MovaFormField = {
+    value?: any;
+    error?: string;
+    isValid?: boolean;
+};

package/dist/helpers/Types.js

@@ -0,0 +1 @@
+export {};

package/dist/helpers/Validator.d.ts

@@ -0,0 +1,3 @@
+export declare function validatePhoneNumber(phoneNumber: string): boolean;
+export declare function validateText(text: string): boolean;
+export declare function validateEmail(email: string): boolean;

package/dist/helpers/Validator.js

@@ -0,0 +1,47 @@
+/**
+ * Un email valide
+ */
+var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+/**
+ * Un mot de passe qui contient au moins une majuscule, une minuscule, un chiffre
+ * et un caractère spécial. La longueur du mot de passe doit être d'au moins 8 caractères.
+ */
+var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+/**
+ * Un numéro de téléphone (10 chiffres)
+ */
+var phoneNumberRegex = /^\d{0,10}$/;
+/**
+ * Un code postal (5 chiffres)
+ */
+var postalCodeRegex = /^\d{5}$/;
+/**
+ * Une URL valide
+ */
+var urlRegex = /^(ftp|http|https):\/\/[^ "]+$/;
+/**
+ * Un nom pouvant contenir des lettres, chiffres d'une taille comprise entre 3 et 20 caractères
+ */
+var userNameRegex = /^[a-z0-9_-]{3,20}$/;
+/**
+ * Un texte pouvant contenir des lettres, chiffres et quelques caractères spéciaux
+ */
+var textRegex = /^[a-zA-Z0-9\s.,!?'"()+=-_-éèçà]+$/;
+export function validatePhoneNumber(phoneNumber) {
+    if (phoneNumber === null || phoneNumber === undefined) {
+        return false;
+    }
+    return phoneNumberRegex.test(phoneNumber);
+}
+export function validateText(text) {
+    if (text === null || text === undefined) {
+        return false;
+    }
+    return textRegex.test(text);
+}
+export function validateEmail(email) {
+    if (email === null || email === undefined) {
+        return false;
+    }
+    return emailRegex.test(email);
+}

package/dist/index.d.ts

@@ -1,2 +1,6 @@
 export { default as TestButton } from './TestButton';
-export { default as MovaSnackBar } from './MovaSnackbar';
+export { default as MovaSnackbar } from './MovaSnackbar';
+export { default as MovaLogin } from './MovaLogin';
+export { default as MovaCopyright } from './MovaCopyright';
+export type { MovaFormField } from './helpers/Types';
+export type { MovaLoginForm } from './helpers/Types';

package/dist/index.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MovaSnackBar = exports.TestButton = void 0;
 // src/index.ts
-var TestButton_1 = require("./TestButton");
-Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });
-var MovaSnackbar_1 = require("./MovaSnackbar");
-Object.defineProperty(exports, "MovaSnackBar", { enumerable: true, get: function () { return __importDefault(MovaSnackbar_1).default; } });
+export { default as TestButton } from './TestButton';
+export { default as MovaSnackbar } from './MovaSnackbar';
+export { default as MovaLogin } from './MovaLogin';
+export { default as MovaCopyright } from './MovaCopyright';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,11 +15,20 @@
   "license": "ISC",
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-scripts": "5.0.1",
+    "react-dom": "^18.2.0",
+    "@types/node": "^16.18.53",
+    "@types/react": "^18.2.22"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
   "devDependencies": {
     "@mui/material": "^5.13.5",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "typescript": "^4.9.5"

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,198 @@
+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/logo/leaf_green_large.png';
+import PinkLeafImage from './assets/images/logo/leaf_pink_large.png';
+import { Alert, 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 },
+};
+
+interface MovaLoginProps {
+    movaAppType: MovaAppType,
+    onSubmit: (form: MovaLoginForm) => void;
+}
+
+const MovaLogin: FunctionComponent<MovaLoginProps> = ({ movaAppType, onSubmit }) => {
+
+    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();
+        setLoading(true);
+
+        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);
+        }finally {
+            setLoading(false);
+        }
+    }
+
+    const validateForm = () => {
+        let newForm: MovaLoginForm = form;
+
+        // Validator email
+        if(!validateEmail(form.email.value.length)) {
+            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"
+                    />
+                    {/* <MyLoadingButton
+                        type={ButtonType.SUBMIT}
+                        label="Se connecter" /> */}
+                        
+                    <LoadingButton
+                        loading={loading}
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        sx={{ mt: 3, mb: 2 }}>
+                        <span>Se connecter</span>
+                    </LoadingButton>
+                    
+                    {message && <Alert severity="error" sx={{ mb: 2 }}>{message}</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;

package/src/helpers/Enums.ts

@@ -0,0 +1,15 @@
+
+export enum MovaAppType {
+    /**
+    * Application Garagiste
+    */
+    GARAGE = "GARAGE",
+    /**
+    * Application Utilisateur (automobiliste)
+    */
+    USER = "USER",
+    /**
+     * Application Administrateur (MovaTeam)
+     */
+    ADMIN = "ADMIN"
+}

package/src/helpers/Tools.ts

@@ -0,0 +1 @@
+export {}

package/src/helpers/Types.ts

@@ -0,0 +1,11 @@
+
+export type MovaLoginForm = {
+    email: MovaFormField,
+    password: MovaFormField
+}
+
+export type MovaFormField = {
+    value?: any,
+    error?: string,
+    isValid?: boolean
+}

package/src/helpers/Validator.ts

@@ -0,0 +1,57 @@
+/**
+ * Un email valide
+ */
+const emailRegex:RegExp  = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+
+/**
+ * Un mot de passe qui contient au moins une majuscule, une minuscule, un chiffre 
+ * et un caractère spécial. La longueur du mot de passe doit être d'au moins 8 caractères.
+ */
+const passwordRegex:RegExp  = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+/**
+ * Un numéro de téléphone (10 chiffres) 
+ */
+const phoneNumberRegex:RegExp  = /^\d{0,10}$/;
+
+/**
+ * Un code postal (5 chiffres)
+ */
+const postalCodeRegex:RegExp  = /^\d{5}$/;
+
+/**
+ * Une URL valide
+ */
+const urlRegex:RegExp =/^(ftp|http|https):\/\/[^ "]+$/;
+
+/**
+ * Un nom pouvant contenir des lettres, chiffres d'une taille comprise entre 3 et 20 caractères
+ */
+const userNameRegex:RegExp = /^[a-z0-9_-]{3,20}$/;
+
+/**
+ * Un texte pouvant contenir des lettres, chiffres et quelques caractères spéciaux
+ */
+const textRegex:RegExp = /^[a-zA-Z0-9\s.,!?'"()+=-_-éèçà]+$/;
+
+
+export function validatePhoneNumber(phoneNumber: string) : boolean {
+    if (phoneNumber === null || phoneNumber === undefined) {
+        return false;
+    }
+    return phoneNumberRegex.test(phoneNumber);
+}
+
+export function validateText(text: string) : boolean {
+    if (text === null || text === undefined) {
+        return false;
+    }
+    return textRegex.test(text);
+}
+
+export function validateEmail(email: string) : boolean {
+    if (email === null || email === undefined) {
+        return false;
+    }
+    return emailRegex.test(email);
+}

package/src/index.ts

@@ -1,3 +1,10 @@
 // src/index.ts
+
 export { default as TestButton } from './TestButton';
-export { default as MovaSnackBar } from './MovaSnackbar';
+export { default as MovaSnackbar } from './MovaSnackbar';
+export { default as MovaLogin } from './MovaLogin';
+export { default as MovaCopyright } from './MovaCopyright';
+
+// Export des types
+export type { MovaFormField } from './helpers/Types';
+export type { MovaLoginForm } from './helpers/Types';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/tsconfig.json

@@ -11,8 +11,12 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],                                       /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -25,7 +29,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "esnext",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -39,12 +43,12 @@
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
@@ -57,7 +61,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    //"noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -74,7 +78,7 @@
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
@@ -95,7 +99,7 @@
     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
@@ -106,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"]
 }