Add terms of use translations, sync detection, and refactor book components
- Introduced new translations for terms of use in French and English locales. - Added sync status detection logic for books in `BookList` and `BookCard` components. - Refactored `BookCard` to handle additional props and improve layout flexibility. - Enhanced `TermsOfUse` component with complete localization support and refuse functionality. - Updated data decryption logic in Rust services to handle optional fields and additional metadata consistently. - Improved offline/online synchronization workflows with extended context properties.
This commit is contained in:
natreex
@@ -6,6 +6,7 @@ import {useTranslations} from '@/lib/i18n';
|
||||
import {Lock, ShieldCheck, Eye, EyeOff} from 'lucide-react';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import Button from '@/components/ui/Button';
|
||||
import IconButton from '@/components/ui/IconButton';
|
||||
|
||||
interface OfflinePinSetupProps {
|
||||
onClose?: () => void;
|
||||
@@ -69,77 +70,83 @@ export default function OfflinePinSetup({onClose, onSuccess, showOnFirstLogin}:
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-darkest-background/60 backdrop-blur-md">
|
||||
<div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-3 bg-primary/10 rounded-lg">
|
||||
<ShieldCheck className="w-6 h-6 text-primary"/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-bold text-text-primary">
|
||||
{showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
|
||||
</h2>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-darkest-background/60 backdrop-blur-md animate-fadeIn">
|
||||
<div className="relative bg-tertiary text-text-primary rounded-xl max-w-md w-full flex flex-col">
|
||||
<div className="flex justify-between items-center px-6 py-4">
|
||||
<h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-xl tracking-wide">
|
||||
<ShieldCheck className="w-6 h-6" strokeWidth={1.75}/>
|
||||
{showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
|
||||
</h2>
|
||||
{onClose && (
|
||||
<IconButton icon={Lock} variant="light" onClick={onClose}/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-darkest-background rounded-xl mx-2 mb-2">
|
||||
<div className="p-5 space-y-4">
|
||||
<p className="text-sm text-muted">
|
||||
{t('offline.pin.setup.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
|
||||
<p className="text-sm text-info flex items-center gap-2">
|
||||
<Lock className="w-3 h-3"/>
|
||||
{t('offline.pin.setup.description')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 bg-info/10 border border-info/20 rounded-lg">
|
||||
<p className="text-sm text-info flex items-center gap-2">
|
||||
<Lock className="w-3 h-3 shrink-0"/>
|
||||
{t('offline.pin.setup.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
{t('offline.pin.setup.pinLabel')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
{t('offline.pin.setup.pinLabel')}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
placeholder="••••"
|
||||
maxLength={8}
|
||||
className="input-base text-center text-lg tracking-widest"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
|
||||
>
|
||||
{showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
{t('offline.pin.setup.confirmPinLabel')}
|
||||
</label>
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
value={confirmPin}
|
||||
onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
placeholder="••••"
|
||||
maxLength={8}
|
||||
className="input-base text-center text-lg tracking-widest"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
|
||||
>
|
||||
{showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-text-primary mb-2">
|
||||
{t('offline.pin.setup.confirmPinLabel')}
|
||||
</label>
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={confirmPin}
|
||||
onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
placeholder="••••"
|
||||
maxLength={8}
|
||||
className="input-base text-center text-lg tracking-widest"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{error && (
|
||||
<div className="p-2 bg-error/10 border border-error/20 rounded-lg">
|
||||
<p className="text-sm text-error">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted text-center">
|
||||
{t('offline.pin.setup.footer')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-3 p-2 bg-error/10 border border-error/20 rounded-lg">
|
||||
<p className="text-sm text-error">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6 flex gap-3 justify-end">
|
||||
<div className="flex justify-end gap-3 px-6 py-4">
|
||||
{onClose && (
|
||||
<Button variant="ghost" onClick={onClose} disabled={isLoading}>
|
||||
{t('offline.pin.setup.laterButton')}
|
||||
@@ -156,10 +163,6 @@ export default function OfflinePinSetup({onClose, onSuccess, showOnFirstLogin}:
|
||||
{t('offline.pin.setup.configureButton')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-xs text-muted text-center">
|
||||
{t('offline.pin.setup.footer')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -64,85 +64,81 @@ export default function OfflinePinVerify({onSuccess, onCancel}: OfflinePinVerify
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
|
||||
<div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
|
||||
<div className="flex items-center justify-center mb-6">
|
||||
<div className="relative">
|
||||
<div className="p-4 bg-primary/10 rounded-full">
|
||||
<Lock className="w-8 h-8 text-primary"/>
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 p-1 bg-tertiary rounded-full">
|
||||
<div className="p-1 bg-warning/20 rounded-full">
|
||||
<Wifi className="w-3 h-3 text-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-xl font-bold text-text-primary mb-2">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-darkest-background/60 backdrop-blur-md animate-fadeIn">
|
||||
<div className="relative bg-tertiary text-text-primary rounded-xl max-w-md w-full flex flex-col">
|
||||
<div className="flex justify-between items-center px-6 py-4">
|
||||
<h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-xl tracking-wide">
|
||||
<Lock className="w-6 h-6" strokeWidth={1.75}/>
|
||||
{t('offline.pin.verify.title')}
|
||||
</h2>
|
||||
<p className="text-sm text-muted">
|
||||
{t('offline.pin.verify.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder={t('offline.pin.verify.placeholder')}
|
||||
maxLength={8}
|
||||
autoFocus
|
||||
className="input-base text-center text-lg tracking-widest"
|
||||
disabled={isLoading || attempts > 2}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
|
||||
>
|
||||
{showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
|
||||
</button>
|
||||
<div className="p-1.5 bg-warning/20 rounded-full">
|
||||
<Wifi className="w-4 h-4 text-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
|
||||
<p className="text-sm text-error text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-darkest-background rounded-xl mx-2 mb-2">
|
||||
<div className="p-5 space-y-4">
|
||||
<p className="text-sm text-muted text-center">
|
||||
{t('offline.pin.verify.subtitle')}
|
||||
</p>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showPin ? 'text' : 'password'}
|
||||
value={pin}
|
||||
onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder={t('offline.pin.verify.placeholder')}
|
||||
maxLength={8}
|
||||
autoFocus
|
||||
className="input-base text-center text-lg tracking-widest"
|
||||
disabled={isLoading || attempts > 2}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPin(!showPin)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
|
||||
>
|
||||
{showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-error/10 border border-error/20 rounded-lg">
|
||||
<p className="text-sm text-error text-center">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{attempts > 0 && attempts <= 2 && (
|
||||
<p className="text-xs text-muted text-center">
|
||||
{t('offline.pin.verify.attemptsRemaining', {count: 3 - attempts})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between px-6 py-4">
|
||||
<Button variant="danger" icon={LogOut} onClick={handleLogout} disabled={isLoading}>
|
||||
{t('userMenu.logout')}
|
||||
</Button>
|
||||
{onCancel && (
|
||||
<Button variant="secondary" onClick={onCancel} disabled={isLoading}>
|
||||
{t('offline.pin.verify.cancelButton')}
|
||||
<div className="flex gap-3">
|
||||
{onCancel && (
|
||||
<Button variant="secondary" onClick={onCancel} disabled={isLoading}>
|
||||
{t('offline.pin.verify.cancelButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Lock}
|
||||
isLoading={isLoading}
|
||||
loadingText={t('offline.pin.verify.verifyingButton')}
|
||||
onClick={handleVerifyPin}
|
||||
disabled={isLoading || !pin || attempts > 2}
|
||||
>
|
||||
{t('offline.pin.verify.unlockButton')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={Lock}
|
||||
isLoading={isLoading}
|
||||
loadingText={t('offline.pin.verify.verifyingButton')}
|
||||
onClick={handleVerifyPin}
|
||||
disabled={isLoading || !pin || attempts > 2}
|
||||
>
|
||||
{t('offline.pin.verify.unlockButton')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{attempts > 0 && attempts <= 2 && (
|
||||
<p className="mt-4 text-xs text-muted text-center">
|
||||
{t('offline.pin.verify.attemptsRemaining', {count: 3 - attempts})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
'use client';
|
||||
|
||||
import { useContext } from 'react';
|
||||
import {useContext} from 'react';
|
||||
import OfflineContext from '@/context/OfflineContext';
|
||||
import { Wifi, Circle } from 'lucide-react';
|
||||
import {Wifi, Circle} from 'lucide-react';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
export default function OfflineToggle() {
|
||||
const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
|
||||
const {offlineMode, toggleOfflineMode} = useContext(OfflineContext);
|
||||
const t = useTranslations();
|
||||
|
||||
if (!offlineMode.isDatabaseInitialized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleToggle = () => {
|
||||
toggleOfflineMode();
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleToggle}
|
||||
onClick={toggleOfflineMode}
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
|
||||
${offlineMode.isOffline
|
||||
@@ -25,14 +23,14 @@ export default function OfflineToggle() {
|
||||
: 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
|
||||
}
|
||||
`}
|
||||
title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
|
||||
title={offlineMode.isOffline ? t('offline.toggle.switchToOnline') : t('offline.toggle.switchToOffline')}
|
||||
>
|
||||
{offlineMode.isOffline
|
||||
? <Circle className="w-3 h-3 text-orange-300" />
|
||||
: <Wifi className="w-3 h-3 text-green-300" />
|
||||
? <Circle className="w-3 h-3 text-orange-300"/>
|
||||
: <Wifi className="w-3 h-3 text-green-300"/>
|
||||
}
|
||||
<span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
|
||||
{offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
|
||||
{offlineMode.isOffline ? t('offline.toggle.offline') : t('offline.toggle.online')}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user