fix: refactor + perf

Author: diced

src/client/pages/auth/login.tsx

@@ -6,7 +6,6 @@ import DashboardErrorBoundary from './error/DashboardErrorBoundary';
 import RootErrorBoundary from './error/RootErrorBoundary';
 import FourOhFour from './pages/404';
 import Login from './pages/auth/login';
-import Logout from './pages/auth/logout';
 import Root from './Root';
 
 export async function dashboardLoader() {
@@ -38,7 +37,6 @@ export const router = createBrowserRouter([
             path: '/auth',
             children: [
               { path: 'login', Component: Login },
-              { path: 'logout', Component: Logout },
               { path: 'register', lazy: () => import('./pages/auth/register') },
               {
                 path: 'setup',

src/client/pages/auth/logout.tsx

@@ -51,6 +51,7 @@ import ConfigProvider from './ConfigProvider';
 import VersionBadge from './VersionBadge';
 import { Link, useLoaderData } from 'react-router-dom';
 import { dashboardLoader } from '../client/routes';
+import { useLogout } from '@/lib/hooks/useLogout';
 
 type NavLinks = {
   label: string;
@@ -158,6 +159,7 @@ export default function Layout() {
   const clipboard = useClipboard();
   const setUser = useUserStore((s) => s.setUser);
   const location = useLocation();
+  const logout = useLogout();
 
   const loaderData = useLoaderData<typeof dashboardLoader>();
   const config = loaderData.config;
@@ -304,12 +306,7 @@ export default function Layout() {
                 )}
 
                 <Menu.Divider />
-                <Menu.Item
-                  color='red'
-                  leftSection={<IconLogout size='1rem' />}
-                  component={Link}
-                  to='/auth/logout'
-                >
+                <Menu.Item color='red' leftSection={<IconLogout size='1rem' />} onClick={logout}>
                   Logout
                 </Menu.Item>
               </Menu.Dropdown>

src/client/routes.tsx

@@ -1,9 +1,10 @@
 import { File } from '@/lib/db/models/file';
 import { fetchApi } from '@/lib/fetchApi';
+import useObjectState from '@/lib/hooks/useObjectState';
 import { Button, Divider, Modal, NumberInput, PasswordInput, Stack, TextInput } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconEye, IconKey, IconPencil, IconPencilOff, IconTrashFilled } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { mutateFiles } from '../actions';
 
 export default function EditFileDetailsModal({
@@ -15,13 +16,41 @@ export default function EditFileDetailsModal({
   file: File | null;
   onClose: () => void;
 }) {
-  if (!file) return null;
+  const [formData, setFormData] = useObjectState<{
+    name: string;
+    maxViews: number | null;
+    password: string | null;
+    originalName: string | null;
+    type: string | null;
+  }>({
+    name: file?.name ?? '',
+    maxViews: file?.maxViews ?? null,
+    password: file?.password ? '' : null,
+    originalName: file?.originalName ?? null,
+    type: file?.type ?? null,
+  });
 
-  const [name, setName] = useState<string>(file.name ?? '');
-  const [maxViews, setMaxViews] = useState<number | null>(file?.maxViews ?? null);
-  const [password, setPassword] = useState<string | null>('');
-  const [originalName, setOriginalName] = useState<string | null>(file?.originalName ?? null);
-  const [type, setType] = useState<string | null>(file?.type ?? null);
+  useEffect(() => {
+    if (open) {
+      setFormData({
+        name: file?.name ?? '',
+        maxViews: file?.maxViews ?? null,
+        password: file?.password ? '' : null,
+        originalName: file?.originalName ?? null,
+        type: file?.type ?? null,
+      });
+    } else {
+      setFormData({
+        name: '',
+        maxViews: null,
+        password: null,
+        originalName: null,
+        type: null,
+      });
+    }
+  }, [open, file]);
+
+  if (!file) return null;
 
   const handleRemovePassword = async () => {
     if (!file.password) return;
@@ -58,12 +87,12 @@ export default function EditFileDetailsModal({
       name?: string;
     } = {};
 
-    if (maxViews !== null) data['maxViews'] = maxViews;
-    if (originalName !== null) data['originalName'] = originalName?.trim();
-    if (type !== null) data['type'] = type?.trim();
-    if (name !== file.name) data['name'] = name.trim();
+    if (formData.maxViews !== null) data['maxViews'] = formData.maxViews;
+    if (formData.originalName !== null) data['originalName'] = formData.originalName?.trim();
+    if (formData.type !== null) data['type'] = formData.type?.trim();
+    if (formData.name !== file.name) data['name'] = formData.name.trim();
 
-    const passwordTrimmed = password?.trim();
+    const passwordTrimmed = formData.password?.trim();
     if (passwordTrimmed !== '') data['password'] = passwordTrimmed;
 
     const { error } = await fetchApi(`/api/user/files/${file.id}`, 'PATCH', data);
@@ -85,47 +114,40 @@ export default function EditFileDetailsModal({
 
       onClose();
 
-      setPassword(null);
+      setFormData('password', null);
       mutateFiles();
     }
   };
 
-  useEffect(() => {
-    if (open) {
-      setName(file.name ?? '');
-      setMaxViews(file.maxViews ?? null);
-      setPassword(file.password ? '' : null);
-      setOriginalName(file.originalName ?? null);
-      setType(file.type ?? null);
-    }
-  }, [open, file]);
-
   return (
     <Modal zIndex={300} title={`Editing "${file.name}"`} onClose={onClose} opened={open}>
       <Stack gap='xs' my='sm'>
         <TextInput
           label='Name'
           description='Rename the file.'
-          value={name}
-          onChange={(event) => setName(event.currentTarget.value.trim())}
+          value={formData.name}
+          onChange={(event) => setFormData('name', event.currentTarget.value.trim())}
         />
 
         <NumberInput
           label='Max Views'
           placeholder='Unlimited'
           description='The maximum number of views this file can have before it is deleted. Leave blank to allow as many views as you want.'
           min={0}
-          value={maxViews || ''}
-          onChange={(value) => setMaxViews(value === '' ? null : Number(value))}
+          value={formData.maxViews || ''}
+          onChange={(value) => setFormData('maxViews', value === '' ? null : Number(value))}
           leftSection={<IconEye size='1rem' />}
         />
 
         <TextInput
           label='Original Name'
           description='Add an original name. When downloading this file, instead of using the generated file name (if chosen), it will download with this "original name" instead.'
-          value={originalName ?? ''}
+          value={formData.originalName ?? ''}
           onChange={(event) =>
-            setOriginalName(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+            setFormData(
+              'originalName',
+              event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+            )
           }
         />
 
@@ -137,9 +159,12 @@ export default function EditFileDetailsModal({
               doing, this can mess with how Zipline renders specific file types.
             </>
           }
-          value={type ?? ''}
+          value={formData.type ?? ''}
           onChange={(event) =>
-            setType(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+            setFormData(
+              'type',
+              event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+            )
           }
           c='red'
         />
@@ -159,10 +184,13 @@ export default function EditFileDetailsModal({
           <PasswordInput
             label='Password'
             description='Set a password for this file. Leave blank to disable password protection.'
-            value={password ?? ''}
+            value={formData.password ?? ''}
             autoComplete='off'
             onChange={(event) =>
-              setPassword(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+              setFormData(
+                'password',
+                event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+              )
             }
             leftSection={<IconKey size='1rem' />}
           />

src/components/Layout.tsx

@@ -1,6 +1,6 @@
-import FolderComboboxOptions from '@/components/folders/FolderComboboxOptions';
 import RelativeDate from '@/components/RelativeDate';
 import { addMultipleToFolder, copyFile, deleteFile, downloadFile } from '@/components/file/actions';
+import FolderComboboxOptions from '@/components/folders/FolderComboboxOptions';
 import { Response } from '@/lib/api/response';
 import { bytes } from '@/lib/bytes';
 import { type File } from '@/lib/db/models/file';
@@ -111,7 +111,7 @@ function TagsFilter({
   const combobox = useCombobox();
   const { data: tags } = useSWR<Extract<Response['/api/user/tags'], Tag[]>>('/api/user/tags');
 
-  const [value, setValue] = useState(searchQuery.tags.split(','));
+  const [value, setValue] = useState(() => searchQuery.tags.split(','));
   const handleValueSelect = (val: string) => {
     setValue((current) => (current.includes(val) ? current.filter((v) => v !== val) : [...current, val]));
   };

src/components/file/DashboardFile/EditFileDetailsModal.tsx

@@ -0,0 +1,50 @@
+import { Stack, TextInput, PasswordInput, Button } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+
+export default function LocalLogin({
+  form,
+  onSubmit,
+  loading,
+  hasBackground,
+}: {
+  form: UseFormReturnType<any>;
+  onSubmit: (values: any) => void;
+  loading: boolean;
+  hasBackground: boolean;
+}) {
+  return (
+    <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+      <Stack my='sm'>
+        <TextInput
+          size='md'
+          placeholder='Enter your username...'
+          autoComplete='username'
+          styles={{
+            input: { backgroundColor: hasBackground ? 'transparent' : undefined },
+          }}
+          {...form.getInputProps('username')}
+        />
+
+        <PasswordInput
+          size='md'
+          placeholder='Enter your password...'
+          autoComplete='current-password'
+          styles={{
+            input: { backgroundColor: hasBackground ? 'transparent' : undefined },
+          }}
+          {...form.getInputProps('password')}
+        />
+
+        <Button
+          size='md'
+          fullWidth
+          type='submit'
+          loading={loading}
+          variant={hasBackground ? 'outline' : 'filled'}
+        >
+          Login
+        </Button>
+      </Stack>
+    </form>
+  );
+}

src/components/pages/files/views/FileTable.tsx

@@ -0,0 +1,50 @@
+import { Button } from '@mantine/core';
+import { IconKey } from '@tabler/icons-react';
+import { useState } from 'react';
+import { startAuthentication } from '@simplewebauthn/browser';
+import { fetchApi } from '@/lib/fetchApi';
+import { notifications } from '@mantine/notifications';
+import { getWebClient } from '@/lib/api/detect';
+
+export default function PasskeyAuthButton({ onAuthSuccess }: { onAuthSuccess: (data: any) => void }) {
+  const [loading, setLoading] = useState(false);
+  const [errored, setErrored] = useState(false);
+
+  const handleLogin = async () => {
+    setLoading(true);
+    try {
+      const { data: options } = await fetchApi<any>('/api/auth/webauthn/options', 'GET');
+      const res = await startAuthentication({ optionsJSON: options.options });
+
+      const { data, error } = await fetchApi<any>(
+        '/api/auth/webauthn',
+        'POST',
+        { response: res },
+        { 'x-zipline-client': JSON.stringify(getWebClient()) },
+      );
+
+      if (error) throw new Error(error.error);
+      onAuthSuccess(data);
+    } catch (e: any) {
+      setErrored(true);
+      setTimeout(() => setErrored(false), 3000);
+      notifications.show({ title: 'Auth Failed', message: e.message, color: 'red' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleLogin}
+      size='md'
+      fullWidth
+      variant='outline'
+      leftSection={<IconKey size='1rem' />}
+      color={errored ? 'red' : undefined}
+      loading={loading}
+    >
+      Login with passkey
+    </Button>
+  );
+}