This commit implements comprehensive timezone and time format customization:
## Backend Changes
- Added timeFormat field ('12h' | '24h') to user preferences JSONB in user entity
- Timezone field already existed in user entity, now actively used
- Backend ready to accept timezone on registration
## Frontend Components (2 new)
- TimeZoneSelector: Dropdown with timezones grouped by region (Americas, Europe, Asia, Pacific, Africa)
* Auto-detect button to detect browser timezone
* Save functionality with success/error feedback
* Integrated into Settings > Preferences section
- TimeFormatSelector: Radio buttons to choose 12h vs 24h format
* Live preview showing current time in selected format
* Save functionality with user feedback
* Integrated into Settings > Preferences section
## Timezone Auto-Detection
- Register function now auto-detects user's timezone via Intl.DateTimeFormat()
- Detected timezone sent to backend during registration
- Timezone stored in user profile for persistent preference
## Enhanced useLocalizedDate Hook
- Added useAuth integration to access user timezone and timeFormat preferences
- Installed and integrated date-fns-tz for timezone conversion
- New format() function with timezone support via useTimezone option
- New formatTime() function respecting user's 12h/24h preference
- New formatDateTime() function combining date, time, and timezone
- All formatting now respects user's:
* Language (existing: en, es, fr, pt-BR, zh-CN)
* Timezone (user-selected or auto-detected)
* Time format (12h with AM/PM or 24h)
## Settings Page Updates
- Added TimeZoneSelector to Preferences card
- Added TimeFormatSelector to Preferences card
- Visual separators (Dividers) between preference sections
- Settings now show: Language | Units | Timezone | Time Format
## Translations
- Enhanced settings.json with timezone and time format keys:
* preferences.timezone, autoDetectTimezone, timezoneUpdated
* preferences.12hour, 24hour, timeFormatUpdated
## User Experience Flow
1. User registers → timezone auto-detected and saved
2. User can change timezone in Settings > Preferences > Time Zone
3. User can change time format in Settings > Preferences > Time Format
4. All dates/times throughout app respect these preferences
5. Changes persist across sessions
Files changed: 10 files
New dependencies: date-fns-tz
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
249 lines
6.3 KiB
TypeScript
249 lines
6.3 KiB
TypeScript
'use client';
|
|
|
|
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import apiClient from '@/lib/api/client';
|
|
import { tokenStorage } from '@/lib/utils/tokenStorage';
|
|
|
|
export interface User {
|
|
id: string;
|
|
email: string;
|
|
name: string;
|
|
role: string;
|
|
families?: Array<{
|
|
id: string;
|
|
familyId: string;
|
|
role: string;
|
|
}>;
|
|
}
|
|
|
|
export interface LoginCredentials {
|
|
email: string;
|
|
password: string;
|
|
deviceFingerprint?: string;
|
|
}
|
|
|
|
export interface RegisterData {
|
|
email: string;
|
|
password: string;
|
|
name: string;
|
|
role?: string;
|
|
}
|
|
|
|
interface AuthContextType {
|
|
user: User | null;
|
|
token: string | null;
|
|
isLoading: boolean;
|
|
isAuthenticated: boolean;
|
|
login: (credentials: LoginCredentials) => Promise<void>;
|
|
register: (data: RegisterData) => Promise<void>;
|
|
logout: () => Promise<void>;
|
|
refreshUser: () => Promise<void>;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
|
|
|
export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const router = useRouter();
|
|
|
|
const isAuthenticated = !!user;
|
|
|
|
// Check authentication status on mount
|
|
useEffect(() => {
|
|
// Only run on client side
|
|
if (typeof window !== 'undefined') {
|
|
checkAuth();
|
|
} else {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
const checkAuth = async () => {
|
|
// Ensure we're on client side
|
|
if (typeof window === 'undefined') {
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const accessToken = tokenStorage.getAccessToken();
|
|
if (!accessToken) {
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
|
|
// Set token in state
|
|
setToken(accessToken);
|
|
|
|
const response = await apiClient.get('/api/v1/auth/me');
|
|
|
|
// Check if response has expected structure
|
|
if (response.data?.data) {
|
|
setUser(response.data.data);
|
|
} else if (response.data?.user) {
|
|
// Handle alternative response structure
|
|
setUser(response.data.user);
|
|
} else {
|
|
throw new Error('Invalid response structure');
|
|
}
|
|
} catch (error: any) {
|
|
console.error('Auth check failed:', error);
|
|
// Only clear tokens if it's an actual auth error (401, 403)
|
|
if (error?.response?.status === 401 || error?.response?.status === 403) {
|
|
tokenStorage.clearTokens();
|
|
setUser(null);
|
|
setToken(null);
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const login = async (credentials: LoginCredentials) => {
|
|
try {
|
|
const deviceInfo = {
|
|
deviceId: generateDeviceFingerprint(),
|
|
platform: 'web',
|
|
model: navigator.userAgent,
|
|
osVersion: navigator.platform,
|
|
};
|
|
|
|
const response = await apiClient.post('/api/v1/auth/login', {
|
|
email: credentials.email,
|
|
password: credentials.password,
|
|
deviceInfo,
|
|
});
|
|
|
|
// Backend returns { success, data: { user, tokens } }
|
|
const { data: responseData } = response.data;
|
|
const { tokens, user: userData } = responseData;
|
|
|
|
tokenStorage.setTokens(tokens.accessToken, tokens.refreshToken);
|
|
setToken(tokens.accessToken);
|
|
setUser(userData);
|
|
|
|
router.push('/');
|
|
} catch (error: any) {
|
|
console.error('Login failed:', error);
|
|
throw new Error(error.response?.data?.message || 'Login failed');
|
|
}
|
|
};
|
|
|
|
const register = async (data: RegisterData) => {
|
|
try {
|
|
const deviceInfo = {
|
|
deviceId: generateDeviceFingerprint(),
|
|
platform: 'web',
|
|
model: navigator.userAgent,
|
|
osVersion: navigator.platform,
|
|
};
|
|
|
|
// Auto-detect timezone from user's device
|
|
const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
const response = await apiClient.post('/api/v1/auth/register', {
|
|
email: data.email,
|
|
password: data.password,
|
|
name: data.name,
|
|
timezone: detectedTimezone || 'UTC',
|
|
deviceInfo,
|
|
});
|
|
|
|
// Backend returns { success, data: { user, family, tokens } }
|
|
const { data: responseData } = response.data;
|
|
const { tokens, user: userData } = responseData;
|
|
|
|
if (!tokens?.accessToken || !tokens?.refreshToken) {
|
|
throw new Error('Invalid response from server');
|
|
}
|
|
|
|
const { accessToken, refreshToken } = tokens;
|
|
|
|
tokenStorage.setTokens(accessToken, refreshToken);
|
|
setToken(accessToken);
|
|
setUser(userData);
|
|
|
|
// Redirect to onboarding
|
|
router.push('/onboarding');
|
|
} catch (error: any) {
|
|
console.error('Registration failed:', error);
|
|
throw new Error(error.response?.data?.message || error.message || 'Registration failed');
|
|
}
|
|
};
|
|
|
|
const logout = async () => {
|
|
try {
|
|
await apiClient.post('/api/v1/auth/logout');
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
} finally {
|
|
tokenStorage.clearTokens();
|
|
setUser(null);
|
|
setToken(null);
|
|
router.push('/login');
|
|
}
|
|
};
|
|
|
|
const refreshUser = async () => {
|
|
try {
|
|
const response = await apiClient.get('/api/v1/auth/me');
|
|
setUser(response.data.data);
|
|
} catch (error) {
|
|
console.error('Failed to refresh user:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AuthContext.Provider
|
|
value={{
|
|
user,
|
|
token,
|
|
isLoading,
|
|
isAuthenticated,
|
|
login,
|
|
register,
|
|
logout,
|
|
refreshUser,
|
|
}}
|
|
>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useAuth = () => {
|
|
const context = useContext(AuthContext);
|
|
if (context === undefined) {
|
|
throw new Error('useAuth must be used within an AuthProvider');
|
|
}
|
|
return context;
|
|
};
|
|
|
|
// Helper function to generate a simple device fingerprint
|
|
function generateDeviceFingerprint(): string {
|
|
const navigator = window.navigator;
|
|
const screen = window.screen;
|
|
|
|
const data = [
|
|
navigator.userAgent,
|
|
navigator.language,
|
|
screen.colorDepth,
|
|
screen.width,
|
|
screen.height,
|
|
new Date().getTimezoneOffset(),
|
|
].join('|');
|
|
|
|
// Simple hash function
|
|
let hash = 0;
|
|
for (let i = 0; i < data.length; i++) {
|
|
const char = data.charCodeAt(i);
|
|
hash = ((hash << 5) - hash) + char;
|
|
hash = hash & hash;
|
|
}
|
|
|
|
return hash.toString(36);
|
|
}
|