@movalib/movalib-commons 1.0.98 → 1.0.99

package/dist/src/AccountValidation.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { MovaAppType } from './helpers/Enums';
+interface AccountValidationProps {
+    movaAppType: MovaAppType;
+    onSuccess: () => void;
+    onError: () => void;
+}
+declare const AccountValidation: FunctionComponent<AccountValidationProps>;
+export default AccountValidation;

package/dist/src/AccountValidation.js

@@ -0,0 +1,129 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var UserService_1 = __importDefault(require("./services/UserService"));
+var material_1 = require("@mui/material");
+var Logger_1 = __importDefault(require("./helpers/Logger"));
+var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+var Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
+var VisibilityOff_1 = __importDefault(require("@mui/icons-material/VisibilityOff"));
+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 initialFormState = {
+    password: { value: '', isValid: true },
+    confirmation: { value: '', isValid: true },
+};
+var AccountValidation = function (_a) {
+    var movaAppType = _a.movaAppType, onSuccess = _a.onSuccess, onError = _a.onError;
+    var _b = (0, react_1.useState)(true), loading = _b[0], setLoading = _b[1];
+    var _c = (0, react_1.useState)(initialFormState), passwordForm = _c[0], setPasswordForm = _c[1];
+    var location = (0, react_router_dom_1.useLocation)();
+    var history = (0, react_router_dom_1.useHistory)();
+    var theme = (0, material_1.useTheme)();
+    var _d = (0, react_1.useState)(false), emptyPwd = _d[0], setEmptyPwd = _d[1];
+    var _e = (0, react_1.useState)(false), showPassword = _e[0], setShowPassword = _e[1];
+    var isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    (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
+        var localEmptyPwd = Boolean(params.get('emptyPwd'));
+        setEmptyPwd(localEmptyPwd);
+        if (token) {
+            if (!localEmptyPwd) {
+                var req = {
+                    token: token
+                };
+                activateAccount(req);
+            }
+        }
+    }, [location]);
+    var activateAccount = function (req) {
+        if (req) {
+            Logger_1.default.info(req);
+            UserService_1.default.validateAccount(req)
+                .then(function (response) {
+                // Affichage notification utilisateur
+                Logger_1.default.info(response);
+                if (onSuccess) {
+                    onSuccess();
+                }
+            }).catch(function (error) {
+                Logger_1.default.error(error);
+                if (onError) {
+                    onError();
+                }
+            });
+        }
+    };
+    var handleInputChange = function (e) {
+        var _a;
+        if (e) {
+            var fieldName = e.target.name;
+            var fieldValue = e.target.value;
+            var newField = (_a = {}, _a[fieldName] = { value: fieldValue, isValid: true }, _a);
+            setPasswordForm(__assign(__assign({}, passwordForm), newField));
+        }
+    };
+    var validateForm = function () {
+        var newForm = __assign({}, passwordForm);
+        // Validator pour les champs obligatoires
+        newForm.password = (0, Tools_1.validateField)(passwordForm.password, function (value) { return !!value; }, 'Champ obligatoire');
+        newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return !!value; }, 'Champ obligatoire');
+        // Validator pour le mot de passe
+        newForm.password = (0, Tools_1.validateField)(passwordForm.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');
+        // Second validator pour le mot de passe (confirmation)
+        newForm.confirmation = (0, Tools_1.validateField)(passwordForm.confirmation, function (value) { return value === passwordForm.password.value; }, "Les mots de passe doivent être identiques");
+        setPasswordForm(newForm);
+        return newForm.password.isValid && newForm.confirmation.isValid;
+    };
+    var handleValidateAccount = function () {
+        if (validateForm()) {
+            // Demande d'activation du compte avec le token temporaire reçu par email et le mot de passe définit
+            var params = new URLSearchParams(location.search);
+            var req = {
+                token: params.get('token'),
+                password: passwordForm.password.value
+            };
+            activateAccount(req);
+        }
+    };
+    var getTitleStyle = function () {
+        return {
+            color: (0, material_1.darken)(theme.palette.secondary.main, 0.4),
+            fontFamily: 'Dancing Script, cursive',
+            fontSize: 40
+        };
+    };
+    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 ? "Bienvenu sur Movalib PRO !" : "Bienvenue sur Movalib !", 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 ?
+                                        "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: {
+                                        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, {}) })) }))),
+                                    } }) })), (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: "confirmation", label: "Confirmation", type: showPassword ? 'text' : 'password', id: "confirmation", onChange: function (e) { return handleInputChange(e); }, value: passwordForm.confirmation.value, error: !passwordForm.confirmation.isValid, helperText: Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : "", InputProps: {
+                                        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, {}) })) }))),
+                                    } }) }))] })) })), loading &&
+                (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, {}) }))] }));
+};
+exports.default = AccountValidation;

package/dist/src/helpers/Types.d.ts

@@ -1,3 +1,7 @@
+export type MovaPasswordForm = {
+    password: MovaFormField;
+    confirmation: MovaFormField;
+};
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';
 export type MovaVehicleForm = {
     currentMileage: MovaFormField;

package/dist/src/services/UserService.d.ts

@@ -1,6 +1,7 @@
 import { APIResponse } from "../helpers/ApiHelper";
 import User from "../models/User";
 export default class UserService {
+    static validateAccount(req: any): Promise<APIResponse<string>>;
     /**
      * @param email
      * @param password

package/dist/src/services/UserService.js

@@ -45,6 +45,13 @@ var Logger_1 = __importDefault(require("../helpers/Logger"));
 var UserService = /** @class */ (function () {
     function UserService() {
     }
+    UserService.validateAccount = function (req) {
+        return (0, ApiHelper_1.request)({
+            url: "".concat(ApiHelper_1.API_BASE_URL, "/user/validate-account"),
+            method: Enums_1.APIMethod.POST,
+            body: JSON.stringify(req)
+        });
+    };
     /**
      * @param email
      * @param password

package/package.json

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

@@ -0,0 +1,237 @@
+import { CSSProperties, FunctionComponent, useEffect, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import UserService from './services/UserService';
+import { Box, CircularProgress, Grid, IconButton, TextField, Typography, darken, useMediaQuery, useTheme } from '@mui/material';
+import Logger from './helpers/Logger';
+import InputAdornment from '@mui/material/InputAdornment';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { LoadingButton } from '@mui/lab';
+import { MovaAppType } from './helpers/Enums';
+import { MovaFormField, MovaPasswordForm } from './helpers/Types';
+import { validateField } from './helpers/Tools';
+import MovaDialog from './MovaDialog';
+
+const initialFormState = {
+    password: { value: '', isValid: true },
+    confirmation: { value: '', isValid: true },
+}
+
+interface AccountValidationProps {
+    movaAppType: MovaAppType,
+    onSuccess: () => void,
+    onError: () => void,
+}
+
+const AccountValidation: FunctionComponent<AccountValidationProps> = ({ movaAppType, onSuccess, onError }) => {
+
+    const [loading, setLoading] = useState(true);
+    const [passwordForm, setPasswordForm] = useState<MovaPasswordForm>(initialFormState);
+    const location = useLocation();
+    const history = useHistory();
+    const theme = useTheme();
+    const [emptyPwd, setEmptyPwd] = useState<boolean>(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+    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
+        let localEmptyPwd = Boolean(params.get('emptyPwd'));
+        setEmptyPwd(localEmptyPwd);
+
+        if (token) {
+
+            if(!localEmptyPwd){
+
+                let req = {
+                    token: token
+                }
+
+                activateAccount(req);
+            }
+        }
+
+    }, [location]);
+
+    const activateAccount = (req: any) => {
+        if(req){
+
+            Logger.info(req);
+
+            UserService.validateAccount(req)
+            .then(response => {
+
+                // Affichage notification utilisateur
+                Logger.info(response);
+                if(onSuccess){
+                    onSuccess();
+                }
+
+            }).catch(error => {
+                Logger.error(error);
+                if(onError){
+                    onError();
+                }
+            });
+        }
+    }
+
+    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 } };
+    
+            setPasswordForm({ ...passwordForm, ...newField});
+        }
+    }
+
+    const validateForm = () => {
+        let newForm: MovaPasswordForm = { ...passwordForm };
+
+        // Validator pour les champs obligatoires
+        newForm.password = validateField(passwordForm.password, value => !!value, 'Champ obligatoire');
+        newForm.confirmation = validateField(passwordForm.confirmation, value => !!value, 'Champ obligatoire');
+
+        // Validator pour le mot de passe
+        newForm.password = validateField(passwordForm.password, 
+            value => 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');
+
+        // Second validator pour le mot de passe (confirmation)
+        newForm.confirmation = validateField(passwordForm.confirmation, value => value === passwordForm.password.value, 
+            "Les mots de passe doivent être identiques");
+
+            setPasswordForm(newForm);
+
+        return newForm.password.isValid && newForm.confirmation.isValid;
+    }
+
+
+    const handleValidateAccount = () => {
+        if(validateForm()){
+            // Demande d'activation du compte avec le token temporaire reçu par email et le mot de passe définit
+            const params = new URLSearchParams(location.search);
+
+            let req = {
+                token: params.get('token'),
+                password: passwordForm.password.value
+            }
+
+            activateAccount(req);
+        }
+    }
+
+    const getTitleStyle = ():CSSProperties => {
+          return {
+            color:darken(theme.palette.secondary.main, 0.4),
+            fontFamily: 'Dancing Script, cursive',
+            fontSize: 40
+          }
+      }
+
+    return (
+        <div>
+            {emptyPwd && 
+                <MovaDialog 
+                    leafImageColor='pink'
+                    title={movaAppType === MovaAppType.GARAGE ? "Bienvenu sur Movalib PRO !" : "Bienvenue sur Movalib !" }
+                    titleStyle={getTitleStyle()}
+                    fullScreen={isMobile} 
+                    open={emptyPwd} 
+                    closable={false}
+                    onClose={function (): void {
+                    throw new Error('Function not implemented.');
+                }}
+                actions={
+                    <LoadingButton
+                        type="submit"
+                        onClick={handleValidateAccount}
+                        fullWidth
+                        variant="contained"
+                        sx={{ mt: 4, mb: 0 }}>
+                        <span>Valider mon compte</span>
+                    </LoadingButton>
+                }>
+                    <Grid container>
+                        <Grid item xs={12}>
+                            <Typography sx={{ mt: 2, mb: 2 }}>
+                                {movaAppType === MovaAppType.GARAGE ?
+                                "Pour commencer, définis ton mot de passe et active ton compte 😉"
+                                :
+                                "Pour commencer, définissez votre mot de passe et activez votre compte 😉"
+                                }                                
+                            </Typography>
+                        </Grid>
+                        <Grid item xs={12}>
+                            <TextField
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="password"
+                                label="Mot de passe"
+                                type={showPassword ? 'text' : 'password'}
+                                id="password"
+                                autoComplete="current-password"
+                                onChange={e => 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={{
+                                    endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            edge="end"
+                                            onClick={(e) => setShowPassword((prev) => !prev)}
+                                        >
+                                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                    ),
+                                }}   
+                            />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <TextField
+                                margin="normal"
+                                required
+                                fullWidth
+                                name="confirmation"
+                                label="Confirmation"
+                                type={showPassword ? 'text' : 'password'}
+                                id="confirmation"
+                                onChange={e => handleInputChange(e)}
+                                value={passwordForm.confirmation.value}
+                                error={!passwordForm.confirmation.isValid}
+                                helperText={Boolean(passwordForm.confirmation.error) ? passwordForm.confirmation.error : ""}
+                                InputProps={{
+                                    endAdornment: (
+                                    <InputAdornment position="end">
+                                        <IconButton
+                                            edge="end"
+                                            onClick={(e) => setShowPassword((prev) => !prev)}
+                                        >
+                                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                                        </IconButton>
+                                    </InputAdornment>
+                                    ),
+                                }}   
+                            />
+                        </Grid>
+                    </Grid>
+                </MovaDialog>}
+
+            {loading &&
+                <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+                    <CircularProgress />
+                </Box>
+            }
+        </div>
+    );
+};
+
+export default AccountValidation;

package/src/helpers/Types.ts

@@ -1,4 +1,9 @@
 
+export type MovaPasswordForm = {
+    password: MovaFormField,
+    confirmation: MovaFormField
+}
+
 export type AddressFieldName = 'streetName' | 'additional' | 'postalCode' | 'cityName';
 
 export type MovaVehicleForm = {

package/src/services/UserService.ts

@@ -5,6 +5,14 @@ import User from "../models/User";
 
 export default class UserService {
 
+    static validateAccount(req: any): Promise<APIResponse<string>> {
+        return request({
+            url: `${API_BASE_URL}/user/validate-account`,
+            method: APIMethod.POST,
+            body: JSON.stringify(req)
+        });
+    }
+
     /**
      * @param email 
      * @param password