@movalib/movalib-commons 1.1.35 → 1.1.36

package/devIndex.tsx

@@ -12,7 +12,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import DatePicker from '@mui/lab/DatePicker';
 import frLocale from 'date-fns/locale/fr';
 import QRCode from './src/QRCode';
-import { Box, Button, Container, Typography } from '@mui/material';
+import { Alert, Box, Button, Container, Typography } from '@mui/material';
 import GarageService from './src/services/GarageService';
 import AuthenticationService from './src/services/AuthenticationService';
 import Logger from './src/helpers/Logger';
@@ -116,6 +116,8 @@ const App = () => {
  
 
             <MovaLogin 
+              headerText={<><Alert severity='warning' icon={<></>} style={flexCenter} sx={{width:'100%', textTransform: 'none', textAlign: 'center'}}><b>INSCRIPTION GARAGE</b>
+                <br /><Typography variant="body2" style={flexCenter} sx={{mt: 1}}>Connexion obligatoire</Typography></Alert></>}
               darkMode={false}
               movaAppType={MovaAppType.GARAGE} 
               version="0.1.3"
@@ -126,6 +128,8 @@ const App = () => {
               } } />
 
             <MovaSignUp 
+              headerText={<><Alert severity='success' icon={<></>} style={flexCenter} sx={{width:'100%', textTransform: 'none', textAlign: 'center'}}>
+                <b>NOUVEAU COMPTE UTILISATEUR</b></Alert></>}
               darkMode={false}
               movaAppType={MovaAppType.INDIVIDUAL} onSubmit={function (form: MovaLoginForm): void {
               alert('Form Submitted !');

package/dist/devIndex.js

@@ -122,11 +122,11 @@ var App = function () {
     };
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Container, __assign({ style: Tools_1.flexCenter, sx: { width: '400px', mt: 2 } }, { children: (0, jsx_runtime_1.jsx)(VehiclePlateField_1.default, { onValidVehiclePlate: function (vehiclePlate) {
                                         alert('plaque valide');
-                                    } }) })), (0, jsx_runtime_1.jsx)(MovaLogin_1.default, { darkMode: false, movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
+                                    } }) })), (0, jsx_runtime_1.jsx)(MovaLogin_1.default, { headerText: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(material_1.Alert, __assign({ severity: 'warning', icon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), style: Tools_1.flexCenter, sx: { width: '100%', textTransform: 'none', textAlign: 'center' } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "INSCRIPTION GARAGE" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "body2", style: Tools_1.flexCenter, sx: { mt: 1 } }, { children: "Connexion obligatoire" }))] })) }), darkMode: false, movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
                                     alert('Form Submitted !');
                                 }, onSubmitForgotPassword: function (email) {
                                     throw new Error('Function not implemented.');
-                                } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
+                                } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { headerText: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: 'success', icon: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), style: Tools_1.flexCenter, sx: { width: '100%', textTransform: 'none', textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "NOUVEAU COMPTE UTILISATEUR" }) })) }), darkMode: false, movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
                                     alert('Form Submitted !');
                                 } }), (0, jsx_runtime_1.jsx)(GaragePLV_1.default, { url: getQRCodeData() }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true, size: 400 }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
                             throw new Error('Function not implemented.');

