test-tp1-ynov-react-kleas17 1.0.1

package/README.md

@@ -0,0 +1,105 @@
+# Application d'inscription SPA
+
+## Fonctionnalités
+
+- Navigation SPA avec `react-router-dom`
+  - `/` : accueil, compteur des inscrits, liste des inscrits (Nom + Prénom)
+  - `/register` : formulaire d'inscription
+- État partagé au niveau racine (tableau des utilisateurs)
+- Données chargées/sauvegardées via API (`/users`) avec `axios`
+- Résilience UI face aux erreurs backend :
+  - `400` : affichage du message métier renvoyé par le serveur
+  - `500` : affichage d'une alerte utilisateur sans crash de l'application
+
+## Architecture API
+
+- Fichier dédié : `src/api.js`
+- API par défaut : `https://jsonplaceholder.typicode.com`
+- Variables d'environnement prises en charge :
+  - `REACT_APP_API_URL`
+  - `REACT_APP_SERVER_PORT`
+  - `REACT_APP_API_TOKEN` (header `Authorization: Bearer ...`)
+
+## Pyramide de tests
+
+- UT : logique pure dans `src/validator.js`
+- IT : interactions UI + rendu + navigation dans `src/App.test.js`
+- IT API : appels réseau mockés dans `src/api.test.js` avec `jest.mock('axios')`
+- E2E : parcours multi-vues avec `cy.intercept` dans `cypress/e2e/navigation.cy.js`
+
+## Couverture des cas (activité 5)
+
+- Succès (`200/201`)
+- Erreur métier (`400`) avec message backend visible
+- Erreur serveur (`500`) avec message utilisateur de résilience
+- Aucun appel réseau réel dans Jest (axios entièrement mocké)
+
+## Commandes
+
+Dans `my-app` :
+
+```bash
+npm install
+npm start
+npm test
+npm run cypress:run
+```
+
+## CI/CD
+
+Le workflow GitHub Actions exécute :
+
+1. tests Jest
+2. tests E2E Cypress
+3. build React
+4. publication GitHub Pages
+
+Le workflow injecte :
+
+- `REACT_APP_API_URL=https://jsonplaceholder.typicode.com`
+- `REACT_APP_API_TOKEN=${{ secrets.JSONPLACEHOLDER_TOKEN }}`
+
+## Publication npm et SemVer
+
+Le package est configuré pour la publication npm avec :
+
+- `name: test-tp1-ynov-react-kleas17`
+- `version` au format SemVer `MAJOR.MINOR.PATCH`
+- `main: dist/index.js`
+- `files: ["dist"]`
+
+Commandes de versioning prises en charge :
+
+```bash
+npm version major
+npm version minor
+npm version patch
+npm version prerelease
+npm version premajor
+npm version preminor
+npm version prepatch
+npm version patch -m "Upgrade to %s"
+```
+
+Pré-releases supportées :
+
+```bash
+npm run version:alpha   # x.y.z-alpha.n
+npm run version:beta    # x.y.z-beta.n
+npm run version:rc      # x.y.z-rc.n
+```
+
+Validation manuelle de publication :
+
+```bash
+npm run build-npm
+npm adduser
+npm publish
+```
+
+Sécurité :
+
+- Créer un token npm de type `Automation`.
+- Ajouter `NPM_TOKEN` dans `Settings > Secrets and variables > Actions`.
+- Ne jamais commiter un `.npmrc` contenant un token.
+- Ne jamais republier une version existante : incrémenter systématiquement la version avant publication.

package/dist/App.css

