@movalib/movalib-commons 1.0.13 → 1.0.15

package/src/MovaSignUp.tsx

@@ -0,0 +1,274 @@
+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/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 MovaCopyright from "./MovaCopyright";
+import { MovaLoginForm, MovaFormField, MovaUserSignUpForm } from "./helpers/Types";
+import { MovaAppType } from "./helpers/Enums";
+import { validateEmail } from "./helpers/Validator";
+import GenderSelector from "./GenderSelector";
+
+// 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 initialUserFormState = {
+    firstname: { value: '', isValid: true },
+    lastname: { value: '', isValid: true },
+    email: { value: '', isValid: true },
+    password: { value: '', isValid: true },
+    gender:  { value: '', isValid: true },
+    birthDate:  { value: '', 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
+ * 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
+ */
+interface MovaSignUpProps {
+    movaAppType: MovaAppType,
+    onSubmit: (form: MovaLoginForm) => void,
+    alertMessage?: string,
+    alertSeverity?: AlertColor,
+    loading?: boolean
+}
+
+const MovaLogin: FunctionComponent<MovaSignUpProps> = ({ loading, movaAppType, onSubmit, alertMessage, alertSeverity }) => {
+
+    const [userForm, setUserForm] = useState<MovaUserSignUpForm>(initialUserFormState);
+
+    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 } };
+
+        setUserForm({ ...userForm, ...newField});
+    }
+
+    const handleCheckboxChange = (e: SelectChangeEvent<string>, checked: boolean): void => {
+        const fieldName: string = e.target.name;
+        const fieldValue: boolean = checked;
+        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+  
+        setUserForm({ ...userForm, ...newField});
+    }  
+
+    const handleSelectChange = (e: SelectChangeEvent<string>): 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 handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        try {
+            if(validateForm() && onSubmit) {
+                // Si le formulaire est valide, on appel la function callback transmise en props
+                onSubmit(userForm);
+            }
+
+        }catch (error){
+            console.error('Error occurred during submission:', error);
+        }
+    }
+
+    const validateForm = () => {
+        let newForm: MovaUserSignUpForm = userForm;
+
+        // Validator email
+        if(!validateEmail(userForm.email.value)) {
+            const errorMsg: string = 'Adresse email invalide';
+            const newField: MovaFormField = { value: userForm.email.value, error: errorMsg, isValid: false };
+            newForm = { ...newForm, ...{ email: newField } };
+        } else {
+            const newField: MovaFormField = { value: userForm.email.value, error: '', isValid: true };
+            newForm = { ...newForm, ...{ email: newField } };
+        }
+
+        // Validator password
+        if(userForm.password.value.length < 8) {
+            const errorMsg: string = 'Votre mot de passe doit faire au moins 8 caractères de long.';
+            const newField: MovaFormField = {value: userForm.password.value, error: errorMsg, isValid: false};
+            newForm = { ...newForm, ...{ password: newField } };
+        } else {
+            const newField: MovaFormField = { value: userForm.password.value, error: '', isValid: true };
+            newForm = { ...newForm, ...{ password: newField } };
+        }
+
+        setUserForm(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="sm">
+                <CssBaseline />
+                <Box
+                    sx={{
+                        marginTop: 6,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                    >
+                    <img src={getMovaLogo()} style={{width:'50%'}}/>
+                    <br />
+                    <Typography variant="h2">Nouveau compte utilisateur</Typography>
+                </Box>
+
+                <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+                    <TextField
+                        margin="normal"
+                        required
+                        autoFocus
+                        fullWidth
+                        id="firstname"
+                        label="Prénom"
+                        name="firstname"
+                        autoComplete="given-name"                    
+                        onChange={e => handleInputChange(e)}
+                        value={userForm.firstname.value}
+                        error={Boolean(userForm.firstname.error)}
+                        helperText={userForm.firstname.error}
+                    />
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="lastname"
+                        label="Nom"
+                        name="lastname"
+                        autoComplete="family-name"                     
+                        onChange={e => handleInputChange(e)}
+                        value={userForm.lastname.value}
+                        error={Boolean(userForm.lastname.error)}
+                        helperText={userForm.lastname.error}
+                      />                    
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="email"
+                        label="Adresse email"
+                        name="email"
+                        autoComplete="email"
+                        autoFocus
+                        onChange={e => handleInputChange(e)}
+                        value={userForm.email.value}
+                        error={!userForm.email.isValid}
+                        helperText={userForm.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={userForm.password.value}
+                        error={!userForm.password.isValid}
+                        helperText={userForm.password.error}                    
+                    />
+                    <GenderSelector handleSelectChange={handleSelectChange} form={userForm} required/>
+                    <TextField 
+                        margin="normal"
+                        required
+                        label="Date de naissance" 
+                        type="date" 
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                        autoComplete="bday"
+                        value={userForm.password.value}
+                        error={!userForm.password.isValid}
+                        helperText={userForm.password.error}        
+                        onChange={(e) => handleInputChange(e)}
+                    />
+                    <FormControl error={!userForm.acceptsTerms.isValid}>
+                        <FormControlLabel
+                            control={
+                            <Checkbox
+                                color="primary"
+                                checked={userForm.acceptsTerms.value}
+                                onChange={(e, checked) => handleCheckboxChange(e, checked)}
+                            />
+                            }
+                            label={
+                            <span>
+                                J'accepte les{' '}
+                                <Link href="/terms-and-conditions" target="_blank">
+                                Conditions Générales d'Utilisation
+                                </Link>
+                            </span>
+                            }
+                        />
+                        <FormHelperText>{userForm.acceptsTerms.error}</FormHelperText>
+                    </FormControl>
+                        
+                    {alertMessage && alertSeverity && <Alert severity={alertSeverity} sx={{ mb: 2 }}>{alertMessage}</Alert>}
+
+
+                    <LoadingButton
+                        loading={loading}
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        sx={{ mt: 3, mb: 2 }}>
+                        <span>Créer mon compte</span>
+                    </LoadingButton>
+
+                </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/MovaSnackbar.tsx

@@ -0,0 +1,65 @@
+// MovaSnackbar.tsx
+import React, { FunctionComponent } from 'react';
+import { Snackbar, Alert, IconButton, SnackbarCloseReason } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+
+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;
+}
+
+const MovaSnackbar: FunctionComponent<MovaSnackbarProps> = ({ 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: globalThis.Event | React.SyntheticEvent<any, globalThis.Event>, 
+    reason: SnackbarCloseReason) => {
+    
+      if (reason === 'clickaway') return;
+
+      setSnackbar({ open: false, message: '', severity: undefined });
+  };
+
+  const handleCloseAlert = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setSnackbar({ open: false, message: '', severity: undefined });
+  };
+
+  return (
+    <Snackbar open={snackbar.open} autoHideDuration={5000} onClose={handleClose}>
+      <Alert severity={snackbar.severity} variant="filled" sx={{ width: '100%' }}
+        action={
+            <>
+              {/* TODO : possiblité d'annuler l'action qui vient d'avoir lieu */}
+            {/*   <Button color="inherit" size="small" onClick={handleCancelAction}>
+                Annuler
+              </Button> */}
+              <IconButton
+                size="small"
+                aria-label="close"
+                color="inherit"
+                onClick={handleCloseAlert}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </>
+        }>
+        {snackbar.message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MovaSnackbar;

package/src/TestButton.tsx

@@ -0,0 +1,12 @@
+// src/Button.tsx
+import React from 'react';
+
+interface TestButtonProps {
+  label: string;
+}
+
+const TestButton: React.FC<TestButtonProps> = ({ label }) => {
+  return <button>{label}</button>;
+};
+
+export default TestButton;

package/src/helpers/Enums.ts

@@ -0,0 +1,38 @@
+
+export enum MovaAppType {
+    /**
+    * Application Garagiste
+    */
+    GARAGE = "GARAGE",
+    /**
+    * Application Utilisateur (automobiliste)
+    */
+    USER = "USER",
+    /**
+     * Application Administrateur (MovaTeam)
+     */
+    ADMIN = "ADMIN"
+}
+
+export enum RoleType {
+    /**
+     * Client du centre auto (automobiliste)
+     */
+    CUSTOMER = "CUSTOMER",
+    /**
+     * Technicien du centre auto
+     */
+    TECHNICIAN = "GARAGE_LEADER",
+    /**
+     * Chef d'atelier
+     */
+    GARAGE_LEADER = "GARAGE_LEADER",
+    /**
+     * Administrateur du centre auto (propriétaire ou dirigeant)
+     */
+    GARAGE_ADMIN = "ADMINISTRATOR",
+    /**
+     * Super-Administrateur (team Movalib)
+     */
+    MOVALIB_ADMIN = "MOVALIB_ADMIN",
+}

package/src/helpers/Tools.ts

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

package/src/helpers/Types.ts

@@ -0,0 +1,20 @@
+export type MovaUserSignUpForm = {
+    firstname: MovaFormField,
+    lastname: MovaFormField,
+    email: MovaFormField,
+    password: MovaFormField,
+    gender: MovaFormField,
+    birthDate: MovaFormField,
+    acceptsTerms: MovaFormField
+}
+
+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

@@ -0,0 +1,19 @@
+// src/index.ts
+
+// Export des composants
+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 classes
+export { default as User } from './models/User';
+export { default as Role } from './models/Role';
+export { default as Address } from './models/Address';
+
+// Export des types
+export type { MovaFormField, MovaLoginForm, MovaUserSignUpForm } from './helpers/Types';
+
+
+// Export des enums
+export { RoleType, MovaAppType } from './helpers/Enums';

package/src/models/Address.ts

@@ -0,0 +1,28 @@
+export default class Address {
+
+  id: string;   // UUID
+  streetName: string; // Street number & name
+  postalCode: string; // Postal code
+  cityName: string; // City name
+  country: string; // Country name
+  countryCode: string;  // Country ISO code
+  additional?: string; // Additional address information (optional)
+
+  constructor(
+      id: string,
+      streetName: string,
+      postalCode: string,
+      cityName: string,
+      country: string,
+      countryCode: string,
+      additional?: string
+  ) {
+      this.id = id;
+      this.streetName = streetName;
+      this.postalCode = postalCode;
+      this.cityName = cityName;
+      this.country = country;
+      this.countryCode = countryCode;
+      this.additional = additional;
+  }
+}

package/src/models/Role.ts

@@ -0,0 +1,16 @@
+export default class Role {
+
+    id:string;
+    isActive: boolean;
+    authorizations: string[];
+
+    constructor(
+        id:string,
+        isActive: boolean = true,
+        authorizations: string[]
+    ) {
+        this.id = id;
+        this.isActive = isActive;
+        this.authorizations = authorizations;
+    }
+}

package/src/models/User.ts

@@ -0,0 +1,59 @@
+import { RoleType } from "../helpers/Enums";
+import Address from './Address';
+
+export default class User {
+
+    // Properties
+    id: string;
+    roles: string[];
+    firstname: string;
+    lastname: string;
+    avatar: string;
+    email: string;
+    password: string;
+    created: Date;
+    addresses? : Address[] 
+    phoneNumber?: string;
+
+    constructor(
+        id: string,
+        roles: string[],
+        firstname: string = '',
+        lastname: string = '',
+        avatar: string = '',
+        email: string = '',
+        password: string = '',
+        created: Date = new Date(),
+        addresses?: Address[],
+        phoneNumber?: string 
+    ) {
+        this.id = id;
+        this.roles = roles;
+        this.firstname = firstname;
+        this.lastname = lastname;
+        this.avatar = avatar;
+        this.email = email;
+        this.password = password;
+        this.created = created;
+        this.addresses = addresses;
+        this.phoneNumber = phoneNumber;
+    }
+
+    static getFirstLetter = (user: User) : string => {
+
+        const firstLetter = user.lastname[0].toUpperCase();
+        return /[0-9]/.test(firstLetter) ? '0-9' : firstLetter;
+    }
+
+    static isCustomer = (user: User) : boolean => {
+        if(!user || !user.roles) return false;
+
+        return Boolean(user.roles.find(r => r = RoleType.CUSTOMER));
+    }
+
+    static isTechnician = (user: User) : boolean => {
+        if(!user || !user.roles) return false;
+
+        return Boolean(user.roles.find(r => r = RoleType.TECHNICIAN));
+    }
+}

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

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