@movalib/movalib-commons 1.2.0 → 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.
Files changed (4) hide show
  1. package/dist/src/MovaSignUp.d.ts +5 -0
  2. package/dist/src/MovaSignUp.js +10 -10
  3. package/package.json +1 -1
  4. package/src/MovaSignUp.tsx +16 -10
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
@@ -93,14 +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 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;
97
- var _c = (0, react_1.useState)(initialUserFormState), userForm = _c[0], setUserForm = _c[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];
98
98
  var history = (0, react_router_dom_1.useHistory)();
99
- var _d = (0, react_1.useState)(""), message = _d[0], setMessage = _d[1];
99
+ var _j = (0, react_1.useState)(""), message = _j[0], setMessage = _j[1];
100
100
  var theme = (0, material_1.useTheme)();
101
- var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
102
- var _f = (0, react_1.useState)(false), openEmailInfo = _f[0], setOpenEmailInfo = _f[1];
103
- var _g = (0, react_1.useState)(false), openPhoneNumberInfo = _g[0], setOpenPhoneNumberInfo = _g[1];
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];
104
104
  var handleDateChange = function (name, date) {
105
105
  var _a;
106
106
  if (name && date) {
@@ -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
  }
@@ -243,7 +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.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" }) })), (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',
247
247
  float: 'right',
248
248
  width: '250px',
249
249
  height: '400px',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@movalib/movalib-commons",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
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",
package/src/MovaSignUp.tsx CHANGED
@@ -60,13 +60,19 @@ interface MovaSignUpProps {
60
60
  alertSeverity?: AlertColor,
61
61
  loading?: boolean,
62
62
  headerText?: ReactNode
63
+ showHeaderLogo?: boolean,
64
+ showLeafs?: boolean,
65
+ showCopyright?: boolean,
66
+ showLoginButton?: boolean,
67
+ disableGutters?: boolean
63
68
  }
64
69
 
65
70
  /**
66
71
  * Formulaire de création d'un compte Movalib (Garage / Utilisateur)
67
72
  * ATTENTION : le lien de consultation des CGU doit pointer vers "/terms-and-conditions"
68
73
  */
69
- 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}) => {
70
76
 
71
77
  const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
72
78
  const history = useHistory();
@@ -208,16 +214,16 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
208
214
 
209
215
  return (
210
216
  <div style={styles}>
211
- <img src={GreenLeafImage} style={{position: 'fixed',
217
+ {showLeafs && <img src={GreenLeafImage} style={{position: 'fixed',
212
218
  float:'left',
213
219
  width: '250px',
214
220
  height: '400px',
215
221
  top: '-20%',
216
222
  left: '0%',
217
223
  opacity: '0.3',
218
- zIndex: -8}} alt='Feuille Verte Movalib'></img>
224
+ zIndex: -8}} alt='Feuille Verte Movalib'></img>}
219
225
 
220
- <Container component="main" maxWidth="sm">
226
+ <Container component="main" maxWidth="sm" disableGutters={disableGutters}>
221
227
  <CssBaseline />
222
228
  <Box
223
229
  sx={{
@@ -227,7 +233,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
227
233
  alignItems: 'center',
228
234
  }}
229
235
  >
230
- <img src={getMovaLogo()} style={{width:'60%'}}/>
236
+ {showHeaderLogo && <img src={getMovaLogo()} style={{width:'60%'}}/>}
231
237
  {headerText && <Typography variant="button" sx={{ pt: 3, width:'100%' }}>{headerText}</Typography>}
232
238
  </Box>
233
239
 
@@ -424,26 +430,26 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
424
430
  <span>Créer mon compte</span>
425
431
  </LoadingButton>
426
432
 
427
- <Grid container>
433
+ {showLoginButton && <Grid container>
428
434
  <Grid item xs>
429
435
  <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickLogin(e)} sx={{ cursor:'pointer' }}>
430
436
  Se connecter
431
437
  </Link>
432
438
  </Grid>
433
- </Grid>
439
+ </Grid>}
434
440
 
435
441
  </Box>
436
- <MovaCopyright sx={{ mt: 8, mb: 4 }} />
442
+ {showCopyright && <MovaCopyright sx={{ mt: 8, mb: 4 }} />}
437
443
  </Container>
438
444
 
439
- <img src={PinkLeafImage} style={{position: 'fixed',
445
+ {showLeafs && <img src={PinkLeafImage} style={{position: 'fixed',
440
446
  float:'right',
441
447
  width: '250px',
442
448
  height: '400px',
443
449
  bottom: '-20%',
444
450
  right: '0%',
445
451
  opacity: '0.3',
446
- zIndex: '-10'}} alt='Feuille Rose Movalib'></img>
452
+ zIndex: '-10'}} alt='Feuille Rose Movalib'></img>}
447
453
  </div>
448
454
  );
449
455
  };