@@ -0,0 +1,196 @@
+.App {
+  background: linear-gradient(140deg, #062e72 0%, #16509f 45%, #fff6ec 100%);
+  min-height: 100vh;
+  padding: 2.25rem 1rem;
+  display: flex;
+  justify-content: center;
+}
+
+.form-container {
+  background: #ffffff;
+  border-radius: 14px;
+  width: min(100%, 820px);
+  padding: 1.5rem 1.4rem;
+  box-shadow: 0 16px 30px rgba(14, 42, 78, 0.14);
+  border: 1px solid #dbe8ff;
+}
+
+h1 {
+  margin: 0 0 1.15rem;
+  font-size: 1.5rem;
+  color: #0f3f75;
+  letter-spacing: 0.01em;
+}
+
+.registered-list {
+  margin: 0.6rem 0 1rem;
+  padding-left: 1.15rem;
+}
+
+.registered-item {
+  margin-bottom: 0.3rem;
+  color: #204b7f;
+  font-weight: 600;
+}
+
+.readme-link {
+  margin: -0.3rem 0 1rem;
+  text-align: center;
+}
+
+form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: 0.95rem;
+  row-gap: 0.25rem;
+}
+
+.field-group:nth-child(3),
+.field-group:nth-child(4),
+.field-group:nth-child(5),
+.field-group:nth-child(6) {
+  margin-top: 0.2rem;
+}
+
+.field-group {
+  display: grid;
+  gap: 0.35rem;
+  margin-bottom: 0.6rem;
+  padding: 0.75rem;
+  border: 1px solid #e1ebfb;
+  border-radius: 10px;
+  background: #f7faff;
+}
+
+label {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #255a96;
+}
+
+input {
+  padding: 0.58rem 0.68rem;
+  border: 1px solid #c8dbf9;
+  border-radius: 8px;
+  font-size: 1rem;
+  background: #ffffff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+input:focus {
+  outline: none;
+  border-color: #02448d;
+  box-shadow: 0 0 0 3px rgba(47, 115, 190, 0.18);
+}
+
+input[aria-invalid="true"] {
+  border-color: #e65d1f;
+}
+
+.error-text {
+  color: #cf4f15;
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.submit-button {
+  width: 100%;
+  grid-column: 1 / -1;
+  margin-top: 0.35rem;
+  padding: 0.7rem 1rem;
+  border: none;
+  border-radius: 8px;
+  background: #03448d;
+  color: #ffffff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
+}
+
+.submit-button.disabled {
+  background: #f4a76e;
+  cursor: not-allowed;
+}
+
+.submit-button:not(.disabled):hover {
+  background: #02376f;
+  transform: translateY(-1px);
+}
+
+.submit-button:not(.disabled):focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(47, 115, 190, 0.22);
+}
+
+.action-button {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  border: none;
+  border-radius: 8px;
+  padding: 0.7rem 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
+}
+
+.action-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(47, 115, 190, 0.22);
+}
+
+.primary-action {
+  background: #03448d;
+  color: #ffffff;
+}
+
+.primary-action:hover {
+  background: #02376f;
+  transform: translateY(-1px);
+}
+
+.secondary-action {
+  grid-column: 1 / -1;
+  margin-top: 0.45rem;
+  background: #ecf3ff;
+  color: #0f3f75;
+  border: 1px solid #c6daf8;
+}
+
+.secondary-action:hover {
+  background: #dfeeff;
+}
+
+.link-button {
+  box-sizing: border-box;
+}
+
+.toast {
+  margin-top: 0.95rem;
+  background: #fef3e9;
+  color: #9b3f11;
+  border: 1px solid #f6c7a4;
+  border-radius: 8px;
+  padding: 0.65rem 0.75rem;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 500px) {
+  form {
+    grid-template-columns: 1fr;
+  }
+
+  .form-container {
+    padding: 1rem;
+  }
+
+  .submit-button {
+    margin-top: 0.2rem;
+  }
+
+  .secondary-action {
+    margin-top: 0.3rem;
+  }
+}

package/dist/App.js

