@movalib/movalib-commons 1.1.62 → 1.1.64

package/devIndex.tsx

@@ -195,9 +195,11 @@ const App = () => {
 
 
           {openAccountValidation && <AccountValidation smsValidation={true} movaAppType={MovaAppType.GARAGE}
-            onSubmit={function (success: boolean, message: string): void {
-              throw new Error('Function not implemented.');
-            } } /> }
+          onSubmit={function (success: boolean, message: string): void {
+            throw new Error('Function not implemented.');
+          } } onResendSecurityCode={function (success: boolean, message: string): void {
+            throw new Error('Function not implemented.');
+          } } /> }
 
         </ThemeProvider>
       </LocalizationProvider>

package/dist/devIndex.js

@@ -157,6 +157,8 @@ var App = function () {
                                             throw new Error('Function not implemented.');
                                         } })] }))] })), (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, { smsValidation: true, movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
                             throw new Error('Function not implemented.');
+                        }, onResendSecurityCode: function (success, message) {
+                            throw new Error('Function not implemented.');
                         } })] })) })) }));
 };
 var root = (0, client_1.createRoot)(document.getElementById('root'));

package/dist/src/AccountValidation.d.ts

@@ -4,6 +4,7 @@ interface AccountValidationProps {
     movaAppType: MovaAppType;
     smsValidation: boolean;
     onSubmit: (success: boolean, message: string) => void;
+    onResendSecurityCode: (success: boolean, message: string) => void;
 }
 declare const AccountValidation: FunctionComponent<AccountValidationProps>;
 export default AccountValidation;

package/dist/src/AccountValidation.js

@@ -29,28 +29,30 @@ var Tools_1 = require("./helpers/Tools");
 var MovaDialog_1 = __importDefault(require("./MovaDialog"));
 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 ConfirmationDialog_1 = __importDefault(require("./ConfirmationDialog"));
