@movalib/movalib-commons 1.1.34 → 1.1.35

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.
Files changed (5) hide show
  1. package/dist/src/MovaSignUp.js +19 -6
  2. package/dist/src/helpers/Types.d.ts +1 -0
  3. package/package.json +3 -1
  4. package/src/MovaSignUp.tsx +32 -4
  5. package/src/helpers/Types.ts +1 -0
package/dist/src/MovaSignUp.js CHANGED
@@ -81,6 +81,7 @@ var initialUserFormState = {
81
81
  firstname: { value: '', isValid: true },
82
82
  lastname: { value: '', isValid: true },
83
83
  email: { value: '', isValid: true },
84
+ phoneNumber: { value: '', isValid: true },
84
85
  password: { value: '', isValid: true },
85
86
  gender: { value: '', isValid: true },
86
87
  birthDate: { value: null, isValid: true },
@@ -91,12 +92,13 @@ var initialUserFormState = {
91
92
  * ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
92
93
  */
93
94
  var MovaLogin = function (_a) {
94
- 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;
95
- var _c = (0, react_1.useState)(initialUserFormState), userForm = _c[0], setUserForm = _c[1];
95
+ var _b, _c, _d;
96
+ 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;
97
+ var _f = (0, react_1.useState)(initialUserFormState), userForm = _f[0], setUserForm = _f[1];
96
98
  var history = (0, react_router_dom_1.useHistory)();
97
- var _d = (0, react_1.useState)(""), message = _d[0], setMessage = _d[1];
99
+ var _g = (0, react_1.useState)(""), message = _g[0], setMessage = _g[1];
98
100
  var theme = (0, material_1.useTheme)();
99
- var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
101
+ var _h = (0, react_1.useState)(false), showPassword = _h[0], setShowPassword = _h[1];
100
102
  var handleDateChange = function (name, date) {
101
103
  var _a;
102
104
  if (name && date) {
@@ -111,6 +113,14 @@ var MovaLogin = function (_a) {
111
113
  if (e) {
112
114
  var fieldName = e.target.name;
113
115
  var fieldValue = e.target.value;
116
+ // On autorise uniquement les chiffre pour le n° de téléphone
117
+ if (fieldName == "phoneNumber") {
118
+ fieldValue = fieldValue.replace(/[^0-9]/g, '');
119
+ // Limiter la longueur à 10 caractères
120
+ if (fieldValue.length > 10) {
121
+ fieldValue = fieldValue.substring(0, 10);
122
+ }
123
+ }
114
124
  // Capitalisation automatique du prénom
115
125
  if (fieldName == "firstname") {
116
126
  fieldValue = (0, Tools_1.capitalizeFirstLetter)(fieldValue);
@@ -161,15 +171,18 @@ var MovaLogin = function (_a) {
161
171
  newForm.password = (0, Tools_1.validateField)(userForm.password, function (value) { return !!value; }, 'Champ obligatoire');
162
172
  newForm.gender = (0, Tools_1.validateField)(userForm.gender, function (value) { return !!value; }, 'Champ obligatoire');
163
173
  newForm.birthDate = (0, Tools_1.validateField)(userForm.birthDate, function (value) { return !!value && (0, isValid_1.default)(value); }, 'Champ obligatoire');
174
+ newForm.phoneNumber = (0, Tools_1.validateField)(userForm.phoneNumber, function (value) { return !!value; }, 'Champ obligatoire');
164
175
  // Validator pour l'email
165
176
  newForm.email = (0, Tools_1.validateField)(userForm.email, Validator_1.validateEmail, 'Adresse email invalide');
166
177
  // Validator pour le mot de passe
167
178
  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');
179
+ // Validator 'phoneNumber'
180
+ newForm.phoneNumber = (0, Tools_1.validateField)(userForm.phoneNumber, Validator_1.validatePhoneNumber, "Le n° de téléphone est invalide.");
168
181
  // Validator pour les CGU
169
182
  newForm.acceptsTerms = (0, Tools_1.validateField)(userForm.acceptsTerms, function (value) { return Boolean(value); }, 'Vous devez accepter les termes de nos CGU');
170
183
  setUserForm(newForm);
171
184
  return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid && newForm.password.isValid
172
- && newForm.gender.isValid && newForm.birthDate.isValid && newForm.acceptsTerms.isValid;
185
+ && newForm.gender.isValid && newForm.birthDate.isValid && newForm.acceptsTerms.isValid && newForm.phoneNumber.isValid;
173
186
  };
174
187
  var getMovaLogo = function () {
175
188
  if (darkMode) {
@@ -213,7 +226,7 @@ var MovaLogin = function (_a) {
213
226
  '& .MuiOutlinedInput-notchedOutline': {
214
227
  borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
215
228
  }
216
- } }), (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: {
229
+ } }), (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: {
217
230
  '& .MuiOutlinedInput-notchedOutline': {
218
231
  borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
219
232
  }
package/dist/src/helpers/Types.d.ts CHANGED
@@ -24,6 +24,7 @@ export type MovaUserSignUpForm = {
24
24
  firstname: MovaFormField;
25
25
  lastname: MovaFormField;
26
26
  email: MovaFormField;
27
+ phoneNumber: MovaFormField;
27
28
  password: MovaFormField;
28
29
  gender: MovaFormField;
29
30
  birthDate: MovaFormField;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@movalib/movalib-commons",
3
- "version": "1.1.34",
3
+ "version": "1.1.35",
4
4
  "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -32,6 +32,7 @@
32
32
  "qr-code-styling": "^1.4.4",
33
33
  "react": "^18.2.0",
34
34
  "react-dom": "^18.2.0",
35
+ "react-input-mask": "^2.0.4",
35
36
  "react-router-dom": "^5.1.2",
36
37
  "react-scripts": "5.0.1",
37
38
  "react-to-print": "^2.14.15",
@@ -44,6 +45,7 @@
44
45
  },
45
46
  "devDependencies": {
46
47
  "@types/js-cookie": "^3.0.4",
48
+ "@types/react-input-mask": "^3.0.5",
47
49
  "html-webpack-plugin": "^5.5.3",
48
50
  "ts-loader": "^9.4.4",
49
51
  "webpack-cli": "^5.1.4"
package/src/MovaSignUp.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
1
+ import { CSSProperties, ChangeEvent, FormEvent, FunctionComponent, useState } from "react";
2
2
  import { LoadingButton } from '@mui/lab';
3
3
  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
4
4
  import LogoLarge from './assets/images/logo/logo_large_border.png';
@@ -12,7 +12,7 @@ import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControl,
12
12
  import MovaCopyright from "./MovaCopyright";
13
13
  import { MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
14
14
  import { MovaAppType } from "./helpers/Enums";
15
- import { validateEmail } from "./helpers/Validator";
15
+ import { validateEmail, validatePhoneNumber } from "./helpers/Validator";
16
16
  import GenderSelector from "./GenderSelector";
17
17
  import { capitalizeFirstLetter, validateField } from "./helpers/Tools";
18
18
  import { useHistory } from "react-router-dom";
@@ -32,6 +32,7 @@ const initialUserFormState = {
32
32
  firstname: { value: '', isValid: true },
33
33
  lastname: { value: '', isValid: true },
34
34
  email: { value: '', isValid: true },
35
+ phoneNumber: { value: '', isValid: true },
35
36
  password: { value: '', isValid: true },
36
37
  gender: { value: '', isValid: true },
37
38
  birthDate: { value: null, isValid: true },
@@ -83,6 +84,15 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
83
84
  const fieldName: string = e.target.name;
84
85
  let fieldValue: string = e.target.value;
85
86
 
87
+ // On autorise uniquement les chiffre pour le n° de téléphone
88
+ if (fieldName == "phoneNumber"){
89
+ fieldValue= fieldValue.replace(/[^0-9]/g, '');
90
+ // Limiter la longueur à 10 caractères
91
+ if (fieldValue.length > 10) {
92
+ fieldValue = fieldValue.substring(0, 10);
93
+ }
94
+ }
95
+
86
96
  // Capitalisation automatique du prénom
87
97
  if (fieldName == "firstname"){
88
98
  fieldValue = capitalizeFirstLetter(fieldValue);
@@ -139,6 +149,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
139
149
  newForm.password = validateField(userForm.password, value => !!value, 'Champ obligatoire');
140
150
  newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
141
151
  newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
152
+ newForm.phoneNumber = validateField(userForm.phoneNumber, value => !!value, 'Champ obligatoire');
142
153
 
143
154
  // Validator pour l'email
144
155
  newForm.email = validateField(userForm.email, validateEmail, 'Adresse email invalide');
@@ -148,13 +159,16 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
148
159
  value => value.length >= 10 && /[a-z]/.test(value) && /[A-Z]/.test(value),
149
160
  'Votre mot de passe doit faire au moins 10 caractères de long, contenir au moins une majuscule et une minuscule');
150
161
 
162
+ // Validator 'phoneNumber'
163
+ newForm.phoneNumber = validateField(userForm.phoneNumber, validatePhoneNumber, "Le n° de téléphone est invalide.");
164
+
151
165
  // Validator pour les CGU
152
166
  newForm.acceptsTerms = validateField(userForm.acceptsTerms, value => Boolean(value), 'Vous devez accepter les termes de nos CGU');
153
167
 
154
168
  setUserForm(newForm);
155
169
 
156
170
  return newForm.firstname.isValid && newForm.lastname.isValid && newForm.email.isValid && newForm.password.isValid
157
- && newForm.gender.isValid && newForm.birthDate.isValid && newForm.acceptsTerms.isValid;
171
+ && newForm.gender.isValid && newForm.birthDate.isValid && newForm.acceptsTerms.isValid && newForm.phoneNumber.isValid;
158
172
  }
159
173
 
160
174
  const getMovaLogo = () => {
@@ -243,7 +257,21 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
243
257
  borderColor: darkMode ? 'white' : 'default', // Couleur de la bordure
244
258
  }
245
259
  }}
246
- />
260
+ />
261
+ <TextField
262
+ type="tel"
263
+ margin="normal"
264
+ required
265
+ fullWidth
266
+ id="phoneNumber"
267
+ label="N° de téléphone"
268
+ name="phoneNumber"
269
+ autoComplete="tel"
270
+ onChange={e => handleInputChange(e)}
271
+ value={userForm.phoneNumber?.value}
272
+ error={Boolean(userForm.phoneNumber?.error)}
273
+ helperText={userForm.phoneNumber?.error}
274
+ />
247
275
  <TextField
248
276
  margin="normal"
249
277
  required
package/src/helpers/Types.ts CHANGED
@@ -29,6 +29,7 @@ export type MovaUserSignUpForm = {
29
29
  firstname: MovaFormField,
30
30
  lastname: MovaFormField,
31
31
  email: MovaFormField,
32
+ phoneNumber: MovaFormField,
32
33
  password: MovaFormField,
33
34
  gender: MovaFormField,
34
35
  birthDate: MovaFormField,