package/dist/src/MovaLogin.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import { AlertColor } from "@mui/material";
 import { MovaLoginForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -19,6 +19,7 @@ interface MovaLoginProps {
     alertSeverity?: AlertColor;
     loading?: boolean;
     version?: string;
+    headerText?: ReactNode;
 }
 /**
  * Formulaire d'authentification Movalib (Garage / Utilisateur)

package/dist/src/MovaLogin.js

@@ -85,7 +85,7 @@ 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, onSubmitForgotPassword = _a.onSubmitForgotPassword, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, version = _a.version;
+    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, onSubmitForgotPassword = _a.onSubmitForgotPassword, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, version = _a.version, headerText = _a.headerText;
     var _c = (0, react_1.useState)(initialFormState), form = _c[0], setForm = _c[1];
     var _d = (0, react_1.useState)(""), message = _d[0], setMessage = _d[1];
     var theme = (0, material_1.useTheme)();
@@ -179,7 +179,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, sx: {
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '80%' } }), headerText && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "button", sx: { pt: 3, width: '100%' } }, { children: headerText })), (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, sx: {
                                     '& .MuiOutlinedInput-notchedOutline': {
                                         borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
                                     }

package/dist/src/MovaSignUp.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 import { AlertColor } from "@mui/material";
 import { MovaUserSignUpForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -17,6 +17,7 @@ interface MovaSignUpProps {
     alertMessage?: string;
     alertSeverity?: AlertColor;
     loading?: boolean;
+    headerText?: ReactNode;
 }
 /**
  * Formulaire de création d'un compte Movalib (Garage / Utilisateur)

package/dist/src/MovaSignUp.js

@@ -70,6 +70,7 @@ var react_router_dom_1 = require("react-router-dom");
 var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
+var Info_1 = __importDefault(require("@mui/icons-material/Info"));
 var isValid_1 = __importDefault(require("date-fns/isValid"));
 // Permet de centrer le contenu de l'application
 var styles = {
@@ -93,12 +94,14 @@ var initialUserFormState = {
  */
 var MovaLogin = function (_a) {
     var _b, _c, _d;
-    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity;
+    var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, headerText = _a.headerText;
     var _f = (0, react_1.useState)(initialUserFormState), userForm = _f[0], setUserForm = _f[1];
     var history = (0, react_router_dom_1.useHistory)();
     var _g = (0, react_1.useState)(""), message = _g[0], setMessage = _g[1];
     var theme = (0, material_1.useTheme)();
     var _h = (0, react_1.useState)(false), showPassword = _h[0], setShowPassword = _h[1];
+    var _j = (0, react_1.useState)(false), openEmailInfo = _j[0], setOpenEmailInfo = _j[1];
+    var _k = (0, react_1.useState)(false), openPhoneNumberInfo = _k[0], setOpenPhoneNumberInfo = _k[1];
     var handleDateChange = function (name, date) {
         var _a;
         if (name && date) {
@@ -218,7 +221,7 @@ var MovaLogin = function (_a) {
                             display: 'flex',
                             flexDirection: 'column',
                             alignItems: 'center',
-                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '60%' } }), (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, sx: {
+                        } }, { children: [(0, jsx_runtime_1.jsx)("img", { src: getMovaLogo(), style: { width: '60%' } }), headerText && (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ variant: "button", sx: { pt: 3, width: '100%' } }, { children: headerText }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ component: "form", onSubmit: handleSubmit, noValidate: true, sx: { mt: 2 } }, { 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, sx: {
                                     '& .MuiOutlinedInput-notchedOutline': {
                                         borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
                                     }
@@ -226,11 +229,15 @@ var MovaLogin = function (_a) {
                                     '& .MuiOutlinedInput-notchedOutline': {
                                         borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
                                     }
-                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { type: "tel", margin: "normal", required: true, fullWidth: true, id: "phoneNumber", label: "N\u00B0 de t\u00E9l\u00E9phone", name: "phoneNumber", autoComplete: "tel", onChange: function (e) { return handleInputChange(e); }, value: (_b = userForm.phoneNumber) === null || _b === void 0 ? void 0 : _b.value, error: Boolean((_c = userForm.phoneNumber) === null || _c === void 0 ? void 0 : _c.error), helperText: (_d = userForm.phoneNumber) === null || _d === void 0 ? void 0 : _d.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, sx: {
+                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { type: "tel", margin: "normal", required: true, fullWidth: true, id: "phoneNumber", label: "N\u00B0 de t\u00E9l\u00E9phone", name: "phoneNumber", autoComplete: "tel", onChange: function (e) { return handleInputChange(e); }, value: (_b = userForm.phoneNumber) === null || _b === void 0 ? void 0 : _b.value, error: Boolean((_c = userForm.phoneNumber) === null || _c === void 0 ? void 0 : _c.error), helperText: (_d = userForm.phoneNumber) === null || _d === void 0 ? void 0 : _d.error, InputProps: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function () { return setOpenPhoneNumberInfo(!openPhoneNumberInfo); } }, { children: (0, jsx_runtime_1.jsx)(Info_1.default, {}) })) }))),
+                                } }), openPhoneNumberInfo && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "info", variant: 'standard' }, { children: "Indispensable pour votre garagiste, il doit pouvoir vous appeler en cas d'impr\u00E9vu avec votre v\u00E9hicule." })), (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, sx: {
                                     '& .MuiOutlinedInput-notchedOutline': {
                                         borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
                                     }
-                                } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : '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 : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
+                                }, InputProps: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: function () { return setOpenEmailInfo(!openEmailInfo); } }, { children: (0, jsx_runtime_1.jsx)(Info_1.default, {}) })) }))),
+                                } }), openEmailInfo && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "info", variant: 'standard' }, { children: "Et si on arr\u00EAtait le papier ? En plus de pouvoir vous notifier, l'email vous permet de recevoir tous vos documents au format num\u00E9rique \uD83D\uDE0A\uD83C\uDF3F" })), (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "password", label: "Mot de passe", type: showPassword ? 'text' : '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 : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
                                     endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "end", onClick: handleClickShowPassword }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
                                 }, sx: {
                                     '& .MuiOutlinedInput-notchedOutline': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.1.35",
+  "version": "1.1.36",
   "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

@@ -1,4 +1,4 @@
-import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
+import { CSSProperties, FormEvent, FunctionComponent, ReactNode, useState } from "react";
 import { LoadingButton } from '@mui/lab';
 import LogoLarge from './assets/images/logo/logo_large_border.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large_border.png';
@@ -12,7 +12,7 @@ import MovaCopyright from "./MovaCopyright";
 import { MovaLoginForm, MovaFormField } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
-import { validateField } from "./helpers/Tools";
+import { flexCenter, validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
 import InputAdornment from '@mui/material/InputAdornment';
 import Visibility from '@mui/icons-material/Visibility';
@@ -48,6 +48,7 @@ interface MovaLoginProps {
     alertSeverity?: AlertColor,
     loading?: boolean,
     version?: string
+    headerText?: ReactNode
 }
 
 /**
@@ -55,7 +56,8 @@ 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, onSubmitForgotPassword, darkMode = false, alertMessage, alertSeverity, version }) => {
+const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, onSubmit, onSubmitForgotPassword, darkMode = false, alertMessage, 
+    alertSeverity, version, headerText }) => {
 
     const [form, setForm] = useState<MovaLoginForm>(initialFormState);
     const [message, setMessage] = useState<string>("");
@@ -213,6 +215,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                     }}
                     >
                     <img src={getMovaLogo()} style={{width:'80%'}}/>
+                    {headerText && <Typography variant="button" sx={{ pt: 3, width:'100%' }}>{headerText}</Typography>}
                     <br />
                 </Box>
 

package/src/MovaSignUp.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ChangeEvent, FormEvent, FunctionComponent, useState } from "react";
+import { CSSProperties, ChangeEvent, FormEvent, FunctionComponent, ReactNode, useState } from "react";
 import { LoadingButton } from '@mui/lab';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import LogoLarge from './assets/images/logo/logo_large_border.png';
@@ -19,6 +19,7 @@ import { useHistory } from "react-router-dom";
 import InputAdornment from '@mui/material/InputAdornment';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import InfoIcon from '@mui/icons-material/Info';
 import isValid from 'date-fns/isValid';
 
 // Permet de centrer le contenu de l'application
@@ -53,20 +54,23 @@ interface MovaSignUpProps {
     darkMode?: boolean,
     alertMessage?: string,
     alertSeverity?: AlertColor,
-    loading?: boolean
+    loading?: boolean,
+    headerText?: ReactNode
 }
 
 /**
  * Formulaire de création d'un compte Movalib (Garage / Utilisateur)
  * ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
  */
-const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, darkMode = false, alertMessage, alertSeverity }) => {
+const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, darkMode = false, alertMessage, alertSeverity, headerText }) => {
 
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
     const history = useHistory();
     const [message, setMessage] = useState<string>("");
     const theme = useTheme();
     const [showPassword, setShowPassword] = useState(false);
+    const [openEmailInfo, setOpenEmailInfo] = useState(false);
+    const [openPhoneNumberInfo, setOpenPhoneNumberInfo] = useState(false);
 
     const handleDateChange = (name: string, date: Date | null) => {
  
@@ -217,10 +221,10 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                     }}
                     >
                     <img src={getMovaLogo()} style={{width:'60%'}}/>
