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
@@ -67,14 +67,14 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{currentStatus === 'synced' && (
|
||||
<Cloud className="w-4 h-4 text-gray-light" title={t("bookCard.synced")}/>
|
||||
<IconButton icon={Cloud} variant="ghost" tooltip={t("bookCard.synced")} disabled/>
|
||||
)}
|
||||
|
||||
{currentStatus === 'local-only' && (
|
||||
<IconButton
|
||||
icon={CloudUpload}
|
||||
variant={isOffline ? 'muted' : 'primary'}
|
||||
size="sm"
|
||||
variant={isOffline ? 'ghost' : 'primary'}
|
||||
size="md"
|
||||
onClick={upload}
|
||||
disabled={isOffline}
|
||||
tooltip={t("bookCard.localOnly")}
|
||||
@@ -83,8 +83,8 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
|
||||
{currentStatus === 'server-only' && (
|
||||
<IconButton
|
||||
icon={CloudDownload}
|
||||
variant={isOffline ? 'muted' : 'primary'}
|
||||
size="sm"
|
||||
variant={isOffline ? 'ghost' : 'primary'}
|
||||
size="md"
|
||||
onClick={download}
|
||||
disabled={isOffline}
|
||||
tooltip={t("bookCard.serverOnly")}
|
||||
@@ -93,8 +93,8 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
|
||||
{currentStatus === 'to-sync-from-server' && (
|
||||
<IconButton
|
||||
icon={CloudDownload}
|
||||
variant={isOffline ? 'muted' : 'primary'}
|
||||
size="sm"
|
||||
variant={isOffline ? 'ghost' : 'primary'}
|
||||
size="md"
|
||||
onClick={syncFromServer}
|
||||
disabled={isOffline}
|
||||
tooltip={t("bookCard.toSyncFromServer")}
|
||||
@@ -103,8 +103,8 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
|
||||
{currentStatus === 'to-sync-to-server' && (
|
||||
<IconButton
|
||||
icon={CloudUpload}
|
||||
variant={isOffline ? 'muted' : 'primary'}
|
||||
size="sm"
|
||||
variant={isOffline ? 'ghost' : 'primary'}
|
||||
size="md"
|
||||
onClick={syncToServer}
|
||||
disabled={isOffline}
|
||||
tooltip={t("bookCard.toSyncToServer")}
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
import React from 'react';
|
||||
import {ExternalLink, FileText} from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import {AppRouterInstance, Link, useRouter} from '@/lib/navigation';
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface TermsOfUseProps {
|
||||
onAccept: () => void;
|
||||
}
|
||||
|
||||
export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
const router: AppRouterInstance = useRouter();
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
function handleAcceptTerm(): void {
|
||||
onAccept();
|
||||
}
|
||||
|
||||
|
||||
async function handleRefuse(): Promise<void> {
|
||||
if (isDesktop) {
|
||||
await tauri.logout();
|
||||
} else {
|
||||
window.location.href = 'https://eritors.com';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 bg-darkest-background/90 backdrop-blur-sm flex items-center justify-center p-6 font-['Lora']">
|
||||
@@ -25,9 +35,8 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
<FileText className="text-primary w-6 h-6" strokeWidth={1.75}/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-text-primary font-bold text-2xl">Termes d'utilisation</h2>
|
||||
<p className="text-text-secondary text-sm mt-1">Acceptation requise pour accéder à ERitors
|
||||
Scribe</p>
|
||||
<h2 className="text-text-primary font-bold text-2xl">{t('terms.title')}</h2>
|
||||
<p className="text-text-secondary text-sm mt-1">{t('terms.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,33 +44,21 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
<div className="space-y-6">
|
||||
<div className="bg-primary/5 border border-primary/20 rounded-xl p-6">
|
||||
<h3 className="text-text-primary font-semibold text-lg mb-4">
|
||||
Acceptation obligatoire
|
||||
{t('terms.mandatory')}
|
||||
</h3>
|
||||
<div className="text-text-secondary text-base leading-relaxed space-y-4">
|
||||
<p>
|
||||
Pour pouvoir utiliser nos services, tel qu'<strong className="text-primary">ERitors
|
||||
Scribe</strong>,
|
||||
vous devez accepter les termes d'utilisation en cliquant
|
||||
sur <strong>J'accepte</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Veuillez lire attentivement la page détaillée des termes et conditions d'utilisation
|
||||
avant de procéder à l'acceptation.
|
||||
</p>
|
||||
<p>
|
||||
Si vous n'acceptez pas ces conditions, vous ne pourrez pas accéder à nos services
|
||||
et serez redirigé vers la page d'accueil.
|
||||
</p>
|
||||
<p dangerouslySetInnerHTML={{__html: t('terms.mandatoryDesc1')}}/>
|
||||
<p>{t('terms.mandatoryDesc2')}</p>
|
||||
<p>{t('terms.mandatoryDesc3')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-tertiary border border-secondary rounded-xl p-6">
|
||||
<h3 className="text-text-primary font-semibold text-lg mb-4">
|
||||
Documentation complète
|
||||
{t('terms.fullDoc')}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-base leading-relaxed mb-4">
|
||||
Pour consulter l'intégralité de nos termes et conditions d'utilisation,
|
||||
veuillez visiter notre page dédiée :
|
||||
{t('terms.fullDocDesc')}
|
||||
</p>
|
||||
<a
|
||||
href="/terms"
|
||||
@@ -69,11 +66,11 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center space-x-2 text-primary hover:text-primary-light transition-colors duration-200 font-medium"
|
||||
>
|
||||
<span>Consulter les termes complets</span>
|
||||
<span>{t('terms.fullDocLink')}</span>
|
||||
<ExternalLink className="w-4 h-4" strokeWidth={1.75}/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="bg-warning/10 border border-warning/30 rounded-xl p-6">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="bg-warning/20 p-2 rounded-lg mt-1">
|
||||
@@ -81,12 +78,10 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-text-primary font-semibold text-base mb-2">
|
||||
Importance capitale
|
||||
{t('terms.importance')}
|
||||
</h4>
|
||||
<p className="text-text-secondary text-sm leading-relaxed">
|
||||
Cette acceptation est obligatoire et constitue un prérequis légal
|
||||
pour l'utilisation de nos services d'édition assistée par intelligence
|
||||
artificielle.
|
||||
{t('terms.importanceDesc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,18 +92,18 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2 text-text-secondary text-sm">
|
||||
<FileText className="text-primary w-4 h-4" strokeWidth={1.75}/>
|
||||
<span>Décision requise pour continuer</span>
|
||||
<span>{t('terms.required')}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="https://eritors.com"
|
||||
<button
|
||||
onClick={handleRefuse}
|
||||
className="text-muted hover:text-text-primary px-6 py-3 rounded-xl hover:bg-secondary transition-colors duration-150 text-sm font-medium"
|
||||
type="button"
|
||||
>
|
||||
Refuser et quitter
|
||||
</Link>
|
||||
{t('terms.refuse')}
|
||||
</button>
|
||||
<Button variant="primary" size="lg" onClick={handleAcceptTerm}>
|
||||
J'accepte les termes
|
||||
{t('terms.accept')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,4 +111,4 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,58 +1,65 @@
|
||||
import {Link} from '@/lib/navigation';
|
||||
import React from "react";
|
||||
import {BookProps} from "@/lib/types/book";
|
||||
import DeleteBook from "@/components/book/settings/DeleteBook";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
export default function BookCard(
|
||||
{
|
||||
book,
|
||||
onClickCallback,
|
||||
index
|
||||
}: {
|
||||
book: BookProps,
|
||||
onClickCallback: Function;
|
||||
index: number;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<Link href={`/book/${book.bookId}`}>
|
||||
<div
|
||||
className="group relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20">
|
||||
{book.coverImage ? (
|
||||
<img
|
||||
src={book.coverImage}
|
||||
alt={book.title || t("bookCard.noCoverAlt")}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-secondary flex items-center justify-center">
|
||||
<span className="text-muted text-5xl font-['ADLaM_Display']">
|
||||
{book.title.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-darkest-background/70 p-3">
|
||||
<h3 className="text-text-primary font-bold text-sm truncate">
|
||||
{book.title}
|
||||
</h3>
|
||||
{book.subTitle && (
|
||||
<p className="text-text-secondary text-xs truncate mt-0.5">
|
||||
{book.subTitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
|
||||
onClick={(e: React.MouseEvent): void => e.preventDefault()}
|
||||
{...(index === 0 && {'data-guide': 'bottom-book-card'})}
|
||||
>
|
||||
<DeleteBook bookId={book.bookId}/>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
import React from "react";
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import {BookProps} from "@/lib/types/book";
|
||||
import DeleteBook from "@/components/book/settings/DeleteBook";
|
||||
import SyncBook from "@/components/SyncBook";
|
||||
import {SyncType} from "@/context/BooksSyncContext";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface BookCardProps {
|
||||
book: BookProps;
|
||||
onClickCallback: (bookId: string) => void;
|
||||
index: number;
|
||||
syncStatus?: SyncType;
|
||||
}
|
||||
|
||||
export default function BookCard({book, onClickCallback, index, syncStatus}: BookCardProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20">
|
||||
<button onClick={(): void => onClickCallback(book.bookId)} className="w-full h-full text-left block"
|
||||
type="button">
|
||||
{book.coverImage ? (
|
||||
<img
|
||||
src={book.coverImage}
|
||||
alt={book.title || t("bookCard.noCoverAlt")}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-secondary flex items-center justify-center">
|
||||
<span className="text-muted text-5xl font-['ADLaM_Display']">
|
||||
{book.title.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isDesktop && syncStatus && (
|
||||
<div className="absolute top-2 left-2 cursor-default" onClick={(e: React.MouseEvent): void => e.stopPropagation()}>
|
||||
<SyncBook status={syncStatus} bookId={book.bookId}/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 bg-darkest-background/70 p-3">
|
||||
<h3 className="text-text-primary font-bold text-sm truncate">
|
||||
{book.title}
|
||||
</h3>
|
||||
{book.subTitle && (
|
||||
<p className="text-text-secondary text-xs truncate mt-0.5">
|
||||
{book.subTitle}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
|
||||
onClick={(e: React.MouseEvent): void => e.stopPropagation()}
|
||||
{...(index === 0 && {'data-guide': 'bottom-book-card'})}
|
||||
>
|
||||
<DeleteBook bookId={book.bookId}/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -17,7 +17,8 @@ import GuideTour, {GuideStep} from "@/components/GuideTour";
|
||||
import {guideTourDone, setNewGuideTour} from "@/lib/utils/user";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps, SyncType} from "@/context/BooksSyncContext";
|
||||
import {BookSyncCompare, SyncedBook} from "@/lib/types/synced-book";
|
||||
import {SeriesListItemProps} from "@/lib/types/series";
|
||||
import SeriesCard, {SeriesCardProps} from "@/components/series/SeriesCard";
|
||||
import SeriesSetting from "@/components/series/SeriesSetting";
|
||||
@@ -35,8 +36,11 @@ export default function BookList() {
|
||||
const router = useRouter();
|
||||
const t = useTranslations();
|
||||
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
|
||||
const {serverSyncedBooks}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext)
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
const {
|
||||
serverSyncedBooks, booksToSyncFromServer, booksToSyncToServer,
|
||||
serverOnlyBooks, localOnlyBooks
|
||||
}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {isCurrentlyOffline, offlineMode}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
const [groupedItems, setGroupedItems] = useState<Record<string, CategoryItem[]>>({});
|
||||
@@ -95,27 +99,38 @@ export default function BookList() {
|
||||
]
|
||||
|
||||
useEffect((): void => {
|
||||
if (groupedItems && Object.keys(groupedItems).length > 0 && guideTourDone(session.user?.guideTour || [], 'new-first-book')) {
|
||||
setBookGuide(true);
|
||||
if (groupedItems && Object.keys(groupedItems).length > 0) {
|
||||
const notDone: boolean = isCurrentlyOffline()
|
||||
? localStorage.getItem('guide-tour-new-first-book') !== 'true'
|
||||
: guideTourDone(session.user?.guideTour || [], 'new-first-book');
|
||||
if (notDone) setBookGuide(true);
|
||||
}
|
||||
}, [groupedItems]);
|
||||
|
||||
useEffect((): void => {
|
||||
loadBooksAndSeries().then()
|
||||
}, [serverSyncedBooks]);
|
||||
const canLoad: boolean = !isDesktop ||
|
||||
(!isCurrentlyOffline() || offlineMode.isDatabaseInitialized);
|
||||
if (canLoad) loadBooksAndSeries().then();
|
||||
}, [serverSyncedBooks, offlineMode.isDatabaseInitialized, booksToSyncFromServer, booksToSyncToServer, serverOnlyBooks, localOnlyBooks]);
|
||||
|
||||
useEffect((): void => {
|
||||
if (accessToken) loadBooksAndSeries().then();
|
||||
}, [accessToken]);
|
||||
|
||||
async function handleFirstBookGuide(): Promise<void> {
|
||||
if (isCurrentlyOffline()) {
|
||||
localStorage.setItem('guide-tour-new-first-book', 'true');
|
||||
setBookGuide(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response: boolean = await apiPost<boolean>(
|
||||
'logs/tour',
|
||||
{plateforme: 'web', tour: 'new-first-book'},
|
||||
{plateforme: 'desktop', tour: 'new-first-book'},
|
||||
session.accessToken, lang
|
||||
);
|
||||
if (response) {
|
||||
localStorage.setItem('guide-tour-new-first-book', 'true');
|
||||
setSession(setNewGuideTour(session, 'new-first-book'));
|
||||
setBookGuide(false);
|
||||
}
|
||||
@@ -291,6 +306,23 @@ export default function BookList() {
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function detectBookSyncStatus(bookId: string): SyncType {
|
||||
if (!isDesktop || isCurrentlyOffline()) return 'synced';
|
||||
if (serverOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId)) {
|
||||
return 'server-only';
|
||||
}
|
||||
if (localOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId)) {
|
||||
return 'local-only';
|
||||
}
|
||||
if (booksToSyncFromServer.find((book: BookSyncCompare): boolean => book.id === bookId)) {
|
||||
return 'to-sync-from-server';
|
||||
}
|
||||
if (booksToSyncToServer.find((book: BookSyncCompare): boolean => book.id === bookId)) {
|
||||
return 'to-sync-to-server';
|
||||
}
|
||||
return 'synced';
|
||||
}
|
||||
|
||||
function handleBookClick(bookId: string): void {
|
||||
router.push(`/book/${bookId}`);
|
||||
}
|
||||
@@ -388,11 +420,12 @@ export default function BookList() {
|
||||
return (
|
||||
<div key={item.book.bookId}
|
||||
{...(idx === 0 && {'data-guide': 'book-card'})}
|
||||
className={`flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2 box-border ${guideTourDone(session.user?.guideTour || [], 'new-first-book') && 'mb-[200px]'}`}>
|
||||
className={`flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2 box-border ${bookGuide && 'mb-[200px]'}`}>
|
||||
<BookCard
|
||||
book={item.book}
|
||||
onClickCallback={handleBookClick}
|
||||
index={idx}
|
||||
syncStatus={detectBookSyncStatus(item.book.bookId)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -95,7 +95,7 @@ export default function DraftCompanion() {
|
||||
|
||||
const isGPTEnabled: boolean = isOpenAIEnabled(session);
|
||||
const isSubTierTree: boolean = getSubLevel(session) === 3;
|
||||
const hasAccess: boolean = isGPTEnabled || isSubTierTree;
|
||||
const hasAccess: boolean = (isGPTEnabled || isSubTierTree) && !isCurrentlyOffline() && !book?.localBook;
|
||||
|
||||
useEffect((): void => {
|
||||
getDraftContent().then();
|
||||
|
||||
@@ -12,10 +12,12 @@ import ImportBookForm from "@/components/book/ImportBookForm";
|
||||
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import InsetPanel from "@/components/ui/InsetPanel";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
|
||||
export default function ScribeLeftBar() {
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
const t = useTranslations();
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
@@ -100,7 +102,9 @@ export default function ScribeLeftBar() {
|
||||
}}
|
||||
/>
|
||||
)) : (
|
||||
homeComponents.map((component: PanelComponent) => (
|
||||
homeComponents.filter((component: PanelComponent): boolean => {
|
||||
return !(isCurrentlyOffline() && component.id === 2);
|
||||
}).map((component: PanelComponent) => (
|
||||
<IconButton
|
||||
key={component.id}
|
||||
icon={component.icon}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -10,6 +10,7 @@ import {useTranslations} from '@/lib/i18n';
|
||||
import PulseLoader from '@/components/ui/PulseLoader';
|
||||
import InsetPanel from "@/components/ui/InsetPanel";
|
||||
import IconButton from "@/components/ui/IconButton";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
|
||||
// Lazy loaded Editor components
|
||||
const WorldEditor = lazy(function () {
|
||||
@@ -45,6 +46,7 @@ function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
|
||||
|
||||
export default function ComposerRightBar(): React.JSX.Element {
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
const t = useTranslations();
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
@@ -169,6 +171,9 @@ export default function ComposerRightBar(): React.JSX.Element {
|
||||
)}
|
||||
<div className="bg-tertiary p-1 flex flex-col space-y-2">
|
||||
{book ? editorComponents.filter(function (component: PanelComponent): boolean {
|
||||
if ((isCurrentlyOffline() || book?.localBook) && component.id === 1) {
|
||||
return false;
|
||||
}
|
||||
if (component.id === 1 && book.quillsenseEnabled === false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user