+var Validator_1 = require("./helpers/Validator");
 var initialFormState = {
     password: { value: '', isValid: true },
     confirmation: { value: '', isValid: true },
     securityCode: { value: '', isValid: true },
+    phoneNumber: { value: '', isValid: true },
 };
 var AccountValidation = function (_a) {
     var _b, _c, _d, _e;
-    var movaAppType = _a.movaAppType, smsValidation = _a.smsValidation, onSubmit = _a.onSubmit;
+    var movaAppType = _a.movaAppType, smsValidation = _a.smsValidation, onSubmit = _a.onSubmit, onResendSecurityCode = _a.onResendSecurityCode;
     var _f = (0, react_1.useState)(true), loading = _f[0], setLoading = _f[1];
-    var _g = (0, react_1.useState)(initialFormState), passwordForm = _g[0], setPasswordForm = _g[1];
+    var _g = (0, react_1.useState)(initialFormState), validationForm = _g[0], setValidationForm = _g[1];
     var location = (0, react_router_dom_1.useLocation)();
     var history = (0, react_router_dom_1.useHistory)();
     var theme = (0, material_1.useTheme)();
     var _h = (0, react_1.useState)(false), emptyPwd = _h[0], setEmptyPwd = _h[1];
     var _j = (0, react_1.useState)(false), showPassword = _j[0], setShowPassword = _j[1];
+    var _k = (0, react_1.useState)(false), openPhoneNumberInput = _k[0], setOpenPhoneNumberInput = _k[1];
     var isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
     (0, react_1.useEffect)(function () {
         var params = new URLSearchParams(location.search);
         var token = params.get('token');
         // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
-        Logger_1.default.info(params);
-        Logger_1.default.info(Boolean(params.get('emptyPwd')));
         var localEmptyPwd = Boolean(params.get('emptyPwd'));
         setEmptyPwd(localEmptyPwd);
         if (token) {
@@ -92,24 +94,28 @@ var AccountValidation = function (_a) {
             var fieldName = e.target.name;
             var fieldValue = e.target.value;
             var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
-            setPasswordForm(__assign(__assign({}, passwordForm), newField));
+            if (fieldName == "phoneNumber") {
+                if (!(0, Validator_1.validatePhoneNumber)(fieldValue))
+                    return;
+            }
+            setValidationForm(__assign(__assign({}, validationForm), newField));
         }
     };
     var validateForm = function () {
-        var newForm = __assign({}, passwordForm);
+        var newForm = __assign({}, validationForm);
         // Validator pour les champs obligatoires
-        newForm.password = (0, Tools_1.validateField)(passwordForm.password, function (value) { return !!value; }, 'Champ obligatoire');
-        newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.password = (0, Tools_1.validateField)(validationForm.password, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.confirmation = (0, Tools_1.validateField)(validationForm.confirmation, function (value) { return !!value; }, 'Champ obligatoire');
         if (smsValidation)
-            newForm.securityCode = (0, Tools_1.validateField)(passwordForm.securityCode, function (value) { return !!value; }, 'Champ obligatoire');
+            newForm.securityCode = (0, Tools_1.validateField)(validationForm.securityCode, function (value) { return !!value; }, 'Champ obligatoire');
         // Validator pour le mot de passe
-        newForm.password = (0, Tools_1.validateField)(passwordForm.password, function (value) { return value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value); }, 'Votre mot de passe doit faire au moins 10 caractères et contenir une majuscule et une minuscule minimum');
+        newForm.password = (0, Tools_1.validateField)(validationForm.password, function (value) { return value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value); }, 'Votre mot de passe doit faire au moins 10 caractères et contenir une majuscule et une minuscule minimum');
         // Second validator pour le mot de passe (confirmation)
-        newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return value === passwordForm.password.value; }, "Les mots de passe doivent être identiques");
+        newForm.confirmation = (0, Tools_1.validateField)(validationForm.confirmation, function (value) { return value === validationForm.password.value; }, "Les mots de passe doivent être identiques");
         // Validator pour le code de sécurité
         if (smsValidation)
-            newForm.securityCode = (0, Tools_1.validateField)(passwordForm.securityCode, function (value) { return value.length === 6; }, "Le code doit contenir 6 chiffres");
-        setPasswordForm(newForm);
+            newForm.securityCode = (0, Tools_1.validateField)(validationForm.securityCode, function (value) { return value.length === 6; }, "Le code doit contenir 6 chiffres");
+        setValidationForm(newForm);
         return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true);
     };
     var handleValidateAccount = function () {
@@ -118,8 +124,8 @@ var AccountValidation = function (_a) {
             var params = new URLSearchParams(location.search);
             var req = {
                 token: !smsValidation ? params.get('token') : null,
-                securityCode: smsValidation ? passwordForm.securityCode.value : null,
-                password: passwordForm.password.value,
+                securityCode: smsValidation ? validationForm.securityCode.value : null,
+                password: validationForm.password.value,
                 demoGarage: Boolean(params.get('demoGarage'))
             };
             activateAccount(req);
@@ -137,6 +143,54 @@ var AccountValidation = function (_a) {
             movaAppType === Enums_1.MovaAppType.INDIVIDUAL ? logo_large_png_1.default :
                 movaAppType === Enums_1.MovaAppType.ADMIN ? logo_large_png_1.default : logo_large_png_1.default;
     };
+    var handleOpenResendCode = function () {
+        setOpenPhoneNumberInput(true);
+    };
+    var controlPhoneNumber = function () {
+        var _a, _b, _c, _d, _e;
+        var newForm = validationForm;
+        var newField;
+        // Validator 'phoneNumber'
+        if ((_a = newForm.phoneNumber) === null || _a === void 0 ? void 0 : _a.value) {
+            if (((_b = newForm.phoneNumber) === null || _b === void 0 ? void 0 : _b.value.length) < 10) {
+                newField = { value: (_c = validationForm.phoneNumber) === null || _c === void 0 ? void 0 : _c.value, error: "Le n° de téléphone est invalide." };
+            }
+            else {
+                newField = { value: (_d = validationForm.phoneNumber) === null || _d === void 0 ? void 0 : _d.value, error: '' };
+            }
+            newForm = __assign(__assign({}, newForm), { phoneNumber: newField });
+        }
+        setValidationForm(newForm);
+        return !Boolean((_e = newForm.phoneNumber) === null || _e === void 0 ? void 0 : _e.error);
+    };
+    var resendCode = function () {
+        var _a;
+        if (controlPhoneNumber()) {
+            var req = {
+                phoneNumber: (_a = validationForm.phoneNumber) === null || _a === void 0 ? void 0 : _a.value
+            };
+            UserService_1.default.resendSecurityCode(req)
+                .then(function (response) {
+                var _a, _b;
+                Logger_1.default.info(response);
+                if (response.success) {
+                    if (onResendSecurityCode) {
+                        onResendSecurityCode(response.success, (_a = response.data) !== null && _a !== void 0 ? _a : '');
+                    }
+                }
+                else {
+                    if (onResendSecurityCode) {
+                        onResendSecurityCode(response.success, (_b = response.error) !== null && _b !== void 0 ? _b : '');
+                    }
+                }
+            }).catch(function (error) {
+                Logger_1.default.error(error);
+                if (onSubmit) {
+                    onSubmit(false, error);
+                }
+            });
+        }
+    };
     return ((0, jsx_runtime_1.jsxs)("div", { children: [(emptyPwd || smsValidation) &&
                 (0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd || smsValidation, closable: false, onClose: function () {
                         throw new Error('Function not implemented.');
@@ -144,18 +198,18 @@ var AccountValidation = function (_a) {
                                         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.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { mt: 2, mb: 2 } }, { children: movaAppType === Enums_1.MovaAppType.INDIVIDUAL ?
+                                    } }, { 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.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { mt: 2, mb: 3 } }, { children: movaAppType === Enums_1.MovaAppType.INDIVIDUAL ?
                                         "Pour commencer, définis ton mot de passe et active ton compte 😉"
                                         :
-                                            "Pour commencer, définissez votre mot de passe et activez votre compte 😉" })) })), smsValidation && (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Code re\u00E7u par SMS", required: true, fullWidth: true, name: "securityCode", variant: "outlined", value: (_b = passwordForm.securityCode) === null || _b === void 0 ? void 0 : _b.value, error: !((_c = passwordForm.securityCode) === null || _c === void 0 ? void 0 : _c.isValid), helperText: Boolean((_d = passwordForm.securityCode) === null || _d === void 0 ? void 0 : _d.error) ? (_e = passwordForm.securityCode) === null || _e === void 0 ? void 0 : _e.error : "Code à 6 chiffres", onChange: function (e) { return handleInputChange(e); }, inputProps: {
-                                        maxLength: 6,
-                                        inputMode: 'numeric',
-                                        pattern: '[0-9]*' // Permet seulement la saisie de chiffres
-                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (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: passwordForm.password.value, error: !passwordForm.password.isValid, helperText: Boolean(passwordForm.password.error) ? passwordForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule", InputProps: {
+                                            "Pour commencer, définissez votre mot de passe et activez votre compte 😉" })) })), smsValidation && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { label: "Code re\u00E7u par SMS", required: true, fullWidth: true, name: "securityCode", variant: "outlined", value: (_b = validationForm.securityCode) === null || _b === void 0 ? void 0 : _b.value, error: !((_c = validationForm.securityCode) === null || _c === void 0 ? void 0 : _c.isValid), helperText: Boolean((_d = validationForm.securityCode) === null || _d === void 0 ? void 0 : _d.error) ? (_e = validationForm.securityCode) === null || _e === void 0 ? void 0 : _e.error : null, onChange: function (e) { return handleInputChange(e); }, inputProps: {
+                                                maxLength: 6,
+                                                inputMode: 'numeric',
+                                                pattern: '[0-9]*' // Permet seulement la saisie de chiffres
+                                            } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Link, __assign({ component: "button", variant: "body2", onClick: handleOpenResendCode, sx: { cursor: 'pointer', textAlign: 'center', width: '100%' } }, { children: "Renvoyer le code" })) }))] }), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (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: validationForm.password.value, error: !validationForm.password.isValid, helperText: Boolean(validationForm.password.error) ? validationForm.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: function (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
-                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmation", label: "Confirmation", type: showPassword ? 'text' : 'password', id: "confirmation", onChange: function (e) { return handleInputChange(e); }, value: passwordForm.confirmation.value, error: !passwordForm.confirmation.isValid, helperText: Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : "", InputProps: {
+                                    } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", required: true, fullWidth: true, name: "confirmation", label: "Confirmation mot de passe", type: showPassword ? 'text' : 'password', id: "confirmation", onChange: function (e) { return handleInputChange(e); }, value: validationForm.confirmation.value, error: !validationForm.confirmation.isValid, helperText: Boolean(validationForm.confirmation.error) ? validationForm.confirmation.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 (e) { return setShowPassword(function (prev) { return !prev; }); } }, { children: showPassword ? (0, jsx_runtime_1.jsx)(VisibilityOff_1.default, {}) : (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })) }))),
                                     } }) }))] })) })), loading &&
