@movalib/movalib-commons 1.1.6 → 1.1.8

package/PV_README.md

@@ -21,7 +21,3 @@ Pour lier la librairie aux projets qui l'utilise, executer la commande suivnte
 Les commandes exécutées (ci-dessous) permettent de contourner un problème de double référence vers react et react-dom lorsque les deux appli utilisent des Hook
 
   "link": "npm link --only=production && npm link \"/home/dimitri/Projets/5 - MOVALIB/02 - Développement/Front-End/movalib-user-app/node_modules/react\" && npm link \"/home/dimitri/Projets/5 - MOVALIB/02 - Développement/Front-End/movalib-user-app/node_modules/react-dom\"",
-
-
-gsutil setmeta -h "Cache-Control:no-cache, must-revalidate" gs://app.movalib.com/*
-gsutil setmeta -h "Cache-Control:no-cache, must-revalidate" gs://pro.movalib.com/*

package/devIndex.tsx

@@ -1,10 +1,10 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { CSSProperties, Fragment, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 // Import des composants de la bibliothèque
 import MovaLogin from './src/MovaLogin';
 import { MovaLoginForm } from './src/helpers/Types';
 import { MovaAppType } from './src/helpers/Enums';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, darken } from '@mui/material/styles';
 import theme from './theme'; // Import du thème personnalisé
 import MovaSignUp from './src/MovaSignUp';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -12,7 +12,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import DatePicker from '@mui/lab/DatePicker';
 import frLocale from 'date-fns/locale/fr';
 import QRCode from './src/QRCode';
-import { Box } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import GarageService from './src/services/GarageService';
 import AuthenticationService from './src/services/AuthenticationService';
 import Logger from './src/helpers/Logger';
@@ -20,6 +20,7 @@ import Garage from './src/models/Garage';
 import ScheduleFields, { DaySchedule } from './src/ScheduleFields';
 import Schedule from './src/models/Schedule';
 import { flexCenter } from './src/helpers/Tools';
+import AccountValidation from './src/AccountValidation';
 
 const App = () => {
 
@@ -27,6 +28,7 @@ const App = () => {
 
   // Chargement de données garage de test
   const [garage, setGarage] = useState<Garage>();
+  const [openAccountValidation, setOpenAccountValidation] = useState<Boolean>(false);
 
   useEffect(() => {
     refreshGarageData();
@@ -67,7 +69,6 @@ const App = () => {
 
   const getQRCodeData = ():string => {
     // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
-    return 'https://www.instagram.com/delightnord/';
     return `https://localhost:3001/#/garage/1?redirect=garage`;
   }
 
@@ -99,7 +100,6 @@ const App = () => {
       }
   }
 
-
   return (
     <div>
       <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={frLocale}>
@@ -133,6 +133,19 @@ const App = () => {
 
 
           </Box>
+
+          <Box style={flexCenter}>
+            <Button onClick={() => setOpenAccountValidation(!openAccountValidation)}>
+              Validation de compte
+            </Button>
+          </Box>
+
+
+          {openAccountValidation && <AccountValidation movaAppType={MovaAppType.GARAGE}
+            onSubmit={function (success: boolean, message: string): void {
+              throw new Error('Function not implemented.');
+            } } /> }
+
         </ThemeProvider>
       </LocalizationProvider>
     </div>

package/dist/devIndex.js

@@ -57,10 +57,12 @@ var Logger_1 = __importDefault(require("./src/helpers/Logger"));
 var ScheduleFields_1 = __importDefault(require("./src/ScheduleFields"));
 var Schedule_1 = __importDefault(require("./src/models/Schedule"));
 var Tools_1 = require("./src/helpers/Tools");
+var AccountValidation_1 = __importDefault(require("./src/AccountValidation"));
 var App = function () {
     Logger_1.default.enableLogging();
     // Chargement de données garage de test
     var _a = (0, react_1.useState)(), garage = _a[0], setGarage = _a[1];
+    var _b = (0, react_1.useState)(false), openAccountValidation = _b[0], setOpenAccountValidation = _b[1];
     (0, react_1.useEffect)(function () {
         refreshGarageData();
     }, []);
@@ -93,7 +95,6 @@ var App = function () {
     };
     var getQRCodeData = function () {
         // On renvoie les données pour le QR Code, l'url change selon l'environnement (variables d'environnement)
-        return 'https://www.instagram.com/delightnord/';
         return "https://localhost:3001/#/garage/1?redirect=garage";
     };
     var handleScheduleChange = function (schedule) {
@@ -117,13 +118,15 @@ var App = function () {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsx)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(MovaLogin_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
-                                alert('Form Submitted !');
-                            }, onSubmitForgotPassword: function (email) {
-                                throw new Error('Function not implemented.');
-                            } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
-                                alert('Form Submitted !');
-                            } }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })) })) })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(LocalizationProvider_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: fr_1.default }, { children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, __assign({ theme: theme_1.default }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: { mb: 4 } }, { children: [(0, jsx_runtime_1.jsx)(MovaLogin_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, version: "0.1.3", onSubmit: function (form) {
+                                    alert('Form Submitted !');
+                                }, onSubmitForgotPassword: function (email) {
+                                    throw new Error('Function not implemented.');
+                                } }), (0, jsx_runtime_1.jsx)(MovaSignUp_1.default, { movaAppType: Enums_1.MovaAppType.INDIVIDUAL, onSubmit: function (form) {
+                                    alert('Form Submitted !');
+                                } }), (0, jsx_runtime_1.jsx)(QRCode_1.default, { data: getQRCodeData(), showDownload: true }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '40px' } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(ScheduleFields_1.default, { schedules: garage === null || garage === void 0 ? void 0 : garage.schedules, size: "small", timePickerStep: 30, onChange: handleScheduleChange }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Box, __assign({ style: Tools_1.flexCenter }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, __assign({ onClick: function () { return setOpenAccountValidation(!openAccountValidation); } }, { children: "Validation de compte" })) })), openAccountValidation && (0, jsx_runtime_1.jsx)(AccountValidation_1.default, { movaAppType: Enums_1.MovaAppType.GARAGE, onSubmit: function (success, message) {
+                            throw new Error('Function not implemented.');
+                        } })] })) })) }));
 };
 var root = (0, client_1.createRoot)(document.getElementById('root'));
 root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(App, {}) }));

