Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: OnlyOffice edit session token expiration and add session expired modal
Some checks failed
Automated Container Build / build-and-push (push) Failing after 15s
Details

Browse source
This commit is contained in:
Elijah 2026-05-31 15:20:54 -07:00
parent 1f83d57942
commit 218fb40743
7 changed files with 130 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/app/page.tsx
View file

@ -10,13 +10,13 @@ type AppState = 'loading' | 'setup' | 'login' | 'app';
export default function Home() {
const [state, setState] = useState<AppState>('loading');
const [sessionExpired, setSessionExpired] = useState(false);
useEffect(() => {
checkState();
const handleAuthError = () => {
api.clearTokens();
setState('login');
setSessionExpired(true);
};
window.addEventListener('auth_error', handleAuthError);
return () => window.removeEventListener('auth_error', handleAuthError);
@ -92,5 +92,29 @@ export default function Home() {
return <LoginPage onSuccess={handleLoginSuccess} />;
}
return <FileExplorer onLogout={handleLogout} />;
return (
<>
<FileExplorer onLogout={handleLogout} />
{sessionExpired && (
<div className="fixed inset-0 bg-black/60 z-[9999] flex items-center justify-center p-4">
<div className="bg-[var(--color-bg-primary)] p-6 rounded-2xl max-w-sm w-full shadow-2xl border border-[var(--color-border)]">
<h3 className="text-xl font-bold mb-2 text-[var(--color-text-primary)]">Session Expired</h3>
<p className="text-[var(--color-text-secondary)] mb-6 text-sm">
Your session has expired or encountered an error. Please log in again to continue.
</p>
<button
onClick={() => {
setSessionExpired(false);
api.clearTokens();
setState('login');
}}
className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
>
Log In
</button>
</div>
</div>
)}
</>
);
}

4
frontend/src/components/OnlyOfficeEditor.tsx
View file

@ -80,8 +80,8 @@ export default function OnlyOfficeEditor({ file, type, onClose, onRename, theme,
// the auth middleware which fails when requests come through the Next.js proxy.
const INTERNAL_URL = process.env.NEXT_PUBLIC_API_URL || 'http://192.168.50.81:5827/api';
const fileUrl = `${INTERNAL_URL}/public/onlyoffice/download?path=${encodeURIComponent(file.path)}&token=${downloadToken}`;
const callbackUrl = `${INTERNAL_URL}/public/onlyoffice/callback?path=${encodeURIComponent(file.path)}&token=${downloadToken}`;
const fileUrl = `${INTERNAL_URL}/public/onlyoffice/download?path=${encodeURIComponent(file.path)}&token=${editToken}`;
const callbackUrl = `${INTERNAL_URL}/public/onlyoffice/callback?path=${encodeURIComponent(file.path)}&token=${editToken}`;
const baseConfig: any = {
document: {

14
frontend/src/lib/api.ts
View file

@ -289,13 +289,13 @@ class ApiClient {
}
async createDownloadToken(): Promise<string> {
const res = await fetch(`${API_BASE}/api/auth/download-token`, {
method: 'GET',
headers: {
Authorization: `Bearer ${this.accessToken}`,
},
});
if (!res.ok) throw new Error('Failed to fetch download token');
const res = await this.request('/api/auth/download-token');
const data = await res.json();
return data.token;
}
async createEditToken(): Promise<string> {
const res = await this.request('/api/auth/edit-token');
const data = await res.json();
return data.token;
}