feat: add multi-user support and role-based access control #31

web/src/features/settings/proxy/components/action-dialog.tsx

@@ -40,70 +40,79 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
-import { Proxy } from '../data/schema'
 import { AxiosError } from 'axios'
 import { ToastAction } from '@/components/ui/toast'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Loader2 } from 'lucide-react'
 import { add_proxy, update_proxy } from '@/api/system/api'
 import { useTranslation } from 'react-i18next'
-
+import { Proxy } from '@/api/system/api'
 
 const proxyFormSchema = z.object({
   url: z.string()
     .min(1, "Proxy address cannot be empty")
-    .refine(
-      (value) => {
-        try {
-          const url = new URL(value);
-          return url.protocol === 'socks5:' || url.protocol === 'http:';
-        } catch {
-          return false;
-        }
-      },
-      {
-        message: "URL must start with http:// or socks5://",
+    .superRefine((value, ctx) => {
+
+      if (value.length === 0) {
+        return;
       }
-    )
-    .refine(
-      (value) => {
-        const url = new URL(value);
-        return /^[a-zA-Z0-9\-\.]+$/.test(url.hostname);
-      },
-      {
-        message: "Hostname contains invalid characters",
+
+      let url: URL;
+      try {
+        url = new URL(value);
+      } catch (e) {
+
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Invalid URL format",
+          path: [],
+        });
+        return;
       }
-    )
-    .refine(
-      (value) => {
-        const url = new URL(value);
-        const port = parseInt(url.port || '1080');
-        return port > 0 && port <= 65535;
-      },
-      {
-        message: "Port must be between 1-65535",
+
+
+      if (url.protocol !== 'socks5:' && url.protocol !== 'http:') {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "URL must start with http:// or socks5://",
+          path: [],
+        });
       }
-    )
-    .refine(
-      (value) => {
-        const url = new URL(value);
-        if (url.username && !url.password) return false;
-        return true;
-      },
-      {
-        message: "Password cannot be empty when username is provided",
+
+
+      if (!/^[a-zA-Z0-9\-\.]+$/.test(url.hostname)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Hostname contains invalid characters",
+          path: [],
+        });
       }
-    )
-    .refine(
-      (value) => {
-        const url = new URL(value);
-        if (url.password) return url.password.length >= 8;
-        return true;
-      },
-      {
-        message: "Password must be at least 8 characters",
+
+
+      const port = parseInt(url.port || '1080');
+      if (port <= 0 || port > 65535) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Port must be between 1-65535",
+          path: [],
+        });
       }
-    )
+
+
+      if (url.username && !url.password) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Password cannot be empty when username is provided",
+          path: [],
+        });
+      } else if (url.password && url.password.length < 8) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Password must be at least 8 characters",
+          path: [],
+        });
+      }
+    })
 });
 
 export type ProxyForm = z.infer<typeof proxyFormSchema>;
@@ -174,7 +183,6 @@ export function ProxyActionDialog({ currentRow, open, onOpenChange }: Props) {
       description: errorMessage as string,
       action: <ToastAction altText={t('common.tryAgain')}>{t('common.tryAgain')}</ToastAction>,
     });
-    console.error(error);
   }
 
 

web/src/features/settings/proxy/components/columns.tsx

@@ -19,11 +19,11 @@
 
 import { ColumnDef } from '@tanstack/react-table'
 import LongText from '@/components/long-text'
-
-import { Proxy } from '../data/schema'
 import { DataTableColumnHeader } from './data-table-column-header'
 import { DataTableRowActions } from './data-table-row-actions'
 import { format } from 'date-fns'