package/dist/src/AccountValidation.js

@@ -27,6 +27,8 @@ var lab_1 = require("@mui/lab");
 var Enums_1 = require("./helpers/Enums");
 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 initialFormState = {
     password: { value: '', isValid: true },
     confirmation: { value: '', isValid: true },
@@ -44,7 +46,9 @@ var AccountValidation = function (_a) {
     (0, react_1.useEffect)(function () {
         var params = new URLSearchParams(location.search);
         var token = params.get('token');
-        // Si cette variable est transmise, ecla signifie que le compte a été créé sans mot de passe
+        // 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) {
@@ -116,13 +120,22 @@ var AccountValidation = function (_a) {
         return {
             color: (0, material_1.darken)(theme.palette.secondary.main, 0.4),
             fontFamily: 'Dancing Script, cursive',
-            fontSize: 40
+            fontSize: 30
         };
     };
+    var getMovaLogo = function () {
+        return movaAppType === Enums_1.MovaAppType.GARAGE ? logo_pro_large_png_1.default :
+            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;
+    };
     return ((0, jsx_runtime_1.jsxs)("div", { children: [emptyPwd &&
-                (0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', title: movaAppType === Enums_1.MovaAppType.GARAGE ? "Bienvenue sur Movalib PRO !" : "Bienvenue sur Movalib !", titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd, closable: false, onClose: function () {
+                (0, jsx_runtime_1.jsx)(MovaDialog_1.default, __assign({ leafImageColor: 'pink', titleStyle: getTitleStyle(), fullScreen: isMobile, open: emptyPwd, closable: false, onClose: function () {
                         throw new Error('Function not implemented.');
-                    }, actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ type: "submit", onClick: handleValidateAccount, fullWidth: true, variant: "contained", sx: { mt: 4, mb: 0 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Valider mon compte" }) })) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(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.GARAGE ?
+                    }, actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, __assign({ type: "submit", onClick: handleValidateAccount, fullWidth: true, variant: "contained", sx: { mt: 4, mb: 0 } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Activer mon compte" }) })) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, __assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, __assign({ sx: {
+                                        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 ?
                                         "Pour commencer, définis ton mot de passe et active ton compte 😉"
                                         :
                                             "Pour commencer, définissez votre mot de passe et activez votre compte 😉" })) })), (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: {

package/dist/src/MovaDialog.js

@@ -60,6 +60,6 @@ var MovaDialog = function (_a) {
                     zIndex: 0,
                     left: 0,
                     opacity: '0.2'
-                }, alt: 'Feuille Movalib' }), (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, {}) })), title && (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 }))] })));
+                }, 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 }))] })));
 };
 exports.default = MovaDialog;