-                    <Typography variant="button" sx={{ pt: 2 }}>Nouveau compte utilisateur</Typography>
+                    {headerText && <Typography variant="button" sx={{ pt: 3, width:'100%' }}>{headerText}</Typography>}
                 </Box>
 
-                <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+                <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 2 }}>
                     <TextField
                         margin="normal"
                         required
@@ -271,7 +275,19 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         value={userForm.phoneNumber?.value}
                         error={Boolean(userForm.phoneNumber?.error)}
                         helperText={userForm.phoneNumber?.error}
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={() => setOpenPhoneNumberInfo(!openPhoneNumberInfo)}
+                                  ><InfoIcon /> 
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}   
                       />
+                      {openPhoneNumberInfo && <Alert severity="info" variant='standard'>Indispensable pour votre garagiste, il doit pouvoir vous appeler en cas d'imprévu avec votre véhicule.</Alert>}
                     <TextField
                         margin="normal"
                         required
@@ -289,7 +305,18 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                                 borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
                             }
                         }}  
-                    />
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={() => setOpenEmailInfo(!openEmailInfo)}
+                                  ><InfoIcon /> 
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}   
+                    />{openEmailInfo && <Alert severity="info" variant='standard'>Et si on arrêtait le papier ? En plus de pouvoir vous notifier, l'email vous permet de recevoir tous vos documents au format numérique 😊🌿</Alert>}
                     <TextField
                         margin="normal"
                         required