Merge pull request #92 from MobilityData/feat/90-modernize-header-footer

feat: modernize header and footer

Author: Alessandro100

cypress/e2e/changepassword.cy.ts

@@ -22,7 +22,7 @@ describe('Change Password Screen', () => {
     cy.get('input[id="currentPassword"]').type('wrong');
     cy.get('input[id="newPassword"]').type(newPassword);
     cy.get('input[id="confirmNewPassword"]').type(newPassword);
-    cy.get('button[type="submit"]').click();
+    cy.get('[data-cy="changePasswordButton"]').click();
     cy.contains(
       'The password is invalid or the user does not have a password. (auth/wrong-password).',
     ).should('exist');
@@ -44,7 +44,7 @@ describe('Change Password Screen', () => {
     cy.get('input[id="currentPassword"]').type(currentPassword);
     cy.get('input[id="newPassword"]').type(newPassword);
     cy.get('input[id="confirmNewPassword"]').type(newPassword);
-    cy.get('button[type="submit"]').click();
+    cy.get('[data-cy="changePasswordButton"]').click();
 
     cy.contains('Change Password Succeeded').should('exist');
     cy.get('[cy-data="goToAccount"]').click();

cypress/e2e/resetpassword.cy.ts

@@ -9,14 +9,14 @@ describe('Reset Password Screen', () => {
 
   it('should show error when email no email is provided', () => {
     cy.get('input[id="email"]').type('not an email', { force: true });
-    cy.get('[type="submit"]').click();
+    cy.get('[data-cy="submitResetPasswordButton"]').click();
     cy.get('[data-testid=emailError]').should('exist');
   });
 
   it('should show the captcha error when is not accepted', () => {
     cy.get('iframe[title="reCAPTCHA"]').should('exist');
     cy.get('input[id="email"]').type('notvalid@e.c', { force: true });
-    cy.get('[type="submit"]').click();
+    cy.get('[data-cy="submitResetPasswordButton"]').click();
     cy.get('[data-testid=reCaptchaError]')
       .should('exist')
       .contains('You must verify you are not a robot.');

messages/en.json

@@ -105,7 +105,16 @@
     "showMore": "Show {count} more",
     "moreInfo": "More Info",
     "license": "License",
-    "tags": "Tags"
+    "tags": "Tags",
+    "openDrawer": "Open drawer",
+    "mobilityDatabaseHome": "Mobility Database home",
+    "accountMenu": "Account menu",
+    "accountDetails": "Account Details",
+    "login": "Login",
+    "metricsAdminOnly": "Metrics - Admin Only",
+    "languageSelect": "Language select",
+    "transitFeedsRedirectTitle": "You've been redirected from TransitFeeds",
+    "transitFeedsRedirectBody": "This page now lives on MobilityDatabase.org, where you'll find the most up-to-date transit data."
   },
   "feeds": {
     "feeds": "Feeds",
@@ -513,5 +522,36 @@
       "addFeeds": "A simple, easy-to-use form to add new feeds",
       "openSource": "An open source community actively working to improve the tools"
     }
+  },
+  "footer": {
+    "tagline": "An open catalog of transit and mobility data feeds, serving the global transportation community.",
+    "maintainedBy": "Maintained with 💙 by MobilityData",
+    "copyright": "© {year} MobilityDatabase. All rights reserved.",
+    "columns": {
+      "platform": "Platform",
+      "validators": "Validators",
+      "company": "Company",
+      "legal": "Legal"
+    },
+    "links": {
+      "feeds": "Feeds",
+      "addFeed": "Add a Feed",
+      "apiDocs": "API Docs",
+      "gtfsValidator": "GTFS Validator",
+      "gtfsRtValidator": "GTFS-RT Validator",
+      "gbfsValidator": "GBFS Validator",
+      "about": "About",
+      "faq": "FAQ",
+      "contactUs": "Contact Us",
+      "shareFeedback": "Share Feedback",
+      "privacyPolicy": "Privacy Policy",
+      "termsAndConditions": "Terms and Conditions"
+    },
+    "aria": {
+      "github": "GitHub",
+      "slack": "Slack",
+      "linkedin": "LinkedIn",
+      "logo": "MobilityDatabase logo"
+    }
   }
 }

messages/fr.json

@@ -105,7 +105,16 @@
     "showMore": "Show {count} more",
     "moreInfo": "More Info",
     "license": "License",
-    "tags": "Tags"
+    "tags": "Tags",
+    "openDrawer": "Ouvrir le menu",
+    "mobilityDatabaseHome": "Accueil de Mobility Database",
+    "accountMenu": "Menu du compte",
+    "accountDetails": "Détails du compte",
+    "login": "Connexion",
+    "metricsAdminOnly": "Métriques - Admin uniquement",
+    "languageSelect": "Sélection de la langue",
+    "transitFeedsRedirectTitle": "Vous avez été redirigé depuis TransitFeeds",
+    "transitFeedsRedirectBody": "Cette page se trouve désormais sur MobilityDatabase.org, où vous trouverez les données de transit les plus récentes."
   },
   "feeds": {
     "feeds": "Feeds",
@@ -513,5 +522,36 @@
       "addFeeds": "Un formulaire simple et facile à utiliser pour ajouter de nouveaux flux",
       "openSource": "Une communauté open source travaillant activement à améliorer les outils"
     }
+  },
+  "footer": {
+    "tagline": "Le plus grand catalogue ouvert de flux de données de transit et de mobilité, au service de la communauté mondiale des transports.",
+    "maintainedBy": "Maintenu avec 💙 par MobilityData",
+    "copyright": "© {year} MobilityDatabase. Tous droits réservés.",
+    "columns": {
+      "platform": "Plateforme",
+      "validators": "Validateurs",
+      "company": "Entreprise",
+      "legal": "Légal"
+    },
+    "links": {
+      "feeds": "Flux",
+      "addFeed": "Ajouter un flux",
+      "apiDocs": "Docs API",
+      "gtfsValidator": "Validateur GTFS",
+      "gtfsRtValidator": "Validateur GTFS-RT",
+      "gbfsValidator": "Validateur GBFS",
+      "about": "À propos",
+      "faq": "FAQ",
+      "contactUs": "Contactez-nous",
+      "shareFeedback": "Donner un avis",
+      "privacyPolicy": "Politique de confidentialité",
+      "termsAndConditions": "Conditions d'utilisation"
+    },
+    "aria": {
+      "github": "GitHub",
+      "slack": "Slack",
+      "linkedin": "LinkedIn",
+      "logo": "Logo MobilityDatabase"
+    }
   }
 }

package.json

@@ -30,7 +30,6 @@
     "loadashes6": "^1.0.0",
     "maplibre-gl": "^5.7.0",
     "material-react-table": "^2.13.0",
-    "mui-nested-menu": "3.4.0",
     "next": "16.1.1",
     "next-intl": "^4.7.0",
     "openapi-fetch": "^0.9.3",

src/app/App.css

@@ -42,7 +42,7 @@
   position: relative;
   /* 100vh - header margin - header - footer - footer padding */
   /* Not perfect, to revisit: for client loading state */
-  min-height: calc(100vh - 32px - 64px - 232px - 20px);
-  padding-bottom: 20px;
+  min-height: calc(100vh - 32px - 64px - 302px - 48px);
+
   box-sizing: border-box;
 }

src/app/[locale]/layout.tsx

@@ -111,7 +111,7 @@ export default async function LocaleLayout({
                 component={'main'}
                 id='next'
                 sx={{
-                  minHeight: 'calc(100vh - 32px - 64px - 232px - 20px)',
+                  minHeight: 'calc(100vh - 32px - 64px - 302px - 48px)',
                 }}
               >
                 {children}

src/app/components/AuthSessionProvider.tsx

@@ -18,12 +18,14 @@ interface AuthSession {
   isAuthReady: boolean;
   email: string | null;
   isAuthenticated: boolean;
+  displayName?: string | null;
 }
 
 const AuthReadyContext = createContext<AuthSession>({
   isAuthReady: false,
   email: null,
   isAuthenticated: false,
+  displayName: null,
 });
 
 /**
@@ -58,6 +60,7 @@ export function AuthSessionProvider({
     isAuthReady: false,
     email: null,
     isAuthenticated: false,
+    displayName: null,
   });
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -73,6 +76,7 @@ export function AuthSessionProvider({
           isAuthReady: true,
           email: user.email ?? null,
           isAuthenticated: !user.isAnonymous,
+          displayName: user.displayName ?? null,
         });
         setUserCookieSession().catch(() => {
           console.error('Failed to establish session cookie');
@@ -90,7 +94,12 @@ export function AuthSessionProvider({
           5 * 60 * 1000,
         ); // 5 minutes
       } else {
-        setSession({ isAuthReady: false, email: null, isAuthenticated: false });
+        setSession({
+          isAuthReady: false,
+          email: null,
+          isAuthenticated: false,
+          displayName: null,
+        });
         dispatch(anonymousLogin());
       }
     });