+import { Proxy } from '@/api/system/api'
+
 
 export const getColumns = (t: (key: string) => string): ColumnDef<Proxy>[] => [
   {

web/src/features/settings/proxy/components/data-table-pagination.tsx

@@ -32,51 +32,68 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { useTranslation } from 'react-i18next'
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>
-  showSelected?: boolean,
+  showSelected?: boolean
   showPageSizeSelector?: boolean
 }
 
 export function DataTablePagination<TData>({
   table,
-  showSelected = true,
-  showPageSizeSelector = true
+  showSelected = false,
+  showPageSizeSelector = true,
 }: DataTablePaginationProps<TData>) {
+  const { t } = useTranslation()
+
   return (
     <div className='flex items-center justify-between overflow-auto px-2'>
-      {showSelected && <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>}
-      {!showPageSizeSelector && <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
-        10 rows per page.
-      </div>}
+      {showSelected && (
+        <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
+          {t('table.pagination.selected', {
+            selected: table.getFilteredSelectedRowModel().rows.length,
+            total: table.getFilteredRowModel().rows.length,
+          })}
+        </div>
+      )}
+      {!showPageSizeSelector && (
+        <div className='hidden flex-1 text-sm text-muted-foreground sm:block'>
+          {t('table.pagination.fixed_page_size', { size: 10 })}
+        </div>
+      )}
       <div className='flex items-center sm:space-x-6 lg:space-x-8 ml-auto'>
-        {showPageSizeSelector && <div className='flex items-center space-x-2'>
-          <p className='hidden text-sm font-medium sm:block'>Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className='h-8 w-[70px]'>
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side='top'>
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>}
-        <div className='flex w-[100px] items-center justify-center text-sm font-medium'>
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
+        {showPageSizeSelector && (
+          <div className='flex items-center space-x-2'>
+            <p className='hidden text-sm font-medium sm:block'>
+              {t('table.pagination.rows_per_page')}
+            </p>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => {
+                table.setPageSize(Number(value))
+              }}
+            >
+              <SelectTrigger className='h-8 w-[70px]'>
+                <SelectValue
+                  placeholder={table.getState().pagination.pageSize}
+                />
+              </SelectTrigger>
+              <SelectContent side='top'>
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div className='flex w-[130px] items-center justify-center text-sm font-medium'>
+          {t('table.pagination.page_info', {
+            page: table.getState().pagination.pageIndex + 1,
+            total: table.getPageCount(),
+          })}
         </div>
         <div className='flex items-center space-x-2'>
           <Button
@@ -85,7 +102,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(0)}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className='sr-only'>Go to first page</span>
+            <span className='sr-only'>{t('table.pagination.first')}</span>
             <DoubleArrowLeftIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -94,7 +111,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
           >
-            <span className='sr-only'>Go to previous page</span>
+            <span className='sr-only'>{t('table.pagination.previous')}</span>
             <ChevronLeftIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -103,7 +120,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.nextPage()}
             disabled={!table.getCanNextPage()}
           >
-            <span className='sr-only'>Go to next page</span>
+            <span className='sr-only'>{t('table.pagination.next')}</span>
             <ChevronRightIcon className='h-4 w-4' />
           </Button>
           <Button
@@ -112,7 +129,7 @@ export function DataTablePagination<TData>({
             onClick={() => table.setPageIndex(table.getPageCount() - 1)}
             disabled={!table.getCanNextPage()}
           >
-            <span className='sr-only'>Go to last page</span>
+            <span className='sr-only'>{t('table.pagination.last')}</span>
             <DoubleArrowRightIcon className='h-4 w-4' />
           </Button>
         </div>

web/src/features/settings/proxy/components/data-table-row-actions.tsx

@@ -30,8 +30,9 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { useProxyContext } from '../context'
-import { Proxy } from '../data/schema'
 import { useTranslation } from 'react-i18next'
+import { Proxy } from '@/api/system/api'
+
 
 interface DataTableRowActionsProps {
   row: Row<Proxy>

web/src/features/settings/proxy/components/delete-dialog.tsx

@@ -24,12 +24,13 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { ConfirmDialog } from '@/components/confirm-dialog'
-import { Proxy } from '../data/schema'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { ToastAction } from '@/components/ui/toast'
 import { AxiosError } from 'axios'
 import { delete_proxy } from '@/api/system/api'
 import { useTranslation } from 'react-i18next'
+import { Proxy } from '@/api/system/api'
+
 
 interface Props {
   open: boolean
@@ -53,7 +54,7 @@ export function ProxyDeleteDialog({ open, onOpenChange, currentRow }: Props) {
   }
 
   function handleError(error: AxiosError) {
-    const errorMessage = error.response?.data ||
+    const errorMessage = (error.response?.data as { message?: string })?.message ||
       error.message ||
       t('proxyDelete.failedDesc');
 

web/src/features/settings/proxy/components/table.tsx

@@ -41,10 +41,11 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { Proxy } from '../data/schema'
 import { DataTablePagination } from './data-table-pagination'
 import { DataTableToolbar } from './data-table-toolbar'
 import { useTranslation } from 'react-i18next'
+import { Proxy } from '@/api/system/api'
+
 
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars