@movalib/movalib-commons 1.0.49 → 1.0.51

package/devIndex.tsx

@@ -14,6 +14,8 @@ const App = () => {
       <ThemeProvider theme={theme}>
         <MovaLogin movaAppType={MovaAppType.GARAGE} onSubmit={function (form: MovaLoginForm): void {
           alert('Form Submitted !');
+        } } onSubmitForgotPassword={function (email: string): void {
+          throw new Error('Function not implemented.');
         } } />
 
         <MovaSignUp movaAppType={MovaAppType.USER} onSubmit={function (form: MovaLoginForm): void {

package/dist/devIndex.js

@@ -26,6 +26,8 @@ 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 !');
+                    }, onSubmitForgotPassword: function (email) {
+                        throw new Error('Function not implemented.');
                     } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { movaAppType: Enums_1.MovaAppType.USER, onSubmit: function (form) {
                         alert('Form Submitted !');
                     } })] })) }));

package/dist/src/MovaLogin.d.ts

@@ -13,6 +13,7 @@ import { MovaAppType } from "./helpers/Enums";
 interface MovaLoginProps {
     movaAppType: MovaAppType;
     onSubmit: (form: MovaLoginForm) => void;
+    onSubmitForgotPassword: (email: string) => void;
     alertMessage?: string;
     alertSeverity?: AlertColor;
     loading?: boolean;

package/dist/src/MovaLogin.js

@@ -80,10 +80,11 @@ var initialFormState = {
  * ATTENTION : la page attendue pour le bouton "Créer mon compte" doit pointer vers "/signup"
  */
 var MovaLogin = function (_a) {
-    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity;
+    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, onSubmitForgotPassword = _a.onSubmitForgotPassword, 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];
     var history = (0, react_router_dom_1.useHistory)();
+    var _d = (0, react_1.useState)(false), openForgotPassword = _d[0], setOpenForgotPassword = _d[1];
     var handleInputChange = function (e) {
         var _a;
         var fieldName = e.target.name;
@@ -130,6 +131,25 @@ var MovaLogin = function (_a) {
             history.push('/signup');
         }
     };
+    var handleOnClickForgotPassword = function (e) {
+        e.preventDefault();
+        setOpenForgotPassword(true);
+    };
+    var handleSubmitForgotPassword = function (e) {
+        e.preventDefault();
+        setOpenForgotPassword(false);
+        // On appel de callback de soumission de la demande de réinitialisation du mot de passe
+        if (onSubmitForgotPassword) {
+            onSubmitForgotPassword(form.email.value);
+        }
+    };
+    /**
+     * Boite de diaogue pour la perte du mot de passe
+     */
+    var dialogForgotPassword = function () {
+        var defaultMessage = "Êtes-vous sûr de vouloir continuer ?";
+        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, __assign({ open: openForgotPassword, onClose: function () { return setOpenForgotPassword(false); }, "aria-labelledby": "forgot-password-dialog-title", "aria-describedby": "forgot-password-dialog-description" }, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "forgot-password-title" }, { children: "R\u00E9cup\u00E9ration du mot de passe" })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(material_1.DialogContentText, __assign({ id: "forgot-password-dialog-description", sx: { mb: 2 } }, { children: "Saisissez votre email pour proc\u00E9der \u00E0 la r\u00E9initialisation de votre mot de passe." })), (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, disabled: !(form.email.value && (0, Validator_1.validateEmail)(form.email.value)) })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function (e) { return handleSubmitForgotPassword(e); }, color: "inherit", autoFocus: true, sx: { ml: 1 } }, { children: "Envoyer ma demande" })) })] })));
+    };
     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',
@@ -142,7 +162,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: "/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({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickSignUp(e); } }, { children: "Créer 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',
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", autoFocus: true, onChange: function (e) { return handleInputChange(e); }, value: form.email.value, error: !form.email.isValid, helperText: form.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: "password", id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: form.password.value, error: !form.password.isValid, helperText: form.password.error }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: "remember", color: "primary" }), label: "Se souvenir de moi" }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Se connecter" }) })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickForgotPassword(e); } }, { children: "Mot de passe oubli\u00E9 ?" })) })), movaAppType === Enums_1.MovaAppType.USER && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickSignUp(e); } }, { children: "Cr\u00E9er mon compte" })) }))] }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } }), openForgotPassword && dialogForgotPassword()] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
                     float: 'right',
                     width: '250px',
                     height: '400px',

package/dist/src/MovaSignUp.js

@@ -63,6 +63,7 @@ var Enums_1 = require("./helpers/Enums");
 var Validator_1 = require("./helpers/Validator");
 var GenderSelector_1 = __importDefault(require("./GenderSelector"));
 var Tools_1 = require("./helpers/Tools");
+var react_router_dom_1 = require("react-router-dom");
 // Permet de centrer le contenu de l'application
 var styles = {
     display: 'flex',
@@ -85,6 +86,7 @@ var initialUserFormState = {
 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 history = (0, react_router_dom_1.useHistory)();
     var _c = (0, react_1.useState)(""), message = _c[0], setMessage = _c[1];
     var handleInputChange = function (e) {
         var _a;
@@ -146,6 +148,13 @@ var MovaLogin = function (_a) {
             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;
     };
+    var handleOnClickLogin = function (e) {
+        e.preventDefault();
+        if (history) {
+            // On redirige l'utilisateur vers la page par défaut (accueil)
+            history.push('/login');
+        }
+    };
     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',
@@ -160,7 +169,7 @@ var MovaLogin = function (_a) {
                             alignItems: 'center',
                         } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '50%' } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "button", sx: { pt: 2 } }, { children: "Nouveau compte utilisateur" }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 1 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, autoFocus: true, fullWidth: true, id: "firstname", label: "Pr\u00E9nom", name: "firstname", autoComplete: "given-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.firstname.value, error: Boolean(userForm.firstname.error), helperText: userForm.firstname.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "lastname", label: "Nom", name: "lastname", autoComplete: "family-name", onChange: function (e) { return handleInputChange(e); }, value: userForm.lastname.value, error: Boolean(userForm.lastname.error), helperText: userForm.lastname.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, id: "email", label: "Adresse email", name: "email", autoComplete: "email", onChange: function (e) { return handleInputChange(e); }, value: userForm.email.value, error: !userForm.email.isValid, helperText: userForm.email.error }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: "password", id: "password", autoComplete: "current-password", onChange: function (e) { return handleInputChange(e); }, value: userForm.password.value, error: !userForm.password.isValid, helperText: Boolean(userForm.password.error) ? userForm.password.error : "8 caractères minimum" }), (0, jsx_runtime_1.jsx)(GenderSelector_1.default, { handleSelectChange: handleSelectChange, form: userForm, required: true, sx: { width: '40%', mr: 2 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, name: "birthDate", label: "Date de naissance", type: "date", InputLabelProps: {
                                     shrink: true,
-                                }, autoComplete: "bday", value: userForm.birthDate.value, error: !userForm.birthDate.isValid, helperText: userForm.birthDate.error, onChange: function (e) { return handleInputChange(e); }, sx: { width: '50%', float: 'right' } }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !userForm.acceptsTerms.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: "acceptsTerms", color: "primary", checked: userForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte les", ' ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/terms-and-conditions", target: "_blank" }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" }))] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: userForm.acceptsTerms.error })] })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Cr\u00E9er mon compte" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/login", variant: "body2", color: "text.secondary" }, { children: "Se connecter" })) })) }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
+                                }, autoComplete: "bday", value: userForm.birthDate.value, error: !userForm.birthDate.isValid, helperText: userForm.birthDate.error, onChange: function (e) { return handleInputChange(e); }, sx: { width: '50%', float: 'right' } }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !userForm.acceptsTerms.isValid }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { name: "acceptsTerms", color: "primary", checked: userForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte les", ' ', (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ href: "/terms-and-conditions", target: "_blank" }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" }))] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: userForm.acceptsTerms.error })] })), alertMessage && alertSeverity && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: alertSeverity, sx: { mb: 2 } }, { children: alertMessage })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ loading: loading, type: "submit", fullWidth: true, variant: "contained", sx: { mt: 3, mb: 2 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Cr\u00E9er mon compte" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ container: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ variant: "body2", color: "text.secondary", onClick: function (e) { return handleOnClickLogin(e); } }, { children: "Se connecter" })) })) }))] })), (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
                     float: 'right',
                     width: '250px',
                     height: '400px',

package/dist/src/QRCode.js

@@ -16,9 +16,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var leaf_yellow_small_png_1 = __importDefault(require("../assets/images/leaf_yellow_small.png"));
-var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
+var leaf_yellow_small_png_1 = __importDefault(require("./assets/images/leaf_yellow_small.png"));
 var material_1 = require("@mui/material");
+var qr_code_styling_1 = __importDefault(require("qr-code-styling"));
 var styles = {
     inputWrapper: {
         margin: "20px 0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/MovaLogin.tsx

@@ -4,7 +4,8 @@ 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 { Alert, AlertColor, Box, Button, Checkbox, Container, CssBaseline, Dialog, DialogActions, DialogContent, DialogContentText, 
+    DialogTitle, FormControlLabel, Grid, Link, TextField } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaLoginForm, MovaFormField } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -36,6 +37,7 @@ const initialFormState = {
 interface MovaLoginProps {
     movaAppType: MovaAppType,
     onSubmit: (form: MovaLoginForm) => void,
+    onSubmitForgotPassword: (email: string) => void,
     alertMessage?: string,
     alertSeverity?: AlertColor,
     loading?: boolean
@@ -46,11 +48,12 @@ interface MovaLoginProps {
  * ATTENTION : la page attendue pour le bouton "Mot de passe oublié" doit pointer vers "/forgot-password"
  * ATTENTION : la page attendue pour le bouton "Créer mon compte" doit pointer vers "/signup"
  */
-const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, alertMessage, alertSeverity }) => {
+const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, onSubmitForgotPassword, alertMessage, alertSeverity }) => {
 
     const [form, setForm] = useState<MovaLoginForm>(initialFormState);
     const [message, setMessage] = useState<string>("");
     const history = useHistory();
+    const [openForgotPassword, setOpenForgotPassword] = useState(false);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
         const fieldName: string = e.target.name;
@@ -108,6 +111,64 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
         }
     }
 
+    const handleOnClickForgotPassword = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        e.preventDefault();
+        setOpenForgotPassword(true);
+    }
+
+    const handleSubmitForgotPassword = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+
+        setOpenForgotPassword(false);
+        // On appel de callback de soumission de la demande de réinitialisation du mot de passe
+        if(onSubmitForgotPassword){
+            onSubmitForgotPassword(form.email.value);
+        }
+    }
+
+
+    /**
+     * Boite de diaogue pour la perte du mot de passe
+     */
+    const dialogForgotPassword = () => {
+        const defaultMessage = "Êtes-vous sûr de vouloir continuer ?";
+
+        return (
+          <Dialog
+            open={openForgotPassword}
+            onClose={() => setOpenForgotPassword(false)}
+            aria-labelledby="forgot-password-dialog-title"
+            aria-describedby="forgot-password-dialog-description"
+          >
+            <DialogTitle id="forgot-password-title">Récupération du mot de passe</DialogTitle>
+            <DialogContent>
+              <DialogContentText id="forgot-password-dialog-description" sx={{ mb: 2 }}>
+                Saisissez votre email pour procéder à la réinitialisation de votre mot de passe.
+              </DialogContentText>
+              <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}
+                    disabled={!(form.email.value && validateEmail(form.email.value))}
+                />
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={(e) => handleSubmitForgotPassword(e)} color="inherit" autoFocus sx={{ ml: 1}}>
+                Envoyer ma demande
+              </Button>
+            </DialogActions>
+          </Dialog>
+        );
+    }
 
     return (
         <div style={styles}>
@@ -180,18 +241,23 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
 
                     <Grid container>
                         <Grid item xs>
-                            <Link href="/forgot-password" variant="body2" color="text.secondary">
+                            <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickForgotPassword(e)}>
                                 Mot de passe oublié ?
                             </Link>
                         </Grid>
                         {movaAppType === MovaAppType.USER && <Grid item>
                             <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickSignUp(e)}>
-                            {"Créer mon compte"}
+                            Créer mon compte
                             </Link>
                         </Grid>}
                     </Grid>
                 </Box>
+
                 <MovaCopyright sx={{ mt: 8, mb: 4 }} />
+
+                {openForgotPassword && dialogForgotPassword()}
+
+
             </Container>
 
             <img src={PinkLeafImage} style={{position: 'fixed', 

package/src/MovaSignUp.tsx

@@ -11,6 +11,7 @@ import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import GenderSelector from "./GenderSelector";
 import { validateField } from "./helpers/Tools";
+import { useHistory } from "react-router-dom";
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -52,7 +53,7 @@ interface MovaSignUpProps {
 const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, alertMessage, alertSeverity }) => {
 
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
-
+    const history = useHistory();
     const [message, setMessage] = useState<string>("");
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
@@ -129,6 +130,13 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
+    const handleOnClickLogin = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        e.preventDefault();
+        if(history){
+            // On redirige l'utilisateur vers la page par défaut (accueil)
+            history.push('/login');
+        }
+    }
 
     return (
         <div style={styles}>
@@ -265,7 +273,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
 
                     <Grid container>
                         <Grid item xs>
-                            <Link href="/login" variant="body2" color="text.secondary">
+                            <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickLogin(e)}>
                                 Se connecter
                             </Link>
                         </Grid>

package/src/QRCode.tsx

@@ -1,5 +1,6 @@
 import { useState, type FC, useRef, useEffect, ChangeEvent } from 'react';
-import QRCodeImage from "../assets/images/leaf_yellow_small.png";
+import QRCodeImage from "./assets/images/leaf_yellow_small.png";
+import { Box, Button, darken, useTheme } from '@mui/material';
 import QRCodeStyling, {
   DrawType,
   TypeNumber,
@@ -11,7 +12,6 @@ import QRCodeStyling, {
   Extension,
   Options
 } from "qr-code-styling";
-import { Box, Button, darken, useTheme } from '@mui/material';
 
 
 interface QRCodeProps {