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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user