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