-                (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) }))] }));
+                (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, {}) })), openPhoneNumberInput && (0, jsx_runtime_1.jsx)(ConfirmationDialog_1.default, { open: openPhoneNumberInput, confirmLabel: "Envoyer", closeLabel: "Annuler", onClose: function () { return setOpenPhoneNumberInput(false); }, onConfirm: resendCode, message: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Indique nous ton num\u00E9ro de t\u00E9l\u00E9phone" }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { margin: "normal", fullWidth: true, required: true, id: "phoneNumber", label: "N\u00B0 de t\u00E9l\u00E9phone", name: "phoneNumber", autoComplete: "tel", onChange: function (e) { return handleInputChange(e); }, value: validationForm.phoneNumber.value, error: Boolean(validationForm.phoneNumber.error), helperText: validationForm.phoneNumber.error }) }))] }) })] }));
 };
 exports.default = AccountValidation;

package/dist/src/helpers/Types.d.ts

@@ -1,7 +1,8 @@
-export type MovaPasswordForm = {
+export type MovaValidationForm = {
     password: MovaFormField;
     confirmation: MovaFormField;
     securityCode: MovaFormField;
+    phoneNumber: MovaFormField;
 };
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';
 export type MovaVehicleForm = {

package/dist/src/services/UserService.d.ts

@@ -3,6 +3,7 @@ import { MovaAppType } from "../helpers/Enums";
 import Garage from "../models/Garage";
 import User from "../models/User";
 export default class UserService {
+    static resendSecurityCode(req: any): Promise<APIResponse<string>>;
     static getSalesGarages(salesId: string): Promise<APIResponse<Garage[]>>;
     static validateAccount(req: any): Promise<APIResponse<string>>;
     /**

package/dist/src/services/UserService.js

@@ -45,6 +45,14 @@ var Logger_1 = __importDefault(require("../helpers/Logger"));
 var UserService = /** @class */ (function () {
     function UserService() {
     }
+    UserService.resendSecurityCode = function (req) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/user/resend-security-code"),
+            method: Enums_1.APIMethod.POST,
+            appType: Enums_1.MovaAppType.INDIVIDUAL,
+            body: JSON.stringify(req)
+        });
+    };
     UserService.getSalesGarages = function (salesId) {
         return (0, ApiHelper_1.request)({
             url: "".concat(ApiHelper_1.API_BASE_URL, "/sales/").concat(salesId, "/garages"),

package/package.json

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

package/src/AccountValidation.tsx

@@ -1,41 +1,46 @@
 import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import UserService from './services/UserService';
-import { Box, CircularProgress, Grid, IconButton, TextField, Typography, darken, useMediaQuery, useTheme } from '@mui/material';
+import { Box, CircularProgress, Grid, IconButton, Link, TextField, Typography, darken, useMediaQuery, useTheme } from '@mui/material';
 import Logger from './helpers/Logger';
 import InputAdornment from '@mui/material/InputAdornment';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { LoadingButton } from '@mui/lab';
 import { MovaAppType } from './helpers/Enums';
-import { MovaFormField, MovaPasswordForm } from './helpers/Types';
+import { MovaFormField, MovaValidationForm } from './helpers/Types';
 import { validateField } from './helpers/Tools';
 import MovaDialog from './MovaDialog';
 
 import LogoLarge from './assets/images/logo/logo_large.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large.png';
+import ConfirmationDialog from './ConfirmationDialog';
+import { validatePhoneNumber } from './helpers/Validator';
 
 const initialFormState = {
     password: { value: '', isValid: true },
     confirmation: { value: '', isValid: true },
     securityCode: { value: '', isValid: true },
+    phoneNumber: { value: '', isValid: true },
 }
 
 interface AccountValidationProps {
     movaAppType: MovaAppType,
     smsValidation: boolean,
     onSubmit: (success:boolean, message:string) => void,
+    onResendSecurityCode: (success:boolean, message:string) => void,
 }
 
-const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppType, smsValidation, onSubmit }) => {
+const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppType, smsValidation, onSubmit, onResendSecurityCode }) => {
 
     const [loading, setLoading] = useState(true);
-    const [passwordForm, setPasswordForm] = useState<MovaPasswordForm>(initialFormState);
+    const [validationForm, setValidationForm] = useState<MovaValidationForm>(initialFormState);
     const location = useLocation();
     const history = useHistory();
     const theme = useTheme();
     const [emptyPwd, setEmptyPwd] = useState<boolean>(false);
     const [showPassword, setShowPassword] = useState(false);
+    const [openPhoneNumberInput, setOpenPhoneNumberInput] = useState<boolean>(false);
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
      useEffect(() => {
@@ -44,8 +49,6 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
         const token = params.get('token');
 
         // Si cette variable est transmise, cela signifie que le compte a été créé sans mot de passe
-        Logger.info(params);
-        Logger.info(Boolean(params.get('emptyPwd')));
         let localEmptyPwd = Boolean(params.get('emptyPwd'));
         setEmptyPwd(localEmptyPwd);
 
@@ -96,33 +99,38 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
             const fieldValue: string = e.target.value;
             const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
     
-            setPasswordForm({ ...passwordForm, ...newField});
+            if (fieldName == "phoneNumber"){
+                if(!validatePhoneNumber(fieldValue))
+                  return;
+              } 
+
+            setValidationForm({ ...validationForm, ...newField});
         }
     }
 
     const validateForm = () => {
-        let newForm: MovaPasswordForm = { ...passwordForm };
+        let newForm: MovaValidationForm = { ...validationForm };
 
         // Validator pour les champs obligatoires
-        newForm.password = validateField(passwordForm.password, value => !!value, 'Champ obligatoire');
-        newForm.confirmation = validateField(passwordForm.confirmation, value => !!value, 'Champ obligatoire');
+        newForm.password = validateField(validationForm.password, value => !!value, 'Champ obligatoire');
+        newForm.confirmation = validateField(validationForm.confirmation, value => !!value, 'Champ obligatoire');
         if(smsValidation)
-            newForm.securityCode = validateField(passwordForm.securityCode, value => !!value, 'Champ obligatoire');
+            newForm.securityCode = validateField(validationForm.securityCode, value => !!value, 'Champ obligatoire');
 
         // Validator pour le mot de passe
-        newForm.password = validateField(passwordForm.password, 
+        newForm.password = validateField(validationForm.password, 
             value => value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value),
             'Votre mot de passe doit faire au moins 10 caractères et contenir une majuscule et une minuscule minimum');
 
         // Second validator pour le mot de passe (confirmation)
-        newForm.confirmation = validateField(passwordForm.confirmation, value => value === passwordForm.password.value, 
+        newForm.confirmation = validateField(validationForm.confirmation, value => value === validationForm.password.value, 
             "Les mots de passe doivent être identiques");
 
         // Validator pour le code de sécurité
         if(smsValidation)
-            newForm.securityCode = validateField(passwordForm.securityCode, value => value.length === 6, "Le code doit contenir 6 chiffres");
+            newForm.securityCode = validateField(validationForm.securityCode, value => value.length === 6, "Le code doit contenir 6 chiffres");
 
-        setPasswordForm(newForm);
+        setValidationForm(newForm);
 
         return newForm.password.isValid && newForm.confirmation.isValid && (smsValidation ? newForm.securityCode.isValid : true);
     }
@@ -135,8 +143,8 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
 
             let req = {
                 token: !smsValidation ? params.get('token') : null,
-                securityCode : smsValidation ? passwordForm.securityCode.value : null,
-                password: passwordForm.password.value,
+                securityCode : smsValidation ? validationForm.securityCode.value : null,
+                password: validationForm.password.value,
                 demoGarage: Boolean(params.get('demoGarage'))
             }
 
@@ -159,6 +167,62 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
+    const handleOpenResendCode = () => {
+        setOpenPhoneNumberInput(true);
+    }
+
+    const controlPhoneNumber = ():boolean => {
+
+        let newForm: MovaValidationForm = validationForm;
+        let newField: MovaFormField;
+
+          // Validator 'phoneNumber'
+      if(newForm.phoneNumber?.value){
+        if(newForm.phoneNumber?.value.length < 10){
+          newField = { value: validationForm.phoneNumber?.value, error: "Le n° de téléphone est invalide."};
+        } else {
+            newField ={ value: validationForm.phoneNumber?.value, error: ''};
+        }
+        newForm = { ...newForm, ...{ phoneNumber: newField } };
+      }
+      
+      setValidationForm(newForm);
+
+      return !Boolean(newForm.phoneNumber?.error);
+    }
+
+    const resendCode = () => {
+
+        if(controlPhoneNumber()){
+
+            let req = {
+                phoneNumber : validationForm.phoneNumber?.value
+            }
+
+            UserService.resendSecurityCode(req)
+            .then(response => {
+    
+                Logger.info(response);
+    
+                if(response.success){
+                    if(onResendSecurityCode){
+                        onResendSecurityCode(response.success, response.data ?? '');
+                    }
+                }else{
+                    if(onResendSecurityCode){
+                        onResendSecurityCode(response.success, response.error ?? '');
+                    }
+                }
+    
+            }).catch(error => {
+                Logger.error(error);
+                if(onSubmit){
+                    onSubmit(false, error);
+                }
+            });
+        }
+    }
+
     return (
         <div>
             {(emptyPwd || smsValidation) &&
@@ -195,7 +259,7 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                         </Box>
                         </Grid>
                         <Grid item xs={12}>
-                            <Typography sx={{ mt: 2, mb: 2 }}>
+                            <Typography sx={{ mt: 2, mb: 3 }}>
                                 {movaAppType === MovaAppType.INDIVIDUAL ?
                                 "Pour commencer, définis ton mot de passe et active ton compte 😉"
                                 :
@@ -203,24 +267,37 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                                 }                                
                             </Typography>
                         </Grid>
-                        {smsValidation && <Grid item xs={12}>
-                            <TextField
-                                label="Code reçu par SMS"
-                                required
-                                fullWidth
-                                name="securityCode"
-                                variant="outlined"
-                                value={passwordForm.securityCode?.value}
-                                error={!passwordForm.securityCode?.isValid}
-                                helperText={Boolean(passwordForm.securityCode?.error) ? passwordForm.securityCode?.error : "Code à 6 chiffres"}
-                                onChange={e => handleInputChange(e)}
-                                inputProps={{
-                                    maxLength: 6,
-                                    inputMode: 'numeric', // Affiche un clavier numérique sur les appareils mobiles
-                                    pattern: '[0-9]*' // Permet seulement la saisie de chiffres
-                                }}
-                            />
-                        </Grid>}
+                        {smsValidation && <>
+                            <Grid item xs={12}>
+                                <TextField
+                                    label="Code reçu par SMS"
+                                    required
+                                    fullWidth
+                                    name="securityCode"
+                                    variant="outlined"
+                                    value={validationForm.securityCode?.value}
+                                    error={!validationForm.securityCode?.isValid}
+                                    helperText={Boolean(validationForm.securityCode?.error) ? validationForm.securityCode?.error : null}
+                                    onChange={e => handleInputChange(e)}
+                                    inputProps={{
+                                        maxLength: 6,
+                                        inputMode: 'numeric', // Affiche un clavier numérique sur les appareils mobiles
+                                        pattern: '[0-9]*' // Permet seulement la saisie de chiffres
+                                    }}
+                                />
+                            </Grid>
+                            <Grid item xs={12}>
+                                 <Link
+                                    component="button"
+                                    variant="body2"
+                                    onClick={handleOpenResendCode}
+                                    sx={{ cursor: 'pointer', textAlign: 'center', width: '100%' }}
+                                >
+                                    Renvoyer le code
+                                </Link>
+                            </Grid>
+                            </>
+                        }
                         <Grid item xs={12}>
                             <TextField
                                 margin="normal"
@@ -232,9 +309,9 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                                 id="password"
                                 autoComplete="current-password"
                                 onChange={e => handleInputChange(e)}
-                                value={passwordForm.password.value}
-                                error={!passwordForm.password.isValid}
-                                helperText={Boolean(passwordForm.password.error) ? passwordForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule"}
+                                value={validationForm.password.value}
+                                error={!validationForm.password.isValid}
+                                helperText={Boolean(validationForm.password.error) ? validationForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule"}
                                 InputProps={{
                                     endAdornment: (
                                     <InputAdornment position="end">
@@ -255,13 +332,13 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                                 required
                                 fullWidth
                                 name="confirmation"
-                                label="Confirmation"
+                                label="Confirmation mot de passe"
                                 type={showPassword ? 'text' : 'password'}
                                 id="confirmation"
                                 onChange={e => handleInputChange(e)}
-                                value={passwordForm.confirmation.value}
-                                error={!passwordForm.confirmation.isValid}
-                                helperText={Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : ""}
+                                value={validationForm.confirmation.value}
+                                error={!validationForm.confirmation.isValid}
+                                helperText={Boolean(validationForm.confirmation.error) ? validationForm.confirmation.error : ""}
                                 InputProps={{
                                     endAdornment: (
                                     <InputAdornment position="end">
@@ -284,6 +361,32 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                     <CircularProgress />
                 </Box>
             }
+
+            {openPhoneNumberInput && <ConfirmationDialog 
+                open={openPhoneNumberInput}
+                confirmLabel="Envoyer"
+                closeLabel="Annuler"
+                onClose={() => setOpenPhoneNumberInput(false)}
+                onConfirm={resendCode}
+                message={<>
+                    <Typography><b>Indique nous ton numéro de téléphone</b><br /></Typography>
+                    <Grid item xs={6}>
+                        <TextField
+                            margin="normal"
+                            fullWidth
+                            required
+                            id="phoneNumber"
+                            label="N° de téléphone"
+                            name="phoneNumber"
+                            autoComplete="tel"                      
+                            onChange={e => handleInputChange(e)}
+                            value={validationForm.phoneNumber.value}
+                            error={Boolean(validationForm.phoneNumber.error)}
+                            helperText={validationForm.phoneNumber.error}
+                        />
+                    </Grid>
+                    </>}
+            /> }
         </div>
     );
 };

package/src/helpers/Types.ts

@@ -1,8 +1,9 @@
 
-export type MovaPasswordForm = {
+export type MovaValidationForm = {
     password: MovaFormField,
     confirmation: MovaFormField,
-    securityCode: MovaFormField
+    securityCode: MovaFormField,
+    phoneNumber: MovaFormField
 }
 
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';

package/src/services/UserService.ts

@@ -6,6 +6,15 @@ import User from "../models/User";
 
 export default class UserService {
 
+    static resendSecurityCode(req: any): Promise<APIResponse<string>> {
+        return request({
+            url: `${API_BASE_URL}/user/resend-security-code`,
+            method: APIMethod.POST,
+            appType: MovaAppType.INDIVIDUAL,
+            body: JSON.stringify(req)
+        });
+    }
+
     static getSalesGarages(salesId: string,): Promise<APIResponse<Garage[]>> {
         return request({
             url: `${API_BASE_URL}/sales/${salesId}/garages`,