@movalib/movalib-commons 1.1.92 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/AccountValidation.js +2 -5
- package/dist/src/GenderSelector.d.ts +1 -1
- package/dist/src/GenderSelector.js +2 -1
- package/dist/src/MovaDialog.js +1 -1
- package/dist/src/MovaSignUp.d.ts +5 -0
- package/dist/src/MovaSignUp.js +19 -37
- package/dist/src/helpers/Tools.d.ts +1 -1
- package/dist/src/helpers/Tools.js +7 -2
- package/dist/src/helpers/Types.d.ts +2 -2
- package/dist/src/helpers/Validator.js +1 -1
- package/package.json +1 -1
- package/src/AccountValidation.tsx +2 -6
- package/src/GenderSelector.tsx +4 -4
- package/src/MovaDialog.tsx +1 -1
- package/src/MovaSignUp.tsx +61 -61
- package/src/helpers/Tools.ts +6 -3
- package/src/helpers/Types.ts +2 -2
- package/src/helpers/Validator.ts +1 -1
|
@@ -238,10 +238,7 @@ var AccountValidation = function (_a) {
|
|
|
238
238
|
display: 'flex',
|
|
239
239
|
flexDirection: 'column',
|
|
240
240
|
alignItems: 'center',
|
|
241
|
-
} }, { 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:
|
|
242
|
-
resetPassword ? "Définis ton nouveau mot de passe" : "Pour commencer, définis ton mot de passe et active ton compte 😉"
|
|
243
|
-
:
|
|
244
|
-
resetPassword ? "Définissez votre nouveau mot de passe" : "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: {
|
|
241
|
+
} }, { 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: resetPassword ? "Définissez votre nouveau mot de passe" : "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: {
|
|
245
242
|
maxLength: 6,
|
|
246
243
|
inputMode: 'numeric',
|
|
247
244
|
pattern: '[0-9]*' // Permet seulement la saisie de chiffres
|
|
@@ -251,6 +248,6 @@ var AccountValidation = function (_a) {
|
|
|
251
248
|
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, {}) })) }))),
|
|
252
249
|
} }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12, sx: { mt: 2, display: 'flex', justifyContent: 'start' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ error: !validationForm.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: validationForm.acceptsTerms.value, onChange: function (e, checked) { return handleCheckboxChange(e, checked); }, sx: { pr: 4 } }), label: (0, jsx_runtime_1.jsxs)("span", { children: ["J'accepte ", movaAppType === Enums_1.MovaAppType.GARAGE ? "sans réserve" : '', " les", ' ', (0, jsx_runtime_1.jsx)("a", __assign({ href: movaAppType === Enums_1.MovaAppType.GARAGE ? proCGUPath : CGUPath, target: "_blank", style: { color: theme.palette.primary.main } }, { children: "Conditions G\u00E9n\u00E9rales d'Utilisation" })), movaAppType === Enums_1.MovaAppType.GARAGE &&
|
|
253
250
|
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u00A0", (0, jsx_runtime_1.jsx)("br", {}), "et les ", ' ', (0, jsx_runtime_1.jsx)("a", __assign({ href: proCGVPath, target: "_blank", style: { color: theme.palette.primary.main } }, { children: "Conditions G\u00E9n\u00E9rales de Vente" }))] })] }) }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: validationForm.acceptsTerms.error })] })) }))] })) })), loading &&
|
|
254
|
-
(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: "
|
|
251
|
+
(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: "Indiquez nous votre 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 }) }))] }) })] }));
|
|
255
252
|
};
|
|
256
253
|
exports.default = AccountValidation;
|
|
@@ -14,8 +14,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
15
15
|
var material_1 = require("@mui/material");
|
|
16
16
|
var GenderSelector = function (_a) {
|
|
17
|
+
var _b, _c, _d;
|
|
17
18
|
var handleSelectChange = _a.handleSelectChange, form = _a.form, required = _a.required, sx = _a.sx;
|
|
18
19
|
var theme = (0, material_1.useTheme)();
|
|
19
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); }, error: Boolean(form.gender.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ sx: { color: theme.palette.error.main } }, { children: form.gender.error }))] })));
|
|
20
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: (_b = form.gender) === null || _b === void 0 ? void 0 : _b.value, onChange: function (e) { return handleSelectChange(e); }, error: Boolean((_c = form.gender) === null || _c === void 0 ? void 0 : _c.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ sx: { color: theme.palette.error.main } }, { children: (_d = form.gender) === null || _d === void 0 ? void 0 : _d.error }))] })));
|
|
20
21
|
};
|
|
21
22
|
exports.default = GenderSelector;
|
package/dist/src/MovaDialog.js
CHANGED
|
@@ -60,6 +60,6 @@ var MovaDialog = function (_a) {
|
|
|
60
60
|
zIndex: 0,
|
|
61
61
|
left: 0,
|
|
62
62
|
opacity: '0.2'
|
|
63
|
-
}, alt: 'Feuille Movalib' }), title && (0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "garage-dialog-title", sx: { textAlign: 'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 } }, { children: (0, jsx_runtime_1.jsx)(material_1.AppBar, __assign({ sx: { position: 'relative' }, color: "transparent", elevation: 0 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [closable && (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "start", color: "inherit", onClick: handleOnBack, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(ArrowBackIosNewRounded_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { textAlign: 'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }, style: titleStyle }, { children: title }))] }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, __assign({ sx: { zIndex: 20 } }, { children: [children, message && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({ sx: { justifyContent: 'center' } }, { children: actions }))] })));
|
|
63
|
+
}, alt: 'Feuille Movalib' }), title && (0, jsx_runtime_1.jsx)(material_1.DialogTitle, __assign({ id: "garage-dialog-title", sx: { textAlign: 'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 } }, { children: (0, jsx_runtime_1.jsx)(material_1.AppBar, __assign({ sx: { position: 'relative' }, color: "transparent", elevation: 0 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [closable && (0, jsx_runtime_1.jsx)(material_1.IconButton, __assign({ edge: "start", color: "inherit", onClick: handleOnBack, "aria-label": "close" }, { children: (0, jsx_runtime_1.jsx)(ArrowBackIosNewRounded_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, __assign({ sx: { textAlign: 'center', fontSize: 20, flexGrow: 1, pl: closable ? '20px' : 'Opx', pr: closable ? '40px' : '0px' }, style: titleStyle }, { children: title }))] }) })) })), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, __assign({ sx: { zIndex: 20 } }, { children: [children, message && (0, jsx_runtime_1.jsx)(material_1.Alert, __assign({ severity: "error", sx: { mb: 2 } }, { children: message }))] })), (0, jsx_runtime_1.jsx)(material_1.DialogActions, __assign({ sx: { justifyContent: 'center' } }, { children: actions }))] })));
|
|
64
64
|
};
|
|
65
65
|
exports.default = MovaDialog;
|
package/dist/src/MovaSignUp.d.ts
CHANGED
|
@@ -18,6 +18,11 @@ interface MovaSignUpProps {
|
|
|
18
18
|
alertSeverity?: AlertColor;
|
|
19
19
|
loading?: boolean;
|
|
20
20
|
headerText?: ReactNode;
|
|
21
|
+
showHeaderLogo?: boolean;
|
|
22
|
+
showLeafs?: boolean;
|
|
23
|
+
showCopyright?: boolean;
|
|
24
|
+
showLoginButton?: boolean;
|
|
25
|
+
disableGutters?: boolean;
|
|
21
26
|
}
|
|
22
27
|
/**
|
|
23
28
|
* Formulaire de création d'un compte Movalib (Garage / Utilisateur)
|
package/dist/src/MovaSignUp.js
CHANGED
|
@@ -53,7 +53,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
53
53
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
54
54
|
var react_1 = require("react");
|
|
55
55
|
var lab_1 = require("@mui/lab");
|
|
56
|
-
var DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
|
|
57
56
|
var logo_large_border_png_1 = __importDefault(require("./assets/images/logo/logo_large_border.png"));
|
|
58
57
|
var logo_pro_large_border_png_1 = __importDefault(require("./assets/images/logo/logo_pro_large_border.png"));
|
|
59
58
|
var logo_large_dm_png_1 = __importDefault(require("./assets/images/logo/logo_large_dm.png"));
|
|
@@ -64,14 +63,15 @@ var material_1 = require("@mui/material");
|
|
|
64
63
|
var MovaCopyright_1 = __importDefault(require("./MovaCopyright"));
|
|
65
64
|
var Enums_1 = require("./helpers/Enums");
|
|
66
65
|
var Validator_1 = require("./helpers/Validator");
|
|
67
|
-
var GenderSelector_1 = __importDefault(require("./GenderSelector"));
|
|
68
66
|
var Tools_1 = require("./helpers/Tools");
|
|
69
67
|
var react_router_dom_1 = require("react-router-dom");
|
|
70
68
|
var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
|
|
71
69
|
var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
|
|
72
70
|
var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
|
|
73
71
|
var Info_1 = __importDefault(require("@mui/icons-material/Info"));
|
|
74
|
-
var
|
|
72
|
+
var Logger_1 = __importDefault(require("./helpers/Logger"));
|
|
73
|
+
// ATTENTION : s'assurer de la présence des documents suivants à la racine du composant porteur (dossier 'public')
|
|
74
|
+
var CGUPath = "/Movalib_CGU.pdf";
|
|
75
75
|
// Permet de centrer le contenu de l'application
|
|
76
76
|
var styles = {
|
|
77
77
|
display: 'flex',
|
|
@@ -93,15 +93,14 @@ var initialUserFormState = {
|
|
|
93
93
|
* ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
|
|
94
94
|
*/
|
|
95
95
|
var MovaLogin = function (_a) {
|
|
96
|
-
var _b, _c, _d;
|
|
97
|
-
var
|
|
98
|
-
var _f = (0, react_1.useState)(initialUserFormState), userForm = _f[0], setUserForm = _f[1];
|
|
96
|
+
var loading = _a.loading, movaAppType = _a.movaAppType, onSubmit = _a.onSubmit, _b = _a.darkMode, darkMode = _b === void 0 ? false : _b, alertMessage = _a.alertMessage, alertSeverity = _a.alertSeverity, headerText = _a.headerText, _c = _a.showHeaderLogo, showHeaderLogo = _c === void 0 ? true : _c, _d = _a.showLeafs, showLeafs = _d === void 0 ? true : _d, _e = _a.showCopyright, showCopyright = _e === void 0 ? true : _e, _f = _a.showLoginButton, showLoginButton = _f === void 0 ? true : _f, _g = _a.disableGutters, disableGutters = _g === void 0 ? false : _g;
|
|
97
|
+
var _h = (0, react_1.useState)(initialUserFormState), userForm = _h[0], setUserForm = _h[1];
|
|
99
98
|
var history = (0, react_router_dom_1.useHistory)();
|
|
100
|
-
var
|
|
99
|
+
var _j = (0, react_1.useState)(""), message = _j[0], setMessage = _j[1];
|
|
101
100
|
var theme = (0, material_1.useTheme)();
|
|
102
|
-
var
|
|
103
|
-
var
|
|
104
|
-
var
|
|
101
|
+
var _k = (0, react_1.useState)(false), showPassword = _k[0], setShowPassword = _k[1];
|
|
102
|
+
var _l = (0, react_1.useState)(false), openEmailInfo = _l[0], setOpenEmailInfo = _l[1];
|
|
103
|
+
var _m = (0, react_1.useState)(false), openPhoneNumberInfo = _m[0], setOpenPhoneNumberInfo = _m[1];
|
|
105
104
|
var handleDateChange = function (name, date) {
|
|
106
105
|
var _a;
|
|
107
106
|
if (name && date) {
|
|
@@ -171,21 +170,22 @@ var MovaLogin = function (_a) {
|
|
|
171
170
|
newForm.firstname = (0, Tools_1.validateField)(userForm.firstname, function (value) { return !!value; }, 'Champ obligatoire');
|
|
172
171
|
newForm.lastname = (0, Tools_1.validateField)(userForm.lastname, function (value) { return !!value; }, 'Champ obligatoire');
|
|
173
172
|
newForm.email = (0, Tools_1.validateField)(userForm.email, function (value) { return !!value; }, 'Champ obligatoire');
|
|
174
|
-
newForm.password = (0, Tools_1.validateField)(userForm.password, function (value) { return !!value; }, 'Champ obligatoire');
|
|
175
|
-
newForm.gender = (0, Tools_1.validateField)(userForm.gender, function (value) { return !!value; }, 'Champ obligatoire');
|
|
176
|
-
newForm.birthDate = (0, Tools_1.validateField)(userForm.birthDate, function (value) { return !!value && (0, isValid_1.default)(value); }, 'Champ obligatoire');
|
|
177
173
|
newForm.phoneNumber = (0, Tools_1.validateField)(userForm.phoneNumber, function (value) { return !!value; }, 'Champ obligatoire');
|
|
174
|
+
newForm.password = (0, Tools_1.validateField)(userForm.password, function (value) { return !!value; }, 'Champ obligatoire');
|
|
175
|
+
//newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
|
|
176
|
+
//newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
|
|
178
177
|
// Validator pour l'email
|
|
179
178
|
newForm.email = (0, Tools_1.validateField)(userForm.email, Validator_1.validateEmail, 'Adresse email invalide');
|
|
180
179
|
// Validator pour le mot de passe
|
|
181
180
|
newForm.password = (0, Tools_1.validateField)(userForm.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 de long, contenir au moins une majuscule et une minuscule');
|
|
182
181
|
// Validator 'phoneNumber'
|
|
183
182
|
newForm.phoneNumber = (0, Tools_1.validateField)(userForm.phoneNumber, Validator_1.validatePhoneNumber, "Le n° de téléphone est invalide.");
|
|
183
|
+
Logger_1.default.info(newForm.phoneNumber === null || newForm.phoneNumber === undefined);
|
|
184
184
|
// Validator pour les CGU
|
|
185
185
|
newForm.acceptsTerms = (0, Tools_1.validateField)(userForm.acceptsTerms, function (value) { return Boolean(value); }, 'Vous devez accepter les termes de nos CGU');
|
|
186
186
|
setUserForm(newForm);
|
|
187
187
|
return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid && newForm.password.isValid
|
|
188
|
-
&& newForm.
|
|
188
|
+
&& newForm.acceptsTerms.isValid && newForm.phoneNumber.isValid;
|
|
189
189
|
};
|
|
190
190
|
var getMovaLogo = function () {
|
|
191
191
|
if (darkMode) {
|
|
@@ -209,19 +209,19 @@ var MovaLogin = function (_a) {
|
|
|
209
209
|
var handleClickShowPassword = function () {
|
|
210
210
|
setShowPassword(function (prev) { return !prev; });
|
|
211
211
|
};
|
|
212
|
-
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',
|
|
212
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: styles }, { children: [showLeafs && (0, jsx_runtime_1.jsx)("img", { src: leaf_green_large_png_1.default, style: { position: 'fixed',
|
|
213
213
|
float: 'left',
|
|
214
214
|
width: '250px',
|
|
215
215
|
height: '400px',
|
|
216
216
|
top: '-20%',
|
|
217
217
|
left: '0%',
|
|
218
218
|
opacity: '0.3',
|
|
219
|
-
zIndex: -8 }, alt: 'Feuille Verte Movalib' }), (0, jsx_runtime_1.jsxs)(material_1.Container, __assign({ component: "main", maxWidth: "sm" }, { children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
|
|
219
|
+
zIndex: -8 }, alt: 'Feuille Verte Movalib' }), (0, jsx_runtime_1.jsxs)(material_1.Container, __assign({ component: "main", maxWidth: "sm", disableGutters: disableGutters }, { children: [(0, jsx_runtime_1.jsx)(material_1.CssBaseline, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
|
|
220
220
|
marginTop: 6,
|
|
221
221
|
display: 'flex',
|
|
222
222
|
flexDirection: 'column',
|
|
223
223
|
alignItems: 'center',
|
|
224
|
-
} }, { 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: {
|
|
224
|
+
} }, { children: [showHeaderLogo && (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: {
|
|
225
225
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
226
226
|
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
227
227
|
}
|
|
@@ -229,7 +229,7 @@ var MovaLogin = function (_a) {
|
|
|
229
229
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
230
230
|
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
231
231
|
}
|
|
232
|
-
} }), (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:
|
|
232
|
+
} }), (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: userForm.phoneNumber.value, error: Boolean(userForm.phoneNumber.error), helperText: userForm.phoneNumber.error, InputProps: {
|
|
233
233
|
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, {}) })) }))),
|
|
234
234
|
} }), 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: {
|
|
235
235
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
@@ -243,25 +243,7 @@ var MovaLogin = function (_a) {
|
|
|
243
243
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
244
244
|
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
245
245
|
}
|
|
246
|
-
} }), (0, jsx_runtime_1.jsx)(
|
|
247
|
-
width: '40%',
|
|
248
|
-
mr: 2,
|
|
249
|
-
'& .MuiOutlinedInput-notchedOutline': {
|
|
250
|
-
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
251
|
-
}
|
|
252
|
-
} }), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { label: "Date de naissance", value: userForm.birthDate.value, format: 'dd / MM / yyyy', formatDensity: 'dense', openTo: "year", views: ['year', 'month', 'day'], onChange: function (newValue) { return handleDateChange('birthDate', newValue); }, slotProps: {
|
|
253
|
-
textField: {
|
|
254
|
-
required: true,
|
|
255
|
-
error: !userForm.birthDate.isValid,
|
|
256
|
-
sx: {
|
|
257
|
-
width: '50%', mt: 2, float: 'right',
|
|
258
|
-
padding: 0,
|
|
259
|
-
'& .MuiOutlinedInput-notchedOutline': {
|
|
260
|
-
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
261
|
-
}
|
|
262
|
-
},
|
|
263
|
-
},
|
|
264
|
-
} }), (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, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main } }, { 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); }, sx: { cursor: 'pointer' } }, { 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',
|
|
246
|
+
} }), (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: CGUPath, 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, backgroundColor: darkMode ? theme.palette.primary.dark : theme.palette.primary.main } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Cr\u00E9er mon compte" }) })), showLoginButton && (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); }, sx: { cursor: 'pointer' } }, { children: "Se connecter" })) })) }))] })), showCopyright && (0, jsx_runtime_1.jsx)(MovaCopyright_1.default, { sx: { mt: 8, mb: 4 } })] })), showLeafs && (0, jsx_runtime_1.jsx)("img", { src: leaf_pink_large_png_1.default, style: { position: 'fixed',
|
|
265
247
|
float: 'right',
|
|
266
248
|
width: '250px',
|
|
267
249
|
height: '400px',
|
|
@@ -32,4 +32,4 @@ export declare const formatVehicleTireStr: (input: string) => string;
|
|
|
32
32
|
* @param {string} errorMsg - Le message d'erreur à associer au champ si la validation échoue.
|
|
33
33
|
* @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
|
|
34
34
|
*/
|
|
35
|
-
export declare const validateField: (field: MovaFormField, validator: (value: string) => boolean, errorMsg: string) => MovaFormField;
|
|
35
|
+
export declare const validateField: (field: MovaFormField | undefined, validator: (value: string) => boolean, errorMsg: string) => MovaFormField;
|
|
@@ -233,9 +233,14 @@ exports.formatVehicleTireStr = formatVehicleTireStr;
|
|
|
233
233
|
* @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
|
|
234
234
|
*/
|
|
235
235
|
var validateField = function (field, validator, errorMsg) {
|
|
236
|
-
if (!validator(field.value)) {
|
|
236
|
+
if (field && !validator(field.value)) {
|
|
237
237
|
return { value: field.value, error: errorMsg, isValid: false };
|
|
238
238
|
}
|
|
239
|
-
|
|
239
|
+
else if (field) {
|
|
240
|
+
return { value: field.value, error: '', isValid: true };
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
return { value: '', error: '', isValid: true };
|
|
244
|
+
}
|
|
240
245
|
};
|
|
241
246
|
exports.validateField = validateField;
|
|
@@ -29,8 +29,8 @@ export type MovaUserSignUpForm = {
|
|
|
29
29
|
email: MovaFormField;
|
|
30
30
|
phoneNumber: MovaFormField;
|
|
31
31
|
password: MovaFormField;
|
|
32
|
-
gender
|
|
33
|
-
birthDate
|
|
32
|
+
gender?: MovaFormField;
|
|
33
|
+
birthDate?: MovaFormField;
|
|
34
34
|
acceptsTerms: MovaFormField;
|
|
35
35
|
};
|
|
36
36
|
export type MovaLoginForm = {
|
|
@@ -31,7 +31,7 @@ var userNameRegex = /^[a-z0-9_-]{3,20}$/;
|
|
|
31
31
|
*/
|
|
32
32
|
var textRegex = /^[a-zA-Z0-9\s.,!?'"()+=-_-éèçà]+$/;
|
|
33
33
|
function validatePhoneNumber(phoneNumber) {
|
|
34
|
-
if (phoneNumber === null || phoneNumber === undefined) {
|
|
34
|
+
if (phoneNumber === null || phoneNumber === undefined || phoneNumber === '') {
|
|
35
35
|
return false;
|
|
36
36
|
}
|
|
37
37
|
return phoneNumberRegex.test(phoneNumber);
|
package/package.json
CHANGED
|
@@ -310,11 +310,7 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
|
|
|
310
310
|
</Grid>
|
|
311
311
|
<Grid item xs={12}>
|
|
312
312
|
<Typography sx={{ mt: 2, mb: 3 }}>
|
|
313
|
-
{
|
|
314
|
-
resetPassword ? "Définis ton nouveau mot de passe" : "Pour commencer, définis ton mot de passe et active ton compte 😉"
|
|
315
|
-
:
|
|
316
|
-
resetPassword ? "Définissez votre nouveau mot de passe" : "Pour commencer, définissez votre mot de passe et activez votre compte 😉"
|
|
317
|
-
}
|
|
313
|
+
{resetPassword ? "Définissez votre nouveau mot de passe" : "Pour commencer, définissez votre mot de passe et activez votre compte 😉"}
|
|
318
314
|
</Typography>
|
|
319
315
|
</Grid>
|
|
320
316
|
{smsValidation && <>
|
|
@@ -452,7 +448,7 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
|
|
|
452
448
|
onClose={() => setOpenPhoneNumberInput(false)}
|
|
453
449
|
onConfirm={resendCode}
|
|
454
450
|
message={<>
|
|
455
|
-
<Typography><b>
|
|
451
|
+
<Typography><b>Indiquez nous votre numéro de téléphone</b><br /></Typography>
|
|
456
452
|
<Grid item xs={6}>
|
|
457
453
|
<TextField
|
|
458
454
|
margin="normal"
|
package/src/GenderSelector.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import { MovaFormField } from './helpers/Types';
|
|
|
5
5
|
interface GenderSelectorProps {
|
|
6
6
|
handleSelectChange: (event: SelectChangeEvent<string>) => void;
|
|
7
7
|
form: {
|
|
8
|
-
gender
|
|
8
|
+
gender?: MovaFormField
|
|
9
9
|
};
|
|
10
10
|
required?: boolean,
|
|
11
11
|
sx?: SxProps<Theme>;
|
|
@@ -21,15 +21,15 @@ const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, for
|
|
|
21
21
|
id="gender"
|
|
22
22
|
name="gender"
|
|
23
23
|
label="Sexe"
|
|
24
|
-
value={form.gender
|
|
24
|
+
value={form.gender?.value}
|
|
25
25
|
onChange={e => handleSelectChange(e)}
|
|
26
|
-
error={Boolean(form.gender
|
|
26
|
+
error={Boolean(form.gender?.error)}
|
|
27
27
|
>
|
|
28
28
|
<MenuItem value="MALE">Homme</MenuItem>
|
|
29
29
|
<MenuItem value="FEMALE">Femme</MenuItem>
|
|
30
30
|
<MenuItem value="OTHER">Autre</MenuItem>
|
|
31
31
|
</Select>
|
|
32
|
-
<FormHelperText sx={{ color: theme.palette.error.main}}>{form.gender
|
|
32
|
+
<FormHelperText sx={{ color: theme.palette.error.main}}>{form.gender?.error}</FormHelperText>
|
|
33
33
|
</FormControl>
|
|
34
34
|
);
|
|
35
35
|
};
|
package/src/MovaDialog.tsx
CHANGED
|
@@ -99,7 +99,7 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable =
|
|
|
99
99
|
>
|
|
100
100
|
<BackIcon />
|
|
101
101
|
</IconButton>}
|
|
102
|
-
<Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }} style={titleStyle}>
|
|
102
|
+
<Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: closable ? '20px' : 'Opx', pr: closable ? '40px' : '0px' }} style={titleStyle}>
|
|
103
103
|
{title}
|
|
104
104
|
</Typography>
|
|
105
105
|
</Toolbar>
|
package/src/MovaSignUp.tsx
CHANGED
|
@@ -21,6 +21,10 @@ import Visibility from '@mui/icons-material/Visibility';
|
|
|
21
21
|
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
|
22
22
|
import InfoIcon from '@mui/icons-material/Info';
|
|
23
23
|
import isValid from 'date-fns/isValid';
|
|
24
|
+
import Logger from "./helpers/Logger";
|
|
25
|
+
|
|
26
|
+
// ATTENTION : s'assurer de la présence des documents suivants à la racine du composant porteur (dossier 'public')
|
|
27
|
+
const CGUPath:string = "/Movalib_CGU.pdf";
|
|
24
28
|
|
|
25
29
|
// Permet de centrer le contenu de l'application
|
|
26
30
|
const styles: CSSProperties = {
|
|
@@ -56,13 +60,19 @@ interface MovaSignUpProps {
|
|
|
56
60
|
alertSeverity?: AlertColor,
|
|
57
61
|
loading?: boolean,
|
|
58
62
|
headerText?: ReactNode
|
|
63
|
+
showHeaderLogo?: boolean,
|
|
64
|
+
showLeafs?: boolean,
|
|
65
|
+
showCopyright?: boolean,
|
|
66
|
+
showLoginButton?: boolean,
|
|
67
|
+
disableGutters?: boolean
|
|
59
68
|
}
|
|
60
69
|
|
|
61
70
|
/**
|
|
62
71
|
* Formulaire de création d'un compte Movalib (Garage / Utilisateur)
|
|
63
72
|
* ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
|
|
64
73
|
*/
|
|
65
|
-
const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, darkMode = false, alertMessage, alertSeverity, headerText
|
|
74
|
+
const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, darkMode = false, alertMessage, alertSeverity, headerText,
|
|
75
|
+
showHeaderLogo = true, showLeafs= true, showCopyright = true, showLoginButton = true, disableGutters = false}) => {
|
|
66
76
|
|
|
67
77
|
const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
|
|
68
78
|
const history = useHistory();
|
|
@@ -150,11 +160,14 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
150
160
|
newForm.firstname = validateField(userForm.firstname, value => !!value, 'Champ obligatoire');
|
|
151
161
|
newForm.lastname = validateField(userForm.lastname, value => !!value, 'Champ obligatoire');
|
|
152
162
|
newForm.email = validateField(userForm.email, value => !!value, 'Champ obligatoire');
|
|
153
|
-
newForm.password = validateField(userForm.password, value => !!value, 'Champ obligatoire');
|
|
154
|
-
newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
|
|
155
|
-
newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
|
|
156
163
|
newForm.phoneNumber = validateField(userForm.phoneNumber, value => !!value, 'Champ obligatoire');
|
|
157
164
|
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
newForm.password = validateField(userForm.password, value => !!value, 'Champ obligatoire');
|
|
168
|
+
//newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
|
|
169
|
+
//newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
|
|
170
|
+
|
|
158
171
|
// Validator pour l'email
|
|
159
172
|
newForm.email = validateField(userForm.email, validateEmail, 'Adresse email invalide');
|
|
160
173
|
|
|
@@ -165,14 +178,14 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
165
178
|
|
|
166
179
|
// Validator 'phoneNumber'
|
|
167
180
|
newForm.phoneNumber = validateField(userForm.phoneNumber, validatePhoneNumber, "Le n° de téléphone est invalide.");
|
|
168
|
-
|
|
181
|
+
Logger.info(newForm.phoneNumber === null || newForm.phoneNumber === undefined);
|
|
169
182
|
// Validator pour les CGU
|
|
170
183
|
newForm.acceptsTerms = validateField(userForm.acceptsTerms, value => Boolean(value), 'Vous devez accepter les termes de nos CGU');
|
|
171
184
|
|
|
172
185
|
setUserForm(newForm);
|
|
173
186
|
|
|
174
|
-
return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid && newForm.password.isValid
|
|
175
|
-
|
|
187
|
+
return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid && newForm.password.isValid
|
|
188
|
+
&& newForm.acceptsTerms.isValid && newForm.phoneNumber.isValid;
|
|
176
189
|
}
|
|
177
190
|
|
|
178
191
|
const getMovaLogo = () => {
|
|
@@ -201,16 +214,16 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
201
214
|
|
|
202
215
|
return (
|
|
203
216
|
<div style={styles}>
|
|
204
|
-
<img src={GreenLeafImage} style={{position: 'fixed',
|
|
217
|
+
{showLeafs && <img src={GreenLeafImage} style={{position: 'fixed',
|
|
205
218
|
float:'left',
|
|
206
219
|
width: '250px',
|
|
207
220
|
height: '400px',
|
|
208
221
|
top: '-20%',
|
|
209
222
|
left: '0%',
|
|
210
223
|
opacity: '0.3',
|
|
211
|
-
zIndex: -8}} alt='Feuille Verte Movalib'></img>
|
|
224
|
+
zIndex: -8}} alt='Feuille Verte Movalib'></img>}
|
|
212
225
|
|
|
213
|
-
<Container component="main" maxWidth="sm">
|
|
226
|
+
<Container component="main" maxWidth="sm" disableGutters={disableGutters}>
|
|
214
227
|
<CssBaseline />
|
|
215
228
|
<Box
|
|
216
229
|
sx={{
|
|
@@ -220,7 +233,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
220
233
|
alignItems: 'center',
|
|
221
234
|
}}
|
|
222
235
|
>
|
|
223
|
-
<img src={getMovaLogo()} style={{width:'60%'}}/>
|
|
236
|
+
{showHeaderLogo && <img src={getMovaLogo()} style={{width:'60%'}}/>}
|
|
224
237
|
{headerText && <Typography variant="button" sx={{ pt: 3, width:'100%' }}>{headerText}</Typography>}
|
|
225
238
|
</Box>
|
|
226
239
|
|
|
@@ -272,9 +285,9 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
272
285
|
name="phoneNumber"
|
|
273
286
|
autoComplete="tel"
|
|
274
287
|
onChange={e => handleInputChange(e)}
|
|
275
|
-
value={userForm.phoneNumber
|
|
276
|
-
error={Boolean(userForm.phoneNumber
|
|
277
|
-
helperText={userForm.phoneNumber
|
|
288
|
+
value={userForm.phoneNumber.value}
|
|
289
|
+
error={Boolean(userForm.phoneNumber.error)}
|
|
290
|
+
helperText={userForm.phoneNumber.error}
|
|
278
291
|
InputProps={{
|
|
279
292
|
endAdornment: (
|
|
280
293
|
<InputAdornment position="end">
|
|
@@ -349,54 +362,41 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
349
362
|
}}
|
|
350
363
|
/>
|
|
351
364
|
|
|
352
|
-
|
|
365
|
+
{/* {userForm.gender && <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{
|
|
353
366
|
width:'40%',
|
|
354
367
|
mr: 2,
|
|
355
368
|
'& .MuiOutlinedInput-notchedOutline': {
|
|
356
369
|
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
357
370
|
}
|
|
358
371
|
}} />
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
formatDensity='dense'
|
|
382
|
-
openTo="year"
|
|
383
|
-
views={['year', 'month', 'day']}
|
|
384
|
-
onChange={(newValue) => handleDateChange('birthDate', newValue)}
|
|
385
|
-
slotProps={{
|
|
386
|
-
textField: {
|
|
387
|
-
required: true,
|
|
388
|
-
error:!userForm.birthDate.isValid,
|
|
389
|
-
sx: {
|
|
390
|
-
width:'50%', mt: 2, float: 'right',
|
|
391
|
-
padding: 0,
|
|
392
|
-
'& .MuiOutlinedInput-notchedOutline': {
|
|
393
|
-
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
394
|
-
}
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
{ userForm.birthDate &&
|
|
375
|
+
<DatePicker
|
|
376
|
+
label="Date de naissance"
|
|
377
|
+
value={userForm.birthDate.value}
|
|
378
|
+
format='dd / MM / yyyy'
|
|
379
|
+
formatDensity='dense'
|
|
380
|
+
openTo="year"
|
|
381
|
+
views={['year', 'month', 'day']}
|
|
382
|
+
onChange={(newValue) => handleDateChange('birthDate', newValue)}
|
|
383
|
+
slotProps={{
|
|
384
|
+
textField: {
|
|
385
|
+
required: true,
|
|
386
|
+
error:!userForm.birthDate.isValid,
|
|
387
|
+
sx: {
|
|
388
|
+
width:'50%', mt: 2, float: 'right',
|
|
389
|
+
padding: 0,
|
|
390
|
+
'& .MuiOutlinedInput-notchedOutline': {
|
|
391
|
+
borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
|
|
392
|
+
}
|
|
393
|
+
},
|
|
395
394
|
},
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
395
|
+
}}
|
|
396
|
+
/>
|
|
397
|
+
}
|
|
398
|
+
*/}
|
|
399
|
+
|
|
400
400
|
<FormControl error={!userForm.acceptsTerms.isValid}>
|
|
401
401
|
<FormControlLabel
|
|
402
402
|
control={
|
|
@@ -410,7 +410,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
410
410
|
label={
|
|
411
411
|
<span>
|
|
412
412
|
J'accepte les{' '}
|
|
413
|
-
<Link href=
|
|
413
|
+
<Link href={CGUPath} target="_blank">
|
|
414
414
|
Conditions Générales d'Utilisation
|
|
415
415
|
</Link>
|
|
416
416
|
</span>
|
|
@@ -430,26 +430,26 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
|
|
|
430
430
|
<span>Créer mon compte</span>
|
|
431
431
|
</LoadingButton>
|
|
432
432
|
|
|
433
|
-
<Grid container>
|
|
433
|
+
{showLoginButton && <Grid container>
|
|
434
434
|
<Grid item xs>
|
|
435
435
|
<Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickLogin(e)} sx={{ cursor:'pointer' }}>
|
|
436
436
|
Se connecter
|
|
437
437
|
</Link>
|
|
438
438
|
</Grid>
|
|
439
|
-
</Grid>
|
|
439
|
+
</Grid>}
|
|
440
440
|
|
|
441
441
|
</Box>
|
|
442
|
-
<MovaCopyright sx={{ mt: 8, mb: 4 }} />
|
|
442
|
+
{showCopyright && <MovaCopyright sx={{ mt: 8, mb: 4 }} />}
|
|
443
443
|
</Container>
|
|
444
444
|
|
|
445
|
-
<img src={PinkLeafImage} style={{position: 'fixed',
|
|
445
|
+
{showLeafs && <img src={PinkLeafImage} style={{position: 'fixed',
|
|
446
446
|
float:'right',
|
|
447
447
|
width: '250px',
|
|
448
448
|
height: '400px',
|
|
449
449
|
bottom: '-20%',
|
|
450
450
|
right: '0%',
|
|
451
451
|
opacity: '0.3',
|
|
452
|
-
zIndex: '-10'}} alt='Feuille Rose Movalib'></img>
|
|
452
|
+
zIndex: '-10'}} alt='Feuille Rose Movalib'></img>}
|
|
453
453
|
</div>
|
|
454
454
|
);
|
|
455
455
|
};
|
package/src/helpers/Tools.ts
CHANGED
|
@@ -257,10 +257,13 @@ export const formatVehicleTireStr = (input: string) => {
|
|
|
257
257
|
* @param {string} errorMsg - Le message d'erreur à associer au champ si la validation échoue.
|
|
258
258
|
* @returns {MovaFormField} - Le champ de formulaire avec les propriétés `error` et `isValid` mises à jour.
|
|
259
259
|
*/
|
|
260
|
-
export const validateField = (field: MovaFormField, validator: (value: string) => boolean, errorMsg: string): MovaFormField => {
|
|
261
|
-
if (!validator(field.value)) {
|
|
260
|
+
export const validateField = (field: MovaFormField | undefined, validator: (value: string) => boolean, errorMsg: string): MovaFormField => {
|
|
261
|
+
if (field && !validator(field.value)) {
|
|
262
262
|
return { value: field.value, error: errorMsg, isValid: false };
|
|
263
|
+
} else if (field) {
|
|
264
|
+
return { value: field.value, error: '', isValid: true };
|
|
265
|
+
} else {
|
|
266
|
+
return { value: '', error: '', isValid: true };
|
|
263
267
|
}
|
|
264
|
-
return { value: field.value, error: '', isValid: true };
|
|
265
268
|
};
|
|
266
269
|
|
package/src/helpers/Types.ts
CHANGED
|
@@ -33,8 +33,8 @@ export type MovaUserSignUpForm = {
|
|
|
33
33
|
email: MovaFormField,
|
|
34
34
|
phoneNumber: MovaFormField,
|
|
35
35
|
password: MovaFormField,
|
|
36
|
-
gender
|
|
37
|
-
birthDate
|
|
36
|
+
gender?: MovaFormField,
|
|
37
|
+
birthDate?: MovaFormField,
|
|
38
38
|
acceptsTerms: MovaFormField
|
|
39
39
|
}
|
|
40
40
|
|
package/src/helpers/Validator.ts
CHANGED
|
@@ -36,7 +36,7 @@ const textRegex:RegExp = /^[a-zA-Z0-9\s.,!?'"()+=-_-éèçà]+$/;
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
export function validatePhoneNumber(phoneNumber: string) : boolean {
|
|
39
|
-
if (phoneNumber === null || phoneNumber === undefined) {
|
|
39
|
+
if (phoneNumber === null || phoneNumber === undefined || phoneNumber === '') {
|
|
40
40
|
return false;
|
|
41
41
|
}
|
|
42
42
|
return phoneNumberRegex.test(phoneNumber);
|