- Created useDirectoryConfig hook (src/hooks/use-directory-config.js)
- Updated Profile.js - conditional rendering with isFieldEnabled() - Updated MemberCard.js - conditional rendering for directory fields - Updated MembersDirectory.js - conditional rendering in profile dialog - Created AdminDirectorySettings.js - Admin UI for toggling fields - Updated SettingsSidebar.js - Added Directory and Registration tabs - Updated App.js - Added routes for new settings pages
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import api from '../utils/api';
|
||||
import logger from '../utils/logger';
|
||||
import {
|
||||
Dialog,
|
||||
@@ -20,6 +21,7 @@ import { AlertTriangle, RefreshCw } from 'lucide-react';
|
||||
* - Warns 1 minute before JWT expiry (at 29 minutes if JWT is 30 min)
|
||||
* - Auto-logout on expiration
|
||||
* - "Stay Logged In" extends session
|
||||
* - Checks session validity when tab becomes visible after being hidden
|
||||
*/
|
||||
const IdleSessionWarning = () => {
|
||||
const { user, logout, refreshUser } = useAuth();
|
||||
@@ -33,11 +35,13 @@ const IdleSessionWarning = () => {
|
||||
const [showWarning, setShowWarning] = useState(false);
|
||||
const [timeRemaining, setTimeRemaining] = useState(60); // seconds
|
||||
const [isExtending, setIsExtending] = useState(false);
|
||||
const [isCheckingSession, setIsCheckingSession] = useState(false);
|
||||
|
||||
const activityTimeoutRef = useRef(null);
|
||||
const warningTimeoutRef = useRef(null);
|
||||
const countdownIntervalRef = useRef(null);
|
||||
const lastActivityRef = useRef(Date.now());
|
||||
const lastVisibilityCheckRef = useRef(Date.now());
|
||||
|
||||
// Reset activity timer
|
||||
const resetActivityTimer = useCallback(() => {
|
||||
@@ -120,6 +124,83 @@ const IdleSessionWarning = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Check if session is still valid (called when tab becomes visible)
|
||||
const checkSessionValidity = useCallback(async () => {
|
||||
if (!user || isCheckingSession) return;
|
||||
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
logger.log('[IdleSessionWarning] No token found on visibility change');
|
||||
handleSessionExpired();
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCheckingSession(true);
|
||||
try {
|
||||
// Make a lightweight API call to verify token is still valid
|
||||
await api.get('/auth/me');
|
||||
logger.log('[IdleSessionWarning] Session still valid after visibility change');
|
||||
|
||||
// Reset the activity timer since user is back
|
||||
resetActivityTimer();
|
||||
} catch (error) {
|
||||
logger.error('[IdleSessionWarning] Session invalid on visibility change:', error);
|
||||
|
||||
// If 401, the interceptor will handle redirect
|
||||
// For other errors, still redirect to be safe
|
||||
if (error.response?.status !== 401) {
|
||||
handleSessionExpired();
|
||||
}
|
||||
} finally {
|
||||
setIsCheckingSession(false);
|
||||
}
|
||||
}, [user, isCheckingSession, handleSessionExpired, resetActivityTimer]);
|
||||
|
||||
// Handle visibility change (when user returns to tab after being away)
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
const now = Date.now();
|
||||
const timeSinceLastCheck = now - lastVisibilityCheckRef.current;
|
||||
|
||||
// Only check if tab was hidden for more than 1 minute
|
||||
// This prevents unnecessary API calls for quick tab switches
|
||||
if (timeSinceLastCheck > 60 * 1000) {
|
||||
logger.log('[IdleSessionWarning] Tab became visible after', Math.round(timeSinceLastCheck / 1000), 'seconds');
|
||||
checkSessionValidity();
|
||||
}
|
||||
|
||||
lastVisibilityCheckRef.current = now;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
};
|
||||
}, [user, checkSessionValidity]);
|
||||
|
||||
// Listen for session expired event from API interceptor
|
||||
useEffect(() => {
|
||||
const handleAuthSessionExpired = () => {
|
||||
logger.log('[IdleSessionWarning] Received auth:session-expired event');
|
||||
// Clear all timers
|
||||
if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
|
||||
if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
|
||||
if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
|
||||
setShowWarning(false);
|
||||
};
|
||||
|
||||
window.addEventListener('auth:session-expired', handleAuthSessionExpired);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('auth:session-expired', handleAuthSessionExpired);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Track user activity
|
||||
useEffect(() => {
|
||||
if (!user) return;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Card } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
|
||||
import MemberBadge from './MemberBadge';
|
||||
import useDirectoryConfig from '../hooks/use-directory-config';
|
||||
|
||||
// Helper function to get initials
|
||||
const getInitials = (firstName, lastName) => {
|
||||
@@ -20,6 +21,7 @@ const getSocialMediaLink = (url) => {
|
||||
|
||||
const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
const memberSince = member.member_since || member.created_at;
|
||||
const { isFieldEnabled } = useDirectoryConfig();
|
||||
return (
|
||||
<Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
|
||||
{/* Member Tier Badge */}
|
||||
@@ -48,7 +50,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
</h3>
|
||||
|
||||
{/* Partner Name */}
|
||||
{member.directory_partner_name && (
|
||||
{isFieldEnabled('directory_partner_name') && member.directory_partner_name && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Heart className="h-4 w-4 text-[var(--orange-light)]" />
|
||||
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
@@ -58,7 +60,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
)}
|
||||
|
||||
{/* Bio */}
|
||||
{member.directory_bio && (
|
||||
{isFieldEnabled('directory_bio') && member.directory_bio && (
|
||||
<p className="text-brand-purple text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{member.directory_bio}
|
||||
</p>
|
||||
@@ -79,7 +81,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-3 mb-4">
|
||||
{member.directory_email && (
|
||||
{isFieldEnabled('directory_email') && member.directory_email && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Mail className="h-4 w-4 text-brand-purple flex-shrink-0" />
|
||||
<a
|
||||
@@ -92,7 +94,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{member.directory_phone && (
|
||||
{isFieldEnabled('directory_phone') && member.directory_phone && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Phone className="h-4 w-4 text-brand-purple flex-shrink-0" />
|
||||
<a
|
||||
@@ -105,7 +107,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{member.directory_address && (
|
||||
{isFieldEnabled('directory_address') && member.directory_address && (
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<MapPin className="h-4 w-4 text-brand-purple flex-shrink-0 mt-0.5" />
|
||||
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
@@ -116,7 +118,7 @@ const MemberCard = ({ member, onViewProfile, tiers }) => {
|
||||
</div>
|
||||
|
||||
{/* Social Media Links */}
|
||||
{(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
|
||||
{isFieldEnabled('social_media') && (member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
|
||||
<div className="pt-4 border-t border-[var(--neutral-800)]">
|
||||
<div className="flex justify-center gap-3">
|
||||
{member.social_media_facebook && (
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import React from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import { CreditCard, Shield, Star, Palette, FileEdit } from 'lucide-react';
|
||||
import { CreditCard, Shield, Star, Palette, FileEdit, BookUser } from 'lucide-react';
|
||||
|
||||
const settingsItems = [
|
||||
{ label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
|
||||
{ label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
|
||||
{ label: 'Theme', path: '/admin/settings/theme', icon: Palette },
|
||||
|
||||
{ label: 'Directory', path: '/admin/settings/directory', icon: BookUser },
|
||||
// { label: 'Registration', path: '/admin/settings/registration', icon: FileEdit }, // Commented out for future fallback
|
||||
];
|
||||
|
||||
const SettingsTabs = () => {
|
||||
|
||||
Reference in New Issue
Block a user