@movalib/movalib-commons 1.0.66 → 1.0.68

package/dist/src/services/UserService.js

@@ -0,0 +1,76 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ApiHelper_1 = require("../helpers/ApiHelper");
+var Enums_1 = require("../helpers/Enums");
+var Logger_1 = __importDefault(require("../helpers/Logger"));
+var UserService = /** @class */ (function () {
+    function UserService() {
+    }
+    /**
+     * @param email
+     * @param password
+     * @returns
+     */
+    UserService.getCurrentUser = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, (0, ApiHelper_1.request)({
+                                url: "".concat(ApiHelper_1.API_BASE_URL, "/user/me"),
+                                method: Enums_1.APIMethod.GET
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                    case 2:
+                        error_1 = _a.sent();
+                        Logger_1.default.error('Error occurred during getting user:', error_1);
+                        return [2 /*return*/, Promise.reject(error_1)];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return UserService;
+}());
+exports.default = UserService;

package/index.ts

@@ -30,11 +30,13 @@ export { default as Event } from './src/models/Event';
 export { default as VehicleTire } from './src/models/VehicleTire';
 
 // Export des types
+export type { APIRequest, APIResponse } from './src/helpers/ApiHelper';
 export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm, MovaInterval, OriginReference,
     MovaVehicleForm } from './src/helpers/Types';
 
 // Export des méthodes utilitaires
-export { validateField, formatVehicleTire, formatFrenchVehiclePlate } from './src/helpers/Tools'; 
+export { readCookie, deleteCookie } from './src/helpers/CookieUtils'; 
+export { validateField, formatVehicleTire, formatFrenchVehiclePlate, isEmpty } from './src/helpers/Tools'; 
 export { validatePhoneNumber, validateText, validateEmail } from './src/helpers/Validator';
 export { formatDateByCountryCode, getLongFormattedDateTime, capitalizeFirstLetter } from './src/helpers/DateUtils';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,19 +21,20 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.134",
     "@mui/material": "^5.13.5",
+    "@mui/x-date-pickers": "^6.9.1",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
-    "file-loader": "^6.2.0",
-    "@types/node": "^16.18.53",
     "@types/react-router-dom": "^5.3.0",
+    "date-fns": "^2.29.3",
+    "date-fns-tz": "^2.0.0",
+    "file-loader": "^6.2.0",
+    "js-cookie": "^3.0.5",
+    "qr-code-styling": "^1.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
-    "qr-code-styling": "^1.4.4",
-    "typescript": "^4.9.5",
-    "date-fns": "^2.29.3",
-    "date-fns-tz": "^2.0.0"
+    "typescript": "^4.9.5"
   },
   "eslintConfig": {
     "extends": [
@@ -41,6 +42,7 @@
     ]
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.4",
     "html-webpack-plugin": "^5.5.3",
     "ts-loader": "^9.4.4",
     "webpack-cli": "^5.1.4"

package/public/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Movalib Commons App</title>
+  <title>Movalib Commons</title>
 </head>
 <body>
   <div id="root"></div>

package/src/MovaLogin.tsx

@@ -5,13 +5,16 @@ import LogoProLarge from './assets/images/logo/logo_pro_large.png';
 import GreenLeafImage from "./assets/images/leaf_green_large.png";
 import PinkLeafImage from "./assets/images/leaf_pink_large.png";
 import { Alert, AlertColor, Box, Button, Checkbox, Container, CssBaseline, Dialog, DialogActions, DialogContent, DialogContentText, 
-    DialogTitle, FormControlLabel, Grid, Link, TextField } from "@mui/material";
+    DialogTitle, FormControlLabel, Grid, IconButton, Link, TextField } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaLoginForm, MovaFormField } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
 import { validateEmail } from "./helpers/Validator";
 import { validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -54,6 +57,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
     const [message, setMessage] = useState<string>("");
     const history = useHistory();
     const [openForgotPassword, setOpenForgotPassword] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
         const fieldName: string = e.target.name;
@@ -99,7 +103,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
     const getMovaLogo = () => {
 
         return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
-            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
@@ -126,6 +130,9 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
         }
     }
 
+    const handleClickShowPassword = () => {
+      setShowPassword((prev) => !prev);
+    };
 
     /**
      * Boite de diaogue pour la perte du mot de passe
@@ -219,13 +226,25 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                         fullWidth
                         name="password"
                         label="Mot de passe"
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         id="password"
                         autoComplete="current-password"
                         onChange={e => handleInputChange(e)}
                         value={form.password.value}
                         error={!form.password.isValid}
-                        helperText={form.password.error}                    
+                        helperText={form.password.error}  
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={handleClickShowPassword}
+                                >
+                                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}                  
                     />
                     <FormControlLabel control={<Checkbox value="remember" color="primary" />}
                         label="Se souvenir de moi"
@@ -248,7 +267,7 @@ const MovaLogin: FunctionComponent<MovaLoginProps> = ({ loading, movaAppType, on
                                 Mot de passe oublié ?
                             </Link>
                         </Grid>
-                        {movaAppType === MovaAppType.USER && <Grid item>
+                        {movaAppType === MovaAppType.INDIVIDUAL && <Grid item>
                             <Link variant="body2" color="text.secondary" onClick={(e) => handleOnClickSignUp(e)}>
                             Créer mon compte
                             </Link>

package/src/MovaSignUp.tsx

@@ -1,10 +1,12 @@
 import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
 import { LoadingButton } from '@mui/lab';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import LogoLarge from './assets/images/logo/logo_large.png';
 import LogoProLarge from './assets/images/logo/logo_pro_large.png';
 import GreenLeafImage from "./assets/images/leaf_green_large.png";
 import PinkLeafImage from "./assets/images/leaf_pink_large.png";
-import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControl, FormControlLabel, FormHelperText, Grid, Link, SelectChangeEvent, TextField, Typography } from "@mui/material";
+import { Alert, AlertColor, Box, Checkbox, Container, CssBaseline, FormControl, FormControlLabel, FormHelperText, Grid, 
+    IconButton, Link, SelectChangeEvent, TextField, Typography, TextFieldProps } from "@mui/material";
 import MovaCopyright from "./MovaCopyright";
 import { MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
 import { MovaAppType } from "./helpers/Enums";
@@ -12,6 +14,10 @@ import { validateEmail } from "./helpers/Validator";
 import GenderSelector from "./GenderSelector";
 import { validateField } from "./helpers/Tools";
 import { useHistory } from "react-router-dom";
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import isValid from 'date-fns/isValid';
 
 // Permet de centrer le contenu de l'application
 const styles: CSSProperties = {
@@ -26,14 +32,14 @@ const initialUserFormState = {
     email: { value: '', isValid: true },
     password: { value: '', isValid: true },
     gender:  { value: '', isValid: true },
-    birthDate:  { value: '', isValid: true },
+    birthDate:  { value: null, isValid: true },
     acceptsTerms:  { value: false, isValid: true },
 };
 
 /**
  * Propriétés du composant
  * movaAppType : type d'application Movalib au sein de laquelle le composant est injectée
- * onSubmit : callbakc invoquée en cas de formulaire valide
+ * onSubmit : callback invoquée en cas de formulaire valide
  * alertMessage : éventuel message à afficher
  * alertSeverity : niveau d'alerte pour le message à afficher
  * loading : permet de mettre éventuellement le bouton de soumission en état de chargement
@@ -55,14 +61,27 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
     const history = useHistory();
     const [message, setMessage] = useState<string>("");
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleDateChange = (name: string, date: Date | null) => {
+        console.log(date)
+        if(name && date){
+            const fieldName: string = name;
+            const fieldValue: Date = date;
+            const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+    
+            setUserForm({ ...userForm, ...newField});
+        }
+    }
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
-
-        const fieldName: string = e.target.name;
-        const fieldValue: string = e.target.value;
-        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
-
-        setUserForm({ ...userForm, ...newField});
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | null): void => {
+        if(e){
+            const fieldName: string = e.target.name;
+            const fieldValue: string = e.target.value;
+            const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+    
+            setUserForm({ ...userForm, ...newField});
+        }
     }
 
     const handleCheckboxChange = (e: SelectChangeEvent<string>, checked: boolean): void => {
@@ -104,7 +123,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
         newForm.email = validateField(userForm.email, value => !!value, 'Champ obligatoire');
         newForm.password = validateField(userForm.password, value => !!value, 'Champ obligatoire');
         newForm.gender = validateField(userForm.gender, value => !!value, 'Champ obligatoire');
-        newForm.birthDate = validateField(userForm.birthDate, value => !!value, 'Champ obligatoire');
+        newForm.birthDate = validateField(userForm.birthDate, value => !!value && isValid(value), 'Champ obligatoire');
 
         // Validator pour l'email
         newForm.email = validateField(userForm.email, validateEmail, 'Adresse email invalide');
@@ -126,7 +145,7 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
     const getMovaLogo = () => {
 
         return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
-            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.INDIVIDUAL ? LogoLarge : 
             movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
     }
 
@@ -138,6 +157,10 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
         }
     }
 
+    const handleClickShowPassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+
     return (
         <div style={styles}>
             <img src={GreenLeafImage} style={{position: 'fixed', 
@@ -211,18 +234,30 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         fullWidth
                         name="password"
                         label="Mot de passe"
-                        type="password"
+                        type={showPassword ? 'text' : 'password'}
                         id="password"
                         autoComplete="current-password"
                         onChange={e => handleInputChange(e)}
                         value={userForm.password.value}
                         error={!userForm.password.isValid}
-                        helperText={Boolean(userForm.password.error) ? userForm.password.error : "8 caractères minimum"}                    
+                        helperText={Boolean(userForm.password.error) ? userForm.password.error : "10 caractères minimum, 1 majuscule, 1 minuscule"}
+                        InputProps={{
+                            endAdornment: (
+                              <InputAdornment position="end">
+                                <IconButton
+                                  edge="end"
+                                  onClick={handleClickShowPassword}
+                                >
+                                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                              </InputAdornment>
+                            ),
+                          }}   
                     />
 
                     <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required sx={{ width:'40%', mr: 2}} />
 
-                    <TextField 
+                    {/* <TextField 
                         margin="normal"
                         required
                         name="birthDate"
@@ -237,7 +272,28 @@ const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, o
                         helperText={userForm.birthDate.error}        
                         onChange={(e) => handleInputChange(e)}
                         sx={{ width:'50%', float: 'right'}} 
+                    /> */}
+
+                    <DatePicker
+                        label="Date de naissance"
+                        value={userForm.birthDate.value}
+                        format='dd / MM / yyyy'
+                        formatDensity='dense'
+                        //views={['day']}
+                        displayWeekNumber
+                        onChange={(newValue) => handleDateChange('birthDate', newValue)}
+                        slotProps={{
+                            textField: {
+                                required: true,
+                                error:!userForm.birthDate.isValid,
+                                sx: {
+                                    width:'50%', mt: 2, float: 'right',
+                                    padding: 0,
+                                },
+                            },
+                        }}
                     />
+                    
                     <FormControl error={!userForm.acceptsTerms.isValid}>
                         <FormControlLabel
                             control={

package/src/QRCode.css

@@ -0,0 +1,4 @@
+.qr-code canvas {
+    max-width: 300px !important;
+    width: 100%;
+}

package/src/QRCode.tsx

@@ -12,6 +12,7 @@ import QRCodeStyling, {
   Extension,
   Options
 } from "qr-code-styling";
+import './QRCode.css';
 
 
 interface QRCodeProps {
@@ -19,18 +20,14 @@ interface QRCodeProps {
   showDownload?:boolean
 }
 
-
 const styles = {
     inputWrapper: {
       margin: "20px 0",
       display: "flex",
       alignItems: 'center',
       justifyContent: "center",
-      width: '100%'
-    },
-    inputBox: {
-      flexGrow: 1,
-      marginRight: 20
+      width: '300px',
+      height: '300px'
     }
   };
   
@@ -42,9 +39,9 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
   const defaultData:string = 'https://movalib.com';
 
   const [options, setOptions] = useState<Options>({
-    width: 300,
-    height: 300,
-    type: 'svg' as DrawType,
+    width: 600,
+    height: 600,
+    type: 'canvas' as DrawType,
     data: data ?? defaultData,
     image: QRCodeImage,
     margin: 10,
@@ -56,8 +53,7 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
     imageOptions: {
       hideBackgroundDots: true,
       imageSize: 0.4,
-      margin: 15,
-      crossOrigin: 'anonymous',
+      margin: 15
     },
     dotsOptions: {
       color: darken(theme.palette.primary.main, 0.3),
@@ -126,8 +122,11 @@ const QRCode: FC<QRCodeProps> = ({ data, showDownload=false }) => {
   };
 
   return (
-    <Box>
-      <div ref={ref} style={styles.inputWrapper} />
+    <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center' }} >
+      <div ref={ref} style={styles.inputWrapper} className='qr-code' />
 {/*         <select onChange={onExtensionChange} value={fileExt}>
           <option value="svg">SVG</option>
           <option value="png">PNG</option>