Feat: Add sticky footer with app version and login details
This commit is contained in:
parent
c3b5b654cc
commit
e3740b0fbc
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,56 +57,68 @@ export default function ProtectedLayout() {
|
|||
};
|
||||
return (
|
||||
<>
|
||||
<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">
|
||||
<div className="float-left">
|
||||
<img src={bannerDayLogo} className="w-12 inline" alt="Banner Day logo" />
|
||||
<span className="text-xl font-semibold whitespace-nowrap dark:text-white">
|
||||
Banner Day
|
||||
</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
<div className="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||
<ul className="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<NavLink
|
||||
to="/profile"
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? 'block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white'
|
||||
: 'block py-2 pl-3 pr-4 rounded md:bg-transparent md:p-0 dark:text-gray-400 md:dark:hover:text-white'
|
||||
}>
|
||||
Profile
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/about"
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? 'block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white'
|
||||
: 'block py-2 pl-3 pr-4 rounded md:bg-transparent md:p-0 dark:text-gray-400 md:dark:hover:text-white'
|
||||
}>
|
||||
About
|
||||
</NavLink>
|
||||
</li>
|
||||
<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">
|
||||
<div className="float-left">
|
||||
<img src={bannerDayLogo} className="w-12 inline" alt="Banner Day logo" />
|
||||
<span className="text-xl font-semibold whitespace-nowrap dark:text-white">
|
||||
Banner Day
|
||||
</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
<div className="hidden w-full md:block md:w-auto" id="navbar-default">
|
||||
<ul className="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<NavLink
|
||||
to="/profile"
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? 'block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white'
|
||||
: 'block py-2 pl-3 pr-4 rounded md:bg-transparent md:p-0 dark:text-gray-400 md:dark:hover:text-white'
|
||||
}>
|
||||
Profile
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink
|
||||
to="/about"
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? 'block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white'
|
||||
: 'block py-2 pl-3 pr-4 rounded md:bg-transparent md:p-0 dark:text-gray-400 md:dark:hover:text-white'
|
||||
}>
|
||||
About
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogout}
|
||||
href="#"
|
||||
className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="container flex justify-center flex-col items-center mt-10 mx-auto">
|
||||
<Outlet />
|
||||
</main>
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogout}
|
||||
href="#"
|
||||
className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue