Feat: Add sticky footer with app version and login details

src/contexts/AuthContext.jsx

@@ -22,7 +22,7 @@ export const AuthProvider = ({ children }) => {
 		_setUser(user);
 	};
 
-	// csrf token generation for guest methods
+	// Get a CSRF token for use in non-authenticated actions
 	const csrfToken = async () => {
 		await axios.get(`${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`);
 		return true;

src/layouts/ProtectedLayout.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate, Outlet, NavLink } from 'react-router';
 import axios from '../axios';
 import { useAuth } from '../contexts/AuthContext';
@@ -6,10 +6,12 @@ import bannerDayLogo from '/banner-day.svg'
 
 export default function ProtectedLayout() {
 	const { user, setUser } = useAuth();
+  const [ serverVersion, setServerVersion ] = useState("unknown");
 
-	// check if user is logged in or not from server
 	useEffect(() => {
 		(async () => {
+
+      // Check the server to verify the user is logged in
 			try {
 				const response = await axios.get('/api/user');
 				if (response.status === 200) {
@@ -21,14 +23,26 @@ export default function ProtectedLayout() {
 					window.location.href = '/';
 				}
 			}
-		})();
-	}, []);
 
-	// if user is not logged in, redirect to login page
+      // Get the current app version of the server to display in footer
+      try {
+        const response = await axios.get('/api/server-version');
+        if (response.status === 200) {
+          console.log("got server version", response.data);
+          setServerVersion(response.data.serverVersion)
+        }
+      } catch (error) {
+        console.log(error);
+      }
+		})();
+	}, [setServerVersion]);
+
+  // If the user isn't logged in, we'll redirect them to the login page
 	if (!user) {
 		return <Navigate to="/login" />;
 	}
 
+
 	// logout user
 	const handleLogout = async () => {
 		try {
@@ -43,6 +57,7 @@ export default function ProtectedLayout() {
 	};
 	return (
 		<>
+      <div class="flex flex-col h-screen justify-between">
         <nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-900 w-screen">
           <div className="container flex flex-wrap items-center justify-between mx-auto">
             <NavLink to="/dashboard">
@@ -90,9 +105,20 @@ export default function ProtectedLayout() {
             </div>
           </div>
         </nav>
-			<main className="container flex justify-center flex-col items-center mt-10 mx-auto">
+
+        <main className="container flex justify-center flex-col items-center mt-10 mb-auto mx-auto">
           <Outlet />
         </main>
+
+        <footer className="h-10 bg-slate-900 py-2">
+          <div className="float-left px-4">
+            App Version | Server: v{serverVersion} Client: v{import.meta.env.VITE_CLIENT_VERSION}
+          </div>
+          <div className="float-right px-4">
+            <span>Current User: {user.email} | Logged In: {user.last_login}</span>
+          </div>
+        </footer>
+      </div>
 		</>
 	);
 }