package/package.json

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

@@ -12,6 +12,9 @@ import { MovaFormField, MovaPasswordForm } 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';
+
 const initialFormState = {
     password: { value: '', isValid: true },
     confirmation: { value: '', isValid: true },
@@ -33,12 +36,14 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
     const [showPassword, setShowPassword] = useState(false);
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-    useEffect(() => {
+     useEffect(() => {
         
         const params = new URLSearchParams(location.search);
         const token = params.get('token');
 
-        // Si cette variable est transmise, ecla signifie que le compte a été créé sans mot de passe
+        // 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);
 
@@ -133,16 +138,22 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
           return {
             color:darken(theme.palette.secondary.main, 0.4),
             fontFamily: 'Dancing Script, cursive',
-            fontSize: 40
+            fontSize: 30
           }
       }
 
+      const getMovaLogo = () => {
+
+        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
+            movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+    }
+
     return (
         <div>
             {emptyPwd && 
                 <MovaDialog 
                     leafImageColor='pink'
-                    title={movaAppType === MovaAppType.GARAGE ? "Bienvenue sur Movalib PRO !" : "Bienvenue sur Movalib !" }
                     titleStyle={getTitleStyle()}
                     fullScreen={isMobile} 
                     open={emptyPwd} 
@@ -157,13 +168,25 @@ const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppT
                         fullWidth
                         variant="contained"
                         sx={{ mt: 4, mb: 0 }}>
-                        <span>Valider mon compte</span>
+                        <span>Activer mon compte</span>
                     </LoadingButton>
                 }>
                     <Grid container>
+                        <Grid item xs={12}>
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                            }}
+                            >
+                            <img src={getMovaLogo()} style={{width:'50%'}}/>
+                            <br />
+                        </Box>
+                        </Grid>
                         <Grid item xs={12}>
                             <Typography sx={{ mt: 2, mb: 2 }}>
-                                {movaAppType === MovaAppType.GARAGE ?
+                                {movaAppType === 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 😉"

package/src/MovaDialog.tsx

@@ -86,23 +86,24 @@ const MovaDialog: FC<MovaDialogProps> = ({fullScreen, open, onClose, closable =
                 left: 0,
                 opacity: '0.2'}} alt='Feuille Movalib'></img>   
 
-            <DialogTitle id="garage-dialog-title" sx={{ textAlign:'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 }} >
-                <AppBar sx={{ position: 'relative' }} color="transparent" elevation={0}>
-                    <Toolbar>
-                        {closable && <IconButton
-                            edge="start"
-                            color="inherit"
-                            onClick={handleOnBack}
-                            aria-label="close"
-                        >
-                            <BackIcon />
-                        </IconButton>}
-                        {title && <Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }} style={titleStyle}>
-                            {title}
-                        </Typography>}
-                    </Toolbar>
-                </AppBar>
-            </DialogTitle>
+            {title && <DialogTitle id="garage-dialog-title" sx={{ textAlign:'center', p: 0, pt: 1, mt: 0, mb: 0, zIndex: 10 }} >
+                        <AppBar sx={{ position: 'relative' }} color="transparent" elevation={0}>
+                            <Toolbar>
+                                {closable && <IconButton
+                                    edge="start"
+                                    color="inherit"
+                                    onClick={handleOnBack}
+                                    aria-label="close"
+                                >
+                                    <BackIcon />
+                                </IconButton>}
+                                <Typography sx={{ textAlign:'center', fontSize: 20, flexGrow: 1, pl: '20px', pr: '40px' }} style={titleStyle}>
+                                    {title}
+                                </Typography>
+                            </Toolbar>
+                        </AppBar>
+                    </DialogTitle>
+            }
             <DialogContent sx={{ zIndex: 20}}>
                 {children}
                 {message && <Alert severity="error" sx={{ mb: 2 }}>{message}</Alert>}