@movalib/movalib-commons 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movalib/movalib-commons",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,11 +15,20 @@
   "license": "ISC",
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-scripts": "5.0.1",
+    "react-dom": "^18.2.0",
+    "@types/node": "^16.18.53",
+    "@types/react": "^18.2.22"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
   "devDependencies": {
     "@mui/material": "^5.13.5",
     "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "typescript": "^4.9.5"

package/src/MovaCopyright.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+import { Link, Typography } from "@mui/material";
+
+function MovaCopyright(props: any) {
+    return (
+        <Typography variant="body2" color="text.secondary" align="center" {...props}>
+            {'Copyright © '}
+            <Link color="inherit" href="https://www.movalib.com">
+                Movalib.com
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+}
+
+export default MovaCopyright;

package/src/MovaLogin.tsx

@@ -0,0 +1,198 @@
+import { CSSProperties, FormEvent, FunctionComponent, useState } from "react";
+import { LoadingButton } from '@mui/lab';
+import LogoLarge from './assets/images/logo/logo_large.png';
+import LogoProLarge from './assets/images/logo/logo_pro_large.png';
+import GreenLeafImage from './assets/images/logo/leaf_green_large.png';
+import PinkLeafImage from './assets/images/logo/leaf_pink_large.png';
+import { Alert, Box, Checkbox, Container, CssBaseline, FormControlLabel, Grid, 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";
+
+// Permet de centrer le contenu de l'application
+const styles: CSSProperties = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh', // Ajustez la hauteur en fonction de vos besoins
+};
+
+const initialFormState = {
+    email: { value: '', isValid: true },
+    password: { value: '', isValid: true },
+};
+
+interface MovaLoginProps {
+    movaAppType: MovaAppType,
+    onSubmit: (form: MovaLoginForm) => void;
+}
+
+const MovaLogin: FunctionComponent<MovaLoginProps> = ({ movaAppType, onSubmit }) => {
+
+    const [form, setForm] = useState<MovaLoginForm>(initialFormState);
+    const [message, setMessage] = useState<string>("");    
+    const [loading, setLoading] = useState(false);
+
+    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 } };
+
+        setForm({ ...form, ...newField});
+    }
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+
+        try {
+            if(validateForm() && onSubmit) {
+                // Si le formulaire est valide, on appel la function callback transmise en props
+                onSubmit(form);
+            }
+
+        }catch (error){
+            console.error('Error occurred during submission:', error);
+        }finally {
+            setLoading(false);
+        }
+    }
+
+    const validateForm = () => {
+        let newForm: MovaLoginForm = form;
+
+        // Validator email
+        if(!validateEmail(form.email.value.length)) {
+            const errorMsg: string = 'Adresse email invalide';
+            const newField: MovaFormField = { value: form.email.value, error: errorMsg, isValid: false };
+            newForm = { ...newForm, ...{ email: newField } };
+        } else {
+            const newField: MovaFormField = { value: form.email.value, error: '', isValid: true };
+            newForm = { ...newForm, ...{ email: newField } };
+        }
+
+        // Validator password
+        if(form.password.value.length < 8) {
+            const errorMsg: string = 'Votre mot de passe doit faire au moins 8 caractères de long.';
+            const newField: MovaFormField = {value: form.password.value, error: errorMsg, isValid: false};
+            newForm = { ...newForm, ...{ password: newField } };
+        } else {
+            const newField: MovaFormField = { value: form.password.value, error: '', isValid: true };
+            newForm = { ...newForm, ...{ password: newField } };
+        }
+
+        setForm(newForm);
+
+        return newForm.email.isValid && newForm.password.isValid;
+    }    
+
+    const getMovaLogo = () => {
+
+        return movaAppType === MovaAppType.GARAGE ? LogoProLarge :
+            movaAppType === MovaAppType.USER ? LogoLarge : 
+            movaAppType === MovaAppType.ADMIN ? LogoLarge : LogoLarge;
+    }
+
+
+    return (
+        <div style={styles}>
+            <img src={GreenLeafImage} style={{position: 'fixed', 
+                float:'left',
+                width: '250px',
+                height: '400px',
+                top: '-20%',
+                left: '3%',
+                opacity: '0.3',
+                zIndex: -8}} alt='Feuille Verte Movalib'></img>
+        
+            <Container component="main" maxWidth="xs">
+                <CssBaseline />
+                <Box
+                    sx={{
+                        marginTop: 6,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                    >
+                    <img src={getMovaLogo()} style={{width:'80%'}}/>
+                    <br />
+                </Box>
+
+                <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="email"
+                        label="Adresse email"
+                        name="email"
+                        autoComplete="email"
+                        autoFocus
+                        onChange={e => handleInputChange(e)}
+                        value={form.email.value}
+                        error={!form.email.isValid}
+                        helperText={form.email.error}
+                    />
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        name="password"
+                        label="Mot de passe"
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        onChange={e => handleInputChange(e)}
+                        value={form.password.value}
+                        error={!form.password.isValid}
+                        helperText={form.password.error}                    
+                    />
+                    <FormControlLabel control={<Checkbox value="remember" color="primary" />}
+                        label="Se souvenir de moi"
+                    />
+                    {/* <MyLoadingButton
+                        type={ButtonType.SUBMIT}
+                        label="Se connecter" /> */}
+                        
+                    <LoadingButton
+                        loading={loading}
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        sx={{ mt: 3, mb: 2 }}>
+                        <span>Se connecter</span>
+                    </LoadingButton>
+                    
+                    {message && <Alert severity="error" sx={{ mb: 2 }}>{message}</Alert>}
+
+                    <Grid container>
+                        <Grid item xs>
+                            <Link href="#" variant="body2" color="text.secondary">
+                                Mot de passe oublié ?
+                            </Link>
+                        </Grid>
+                        <Grid item>
+                            <Link href="#" variant="body2" color="text.secondary">
+                            {"Créer un compte"}
+                            </Link>
+                        </Grid>
+                    </Grid>
+                </Box>
+                <MovaCopyright sx={{ mt: 8, mb: 4 }} />
+            </Container>
+
+            <img src={PinkLeafImage} style={{position: 'fixed', 
+                float:'right',
+                width: '250px',
+                height: '400px',
+                bottom: '-20%',
+                right: '3%',
+                opacity: '0.3',
+                zIndex: '-10'}} alt='Feuille Rose Movalib'></img>
+        </div>
+    );
+};
+
+export default MovaLogin;

package/src/helpers/Enums.ts

@@ -0,0 +1,15 @@
+
+export enum MovaAppType {
+    /**
+    * Application Garagiste
+    */
+    GARAGE = "GARAGE",
+    /**
+    * Application Utilisateur (automobiliste)
+    */
+    USER = "USER",
+    /**
+     * Application Administrateur (MovaTeam)
+     */
+    ADMIN = "ADMIN"
+}

package/src/helpers/Tools.ts

@@ -0,0 +1 @@
+export {}

package/src/helpers/Types.ts

@@ -0,0 +1,11 @@
+
+export type MovaLoginForm = {
+    email: MovaFormField,
+    password: MovaFormField
+}
+
+export type MovaFormField = {
+    value?: any,
+    error?: string,
+    isValid?: boolean
+}

package/src/helpers/Validator.ts

@@ -0,0 +1,57 @@
+/**
+ * Un email valide
+ */
+const emailRegex:RegExp  = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
+
+/**
+ * Un mot de passe qui contient au moins une majuscule, une minuscule, un chiffre 
+ * et un caractère spécial. La longueur du mot de passe doit être d'au moins 8 caractères.
+ */
+const passwordRegex:RegExp  = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
+/**
+ * Un numéro de téléphone (10 chiffres) 
+ */
+const phoneNumberRegex:RegExp  = /^\d{0,10}$/;
+
+/**
+ * Un code postal (5 chiffres)
+ */
+const postalCodeRegex:RegExp  = /^\d{5}$/;
+
+/**
+ * Une URL valide
+ */
+const urlRegex:RegExp =/^(ftp|http|https):\/\/[^ "]+$/;
+
+/**
+ * Un nom pouvant contenir des lettres, chiffres d'une taille comprise entre 3 et 20 caractères
+ */
+const userNameRegex:RegExp = /^[a-z0-9_-]{3,20}$/;
+
+/**
+ * Un texte pouvant contenir des lettres, chiffres et quelques caractères spéciaux
+ */
+const textRegex:RegExp = /^[a-zA-Z0-9\s.,!?'"()+=-_-éèçà]+$/;
+
+
+export function validatePhoneNumber(phoneNumber: string) : boolean {
+    if (phoneNumber === null || phoneNumber === undefined) {
+        return false;
+    }
+    return phoneNumberRegex.test(phoneNumber);
+}
+
+export function validateText(text: string) : boolean {
+    if (text === null || text === undefined) {
+        return false;
+    }
+    return textRegex.test(text);
+}
+
+export function validateEmail(email: string) : boolean {
+    if (email === null || email === undefined) {
+        return false;
+    }
+    return emailRegex.test(email);
+}

package/src/index.ts

@@ -1,2 +1,10 @@
 // src/index.ts
+
 export { default as TestButton } from './TestButton';
+export { default as MovaSnackbar } from './MovaSnackbar';
+export { default as MovaLogin } from './MovaLogin';
+export { default as MovaCopyright } from './MovaCopyright';
+
+// Export des types
+export type { MovaFormField } from './helpers/Types';
+export type { MovaLoginForm } from './helpers/Types';

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/tsconfig.json

@@ -11,8 +11,12 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],                                       /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -25,7 +29,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "esnext",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "node",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -39,12 +43,12 @@
     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
     /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
@@ -57,7 +61,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -74,7 +78,7 @@
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 
     /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
@@ -95,7 +99,7 @@
     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
@@ -106,5 +110,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["src/**/*"]
+  "include": ["src"]
 }

package/dist/MovaSnackbar.d.ts

@@ -1,15 +0,0 @@
-import { FunctionComponent } from 'react';
-interface MovaSnackbarProps {
-    snackbar: {
-        open: boolean;
-        message: string;
-        severity: 'success' | 'info' | 'warning' | 'error' | undefined;
-    };
-    setSnackbar: (snackbar: {
-        open: boolean;
-        message: string;
-        severity: 'success' | 'info' | 'warning' | 'error' | undefined;
-    }) => void;
-}
-declare const MovaSnackbar: FunctionComponent<MovaSnackbarProps>;
-export default MovaSnackbar;

package/dist/MovaSnackbar.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const MovaSnackbar = ({ snackbar, setSnackbar }) => {
-    /**
-     * Gestion de la fermeture de la snackbar. Si la raison de cette fermeture est
-     * un clic en dehors de la zone de contenu on intercepte et annule la fermeture 'clickaway'.
-     * @param event Evénnement de fermeture
-     * @param reason Origine de l'événnement de fermeture
-     * @returns
-     */
-    const handleClose = (event, reason) => {
-        if (reason === 'clickaway')
-            return;
-        setSnackbar({ open: false, message: '', severity: undefined });
-    };
-    const handleCloseAlert = (event) => {
-        setSnackbar({ open: false, message: '', severity: undefined });
-    };
-    return ((0, jsx_runtime_1.jsx)(material_1.Snackbar, Object.assign({ open: snackbar.open, autoHideDuration: 5000, onClose: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ severity: snackbar.severity, variant: "filled", sx: { width: '100%' }, action: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", "aria-label": "close", color: "inherit", onClick: handleCloseAlert }, { children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, { fontSize: "small" }) })) }) }, { children: snackbar.message })) })));
-};
-exports.default = MovaSnackbar;

package/dist/TestButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-interface TestButtonProps {
-    label: string;
-}
-declare const TestButton: React.FC<TestButtonProps>;
-export default TestButton;

package/dist/TestButton.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TestButton = ({ label }) => {
-    return (0, jsx_runtime_1.jsx)("button", { children: label });
-};
-exports.default = TestButton;

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default as TestButton } from './TestButton';

package/dist/index.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestButton = void 0;
-// src/index.ts
-var TestButton_1 = require("./TestButton");
-Object.defineProperty(exports, "TestButton", { enumerable: true, get: function () { return __importDefault(TestButton_1).default; } });