@@ -0,0 +1,232 @@
+import './App.css';
+import { BrowserRouter, Link, Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { useEffect, useMemo, useState } from 'react';
+import { ValidationError, validateAge, validateEmail, validateIdentity, validatePostalCode, validateUniqueEmail } from './validator';
+import { createRegistration, getRegistrations } from './api';
+const initialValues = {
+  nom: '',
+  prenom: '',
+  email: '',
+  dateNaissance: '',
+  cp: '',
+  ville: ''
+};
+const fieldLabels = {
+  nom: 'Nom',
+  prenom: 'Prénom',
+  email: 'Email',
+  dateNaissance: 'Date de naissance',
+  cp: 'Code postal',
+  ville: 'Ville'
+};
+
+/**
+ * Runs all form validations and returns an object keyed by field name.
+ * @param {{nom:string, prenom:string, email:string, dateNaissance:string, cp:string, ville:string}} values
+ * @param {Array<{email:string}>} users
+ * @returns {Record<string, string>} Field-level validation errors.
+ */
+function validateForm(values, users) {
+  const nextErrors = {};
+  const runValidation = (field, validator) => {
+    try {
+      validator();
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        nextErrors[field] = error.message;
+        return;
+      }
+      nextErrors[field] = 'Erreur de validation';
+    }
+  };
+  runValidation('nom', () => validateIdentity(values.nom.trim()));
+  runValidation('prenom', () => validateIdentity(values.prenom.trim()));
+  runValidation('ville', () => validateIdentity(values.ville.trim()));
+  runValidation('email', () => validateEmail(values.email.trim()));
+  if (!nextErrors.email) {
+    runValidation('email', () => validateUniqueEmail(values.email, users));
+  }
+  runValidation('cp', () => validatePostalCode(values.cp.trim()));
+  runValidation('dateNaissance', () => validateAge(new Date(values.dateNaissance)));
+  return nextErrors;
+}
+function HomePage({
+  users,
+  onStartRegistration
+}) {
+  return /*#__PURE__*/React.createElement("section", {
+    "data-cy": "home-page"
+  }, /*#__PURE__*/React.createElement("h1", null, "Bienvenue sur l'application d'inscription"), /*#__PURE__*/React.createElement("p", {
+    "data-cy": "registered-count"
+  }, users.length, " utilisateur(s) inscrit(s)"), users.length === 0 ? /*#__PURE__*/React.createElement("p", {
+    "data-cy": "empty-list"
+  }, "Aucun utilisateur inscrit pour le moment.") : /*#__PURE__*/React.createElement("ul", {
+    "data-cy": "registered-list",
+    className: "registered-list"
+  }, users.map((user, index) => /*#__PURE__*/React.createElement("li", {
+    key: `${user.email}-${index}`,
+    "data-cy": "registered-user",
+    className: "registered-item"
+  }, user.nom, " ", user.prenom))), /*#__PURE__*/React.createElement(Link, {
+    to: "/register",
+    "data-cy": "go-to-register",
+    className: "action-button primary-action link-button",
+    onClick: onStartRegistration
+  }, "Ajouter un utilisateur"));
+}
+function RegisterPage({
+  users,
+  onRegister
+}) {
+  const navigate = useNavigate();
+  const [values, setValues] = useState(initialValues);
+  const [touched, setTouched] = useState({});
+  const errors = useMemo(() => validateForm(values, users), [values, users]);
+  const isValid = Object.keys(errors).length === 0;
+  const onChange = event => {
+    const {
+      name,
+      value
+    } = event.target;
+    setValues(previous => ({
+      ...previous,
+      [name]: value
+    }));
+  };
+  const onBlur = event => {
+    const {
+      name
+    } = event.target;
+    setTouched(previous => ({
+      ...previous,
+      [name]: true
+    }));
+  };
+  const onSubmit = async event => {
+    event.preventDefault();
+    if (!isValid) {
+      return;
+    }
+    const registrationSucceeded = await onRegister(values);
+    if (!registrationSucceeded) {
+      return;
+    }
+    setValues(initialValues);
+    setTouched({});
+    navigate('/');
+  };
+  const shouldShowError = fieldName => Boolean(touched[fieldName] || values[fieldName]);
+  return /*#__PURE__*/React.createElement("section", {
+    "data-cy": "register-page"
+  }, /*#__PURE__*/React.createElement("h1", null, "Formulaire utilisateur"), /*#__PURE__*/React.createElement("form", {
+    onSubmit: onSubmit,
+    noValidate: true
+  }, Object.keys(initialValues).map(fieldName => /*#__PURE__*/React.createElement("div", {
+    key: fieldName,
+    className: "field-group"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: fieldName
+  }, fieldLabels[fieldName]), /*#__PURE__*/React.createElement("input", {
+    id: fieldName,
+    name: fieldName,
+    type: fieldName === 'dateNaissance' ? 'date' : 'text',
+    value: values[fieldName],
+    onChange: onChange,
+    onBlur: onBlur,
+    "aria-invalid": Boolean(errors[fieldName]),
+    "aria-describedby": `${fieldName}-error`,
+    "data-cy": fieldName
+  }), shouldShowError(fieldName) && errors[fieldName] ? /*#__PURE__*/React.createElement("p", {
+    id: `${fieldName}-error`,
+    role: "alert",
+    className: "error-text"
+  }, errors[fieldName]) : null)), /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    disabled: !isValid,
+    className: `submit-button ${!isValid ? 'disabled' : ''}`,
+    "data-cy": "submit"
+  }, "Soumettre"), /*#__PURE__*/React.createElement(Link, {
+    to: "/",
+    "data-cy": "go-home",
+    className: "action-button secondary-action link-button"
+  }, "Retour \xE0 l'accueil")));
+}
+function App() {
+  const [users, setUsers] = useState([]);
+  const [toastMessage, setToastMessage] = useState('');
+  useEffect(() => {
+    let isMounted = true;
+    const loadRegistrations = async () => {
+      try {
+        const loadedUsers = await getRegistrations();
+        if (isMounted) {
+          setUsers(loadedUsers);
+        }
+      } catch {
+        if (isMounted) {
+          setUsers([]);
+        }
+      }
+    };
+    loadRegistrations();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  const onRegister = async newUser => {
+    try {
+      await createRegistration(newUser);
+      setUsers(previousUsers => [...previousUsers, newUser]);
+      setToastMessage('Inscription enregistrée');
+      return true;
+    } catch (error) {
+      const statusCode = error?.response?.status;
+      const backendMessage = error?.response?.data?.message;
+      if (typeof statusCode === 'number' && statusCode >= 400 && statusCode < 500 && backendMessage) {
+        setToastMessage(backendMessage);
+        return false;
+      }
+      if (typeof statusCode === 'number' && statusCode >= 500) {
+        setToastMessage('Serveur indisponible, veuillez réessayer plus tard.');
+        return false;
+      }
+      setToastMessage("Erreur lors de l'inscription");
+      return false;
+    }
+  };
+  return /*#__PURE__*/React.createElement(BrowserRouter, {
+    basename: process.env.PUBLIC_URL,
+    future: {
+      v7_startTransition: true,
+      v7_relativeSplatPath: true
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "App"
+  }, /*#__PURE__*/React.createElement("main", {
+    className: "form-container"
+  }, /*#__PURE__*/React.createElement(Routes, null, /*#__PURE__*/React.createElement(Route, {
+    path: "/",
+    element: /*#__PURE__*/React.createElement(HomePage, {
+      users: users,
+      onStartRegistration: () => setToastMessage('')
+    })
+  }), /*#__PURE__*/React.createElement(Route, {
+    path: "/register",
+    element: /*#__PURE__*/React.createElement(RegisterPage, {
+      users: users,
+      onRegister: onRegister
+    })
+  }), /*#__PURE__*/React.createElement(Route, {
+    path: "*",
+    element: /*#__PURE__*/React.createElement(Navigate, {
+      to: "/",
+      replace: true
+    })
+  })), toastMessage ? /*#__PURE__*/React.createElement("div", {
+    className: "toast",
+    role: "status",
+    "aria-live": "polite",
+    "data-cy": "success"
+  }, toastMessage) : null)));
+}
+export default App;