diff --git a/README.md b/README.md
index 1bbe7efe8..a21eee07f 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,10 @@ This is a full rewrite of [the Delphi version](https://github.com/rejetto/hfs2).
## Installation
+For service installation instructions, [see our wiki](https://github.com/rejetto/hfs/wiki/Service-installation).
+
+For Docker installation, [see dedicated repo](https://github.com/damienzonly/hfs-docker).
+
NB: minimum Windows version required is 8.1 , Windows Server 2012 R2 (because of Node.js 18)
1. go to https://github.com/rejetto/hfs/releases
@@ -86,41 +90,6 @@ If this procedure fails, it may be that you are missing one of [these requiremen
Configuration and other files will be stored in `%HOME%/.vfs`
-### Service
-
-If you want to run HFS at boot (as a service), we suggest the following methods
-
-#### On Linux
-1. [install node.js](https://nodejs.org)
-2. create a file `/etc/systemd/system/hfs.service` with this content
- ```
- [Unit]
- Description=HFS
- After=network.target
-
- [Service]
- Type=simple
- Restart=always
- ExecStart=/usr/bin/npx -y hfs@latest
-
- [Install]
- WantedBy=multi-user.target
- ```
-3. run `sudo systemctl daemon-reload && sudo systemctl enable hfs && sudo systemctl start hfs && sudo systemctl status hfs`
-
-NB: update will be attempted at each restart
-
-#### On Windows
-
-1. [install node.js](https://nodejs.org)
-2. run `npm -g i hfs`
-3. run `npx qckwinsvc2 install name="HFS" description="HFS" path="%APPDATA%\npm\node_modules\hfs\src\index.js" args="--cwd %HOMEPATH%\.hfs" now`
-
-To update
-- run `npx qckwinsvc2 uninstall name="HFS"`
-- run `npm -g update hfs`
-- run `npx qckwinsvc2 install name="HFS" description="HFS" path="%APPDATA%\npm\node_modules\hfs\src\index.js" args="--cwd %HOMEPATH%\.hfs" now`
-
## Console commands
If you have full access to HFS' console, you can enter commands. Start with `help` to have a full list.
@@ -150,43 +119,17 @@ In the Languages section of the Admin-panel you can install additional language
If your language is missing, please consider [translating yourself](https://github.com/rejetto/hfs/wiki/Translation).
-## Why you should upgrade from HFS 2.x
-
-HFS 2.x is vulnerable to important attacks, and there is no known solution at the moment.
-
-As you can see from the list of features, we already have some goods that you cannot find in HFS 2.
-Other than that, you can also consider:
-
-- it's more robust: it was designed to be an always-running server, while HFS 1-2 was designed for occasional usage (transfer and quit)
-- passwords are never really stored, just a non-reversible hash is
-- faster search (up to 12x)
-- more flexible permissions
-
-## Security
-
-While this project focuses on ease of use, we care about security.
-- HTTPS support
-- Passwords are not saved, and not disclosed even without https thanks to [SRP](https://en.wikipedia.org/wiki/Secure_Remote_Password_protocol)
-- Automated tests ran on every release, including libraries audit
-- No default admin password
-
-Some actions you can take for improved security:
-- use https, better if using a proper certificate, even free with [Letsencrypt](https://letsencrypt.org/).
-- have a domain (ddns is ok too), configure it in "Internet" page, and enable "Accept requests only using domain"
-- install "antidos" plugin
-- ensure "antibrute" plugin is running
-- disable "unprotected admin on localhost"
-
## Hidden features
- Appending `#LOGIN` to address will bring up the login dialog
- Appending ?lang=CODE to address will force a specific language
-- right/ctrl/command click on toggle-all checkbox will invert each checkbox state
+- Right-click on toggle-all checkbox will invert each checkbox state
- Appending `?login=USER:PASSWORD` will automatically log in the browser
- Appending `?overwrite` on uploads, will override the dont_overwrite_uploading configuration, provided you also have delete permission
- Appending `?search=PATTERN` will trigger search at start
- Right-click on "check for updates" will let you input a URL of a version to install
-- shift+click on a file will show & play
+- Shift+click on a file will show & play
+- Type the name of a file/folder to focus it, and ctrl+backspace to go to parent folder
## Contribute
@@ -227,6 +170,4 @@ There are several ways to contribute
- [License](https://github.com/rejetto/hfs/blob/master/LICENSE.txt)
-- [To-do list](todo.md)
-
- Flag images are public-domain, downloaded from https://flagpedia.net
\ No newline at end of file
diff --git a/admin/index.html b/admin/index.html
index 17e80b6b1..0acfd19c9 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -7,8 +7,11 @@
HFS Admin-panel
+
+
+
diff --git a/admin/package.json b/admin/package.json
index 167d5746a..6f5af0c4c 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -37,7 +37,7 @@
"@types/react-dom": "^18.2.18",
"@types/react-window": "^1.8.8",
"@types/react-virtualized-auto-sizer": "^1.0.4",
- "vite": "^5.0.12"
+ "vite": "^5.4.8"
},
"eslintConfig": {
"extends": [
diff --git a/admin/src/AccountForm.ts b/admin/src/AccountForm.ts
index c2f64009e..aa0c235af 100644
--- a/admin/src/AccountForm.ts
+++ b/admin/src/AccountForm.ts
@@ -6,7 +6,7 @@ import { Alert } from '@mui/material'
import { apiCall } from './api'
import { alertDialog, useDialogBarColors } from './dialog'
import { formatTimestamp, isEqualLax, prefix, useIsMobile, wantArray } from './misc'
-import { IconBtn, modifiedProps } from './mui'
+import { IconBtn, propsForModifiedValues } from './mui'
import { Account } from './AccountsPage'
import { createVerifierAndSalt, SRPParameters, SRPRoutines } from 'tssrp6a'
import { AutoDelete, Delete } from '@mui/icons-material'
@@ -70,7 +70,7 @@ export default function AccountForm({ account, done, groups, addToBar, reload }:
helperText: values.ignore_limits ? "Speed limits don't apply to this account" : "Speed limits apply to this account" },
{ k: 'admin', comp: BoolField, fromField: (v:boolean) => v||null, label: "Admin-panel access", xs: 12, sm: 6, xl: 8,
helperText: "To access THIS interface you are using right now",
- ...!account.admin && account.adminActualAccess && { value: true, helperText: "This permission is inherited" },
+ ...!account.admin && account.adminActualAccess && { value: true, disabled: true, helperText: "This permission is inherited. To disable it, act on the groups." },
},
{ k: 'disable_password_change', comp: BoolField, fromField: x=>!x, toField: x=>!x, label: "Allow password change", xs: 'auto' },
group && h(Alert, { severity: 'info' }, `To add users to this group, select the user and then click "Inherit"`),
@@ -88,7 +88,7 @@ export default function AccountForm({ account, done, groups, addToBar, reload }:
],
onError: alertDialog,
save: {
- ...modifiedProps( !isEqualLax(values, account)),
+ ...propsForModifiedValues(isModifiedConfig(values, account)),
async onClick() {
const { password='', password2, adminActualAccess, hasPassword, invalidated, ...withoutPassword } = values
if (add) {
@@ -116,6 +116,10 @@ export default function AccountForm({ account, done, groups, addToBar, reload }:
})
}
+export function isModifiedConfig(a: any, b: any) {
+ return !isEqualLax(a, b, (a,b) => !a && !b || undefined)
+}
+
// you can set password directly in add/set_account, but using this api instead will add extra security because it is not sent as clear-text, so it's especially good if you are not in localhost and not using https
export async function apiNewPassword(username: string, password: string) {
const srp6aNimbusRoutines = new SRPRoutines(new SRPParameters())
diff --git a/admin/src/AccountsPage.ts b/admin/src/AccountsPage.ts
index 153e5ec43..7dc359f97 100644
--- a/admin/src/AccountsPage.ts
+++ b/admin/src/AccountsPage.ts
@@ -1,6 +1,6 @@
// This file is part of HFS - Copyright 2021-2023, Massimo Melina - License https://www.gnu.org/licenses/gpl-3.0.txt
-import { createElement as h, useState, useEffect, Fragment } from "react"
+import { createElement as h, useState, useEffect, Fragment, useMemo } from "react"
import { apiCall, useApiEx } from './api'
import { Alert, Box, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
import { Close, Delete, DoNotDisturb, Group, MilitaryTech, Person, PersonAdd, Schedule } from '@mui/icons-material'
@@ -13,20 +13,20 @@ import _ from 'lodash'
import { alertDialog, confirmDialog, toast } from './dialog'
import { useSnapState } from './state'
import { importAccountsCsv } from './importAccountsCsv'
-import { AccountAdminSend } from '../../src/api.accounts'
+import apiAccounts from '../../src/api.accounts'
-export type Account = AccountAdminSend
+export type Account = ReturnType['list'][0]
export default function AccountsPage() {
const { username } = useSnapState()
- const { data, reload, element } = useApiEx('get_accounts')
+ const { data, reload, element } = useApiEx('get_accounts')
const [sel, setSel] = useState([])
const selectionMode = Array.isArray(sel)
useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
if (Array.isArray(data?.list) && selectionMode)
- setSel( sel.filter(u => data.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
+ setSel( sel.filter(u => data!.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
}, [data]) //eslint-disable-line -- Don't fall for its suggestion to add `sel` here: we modify it and declaring it as a dependency would cause a logical loop
- const list: Account[] | undefined = data?.list
+ const list = useMemo(() => data && _.sortBy(data.list, [x => !x.adminActualAccess, 'username']), [data])
const selectedAccount = selectionMode && _.find(list, { username: sel[0] })
const sideBreakpoint = 'md'
const isSideBreakpoint = useBreakpoint(sideBreakpoint)
@@ -109,7 +109,7 @@ export default function AccountsPage() {
setSel(ids)
}
},
- list?.map((ac: Account) =>
+ list?.map(ac =>
h(TreeItem, {
key: ac.username,
nodeId: ac.username,
@@ -155,8 +155,8 @@ export default function AccountsPage() {
if (errors.length)
return alertDialog("Following elements couldn't be deleted: " + errors.join(', '), 'error')
}
-}
-export function account2icon(ac: Account, props={}) {
- return h(ac.hasPassword ? Person : Group, props)
-}
+ function account2icon(ac: Account, props={}) {
+ return h(ac.hasPassword ? Person : Group, props)
+ }
+}
\ No newline at end of file
diff --git a/admin/src/App.ts b/admin/src/App.ts
index 247530e38..53ad3b425 100644
--- a/admin/src/App.ts
+++ b/admin/src/App.ts
@@ -35,7 +35,9 @@ function App() {
function ApplyTheme(props:any) {
return h(Box, {
sx: { bgcolor: 'background.default', color: 'text.primary', flex: 1,
- maxWidth: '100%' /*avoid horizontal overflow (eg: customHtml with long line) */ },
+ transition: 'background-color .4s',
+ maxWidth: '100%' /*avoid horizontal overflow (eg: customHtml with long line) */
+ },
...props
})
}
diff --git a/admin/src/ArrayField.ts b/admin/src/ArrayField.ts
index 3e0415f83..eae48769d 100644
--- a/admin/src/ArrayField.ts
+++ b/admin/src/ArrayField.ts
@@ -4,20 +4,23 @@ import { createElement as h, Fragment, useMemo, useState } from 'react'
import { Dict, isOrderedEqual, setHidden, swap } from './misc'
import { Add, Edit, Delete, ArrowUpward, ArrowDownward, Undo, Check } from '@mui/icons-material'
import { formDialog } from './dialog'
-import { DataGrid, GridActionsCellItem, GridAlignment, GridColDef } from '@mui/x-data-grid'
+import { GridActionsCellItem, GridAlignment, GridColDef } from '@mui/x-data-grid'
import { BoolField, FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
import { Box, FormHelperText, FormLabel } from '@mui/material'
import { DateTimeField } from './DateTimeField'
import _ from 'lodash'
import { Center, IconBtn } from './mui'
+import { DataTable } from './DataTable'
-type ArrayFieldProps = FieldProps & { fields: FieldDescriptor[], height?: number, reorder?: boolean, prepend?: boolean }
-export function ArrayField({ label, helperText, fields, value, onChange, onError, setApi, reorder, prepend, noRows, valuesForAdd, ...rest }: ArrayFieldProps) {
- const rows = useMemo(() => (value||[]).map((x,$idx) =>
+type ArrayFieldProps = FieldProps & { fields: FieldDescriptor[], height?: number, reorder?: boolean, prepend?: boolean, autoRowHeight?: boolean }
+export function ArrayField({ label, helperText, fields, value, onChange, onError, setApi, reorder, prepend, noRows, valuesForAdd, autoRowHeight, ...rest }: ArrayFieldProps) {
+ if (!Array.isArray(value)) // avoid crash if non-array values are passed, especially developing plugins
+ value = []
+ const rows = useMemo(() => value!.map((x,$idx) =>
setHidden({ ...x } as any, x.hasOwnProperty('id') ? { $idx } : { id: $idx })),
[JSON.stringify(value)]) //eslint-disable-line
const form = {
- fields: fields.map(({ $width, $column, $type, ...rest }) => _.defaults(rest, byType[$type]?.field))
+ fields: fields.map(({ $width, $column, $type, $hideUnder, ...rest }) => _.defaults(rest, byType[$type]?.field))
}
setApi?.({ isEqual: isOrderedEqual }) // don't rely on stringify, as it wouldn't work with non-json values
const [undo, setUndo] = useState()
@@ -25,9 +28,14 @@ export function ArrayField({ label, helperText, fields, value,
label && h(FormLabel, { sx: { ml: 1 } }, label),
helperText && h(FormHelperText, {}, helperText),
h(Box, { ...rest },
- h(DataGrid, {
+ h(DataTable, {
rows,
- sx: { '.MuiDataGrid-virtualScroller': { minHeight: '3em' } },
+ ...autoRowHeight && { getRowHeight: () => 'auto' as const },
+ sx: {
+ '.MuiDataGrid-virtualScroller': { minHeight: '3em' },
+ ...autoRowHeight && { '.MuiDataGrid-cell': { minHeight: '52px !important' } }
+ },
+ style: undefined, // override style making it fill the flex
hideFooterSelectedRowCount: true,
hideFooter: true,
slots: {
@@ -42,7 +50,7 @@ export function ArrayField({ label, helperText, fields, value,
columns: [
...fields.map(f => {
const def = byType[f.$type]?.column
- return ({
+ return {
field: f.k,
headerName: f.headerName ?? (typeof f.label === 'string' ? f.label : labelFromKey(f.k)),
disableColumnMenu: true,
@@ -51,8 +59,9 @@ export function ArrayField({ label, helperText, fields, value,
},
...def,
...f.$width ? { [f.$width >= 8 ? 'width' : 'flex']: f.$width } : (!def?.width && !def?.flex && { flex: 1 }),
+ hideUnder: f.$hideUnder,
...f.$column,
- })
+ }
}),
{
field: '',
@@ -91,10 +100,11 @@ export function ArrayField({ label, helperText, fields, value,
icon: h(Edit),
label: title,
title,
- onClick(event: MouseEvent) {
+ onClick(ev: MouseEvent) {
+ ev.stopPropagation()
formDialog({ values: row as any, form, title }).then(x => {
if (x)
- set(value!.map((oldRec, i) => i === $idx ? x : oldRec), event)
+ set(value!.map((oldRec, i) => i === $idx ? x : oldRec), ev)
})
}
}),
@@ -102,19 +112,28 @@ export function ArrayField({ label, helperText, fields, value,
icon: h(Delete),
label: "Delete",
showInMenu: reorder,
- onClick: ev => set(value!.filter((rec, i) => i !== $idx), ev),
+ onClick: ev => {
+ ev.stopPropagation()
+ set(value!.filter((rec, i) => i !== $idx), ev)
+ },
}),
reorder && $idx && h(GridActionsCellItem as any, {
icon: h(ArrowUpward),
label: "Move up",
showInMenu: true,
- onClick: ev => set(swap(value!.slice(), $idx, $idx - 1), ev),
+ onClick: ev => {
+ ev.stopPropagation()
+ set(swap(value!.slice(), $idx, $idx - 1), ev)
+ },
}),
reorder && $idx < rows.length - 1 && h(GridActionsCellItem as any, {
icon: h(ArrowDownward),
label: "Move down",
showInMenu: true,
- onClick: ev => set(swap(value!.slice(), $idx, $idx + 1), ev),
+ onClick: ev => {
+ ev.stopPropagation()
+ set(swap(value!.slice(), $idx, $idx + 1), ev)
+ },
}),
].filter(Boolean)
}
diff --git a/admin/src/ConfigFilePage.ts b/admin/src/ConfigFilePage.ts
index 13e28b291..d5e68ee98 100644
--- a/admin/src/ConfigFilePage.ts
+++ b/admin/src/ConfigFilePage.ts
@@ -63,7 +63,7 @@ export default function ConfigFilePage() {
function copy() {
if (!text) return
- navigator.clipboard.writeText(text.replace(/^\s*(\w*password|srp):.+\n/gm, ''))
+ navigator.clipboard.writeText(text.replace(/^(\s*(\w*password\w*|srp):\s*).+\n/gm, '$1: removed\n'))
toast("copied")
}
}
diff --git a/admin/src/ConfigForm.ts b/admin/src/ConfigForm.ts
index 47351b43d..846d245a2 100644
--- a/admin/src/ConfigForm.ts
+++ b/admin/src/ConfigForm.ts
@@ -2,7 +2,7 @@ import { Form, FormProps } from '@hfs/mui-grid-form'
import { apiCall, useApiEx } from './api'
import { createElement as h, useEffect, useState, Dispatch } from 'react'
import _ from 'lodash'
-import { IconBtn, modifiedProps } from './mui'
+import { IconBtn, propsForModifiedValues } from './mui'
import { RestartAlt } from '@mui/icons-material'
import { Callback, onlyTruthy } from '../../src/cross'
@@ -35,7 +35,7 @@ export function ConfigForm({ keys, form, saveOnChange, onSave, ...rest }:
},
save: saveOnChange ? false : {
onClick: save,
- ...modifiedProps(modified),
+ ...propsForModifiedValues(modified),
},
...formProps,
...rest,
diff --git a/admin/src/DataTable.ts b/admin/src/DataTable.ts
index 8a04887ee..58469c63f 100644
--- a/admin/src/DataTable.ts
+++ b/admin/src/DataTable.ts
@@ -34,6 +34,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
const theme = useTheme()
const apiRef = useGridApiRef()
const [actionsLength, setActionsLength] = useState(0)
+ const [merged, setMerged] = useState(0)
const manipulatedColumns = useMemo(() => {
const { localeText } = enUS.components.MuiDataGrid.defaultProps as any
const ret = columns.map(col => {
@@ -100,6 +101,8 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
&& field))
const o = Object.fromEntries(fields.map(x => [x, false]))
_.merge(initialState, { columns: { columnVisibilityModel: o } })
+ // count the hidden columns that are merged into visible columns
+ setMerged(_.sumBy(fields, k => _.find(columns, col => !fields.includes(col.field) && col.mergeRender?.[k]) ? 1 : 0))
return fields
}, [manipulatedColumns, width])
const [vis, setVis] = useState({})
@@ -128,6 +131,9 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
columns: manipulatedColumns,
apiRef,
...rest,
+ sx: {
+ '& .MuiDataGrid-virtualScroller': { minHeight: '3em' } // without this, no-entries gets just 1px
+ },
slots: {
noRowsOverlay: () => initializing ? null : h(Center, {}, noRows || "No entries"),
footer: CustomFooter,
@@ -142,10 +148,10 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
onCellClick({ field, row }) {
if (field === ACTIONS) return
if (window.getSelection()?.type === 'Range') return // not a click but a drag
- const n = apiRef.current.getVisibleColumns().length
- const showCols = manipulatedColumns.filter(x =>
+ const visibleInList = merged + apiRef.current.getVisibleColumns().length
+ const showInDialog = manipulatedColumns.filter(x =>
!x.dialogHidden && (x.renderCell || x.field === ACTIONS || row[x.field] !== undefined))
- if (showCols.length <= n) return
+ if (showInDialog.length <= visibleInList) return // no need for dialog
newDialog({
title: "Details",
onClose() {
@@ -163,7 +169,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
gridAutoFlow: 'dense',
minWidth: 'max(16em, 40vw)',
sx: { opacity: curRow ? undefined : .5 },
- }, showCols.map(col =>
+ }, showInDialog.map(col =>
h(Box, { key: col.field, gridColumn: col.flex && '1/-1' },
h(Box, { bgcolor: '#0003', p: 1 }, col.headerName || col.field),
h(Flex, { minHeight: '2.5em', px: 1, wordBreak: 'break-word' },
diff --git a/admin/src/FileField.ts b/admin/src/FileField.ts
index 116762395..8e5c47367 100644
--- a/admin/src/FileField.ts
+++ b/admin/src/FileField.ts
@@ -14,8 +14,7 @@ export default function FileField({ value, onChange, files=true, folders=false,
...props,
value,
onChange,
- onTyping: (v: string) => !v.includes('\n') && v,
- InputProps: { multiline: true },
+ wrap: true,
end: h(IconBtn, {
icon: Eject,
title: "Browse files...",
diff --git a/admin/src/FileForm.ts b/admin/src/FileForm.ts
index 2800e89e7..7f2eecc18 100644
--- a/admin/src/FileForm.ts
+++ b/admin/src/FileForm.ts
@@ -7,11 +7,12 @@ import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, Sel
} from '@hfs/mui-grid-form'
import { apiCall, UseApi } from './api'
import {
- basename, defaultPerms, formatBytes, formatTimestamp, isEqualLax, isWhoObject, newDialog, objSameKeys,
+ basename, defaultPerms, formatBytes, formatTimestamp, isWhoObject, newDialog, objSameKeys,
onlyTruthy, prefix, VfsPerms, wantArray, Who, WhoObject, matches, HTTP_MESSAGES, xlate, md, Callback,
- useRequestRender, splitAt
+ useRequestRender, splitAt, IMAGE_FILEMASK
} from './misc'
-import { Btn, IconBtn, LinkBtn, modifiedProps, useBreakpoint, wikiLink } from './mui'
+import { isModifiedConfig } from './AccountForm'
+import { Btn, Flex, IconBtn, LinkBtn, propsForModifiedValues, useBreakpoint, wikiLink } from './mui'
import { reloadVfs, VfsNode } from './VfsPage'
import _ from 'lodash'
import FileField from './FileField'
@@ -22,6 +23,8 @@ import { moveVfs } from './VfsTree'
import QrCreator from 'qr-creator';
import MenuButton from './MenuButton'
import addFiles, { addLink, addVirtual } from './addFiles'
+import { SYS_ICONS } from '@hfs/frontend/src/sysIcons'
+import { hIcon } from '@hfs/frontend/src/misc'
const ACCEPT_LINK = "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept"
@@ -72,6 +75,8 @@ export default function FileForm({ file, addToBar, statusApi, accounts, saved }:
can_upload: isDir,
can_delete: isDir,
}
+ const defaultIcon = !values.icon
+ const embeddedIcon = values.icon && !values.icon.includes('.')
return h(Form, {
values,
set(v, k) {
@@ -130,7 +135,7 @@ export default function FileForm({ file, addToBar, statusApi, accounts, saved }:
],
onError: alertDialog,
save: {
- ...modifiedProps(!isEqualLax(values, rest)),
+ ...propsForModifiedValues(isModifiedConfig(values, rest)),
async onClick() {
const props = _.omit(values, ['ctime','mtime','size','id'])
;(props as any).masks ||= null // undefined cannot be serialized
@@ -152,12 +157,30 @@ export default function FileForm({ file, addToBar, statusApi, accounts, saved }:
: isDir ? "Content from this path on disk will be listed, but you can also add more" : undefined,
},
{ k: 'id', comp: LinkField, statusApi, xs: 12 },
+ {
+ k: 'iconType',
+ comp: SelectField,
+ options: ['default', 'file', 'embedded'],
+ value: !values.icon ? 'default' : embeddedIcon ? 'embedded' : 'file',
+ fromField: v => setValues({ ...values, icon: v === 'default' ? '' : v === 'file' ? 'select.a.file' : Object.keys(SYS_ICONS)[0] }),
+ xs: defaultIcon ? 12 : true,
+ },
+ !defaultIcon && { k: 'icon', xs: 7, md: 8, xl: 10,
+ ...embeddedIcon ? {
+ comp: SelectField, // uniqBy to avoid same icon (with different names), but it works only on array, so first step is to convert the object
+ options: _.map(_.uniqBy(_.map(SYS_ICONS, (v,k) => [k, v[0], v[1] ?? k] as const), x => x[2]), ([k, emoji]) =>
+ ({ value: k, label: h(Flex, { gap: '.5em' }, hIcon(k), hIcon(emoji), ' ', k) }) ), // show both font-icon and emoji versions
+ helperText: "Second icon you see is the fallback"
+ } : {
+ label: "Icon file", placeholder: "default", comp: FileField, fileMask: IMAGE_FILEMASK,
+ }
+ },
perm('can_read', "Who can see but not download will be asked to login"),
- perm('can_see', ["Control what appears in the list.", wikiLink('Permissions', " More help.")]),
perm('can_archive', "Should this be included when user downloads as ZIP", { lg: isDir ? 6 : 12 }),
- perm('can_delete', [needSourceWarning, "Those who can delete can also rename and cut/move"]),
perm('can_list', "Permission to requests the list of a folder. The list will include only things you can see.", { contentText: "subfolders" }),
+ perm('can_delete', [needSourceWarning, "Those who can delete can also rename and cut/move"]),
perm('can_upload', needSourceWarning, { contentText: "subfolders" }),
+ perm('can_see', ["See this item in the list. ", wikiLink('Permissions', "More help.")]),
isLink && {
k: 'target',
comp: BoolField,
@@ -171,17 +194,18 @@ export default function FileForm({ file, addToBar, statusApi, accounts, saved }:
showTimestamps && { k: 'mtime', comp: DisplayField, sm: 6, lg: showSize && 4, label: "Modified", toField: formatTimestamp },
showAccept && { k: 'accept', label: "Accept on upload", placeholder: "anything", xl: showWebsite ? 4 : 12,
helperText: h(Link, { href: ACCEPT_LINK, target: '_blank' }, "Example: .zip") },
- showWebsite && { k: 'default', comp: BoolField, xl: true,
+ showWebsite && { k: 'default', comp: BoolField, xl: showWebsite ? 8 : 12,
label: "Serve as web-page if index.html is found" + (inheritedDefault && values.default == null ? ' (inherited)' : ''),
value: values.default ?? inheritedDefault,
toField: Boolean, fromField: (v:boolean) => v && !inheritedDefault ? 'index.html' : v ? null : false,
helperText: md("...instead of showing list of files")
},
- isDir && { k: 'masks', multiline: true,
+ { k: 'comment', multiline: true, xl: true },
+ isDir && { k: 'masks', multiline: true, xl: 6,
toField: yaml.stringify, fromField: v => v ? yaml.parse(v) : undefined,
sx: { '& textarea': { fontFamily: 'monospace' } },
helperText: ["Special field, leave empty unless you know what you are doing. YAML syntax. ", wikiLink('Masks-field', "(examples)")]
- }
+ },
]
})
diff --git a/admin/src/HomePage.ts b/admin/src/HomePage.ts
index ecbf837e3..77e8ba5c8 100644
--- a/admin/src/HomePage.ts
+++ b/admin/src/HomePage.ts
@@ -3,8 +3,10 @@
import { createElement as h, ReactNode, useState } from 'react'
import { Box, Card, CardContent, LinearProgress, Link } from '@mui/material'
import { apiCall, useApiEx, useApiList } from './api'
-import { dontBotherWithKeys, objSameKeys, onlyTruthy, prefix, REPO_URL, md,
- replaceStringToReact, wait, with_ } from './misc'
+import {
+ dontBotherWithKeys, objSameKeys, onlyTruthy, prefix, REPO_URL, md,
+ replaceStringToReact, wait, with_, DAY, HOUR
+} from './misc'
import { Btn, Flex, InLink, LinkBtn, wikiLink, } from './mui'
import { BrowserUpdated as UpdateIcon, CheckCircle, Error, Info, Launch, OpenInNew, Warning } from '@mui/icons-material'
import { state, useSnapState } from './state'
@@ -15,24 +17,15 @@ import { Account } from './AccountsPage'
import _ from 'lodash'
import { subscribeKey } from 'valtio/utils'
import { SwitchThemeBtn } from './theme'
-import { BoolField } from '@hfs/mui-grid-form'
+import { CheckboxField } from '@hfs/mui-grid-form'
import { ConfigForm } from './ConfigForm'
-
-interface ServerStatus { listening: boolean, port: number, error?: string, busy?: string }
-
-interface Status {
- http: ServerStatus
- https: ServerStatus
- frpDetected: boolean
- proxyDetected?: boolean
- updatePossible: boolean | string
- version: string
-}
+import { Release } from '../../src/update'
+import { adminApis } from '../../src/adminApis'
export default function HomePage() {
const SOLUTION_SEP = " — "
const { username } = useSnapState()
- const { data: status, reload: reloadStatus, element: statusEl } = useApiEx('get_status')
+ const { data: status, reload: reloadStatus, element: statusEl } = useApiEx('get_status')
const { data: vfs } = useApiEx<{ root?: VfsNode }>('get_vfs')
const { data: account } = useApiEx(username && 'get_account')
const cfg = useApiEx('get_config', { only: ['https_port', 'cert', 'private_key', 'proxies'] })
@@ -60,17 +53,21 @@ export default function HomePage() {
]]))
return h(Box, { display:'flex', gap: 2, flexDirection:'column', alignItems: 'flex-start', height: '100%' },
username && entry('', "Welcome, "+username),
+ dontBotherWithKeys(status.alerts?.map(x => entry('warning', md(x, { html: false })))),
errors.length ? dontBotherWithKeys(errors.map(msg => entry('error', dontBotherWithKeys(msg))))
: entry('success', "Server is working"),
- !vfs ? h(LinearProgress)
- : !vfs.root?.children?.length && !vfs.root?.source ? entry('warning', "You have no files shared", SOLUTION_SEP, fsLink("add some"))
- : entry('', md("This is the Admin-panel, where you manage your server. Access your files on "),
- h(Link, { target:'frontend', href: '../..' }, "Front-end", h(Launch, { sx: { verticalAlign: 'sub', ml: '.2em' } }))),
!href && entry('warning', "Frontend unreachable: ",
_.map(serverErrors, (v,k) => k + " " + (v ? "is in error" : "is off")).join(', '),
!errors.length && [ SOLUTION_SEP, cfgLink("switch http or https on") ]
),
+ with_(status.acmeRenewError, x => x && entry('warning', x)),
plugins.find(x => x.badApi) && entry('warning', "Some plugins may be incompatible"),
+ !cfg.data?.split_uploads && (Date.now() - Number(status.cloudflareDetected || 0)) < DAY
+ && entry('', wikiLink('Reverse-proxy#cloudflare', "Cloudflare detected, read our guide")),
+ !vfs ? h(LinearProgress)
+ : !vfs.root?.children?.length && !vfs.root?.source ? entry('warning', "You have no files shared", SOLUTION_SEP, fsLink("add some"))
+ : entry('', md("This is the Admin-panel, where you manage your server. Access your files on "),
+ h(Link, { target:'frontend', href: '../..' }, "Front-end", h(Launch, { sx: { verticalAlign: 'sub', ml: '.2em' } }))),
!account?.adminActualAccess && entry('', md("On localhost you don't need to login"),
SOLUTION_SEP, "to access Admin-panel from another computer ", h(InLink, { to:'accounts' }, md("create an account with *admin* permission")) ),
with_(proxyWarning(cfg, status), x => x && entry('warning', x,
@@ -92,58 +89,69 @@ export default function HomePage() {
h('li',{}, `disable "admin access for localhost" in HFS (safe, but you won't see users' IPs)`),
)),
entry('', wikiLink('', "See the documentation"), " and ", h(Link, { target: 'support', href: REPO_URL + 'discussions' }, "get support")),
+ !updates && with_(status.autoCheckUpdateResult, x => x?.isNewer && h(Update, { info: x, bodyCollapsed: true, title: "An update has been found" })),
pluginUpdates.length > 0 && entry('success', "Updates available for plugin(s): " + pluginUpdates.map(p => p.id).join(', ')),
- status.updatePossible === 'local' ? h(Btn, {
- icon: UpdateIcon,
- onClick: () => update()
- }, "Update from local file")
- : !updates ? h(Flex, { flexWrap: 'wrap' },
- h(Btn, {
- variant: 'outlined',
- icon: UpdateIcon,
- onClick() {
- setCheckPlugins(true)
- return apiCall('check_update').then(x => setUpdates(x.options), alertDialog)
- },
- async onContextMenu(ev) {
- ev.preventDefault()
- if (!status.updatePossible)
- return alertDialog("Automatic update is only for binary versions", 'warning')
- const res = await promptDialog("Enter a link to the zip to install")
- if (res)
- await update(res)
- },
- title: status.updatePossible && "Right-click if you want to install a zip",
- }, "Check for updates"),
- h(ConfigForm, {
- saveOnChange: true,
- form: { fields: [
- { k: 'update_to_beta', comp: BoolField, label: "Include beta versions" },
- ] }
- })
- )
- : with_(_.find(updates, 'isNewer'), newer =>
- !updates.length || !status.updatePossible && !newer ? entry('', "No update available")
- : newer && !status.updatePossible ? entry('success', `Version ${newer.name} available`)
- : h(Flex, { vert: true },
- updates.map((x: any) =>
- h(Flex, { key: x.name, alignItems: 'flex-start', flexWrap: 'wrap' },
- h(Card, {}, h(CardContent, {},
- h(Btn, {
- icon: UpdateIcon,
- ...!x.isNewer && x.prerelease && { color: 'warning', variant: 'outlined' },
- onClick: () => update(x.tag_name)
- }, prefix("Install ", x.name, x.isNewer ? '' : " (older)")),
- h(Box, { mt: 1 }, renderChangelog(x.body))
- )),
- )),
- )),
+ h(ConfigForm, {
+ gridProps: { sx: { columns: '13em 3', gap: 0, display: 'block', mt: 0, '&>div.MuiGrid-item': { pt: 0 }, '.MuiCheckbox-root': { pl: '2px' } } },
+ saveOnChange: true,
+ form: { fields: [
+ status.updatePossible === 'local' ? h(Btn, { icon: UpdateIcon, onClick: () => update() }, "Update from local file")
+ : !updates && h(Btn, {
+ variant: 'outlined',
+ icon: UpdateIcon,
+ onClick() {
+ apiCall('wait_project_info').then(reloadStatus)
+ setCheckPlugins(true) // this only happens once, actually (until you change page)
+ return apiCall('check_update').then(x => setUpdates(x.options), alertDialog)
+ },
+ async onContextMenu(ev) {
+ ev.preventDefault()
+ if (!status.updatePossible)
+ return alertDialog("Automatic update is only for binary versions", 'warning')
+ const res = await promptDialog("Enter a link to the zip to install")
+ if (res)
+ await update(res)
+ },
+ title: status.updatePossible && "Right-click if you want to install a zip",
+ }, "Check for updates"),
+ { k: 'auto_check_update', comp: CheckboxField, label: "Auto check updates daily" },
+ { k: 'update_to_beta', comp: CheckboxField, label: "Include beta versions" },
+ ] }
+ }),
+ updates && with_(_.find(updates, 'isNewer'), newer =>
+ !updates.length || !status.updatePossible && !newer ? entry('', "No update available")
+ : newer && !status.updatePossible ? entry('success', `Version ${newer.name} available`)
+ : h(Flex, { vert: true },
+ updates.map((x: any) => h(Update, { info: x })) )),
h(SwitchThemeBtn, { variant: 'outlined' }),
+ Date.now() - Number(new Date(status.started)) > HOUR && h(Link, {
+ title: "Donate",
+ target: 'donate',
+ style: { textDecoration: 'none', position: 'fixed', bottom: 0, right: 4, fontSize: 'large' },
+ href: 'https://www.paypal.com/donate/?hosted_button_id=HC8MB4GRVU5T2'
+ }, '❤️')
+ )
+}
+
+function Update({ info, title, bodyCollapsed }: { title?: ReactNode, info: Release, bodyCollapsed?: boolean }) {
+ const [collapsed, setCollapsed] = useState(bodyCollapsed)
+ return h(Flex, { key: info.name, alignItems: 'flex-start', flexWrap: 'wrap' },
+ h(Card, {}, h(CardContent, {},
+ title && h(Box, { fontSize: 'larger', mb: 1 }, title),
+ h(Btn, {
+ icon: UpdateIcon,
+ ...!info.isNewer && info.prerelease && { color: 'warning', variant: 'outlined' },
+ onClick: () => update(info.tag_name)
+ }, prefix("Install ", info.name, info.isNewer ? '' : " (older)")),
+ collapsed ? h(LinkBtn, { sx: { display: 'block', mt: 1 }, onClick(){ setCollapsed(false) } }, "See details")
+ : h(Box, { mt: 1 }, renderChangelog(info.body))
+ )),
)
}
function renderChangelog(s: string) {
return md(s, {
+ html: false,
onText: s => replaceStringToReact(s, /(?<=^|\W)#(\d+)\b|(https:.*\S+)/g, m => // link issues and urls
m[1] ? h(Link, { href: REPO_URL + 'issues/' + m[1], target: '_blank' }, h(OpenInNew))
: h(Link, { href: m[2], target: '_blank' }, m[2] )
@@ -183,7 +191,9 @@ function entry(color: Color, ...content: ReactNode[]) {
h(({ success: CheckCircle, info: Info, '': Info, warning: Warning, error: Error })[color], {
sx: { mr: 1, color: color ? undefined : 'primary.main' }
}),
- ...content)
+ h('span', { style: ['warning', 'error'].includes(color) ? { animation: '.5s blink 2' } : undefined },
+ ...content)
+ )
}
function fsLink(text=`File System page`) {
diff --git a/admin/src/InstalledPlugins.ts b/admin/src/InstalledPlugins.ts
index 05f0a587c..66c8aec77 100644
--- a/admin/src/InstalledPlugins.ts
+++ b/admin/src/InstalledPlugins.ts
@@ -5,23 +5,23 @@ import { createElement as h, Fragment, useEffect } from 'react'
import { Box, Link } from '@mui/material'
import { DataTable, DataTableColumn } from './DataTable'
import { Delete, Error as ErrorIcon, FormatPaint as ThemeIcon, PlayCircle, Settings, StopCircle, Upgrade } from '@mui/icons-material'
-import { HTTP_FAILED_DEPENDENCY, newObj, prefix, with_, xlate } from './misc'
+import { HTTP_FAILED_DEPENDENCY, md, newObj, prefix, with_, xlate } from './misc'
import { alertDialog, confirmDialog, formDialog, toast } from './dialog'
import _ from 'lodash'
import { Account } from './AccountsPage'
-import { BoolField, Field, FieldProps, MultiSelectField, NumberField, SelectField, StringField
-} from '@hfs/mui-grid-form'
+import { BoolField, Field, FieldProps, MultiSelectField, NumberField, SelectField, StringField } from '@hfs/mui-grid-form'
import { ArrayField } from './ArrayField'
import FileField from './FileField'
import { PLUGIN_ERRORS } from './PluginsPage'
import { Btn, hTooltip, IconBtn, iconTooltip } from './mui'
+import VfsPathField from './VfsPathField'
export default function InstalledPlugins({ updates }: { updates?: true }) {
- const { list, updateEntry, error, updateList, initializing } = useApiList(updates ? 'get_plugin_updates' : 'get_plugins')
+ const { list, error, updateList, initializing } = useApiList(updates ? 'get_plugin_updates' : 'get_plugins')
useEffect(() => {
if (!initializing)
updateList(list =>
- _.sortBy(list, x => (x.started ? '0' : '1') + x.id))
+ _.sortBy(list, x => (x.started ? '0' : '1') + treatPluginName(x.id)))
}, [initializing]);
const size = 'small'
return h(DataTable, {
@@ -55,15 +55,15 @@ export default function InstalledPlugins({ updates }: { updates?: true }) {
actions: ({ row, id }) => updates ? [
h(IconBtn, {
icon: Upgrade,
- title: row.updated ? "Already updated" : "Update",
+ title: row.downloading ? "Downloading" : row.updated ? "Already updated" : "Update",
disabled: row.updated,
+ progress: row.downloading,
size,
async onClick() {
await apiCall('update_plugin', { id, branch: row.branch }, { timeout: false }).catch(e => {
throw e.code !== HTTP_FAILED_DEPENDENCY ? e
: Error("Failed dependencies: " + e.cause?.map((x: any) => prefix(`plugin "`, x.id || x.repo, `" `) + x.error).join('; '))
})
- updateEntry({ id }, { updated: true })
toast("Plugin updated")
}
})
@@ -103,7 +103,8 @@ export default function InstalledPlugins({ updates }: { updates?: true }) {
addToBar: [h(Btn, { variant: 'outlined', onClick: () => save(values) }, "Save")],
}),
values: lastSaved,
- dialogProps: _.merge({ sx: { m: 'auto' } }, // center content when it is smaller than mobile (because of full-screen)
+ dialogProps: _.merge({ maxWidth: 'md', sx: { m: 'auto' } }, // center content when it is smaller than mobile (because of full-screen)
+ with_(row.configDialog?.maxWidth, x => x?.length === 2 ? { maxWidth: x } : x ? { sx: { maxWidth: x } } : null), // this makes maxWidth support css values without having to wrap in sx, as in DialogProps it only supports breakpoints
row.configDialog),
})
if (values && !_.isEqual(lastSaved, values))
@@ -135,14 +136,20 @@ export default function InstalledPlugins({ updates }: { updates?: true }) {
})
}
+// hide the hfs- prefix, as one may want to use it for its repository, because github is the context, but in the hfs context the prefix it's not only redundant, but also ruins the sorting
+function treatPluginName(name: string) {
+ return name.replace(/hfs-/, '')
+}
+
export function renderName({ row, value }: any) {
const { repo } = row
return h(Fragment, {},
+ row.downgrade && errorIcon("This version is older than the one you installed. It is possible that the author found a problem with your version and decided to retire it.", true),
errorIcon(row.error || row.badApi, !row.error),
repo?.includes('//') ? h(Link, { href: repo, target: 'plugin' }, value)
: with_(repo?.split('/'), arr => arr?.length !== 2 ? value
: h(Fragment, {},
- h(Link, { href: 'https://github.com/' + repo, target: 'plugin', onClick(ev) { ev.stopPropagation() } }, arr[1].replace(/hfs-/, '')),
+ h(Link, { href: 'https://github.com/' + repo, target: 'plugin', onClick(ev) { ev.stopPropagation() } }, treatPluginName(arr[1])),
'\xa0by ', arr[0]
))
)
@@ -156,7 +163,9 @@ function makeFields(config: any) {
return Object.entries(config).map(([k,o]: [string,any]) => {
if (!_.isPlainObject(o))
return o
- let { type, defaultValue, fields, frontend, ...rest } = o
+ let { type, defaultValue, fields, frontend, helperText, ...rest } = o
+ if (helperText)
+ helperText = md(helperText, { html: false })
const comp = (type2comp as any)[type] as Field | undefined
if (comp === ArrayField) {
rest.valuesForAdd = newObj(fields, x => x.defaultValue)
@@ -164,7 +173,7 @@ function makeFields(config: any) {
}
if (defaultValue !== undefined && type === 'boolean')
rest.placeholder = `Default value is ${JSON.stringify(defaultValue)}`
- return { k, comp, fields, ...rest }
+ return { k, comp, fields, helperText, ...rest }
})
}
@@ -176,6 +185,7 @@ const type2comp = {
multiselect: MultiSelectField,
array: ArrayField,
real_path: FileField,
+ vfs_path: VfsPathField,
username: UsernameField,
}
@@ -190,12 +200,11 @@ export async function startPlugin(id: string) {
}
}
-function UsernameField({ value, onChange, multiple, ...rest }: FieldProps) {
+function UsernameField({ value, onChange, multiple, groups, ...rest }: FieldProps) {
const { data, element, loading } = useApiEx<{ list: Account[] }>('get_accounts')
return !loading && element || h((multiple ? MultiSelectField : SelectField) as Field, {
value, onChange,
- options: data?.list.map(x => x.username),
- helperText: "Only users, no groups here",
+ options: data?.list.filter(x => groups === undefined || groups === !x.hasPassword).map(x => x.username),
...rest,
})
}
diff --git a/admin/src/InternetPage.ts b/admin/src/InternetPage.ts
index 06f86b42a..4ae465bcb 100644
--- a/admin/src/InternetPage.ts
+++ b/admin/src/InternetPage.ts
@@ -5,7 +5,7 @@ import { CardMembership, Check, Dns, HomeWorkTwoTone, Lock, Public, PublicTwoTon
import { apiCall, useApiEvents, useApiEx } from './api'
import { closeDialog, DAY, formatTimestamp, wait, wantArray, with_, PORT_DISABLED, isIP, CFG, md,
useRequestRender, replace, restartAnimation, prefix } from './misc'
-import { Flex, LinkBtn, Btn, Country } from './mui'
+import { Flex, LinkBtn, Btn, Country, wikiLink } from './mui'
import { alertDialog, confirmDialog, formDialog, promptDialog, toast, waitDialog } from './dialog'
import { BoolField, Form, MultiSelectField, NumberField, SelectField } from '@hfs/mui-grid-form'
import { suggestMakingCert } from './OptionsPage'
@@ -23,7 +23,7 @@ const COUNTRIES = ALL.filter(x => WITH_IP.includes(x.code))
const PORT_FORWARD_URL = 'https://portforward.com/'
const HIGHER_PORT = 1080
-const MSG_ISP = `It's possible that don't have a public IP, so that HFS won't be reachable on the Internet. Ask your Internet Provider if they sell "public IP" as an extra service.`
+const MSG_ISP = h('div', {}, "HFS will probably not be reachable on the Internet. ", wikiLink('Work-on-the-internet#double-nat', "Read more"))
export default function InternetPage() {
const [checkResult, setCheckResult] = useState()
@@ -214,9 +214,7 @@ export default function InternetPage() {
if (fresh && !await confirmDialog("Your certificate is still good", { trueText: "Make a new one anyway" }))
return
if (!await confirmDialog("HFS must temporarily serve HTTP on public port 80, and your router must be configured or this operation will fail")) return
- const res = await apiCall('check_domain', { domain }).catch(e =>
- confirmDialog(String(e), { trueText: "Continue anyway" }) )
- if (res === false) return
+ if (await stopOnCheckDomain(domain)) return
await apiCall('make_cert', { domain, altNames, email: values.acme_email }, { timeout: 20_000 })
.then(async () => {
await alertDialog("Certificate created", 'success')
@@ -314,6 +312,11 @@ export default function InternetPage() {
)
}
+ async function stopOnCheckDomain(domain: string) {
+ return domain && false === await apiCall('check_domain', { domain }).catch(e =>
+ confirmDialog(String(e), { trueText: "Continue anyway", falseText: "Stop" }))
+ }
+
async function verify(again=false): Promise {
await nat.loading
const data = nat.getData() // fresh data
@@ -326,8 +329,7 @@ export default function InternetPage() {
{
const hostname = url && new URL(url).hostname
const domain = !isIP(hostname) && hostname
- if (domain && false === await apiCall('check_domain', { domain }).catch(e =>
- confirmDialog(String(e), { trueText: "Continue anyway" }) )) return
+ if (await stopOnCheckDomain(domain)) return
}
const urlResult = url && await apiCall('self_check', { url }).catch(() =>
alertDialog(md(`Sorry, we couldn't verify your configured address ${url} 😰\nstill, we are going to test your IP address 🤞`), 'warning'))
@@ -366,7 +368,13 @@ export default function InternetPage() {
h('li', {}, "There could be a firewall, try configuring or disabling it."),
(data.externalPort || data.internalPort!) <= 1024 && h('li', {},
"Your Internet Provider may be blocking ports under 1024. ",
- data.upnp && h(Button, { size: 'small', onClick() { close(); mapPort(HIGHER_PORT).then(verifyAgain) } }, "Try " + HIGHER_PORT) ),
+ data.upnp && h(Button, {
+ size: 'small',
+ onClick() {
+ close();
+ mapPort(HIGHER_PORT).then(verifyAgain)
+ }
+ }, "Try " + HIGHER_PORT)),
data.mapped && h('li', {}, "A bug in your modem/router, try rebooting it."),
h('li', {}, MSG_ISP),
)), 'warning')
diff --git a/admin/src/LangPage.ts b/admin/src/LangPage.ts
index 0b8766024..583a623c0 100644
--- a/admin/src/LangPage.ts
+++ b/admin/src/LangPage.ts
@@ -26,7 +26,7 @@ export default function LangPage() {
h(DataTable, {
error,
loading: connecting,
- rows: list as any,
+ rows: useMemo(() => _.sortBy(list, x => (x.embedded ? 2 : 1) + x.code), [list.length]), // multi-sorting is only in pro version of DataGrid
hideFooter: true,
sx: { flex: 1 },
columns: [
diff --git a/admin/src/LoginRequired.ts b/admin/src/LoginRequired.ts
index f4a209bea..09d604301 100644
--- a/admin/src/LoginRequired.ts
+++ b/admin/src/LoginRequired.ts
@@ -2,8 +2,8 @@
import { state, useSnapState } from './state'
import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
-import { getHFS, HTTP_FORBIDDEN, HTTP_UNAUTHORIZED, makeSessionRefresher } from './misc'
-import { Form } from '@hfs/mui-grid-form'
+import { CFG, HTTP_FORBIDDEN, HTTP_UNAUTHORIZED, makeSessionRefresher } from './misc'
+import { BoolField, Form } from '@hfs/mui-grid-form'
import { apiCall } from './api'
import { srpClientSequence } from '@hfs/shared'
import { Alert, Box } from '@mui/material'
@@ -22,7 +22,7 @@ export function LoginRequired({ children }: any) {
}
function LoginForm() {
- const [values, setValues] = useState({ username: '', password: '' })
+ const [values, setValues] = useState({ username: '', password: '', ipChange: false })
const [error, setError] = useState('')
const formRef = useRef()
const empty = formRef.current?.querySelector('input[value=""]')
@@ -31,12 +31,15 @@ function LoginForm() {
h(Form, {
formRef,
values,
+ m: 2,
+ maxWidth: '25em',
set(v, k) {
setValues(values => ({ ...values, [k]: v }))
},
fields: [
{ k: 'username', autoComplete: 'username', autoFocus: true, required: true },
{ k: 'password', type: 'password', autoComplete: 'current-password', required: true },
+ { k: 'ipChange', comp: BoolField, label: "Allow IP change during this session" },
],
addToBar: [ error && h(Alert, { severity: 'error', sx: { flex: 1 } }, error) ],
saveOnEnter: true,
@@ -46,7 +49,9 @@ function LoginForm() {
async onClick() {
try {
setError('')
- await login(values.username, values.password)
+ await login(values.username, values.password, {
+ [CFG.allow_session_ip_change]: values.ipChange
+ })
}
catch(e) {
setError(String(e))
@@ -57,8 +62,8 @@ function LoginForm() {
)
}
-async function login(username: string, password: string) {
- const res = await srpClientSequence(username, password, apiCall).catch(err => {
+async function login(username: string, password: string, extra?: object) {
+ const res = await srpClientSequence(username, password, apiCall, extra).catch(err => {
throw err?.code === HTTP_UNAUTHORIZED ? "Wrong username or password"
: err === 'trust' ? "Login aborted: server identity cannot be trusted"
: err?.name === 'AbortError' ? "Server didn't respond"
diff --git a/admin/src/LogsPage.ts b/admin/src/LogsPage.ts
index 9fe9b7bc0..fa958754a 100644
--- a/admin/src/LogsPage.ts
+++ b/admin/src/LogsPage.ts
@@ -4,8 +4,10 @@ import { createElement as h, Fragment, ReactNode, useEffect, useMemo, useState }
import { Box, Tab, Tabs } from '@mui/material'
import { API_URL, apiCall, useApi, useApiList } from './api'
import { DataTable } from './DataTable'
-import { CFG, Dict, formatBytes, HTTP_UNAUTHORIZED, newDialog, prefix, shortenAgent, splitAt, tryJson, md,
- typedKeys, NBSP, _dbg, mapFilter, safeDecodeURIComponent } from '@hfs/shared'
+import {
+ CFG, Dict, formatBytes, HTTP_UNAUTHORIZED, newDialog, prefix, shortenAgent, splitAt, tryJson, md,
+ typedKeys, NBSP, _dbg, mapFilter, safeDecodeURIComponent, stringAfter
+} from '@hfs/shared'
import {
NetmaskField, Flex, IconBtn, useBreakpoint, usePauseButton, useToggleButton, WildcardsSupported, Country,
hTooltip, Btn, wikiLink
@@ -95,6 +97,8 @@ export default function LogsPage() {
}
}
+const LOGS_ON_FILE: string[] = [CFG.log, CFG.error_log]
+
function LogFile({ file, addToFooter, hidden }: { hidden?: boolean, file: string, addToFooter?: ReactNode }) {
const [showCountry, setShowCountry] = useState(false)
const [showAgent, setShowAgent] = useState(false)
@@ -111,7 +115,7 @@ function LogFile({ file, addToFooter, hidden }: { hidden?: boolean, file: string
const invert = true
const [firstSight, setFirstSight] = useState(!hidden)
useEffect(() => setFirstSight(x => x || !hidden), [hidden])
- useApi(firstSight && 'get_log_file', { file, range: limited || !skipped ? -MAX : `0-${skipped}` }, {
+ useApi(firstSight && LOGS_ON_FILE.includes(file) && 'get_log_file', { file, range: limited || !skipped ? -MAX : `0-${skipped}` }, {
skipParse: true, skipLog: true,
onResponse(res, body) {
const lines = body.split('\n')
@@ -272,7 +276,7 @@ function LogFile({ file, addToFooter, hidden }: { hidden?: boolean, file: string
const [path, query] = splitAt('?', value).map(safeDecodeURIComponent)
const ul = row.extra?.ul
if (ul)
- return typeof ul === 'string' ? ul // legacy pre-0.51
+ return typeof ul === 'string' ? ul //legacy pre-0.51
: path + ul.join(' + ')
if (!path.startsWith(API_URL))
return [path, query && h(Box, { key: 0, component: 'span', color: 'text.secondary', fontSize: 'smaller' }, '?', query)]
@@ -284,62 +288,70 @@ function LogFile({ file, addToFooter, hidden }: { hidden?: boolean, file: string
]
})
- function enhanceLogLine(x: any) {
- if (!x) return
- const { extra } = x
- if ((extra?.country || x.country) && !showCountry)
+ function enhanceLogLine(row: any) {
+ if (!row) return
+ const { extra } = row
+ if ((extra?.country || row.country) && !showCountry)
setShowCountry(true)
if (extra?.ua && !showAgent)
setShowAgent(true)
- x.notes = extra?.dl ? "fully downloaded"
- : (x.method === 'PUT' || extra?.ul) ? "uploaded " + formatBytes(extra?.size, { sep: NBSP })
- : x.status === HTTP_UNAUTHORIZED && x.uri?.startsWith(API_URL + 'loginSrp') ? "login failed" + prefix(':\n', extra?.u)
- : _.map(extra?.params, (v, k) => `${k}: ${v}\n`).join('') + (x.notes || '')
- return x
+ if (row.uri) {
+ const partial = stringAfter('?', row.uri).includes('partial=')
+ row.notes = extra?.dl ? "fully downloaded"
+ : (row.method === 'PUT' || extra?.ul) ? "uploaded " + (partial ? "up to " : "") + formatBytes(extra?.size, { sep: NBSP })
+ : row.status === HTTP_UNAUTHORIZED && row.uri?.startsWith(API_URL + 'loginSrp') ? "login failed" + prefix(':\n', extra?.u)
+ : _.map(extra?.params, (v, k) => `${k}: ${v}\n`).join('') + (row.notes || '')
+ }
+ return row
}
}
+const UW = 'https://upload.wikimedia.org/wikipedia/commons/'
+const BROWSER_ICONS = {
+ Chrome: UW + 'e/e1/Google_Chrome_icon_%28February_2022%29.svg',
+ Chromium: UW + 'f/fe/Chromium_Material_Icon.svg',
+ Firefox: UW + 'a/a0/Firefox_logo%2C_2019.svg',
+ Safari: UW + '5/52/Safari_browser_logo.svg',
+ Edge: UW + '9/98/Microsoft_Edge_logo_%282019%29.svg',
+ Opera: UW + '4/49/Opera_2015_icon.svg',
+}
+const OS_ICONS = {
+ android: UW + 'd/d7/Android_robot.svg',
+ linux: UW + '0/0a/Tux-shaded.svg',
+ win: UW + '0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg',
+ apple: UW + '7/74/Apple_logo_dark_grey.svg', // grey works for both themes
+}
+const OSS = {
+ apple: /Mac OS|iPhone OS/,
+ win: /Windows NT/,
+ android: /Android/,
+ linux: /Linux/,
+}
+
export function agentIcons(agent: string | undefined) {
if (!agent) return
- const UW = 'https://upload.wikimedia.org/wikipedia/commons/'
const short = shortenAgent(agent)
- const browserIcon = h(AgentIcon, { k: short, altText: true, map: {
- Chrome: UW + 'e/e1/Google_Chrome_icon_%28February_2022%29.svg',
- Chromium: UW + 'f/fe/Chromium_Material_Icon.svg',
- Firefox: UW + 'a/a0/Firefox_logo%2C_2019.svg',
- Safari: UW + '5/52/Safari_browser_logo.svg',
- Edge: UW + '9/98/Microsoft_Edge_logo_%282019%29.svg',
- Opera: UW + '4/49/Opera_2015_icon.svg',
- } })
+ const browserIcon = h(AgentIcon, { k: short, altText: true, map: BROWSER_ICONS })
const os = _.findKey(OSS, re => re.test(agent))
- const osIcon = os && h(AgentIcon, { k: os, map: {
- android: UW + 'd/d7/Android_robot.svg',
- linux: UW + '0/0a/Tux-shaded.svg',
- win: UW + '0/0a/Unofficial_Windows_logo_variant_-_2002%E2%80%932012_%28Multicolored%29.svg',
- apple: UW + '7/74/Apple_logo_dark_grey.svg', // grey works for both themes
- } })
- return hTooltip(agent, undefined, h('span', {}, browserIcon, ' ', osIcon) )
+ return hTooltip(agent, undefined, h(Box, { fontSize: '110%' }, browserIcon, ' ', os && osIcon(os as any)) )
}
const alreadyFailed: any = {}
+export function osIcon(k: keyof typeof OS_ICONS) {
+ return h(AgentIcon, { k, map: OS_ICONS })
+}
+
function AgentIcon({ k, map, altText }: { k: string, map: Dict, altText?: boolean }) {
const src = map[k]
const [err, setErr] = useState(alreadyFailed[k])
return !src || err ? h(Fragment, {}, altText ? k : null) : h('img', {
- src: err ? `/${k}.svg` : src,
- style: { height: '1.3em', verticalAlign: 'bottom', marginRight: '.2em' },
+ src,
+ style: { height: '1.2em', verticalAlign: 'bottom', marginRight: '.2em' },
onError() { setErr(alreadyFailed[k] = true) }
})
}
-const OSS = {
- apple: /Mac OS|iPhone OS/,
- win: /Windows NT/,
- android: /Android/,
- linux: /Linux/,
-}
-
function parseLogLine(line: string, id: number) {
const m = /^(.+?) (.+?) (.+?) \[(.{11}):(.{14})] "(\w+) ([^"]+) HTTP\/\d.\d" (\d+) (-|\d+) ?(.*)/.exec(line)
if (!m) return
diff --git a/admin/src/MonitorPage.ts b/admin/src/MonitorPage.ts
index 4fe60eeb1..8aea3a4b3 100644
--- a/admin/src/MonitorPage.ts
+++ b/admin/src/MonitorPage.ts
@@ -16,7 +16,8 @@ import { StandardCSSProperties } from '@mui/system/styleFunctionSx/StandardCssPr
import { agentIcons } from './LogsPage'
import { state, useSnapState } from './state'
import { useBlockIp } from './useBlockIp'
-import { alertDialog } from './dialog'
+import { alertDialog, confirmDialog } from './dialog'
+import { useInterval } from 'usehooks-ts'
export default function MonitorPage() {
return h(Fragment, {},
@@ -26,13 +27,13 @@ export default function MonitorPage() {
}
function MoreInfo() {
- const { data: status, element } = useApiEx('get_status')
+ const { data: status, element, reload } = useApiEx('get_status')
+ useInterval(reload, 10_000) // status hardly change, but it can
const { data: connections } = useApiEvents('get_connection_stats')
- if (status && connections)
- Object.assign(status, connections)
const [allInfo, setAllInfo] = useState(false)
const md = useBreakpoint('md')
const sm = useBreakpoint('sm')
+ const xl = useBreakpoint('xl')
const formatDuration = createDurationFormatter({ maxTokens: 2, skipZeroes: true })
return element || h(Box, { display: 'flex', flexWrap: 'wrap', gap: { xs: .5, md: 1 }, mb: { xs: 1, sm: 2 } },
(allInfo || md) && pair('started', {
@@ -43,15 +44,17 @@ function MoreInfo() {
(allInfo || sm) && pair('sent_got', {
render: x => ({ Sent: formatBytes(x[0]), Got: formatBytes(x[1]) }),
title: x => "Since: " + formatTimestamp(x[2]),
- onDelete: () => apiCall('clear_persistent', { k: ['totalSent', 'totalGot'] })
- .then(() => alertDialog("Done", 'success'), alertDialog)
+ onDelete: () => confirmDialog("Reset stats?")
+ .then(yes => yes && apiCall('clear_persistent', { k: ['totalSent', 'totalGot'] })
+ .then(() => alertDialog("Done", 'success'), alertDialog) )
}),
- (allInfo || sm) && pair('ips', { label: "IPs" }),
pair('outSpeed', { label: "Output", render: formatSpeedK, minWidth: '8.5em' }),
pair('inSpeed', { label: "Input", render: formatSpeedK, minWidth: '8.5em' }),
+ (allInfo || sm) && pair('ips', { label: "IPs", title: () => "Currently connected" }),
(md || allInfo && md || status?.http?.error) && pair('http', { label: "HTTP", render: port }),
(md || allInfo && md || status?.https?.error) && pair('https', { label: "HTTPS", render: port }),
- !md && h(IconBtn, {
+ (xl || allInfo) && pair('ram', { label: "RAM", render: formatBytes }),
+ !xl && h(IconBtn, {
size: 'small',
icon: allInfo ? ChevronLeft : ChevronRight,
title: "Show more",
@@ -70,7 +73,7 @@ function MoreInfo() {
}
function pair(k: string, { label, minWidth, render, title, onDelete }: PairOptions={}) {
- let v = _.get(status, k)
+ let v = _.get(connections, k) ?? _.get(status, k)
if (v === undefined)
return null
let color: Color = undefined
@@ -116,7 +119,7 @@ function Connections() {
fullWidth: false,
value: monitorOnlyFiles,
onChange: v => state.monitorOnlyFiles = v,
- options: { "Show only files": true, "Show all connections": false }
+ options: { "Show downloads+uploads": true, "Show all connections": false }
}),
),
h(DataTable, {
diff --git a/admin/src/OptionsPage.ts b/admin/src/OptionsPage.ts
index 04434b296..7f62b0e51 100644
--- a/admin/src/OptionsPage.ts
+++ b/admin/src/OptionsPage.ts
@@ -7,8 +7,8 @@ import { state, useSnapState } from './state'
import { Link as RouterLink } from 'react-router-dom'
import { CardMembership, EditNote, Refresh, Warning } from '@mui/icons-material'
import { Dict, MAX_TILE_SIZE, REPO_URL, isIpLocalHost, wait, with_, try_, ipForUrl, SORT_BY_OPTIONS, THEME_OPTIONS,
- CFG, md } from './misc'
-import { iconTooltip, InLink, LinkBtn, modifiedProps, wikiLink, useBreakpoint, NetmaskField, WildcardsSupported } from './mui'
+ CFG, md, IMAGE_FILEMASK } from './misc'
+import { iconTooltip, InLink, LinkBtn, propsForModifiedValues, wikiLink, useBreakpoint, NetmaskField, WildcardsSupported } from './mui'
import { Form, BoolField, NumberField, SelectField, FieldProps, Field, StringField } from '@hfs/mui-grid-form';
import { ArrayField } from './ArrayField'
import FileField from './FileField'
@@ -57,12 +57,12 @@ export default function OptionsPage() {
}
const maxDownloadsDefaults = {
comp: NumberField,
- min: 0,
placeholder: "no limit",
toField: (x: any) => x || '',
sm: 4,
}
const httpsEnabled = values.https_port >= 0
+ const isWindows = status?.platform === 'win32'
return h(Form, {
sx: { maxWidth: '60em' },
values,
@@ -73,7 +73,7 @@ export default function OptionsPage() {
onError: alertDialog,
save: {
onClick: save,
- ...modifiedProps( Object.keys(changes).length>0),
+ ...propsForModifiedValues( Object.keys(changes).length>0),
},
barSx: { gap: 2 },
addToBar: [
@@ -88,7 +88,7 @@ export default function OptionsPage() {
component: RouterLink,
to: "/edit",
startIcon: h(EditNote),
- }, sm ? "Edit config file" : "File"),
+ }, sm ? "Config file" : "File"),
],
defaults() {
return { sm: 6 }
@@ -117,7 +117,19 @@ export default function OptionsPage() {
helperText: "Not applied to localhost. Doesn't work with proxies."
},
- { k: 'listen_interface', comp: SelectField, sm: 4, options: [{ label: "any", value: '' }, '127.0.0.1', '::1', ...status?.ips||[]] },
+ {
+ k: 'listen_interface',
+ comp: SelectField,
+ sm: 4,
+ options: [
+ { label: "any", value: '' },
+ { label: "any IPv4", value: '0.0.0.0' },
+ { label: "any IPv6", value: '::' },
+ '127.0.0.1',
+ '::1',
+ ...status?.ips || []
+ ]
+ },
{ k: 'max_kbps', ...maxSpeedDefaults, sm: 4, label: "Limit output", helperText: "Doesn't apply to localhost" },
{ k: 'max_kbps_per_ip', ...maxSpeedDefaults, sm: 4, label: "Limit output per-IP" },
@@ -133,25 +145,31 @@ export default function OptionsPage() {
helperText: "Access Admin-panel without entering credentials"
},
- { k: 'proxies', comp: NumberField, min: 0, max: 9, label: "Number of HTTP proxies",
+ { k: 'proxies', comp: NumberField, max: 9, label: "Number of HTTP proxies", placeholder: "none",
error: proxyWarning(values, status),
helperText: "Wrong number will prevent detection of users' IP address"
},
- { k: 'allowed_referer', placeholder: "any", label: "Links from other websites", comp: AllowedReferer, },
+ { k: 'allowed_referer', placeholder: "any", label: "Links from other websites", comp: AllowedReferer,
+ helperText: "In case another website is linking your files" },
- { k: 'block', label: false, comp: ArrayField, prepend: true, sm: true,
+ { k: 'block', label: false, comp: ArrayField, prepend: true, sm: true, autoRowHeight: true,
fields: [
- { k: 'ip', label: "Blocked IP", sm: 6, required: true, helperText: h(WildcardsSupported) },
- { k: 'expire', $type: 'dateTime', minDate: new Date(), sm: 6, helperText: "Leave empty for no expiration" },
+ { k: 'ip', label: "Blocked IP", sm: 12, required: true, wrap: true, $width: 2,
+ $column: { mergeRender: { comment: {}, expire: {} } },
+ helperText: h(WildcardsSupported) },
+ { k: 'expire', $type: 'dateTime', minDate: new Date(), sm: 6, $hideUnder: 'sm',
+ helperText: "Leave empty for no expiration" },
{
k: 'disabled',
$type: 'boolean',
label: "Enabled",
+ helperText: "In case you want to not block without deleting the rule",
toField: (x: any) => !x,
fromField: (x: any) => x ? undefined : true,
sm: 6,
+ $width: 80,
},
- { k: 'comment' },
+ { k: 'comment', $hideUnder: 'sm' },
],
},
@@ -161,33 +179,39 @@ export default function OptionsPage() {
},
{ k: 'title', md: 8, helperText: "You can see this in the tab of your browser" },
- { k: 'auto_play_seconds', comp: NumberField, xs: 6, sm: 3, min: 1, max: 10000, label: "Auto-play seconds delay", helperText: md(`Default value for the [Show interface](${REPO_URL}discussions/270)`) },
- { k: 'tile_size', comp: NumberField, xs: 6, sm: 3, min: 0, max: MAX_TILE_SIZE, label: "Default tiles size", helperText: wikiLink('Tiles', "To enable tiles-mode") },
+ { k: 'auto_play_seconds', comp: NumberField, xs: 6, sm: 3, min: 1, max: 10000, required: true,
+ label: "Auto-play seconds delay", helperText: md(`Default value for the [Show interface](${REPO_URL}discussions/270)`) },
+ { k: 'tile_size', comp: NumberField, xs: 6, sm: 3, max: MAX_TILE_SIZE, required: true,
+ label: "Default tiles size", helperText: wikiLink('Tiles', "To enable tiles-mode") },
{ k: 'theme', comp: SelectField, xs: 6, sm: 3, options: THEME_OPTIONS },
{ k: 'sort_by', comp: SelectField, xs: 6, sm: 3, options: SORT_BY_OPTIONS },
{ k: 'invert_order', comp: BoolField, xs: 6, sm: 4, md: 3, },
{ k: 'folders_first', comp: BoolField, xs: 6, sm: 4, md: 3, },
{ k: 'sort_numerics', comp: BoolField, xs: 6, sm: 4, md: true, label: "Sort numeric names" },
- { k: 'favicon', comp: FileField, placeholder: "None", fileMask: '*.png|*.ico|*.jpg|*.jpeg|*.gif|*.svg', sm: 12,
+ { k: 'favicon', comp: FileField, placeholder: "None", fileMask: '*.ico|' + IMAGE_FILEMASK, sm: 12,
helperText: "The icon associated to your website" },
h(Section, { title: "Uploads" }),
- { k: 'dont_overwrite_uploading', comp: BoolField, sm: 4, md: 6, label: "Don't overwrite uploading",
+ { k: 'dont_overwrite_uploading', comp: BoolField, md: 4, label: "Uploads don't overwrite",
helperText: "Files will be numbered to avoid overwriting" },
- { k: 'delete_unfinished_uploads_after', comp: NumberField, sm: 4, md: 3, min : 0, unit: "seconds", placeholder: "Never",
+ { k : CFG.split_uploads, comp: NumberField, unit: 'MB', md: 2, step: .1,
+ fromField: x => x * 1E6, toField: x => x ? x / 1E6 : null,
+ placeholder: "disabled", label: "Split uploads in chunks", helperText: "Overcome proxy limits" },
+ { k: 'delete_unfinished_uploads_after', comp: NumberField, md: 3, min : 0, unit: "seconds", placeholder: "Never",
helperText: "Leave empty to never delete" },
- { k: 'min_available_mb', comp: NumberField, sm: 4, md: 3, min : 0, unit: "MBytes", placeholder: "None",
+ { k: 'min_available_mb', comp: NumberField, md: 3, min : 0, unit: "MBytes", placeholder: "None",
label: "Min. available disk space", helperText: "Reject uploads that don't comply" },
h(Section, { title: "Others" }),
- { k: 'keep_session_alive', comp: BoolField, sm: true, helperText: "Keeps you logged in while the page is left open and the computer is on" },
+ { k: 'keep_session_alive', comp: BoolField, sm: 4, md: 6, helperText: "Keeps you logged in while the page is left open and the computer is on" },
{ k: 'session_duration', comp: NumberField, sm: 4, md: 3, min: 5, unit: "seconds", required: true },
- { k: 'zip_calculate_size_for_seconds', comp: NumberField, sm: 4, md: 3, label: "Calculate ZIP size for", unit: "seconds",
- helperText: "If time is not enough, the browser will not show download percentage" },
+ { k: 'zip_calculate_size_for_seconds', comp: NumberField, sm: 4, md: 3, unit: "seconds", required: true,
+ label: "Calculate ZIP size for", helperText: "If time is not enough, the browser will not show download percentage" },
- { k: 'descript_ion', comp: BoolField, label: "Enable comments", helperText: "In file DESCRIPT.ION" },
- { k: 'descript_ion_encoding', label: "Encoding of file DESCRIPT.ION", comp: SelectField, disabled: !values.descript_ion,
+ { k: 'descript_ion', comp: BoolField, ...isWindows && { sm: 4, md: 3 }, label: "Enable comments", helperText: "In file DESCRIPT.ION" },
+ { k: 'show_hidden_files', comp: BoolField, sm: 4, md: 3 },
+ { k: 'descript_ion_encoding', sm: 4, md: 6, label: "Encoding of file DESCRIPT.ION", comp: SelectField, disabled: !values.descript_ion,
options: ['utf8',720,775,819,850,852,862,869,874,808, ..._.range(1250,1257),10029,20866,21866] },
{ k: 'open_browser_at_start', comp: BoolField, label: "Open Admin-panel at start",
diff --git a/admin/src/VfsMenuBar.ts b/admin/src/VfsMenuBar.ts
index 95b0fed7c..edf9e4026 100644
--- a/admin/src/VfsMenuBar.ts
+++ b/admin/src/VfsMenuBar.ts
@@ -2,7 +2,8 @@
import { createElement as h } from 'react'
import { Alert, Box, List, ListItem, ListItemIcon, ListItemText } from '@mui/material'
-import { Microsoft, Storage } from '@mui/icons-material'
+import { Storage } from '@mui/icons-material'
+import { osIcon } from './LogsPage'
import { reloadVfs } from './VfsPage'
import { prefix } from './misc'
import { Btn, Flex, reloadBtn, useBreakpoint } from './mui'
@@ -44,7 +45,7 @@ function SystemIntegrationButton({ platform }: { platform: string | undefined })
const { data: integrated, reload } = useApi(isWindows && 'windows_integrated')
const sm = useBreakpoint('sm')
return !isWindows ? null : h(Btn, {
- icon: Microsoft,
+ icon: osIcon('win'),
variant: 'outlined',
doneMessage: true,
...(!integrated?.is ? {
diff --git a/admin/src/VfsTree.ts b/admin/src/VfsTree.ts
index e7d44b6d8..1bc44e07e 100644
--- a/admin/src/VfsTree.ts
+++ b/admin/src/VfsTree.ts
@@ -1,7 +1,7 @@
// This file is part of HFS - Copyright 2021-2023, Massimo Melina - License https://www.gnu.org/licenses/gpl-3.0.txt
import { state, useSnapState } from './state'
-import { createElement as h, ReactElement, useRef, useState } from 'react'
+import { createElement as h, ReactElement, useEffect, useRef, useState } from 'react'
import { TreeItem, TreeView } from '@mui/x-tree-view'
import { ChevronRight, ExpandMore, TheaterComedy, Folder, Home, Link, InsertDriveFileOutlined, Lock,
RemoveRedEye, Web, Upload, Cloud, Delete, HighlightOff } from '@mui/icons-material'
@@ -23,7 +23,11 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map()
if (!vfs)
return null
+ // be sure selected element is visible
const treeId = 'vfs'
+ const first = selectedFiles[0]
+ useEffect(() => document.getElementById(`${treeId}-${first?.id}`)?.scrollIntoView({ block: 'center', behavior: 'instant' as any }),
+ [first])
return h(TreeView, {
// @ts-ignore the type declared on the lib doesn't seem to be compatible with useRef()
ref,
diff --git a/admin/src/addFiles.ts b/admin/src/addFiles.ts
index ceddb50c5..b3695d549 100644
--- a/admin/src/addFiles.ts
+++ b/admin/src/addFiles.ts
@@ -7,7 +7,7 @@ import { reloadVfs } from './VfsPage'
import { state } from './state'
import { apiCall } from './api'
import FilePicker from './FilePicker'
-import { focusSelector } from '@hfs/shared'
+import { focusSelector, pathEncode } from '@hfs/shared'
let lastFolder: undefined | string
export default function addFiles() {
@@ -36,7 +36,7 @@ export default function addFiles() {
h('li', { key: file }, file, ': ', err))
)
), 'error')
- const ids = res.filter(x => x.name).map(x => parent.id + encodeURI(x.name) + (x.link.endsWith('/') ? '/' : ''))
+ const ids = res.filter(x => x.name).map(x => parent.id + pathEncode(x.name) + (x.link.endsWith('/') ? '/' : ''))
reloadVfs(ids)
close()
}
@@ -53,7 +53,7 @@ export async function addVirtual() {
const { id: parent } = getFolderFromSelected()
const res = await apiCall('add_vfs', { parent, name })
await alertDialog(`Folder "${res.name}" created`, 'success')
- reloadVfs([ parent + encodeURI(res.name) + '/' ])
+ reloadVfs([ parent + pathEncode(res.name) + '/' ])
}
catch(e) {
await alertDialog(e as Error)
@@ -64,7 +64,7 @@ export async function addLink() {
try {
const { id: parent } = getFolderFromSelected()
const res = await apiCall('add_vfs', { parent, name: 'new link', url: 'https://example.com' })
- reloadVfs([ parent + encodeURI(res.name) ])
+ reloadVfs([ parent + pathEncode(res.name) ])
toast("Link created", 'success', {
onClose: () => focusSelector('input[name=url]')
})
diff --git a/admin/src/api.ts b/admin/src/api.ts
index 51d63ee09..e8bf8960f 100644
--- a/admin/src/api.ts
+++ b/admin/src/api.ts
@@ -32,7 +32,7 @@ export function useApiEx(...args: Parameters) {
!args[0] ? null
: res.error ? h(Alert, { severity: 'error' }, xlate(String(res.error), ERRORS),
h(IconBtn, { icon: Refresh, title: "Reload", onClick: res.reload, sx: { m:'-10px 0 -8px 16px' } }) )
- : res.loading || res.data === undefined ? spinner()
+ : res.data === undefined ? spinner()
: null,
Object.values(res))
}
diff --git a/admin/src/importAccountsCsv.ts b/admin/src/importAccountsCsv.ts
index 0dd45437f..832f5455f 100644
--- a/admin/src/importAccountsCsv.ts
+++ b/admin/src/importAccountsCsv.ts
@@ -37,7 +37,7 @@ export async function importAccountsCsv(cb?: () => void) {
save: { startIcon: h(Upload), children: 'Go' },
fields: [
h(Box, { p: 1 }, "Total lines:", rows.length),
- { k: 'skipFirstLines', comp: NumberField, min: 0, max: rows.length-1, typing: true, md: 6,
+ { k: 'skipFirstLines', comp: NumberField, max: rows.length-1, typing: true, md: 6,
helperText: h(Fragment, {}, "First line: ", h('code', {}, row.join(', ')) ),
},
{ k: 'overwriteExistingAccounts', comp: BoolField, md: 6 },
diff --git a/admin/src/index.scss b/admin/src/index.scss
index 34c38cfae..3d8996a0b 100644
--- a/admin/src/index.scss
+++ b/admin/src/index.scss
@@ -67,10 +67,6 @@ h2.MuiDialogTitle-root { /* less padding */
}
@keyframes animate-dash { to { background-position: 20px 0; } }
-@keyframes blink {
- 0% {opacity: 1}
- 50% {opacity: 0.2}
-}
@keyframes success {
50% { transform: scale(1.5); color: var(--success); }
100% { transform: inherit; color: inherit; }
diff --git a/admin/src/mui.ts b/admin/src/mui.ts
index c541bb635..4703b42ac 100644
--- a/admin/src/mui.ts
+++ b/admin/src/mui.ts
@@ -3,8 +3,10 @@
import { PauseCircle, PlayCircle, Refresh, SvgIconComponent } from '@mui/icons-material'
import { SxProps } from '@mui/system'
-import { createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect, useRef,
- ForwardedRef, useState, useMemo } from 'react'
+import {
+ createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect, useRef,
+ ForwardedRef, useState, useMemo, isValidElement
+} from 'react'
import { Box, BoxProps, Breakpoint, ButtonProps, CircularProgress, IconButton, IconButtonProps, Link, LinkProps,
Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
import { anyDialogOpen, closeDialog, formatPerc, isIpLan, isIpLocalHost, prefix, WIKI_URL, with_ } from './misc'
@@ -99,7 +101,8 @@ export function reloadBtn(onClick: any, props?: any) {
return h(IconBtn, { icon: Refresh, title: "Reload", onClick, ...props })
}
-export function modifiedProps(modified: boolean | undefined) {
+// modify look to convey that a form has been modified
+export function propsForModifiedValues(modified: boolean | undefined) {
return modified ? { sx: { outline: '2px solid' } } : undefined
}
@@ -122,7 +125,7 @@ export const IconBtn = forwardRef((props: IconBtnProps, ref: ForwardedRef {
- icon?: SvgIconComponent
+ icon?: SvgIconComponent | ReactElement
title?: ReactNode
disabled?: boolean | string
progress?: boolean | number
@@ -140,12 +143,12 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
const [loadingState, setLoadingState] = useStateMounted(false)
if (typeof disabled === 'string')
title = disabled
- disabled = loadingState || Boolean(progress) || disabled === undefined ? undefined : Boolean(disabled)
+ disabled = loadingState || progress || disabled ? true : undefined
if (link)
onClick = () => window.open(link)
const showLabel = useBreakpoint(labelFrom || 'xs')
const ref = useRefPass(forwarded)
- const common = _.merge(modifiedProps(modified), {
+ const common = _.merge(propsForModifiedValues(modified), {
ref,
disabled,
'aria-hidden': disabled,
@@ -159,9 +162,10 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
}
},
} as const, rest)
+ const iconElement = isValidElement(icon) ? icon : (icon && h(icon))
let ret: ReactElement = children || !icon ? h(LoadingButton, _.merge({
variant: 'contained',
- startIcon: icon && h(icon),
+ startIcon: iconElement,
loading: Boolean(loading || loadingState || progress),
loadingPosition: icon && 'start',
loadingIndicator: typeof progress !== 'number' ? undefined
@@ -174,7 +178,7 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
...(typeof progress === 'number' ? { value: progress*100, variant: 'determinate' } : null),
style: { position:'absolute', top: '10%', left: '10%', width: '80%', height: '80%' }
}),
- h(icon)
+ iconElement,
)
const aria = rest['aria-label'] ?? with_(_.isString(title) && title, x => x ? `${children || ''} (${x})` : undefined)
diff --git a/admin/src/theme.ts b/admin/src/theme.ts
index 8e0dabfa6..9fbbd6863 100644
--- a/admin/src/theme.ts
+++ b/admin/src/theme.ts
@@ -18,7 +18,7 @@ export function useMyTheme() {
return useMemo(() => createTheme({
palette: lightMode || {
mode: 'dark',
- text: { primary: '#bbb', secondary: '#777' },
+ text: { primary: '#bbb', secondary: '#fff6' },
primary: { main: '#469', light: '#68c' },
secondary: { main: '#969' },
},
diff --git a/admin/src/useBlockIp.ts b/admin/src/useBlockIp.ts
index e478739ee..eade02404 100644
--- a/admin/src/useBlockIp.ts
+++ b/admin/src/useBlockIp.ts
@@ -1,6 +1,5 @@
import { apiCall, useApi } from '@hfs/shared/api'
import { createElement as h, useCallback } from 'react'
-import { BlockingRule } from '../../src/block'
import { toast } from './dialog'
import _ from 'lodash'
import { IconBtn, IconBtnProps } from './mui'
@@ -8,10 +7,6 @@ import { Block } from '@mui/icons-material'
export function useBlockIp() {
const { data, reload } = useApi('get_config', { only: ['block'] })
- const block = useCallback((ip: string, more: Partial={}, showResult=true) =>
- apiCall('set_config', { values: { block: [...data.block, { ip, ...more }] } })
- .then(reload).then(() => showResult && toast("Blocked", 'success')),
- [data, reload])
const isBlocked = useCallback((ip: string) => _.find(data?.block, { ip }), [data])
return {
iconBtn: (ip: string, comment: string, options: Partial={}) => h(IconBtn, {
@@ -20,7 +15,10 @@ export function useBlockIp() {
confirm: "Block address " + ip,
...isBlocked(ip) && { disabled: true, title: "Blocked" },
...options,
- onClick: () => block(ip, { comment }),
+ onClick() {
+ return apiCall('add_block', { ip, merge: { comment } })
+ .then(reload).then(() => toast("Blocked", 'success'))
+ },
}),
}
}
diff --git a/central.json b/central.json
index 7aab99a7a..e2cf1fb88 100644
--- a/central.json
+++ b/central.json
@@ -1,26 +1,11 @@
{
"dnsServers": ["1.1.1.1", "8.8.8.8"],
- "checkServerServices": [
- {
- "url": "https://ports.yougetsignal.com/check-port.php",
- "headers": {"content-type": "application/x-www-form-urlencoded"},
- "method": "post",
- "body": "remoteAddress=$IP&portNumber=$PORT",
- "regexpFailure": "is closed",
- "regexpSuccess": "is open"
- },
- {
- "url": "https://canyouseeme.org",
- "headers": {"content-type": "application/x-www-form-urlencoded"},
- "method": "post",
- "body": "port=$PORT",
- "regexpFailure": "Error:",
- "regexpSuccess": "Success:"
- },
+ "selfCheckServices": [
{
- "url": "http://ifconfig.co/port/$PORT?ip=$IP",
- "regexpFailure": "reachable\": false",
- "regexpSuccess": "reachable\": true"
+ "url": "http://hfstest.rejetto.com/v3?url=$URL",
+ "headers": {"User-Agent": "HFS"},
+ "regexpFailure": "\"error\"",
+ "regexpSuccess": "\"good\""
}
],
"selfCheckServices_disabled": [
@@ -35,14 +20,6 @@
"regexpSuccess": "true"
}
],
- "selfCheckServices": [
- {
- "url": "http://hfstest.rejetto.com/v3?url=$URL",
- "headers": {"User-Agent": "HFS"},
- "regexpFailure": "\"error\"",
- "regexpSuccess": "\"good\""
- }
- ],
"publicIpServices": [
"http://ipv4.icanhazip.com",
{ "v": 6, "type": "http", "url": "http://ipv6.icanhazip.com" },
diff --git a/config.md b/config.md
index e766264cd..fc99fe27f 100644
--- a/config.md
+++ b/config.md
@@ -77,7 +77,7 @@ Configuration can be done in several ways
- `proxies` number of proxies between server and clients to be trusted about providing clients' IP addresses. Default is 0.
- `delete_unfinished_uploads_after` should unfinished uploads be deleted after a number of seconds. 0 for immediate, empty for never. Default is 1 day.
- `favicon` path to file to be used as favicon. Default is none.
-- `force_https` redirect http traffic to https. Requires https to be working. Default is false.
+- `force_https` redirect http traffic to https. Requires https to be working. Default is true.
- `force_lang` force translation for frontend. Default is none, meaning *let browser decide*.
- `admin_net` net-mask specifying what addresses are allowed to access Admin-panel. Default is any.
- `title` text displayed in the tab of your browser. Default is "File server".
@@ -120,7 +120,10 @@ Configuration can be done in several ways
- `dynamic_dns_url` URL to be requested to keep a domain updated with your latest IP address.
Optionally, you can append “>” followed by a regular expression to determine a successful answer, otherwise status code will be used.
Multiple URLs are supported and you can specify one for each line.
-- `auto_basic` automatically detect (based on user-agent) when the basic web inteface should be served, to support legacy browsers. Default true.
+- `auto_basic` automatically detect (based on user-agent) when the basic web inteface should be served, to support legacy browsers. Default is true. No UI.
+- `allow_session_ip_change` should requests of the same login session be allowed from different IP addresses. Default is false, to prevent cookie stealing. You can set it `true` to always allow it, or `https` to allow only on https, where stealing the cookie is harder. No UI.
+- `authorization_header` support Authentication HTTP header. Default is true. No UI.
+- `cache_control_disk_files` number of seconds after which the browser should bypass the cache and check the server for an updated version of the file. Default is 5. No UI.
- `create-admin` special entry to quickly create an admin account. The value will be set as password. As soon as the account is created, this entry is removed.
#### Virtual File System (VFS)
@@ -134,7 +137,7 @@ Valid keys in a node are:
Value is a list and its entries are nodes.
- `rename`: similar to name, but it's from the parent node point.
Use this to change the name of entries that are read from the source, not listed in the VFS.
- Value is a dictionary, where the key is the original name.
+ Value is a dictionary, where the key is the original name. No UI.
- `mime`: specify what mime to use for this resource. Use "auto" for automatic detection.
- `url`: when this value is present, the element is a link to the URL you specify.
- `target`: optional, for links only, used to [open the link in a new browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). E.g. `_blank`
diff --git a/dev-plugins.md b/dev-plugins.md
index 4bcef8932..c66370e4c 100644
--- a/dev-plugins.md
+++ b/dev-plugins.md
@@ -11,6 +11,10 @@ Each plug-in has access to the same set of features.
Normally you'll have a plug-in that's a theme, and another that's a firewall,
but nothing is preventing a single plug-in from doing both tasks.
+## Backend / Frontend
+
+Plugins can run both in backend (the server) and frontend (the browser). Frontend files reside in the "public" folder, while all the rest is backend.
+
## Exported object
`plugin.js` is a javascript module (executed by Node.js), and its main way to communicate with HFS is by exporting things.
For example, it can define its description like this
@@ -120,16 +124,20 @@ used must be strictly JSON (thus, no single quotes, only double quotes for strin
- `configDialog: DialogOptions` object to override dialog options. Please refer to sources for details.
- `onFrontendConfig: (config: object) => void | object` manipulate config values exposed to front-end.
- `customHtml: object | () => object` return custom-html sections programmatically.
+- `customRest: { [name]: (parameters: object) => any }` declare backend functions to be called by frontend with `HFS.customRestCall`
+- `customApi: { [name]: (parameters) => any }` declare functions to be called by other plugins (only backend, not frontend) using `api.customApiCall` (documented below)
### FieldDescriptor
Currently, these properties are supported:
-- `type: 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'real_path' | 'array' | 'username'ì` . Default is `string`.
+- `type: 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'real_path' | 'vfs_path' | 'array' | 'username'` . Default is `string`.
- `label: string` what name to display next to the field. Default is based on `key`.
- `defaultValue: any` value to be used when nothing is set.
- `helperText: string` extra text printed next to the field.
- `frontend: boolean` expose this setting on the frontend, so that javascript can access it
- using `HFS.getPluginConfig()[CONFIG_KEY]` but also css can access it as `var(--PLUGIN_NAME-CONFIG_KEY)`
+ using `HFS.getPluginConfig()[CONFIG_KEY]` but also css can access it as `var(--PLUGIN_NAME-CONFIG_KEY)`.
+ Hint: if you need to use a numeric config in CSS but you need to add a unit (like `em`),
+ the trick is to use something like this `calc(var(--plugin-something) * 1em)`.
Based on `type`, other properties are supported:
- `string`
@@ -154,6 +162,9 @@ Based on `type`, other properties are supported:
- `defaultPath: string` what path to start from if no value is set. E.g. __dirname if you want to start with your plugin's folder.
- `fileMask: string` restrict files that are displayed. E.g. `*.jpg|*.png`
- `username`
+ - `groups: undefined | boolean` true if you want only groups, false if you want only users. Default is undefined.
+ - `multiple: boolean` if you set this to true, the field will allow the selection of multiple accounts,
+ and the resulting value will be array of strings, instead of a string. Default is false.
## api object
@@ -171,6 +182,13 @@ The `api` object you get as parameter of the `init` contains the following:
- `log(...args)` print log in a standard form for plugins.
+- `addBlock({ ip, expire?, comment?, disabled? }, merge?)` add a blocking rule on specified IP. You can use merge to
+ append the IP to an existing rule (if any, otherwise is created). Eg:
+ ```js
+ // try to append to existing rule, by comment
+ addBlock({ ip: '1.2.3.4' }, { comment: "banned by my plugin" })
+ ```
+
- `Const: object` all constants of the `const.ts` file are exposed here. E.g. BUILD_TIMESTAMP, API_VERSION, etc.
- `getConnections(): Connections[]` retrieve current list of active connections.
@@ -209,6 +227,10 @@ The `api` object you get as parameter of the `init` contains the following:
- `notifyClient(channel: string, eventName: string, data?: any)` send a message to those frontends that are on the same channel.
+- `misc` many functions and constants available in [misc.ts](https://github.com/rejetto/hfs/blob/main/src/misc.ts).
+ These are not documented, probably never will, and are subject to change without notifications,
+ but you can study the sources if you are interested in using them. It's just a shorter version of `api.require('./misc')`
+
## Front-end specific
The following information applies to the default front-end, and may not apply to a custom one.
@@ -254,6 +276,12 @@ The HFS objects contains many properties:
- `debounceAsync: function` like lodash.debounce, but also avoids async invocations to overlap.
For details please refer to `src/debounceAsync.ts`.
- `loadScript(uri: string): Promise` load a js file. If uri is relative, it is based on the plugin's public folder.
+- `customRestCall(name: string, parameters?: object): Promise` call backend functions exported with `customRest`.
+- `userBelongsTo(groupOrUsername: string): boolean` returns true if logged in account belongs to the specified group name.
+ Returns true if the specified name is the one of the logged in account.
+- `DirEntry: class_constructor(n :string, otherProps?: DirEntry)` this is the class of the objects inside `HFS.state.list`;
+ in case you need to add to the list, do it by instantiating this class. E.g. `new HFS.DirEntry(name)`
+- `fileShow(entry: DirEntry, options?: { startPlaying: true )` open file-show on the specified entry.
The following properties are accessible only immediately at top-level; don't call it later in a callback.
- `getPluginConfig()` returns object of all config keys that are declared frontend-accessible by this plugin.
@@ -280,90 +308,111 @@ Some frontend-events can return Html, which can be expressed in several ways
- as array of ReactNode
- null, undefined, false and empty-string will just be discarded
-These events will receive a `def` property, with the default content that will be displayed if no callback return
-a valid output. You can decide to embed such default content inside your content.
+These events will receive a `def` property (in addition event's specific properties),
+with the default content that will be displayed if no callback return a valid output.
+You can decide to embed such default content inside your content.
You can produce output for such events also by adding sections (with same name as the event) to file `custom.html`.
This is a list of available frontend-events, with respective object parameter and output.
- `additionalEntryDetails`
- - you receive each entry of the list, and optionally produce HTML code that will be added in the `entry-details` container.
- - parameter `{ entry: Entry }`
-
- The `Entry` type is an object with the following properties:
- - `name: string` name of the entry.
- - `ext: string` just the extension part of the name, dot excluded and lowercase.
- - `isFolder: boolean` true if it's a folder.
- - `n: string` name of the entry, including relative path when searched in sub-folders.
- - `uri: string` relative url of the entry.
- - `s?: number` size of the entry, in bytes. It may be missing, for example for folders.
- - `t?: Date` generic timestamp, combination of creation-time and modified-time.
- - `c?: Date` creation-time.
- - `m?: Date` modified-time.
- - `p?: string` permissions missing
- - `cantOpen: boolean` true if current user has no permission to open this entry
- - `getNext/getPrevious: ()=>Entry` return next/previous Entry in list
- - `getNextFiltered/getPreviousFiltered: ()=>Entry` as above, but considers the filtered-list instead
- - `getDefaultIcon: ()=>ReactElement` produces the default icon for this entry
- - output `Html`
+ - you receive each entry of the list, and optionally produce HTML code that will be added in the `entry-details` container.
+ - parameter `{ entry: DirEntry }`
+
+ The `DirEntry` type is an object with the following properties:
+ - `name: string` name of the entry.
+ - `ext: string` just the extension part of the name, dot excluded and lowercase.
+ - `isFolder: boolean` true if it's a folder.
+ - `n: string` name of the entry, including relative path when searched in sub-folders.
+ - `uri: string` relative url of the entry.
+ - `s?: number` size of the entry, in bytes. It may be missing, for example for folders.
+ - `t?: Date` generic timestamp, combination of creation-time and modified-time.
+ - `c?: Date` creation-time.
+ - `m?: Date` modified-time.
+ - `p?: string` permissions missing
+ - `cantOpen: boolean` true if current user has no permission to open this entry
+ - `getNext/getPrevious: ()=>DirEntry` return next/previous DirEntry in list
+ - `getNextFiltered/getPreviousFiltered: ()=>DirEntry` as above, but considers the filtered-list instead
+ - `getDefaultIcon: ()=>ReactElement` produces the default icon for this entry
+ - output `Html`
- `entry`
- - you receive each entry of the list, and optionally produce HTML code that will completely replace the entry row/slot.
- - parameter `{ entry: Entry }` (refer above for Entry object)
- - output `Html | null` return null if you want to hide this entry
+ - you receive each entry of the list, and optionally produce HTML code that will completely replace the entry row/slot.
+ - parameter `{ entry: DirEntry }` (refer above for DirEntry object)
+ - output `Html | null` return null if you want to hide this entry
- `afterEntryName`
- - you receive each entry of the list, and optionally produce HTML code that will be added after the name of the entry.
- - parameter `{ entry: Entry }` (refer above for Entry object)
- - output `Html`
+ - you receive each entry of the list, and optionally produce HTML code that will be added after the name of the entry.
+ - parameter `{ entry: DirEntry }` (refer above for DirEntry object)
+ - output `Html`
- `entryIcon`
- - you receive an entry of the list and optionally produce HTML that will be used in place of the standard icon.
- - parameter `{ entry: Entry }` (refer above for Entry object)
- - output `Html`
+ - you receive an entry of the list and optionally produce HTML that will be used in place of the standard icon.
+ - parameter `{ entry: DirEntry }` (refer above for DirEntry object)
+ - output `Html`
- `beforeHeader` & `afterHeader`
- - use this to produce content that should go right before/after the `header` part
- - output `Html`
+ - use this to produce content that should go right before/after the `header` part
+ - output `Html`
- `beforeLogin`
- - no parameter
- - output `Html`
+ - no parameter
+ - output `Html`
- `fileMenu`
- - add or manipulate entries of the menu. If you return something, that will be added to the menu.
- You can also delete or replace the content of the `menu` array.
- - parameter `{ entry: Entry, menu: FileMenuEntry[], props: FileMenuProp[] }`
- - output `undefined | FileMenuEntry | FileMenuEntry[]`
- ```typescript
- interface FileMenuEntry {
- id?: string,
- label: ReactNode,
- subLabel: ReactNode,
- href?: string, // use this if you want your entry to be a link
- icon?: string, // supports: emoji, name from a limited set
- onClick?: () => (Promisable) // return false to not close menu dialog
- //...rest is transfered to element, for example 'target', or 'title'
- }
- type FileMenuProp = { id?: string, label: ReactNode, value: ReactNode } | ReactElement
- ```
- Example, if you want to remove the 'show' item of the menu:
- ```typescript
- HFS.onEvent('fileMenu', ({ entry, menu }) => {
- const index = menu.findIndex(x => x.id === 'show')
- if (index >= 0)
- menu.splice(index, 1)
- })
- ```
- or if you like lodash, you can simply `HFS._.remove(menu, { id: 'show' })`
+ - add or manipulate entries of the menu. If you return something, that will be added to the menu.
+ You can also delete or replace the content of the `menu` array.
+ - parameter `{ entry: DirEntry, menu: FileMenuEntry[], props: FileMenuProp[] }`
+ - output `undefined | FileMenuEntry | FileMenuEntry[]`
+ ```typescript
+ interface FileMenuEntry {
+ id?: string,
+ label: ReactNode,
+ subLabel: ReactNode,
+ href?: string, // use this if you want your entry to be a link
+ icon?: string, // supports: emoji, name from a limited set
+ onClick?: () => (Promisable) // return false to not close menu dialog
+ //...rest is transfered to element, for example 'target', or 'title'
+ }
+ type FileMenuProp = { id?: string, label: ReactNode, value: ReactNode } | ReactElement
+ ```
+ Example, if you want to remove the 'show' item of the menu:
+ ```typescript
+ HFS.onEvent('fileMenu', ({ entry, menu }) => {
+ const index = menu.findIndex(x => x.id === 'show')
+ if (index >= 0)
+ menu.splice(index, 1)
+ })
+ ```
+ or if you like lodash, you can simply `HFS._.remove(menu, { id: 'show' })`
- `fileShow`
- - you receive an entry of the list, and optionally produce React Component for visualization.
- - parameter `{ entry: Entry }` (refer above for Entry object)
- - output `ReactComponent`
+ - you receive an entry of the list, and optionally produce React Component for visualization.
+ - parameter `{ entry: DirEntry }` (refer above for DirEntry object)
+ - output `ReactComponent`
+- `showPlay`
+ - emitted on each file played inside file-show. Use setCover if you want to customize the background picture.
+ - parameter `{ entry: DirEntry, setCover(uri: string), meta: { title, album, artist, year } }`
- `menuZip`
- - parameter `{ def: ReactNode }`
- - output `Html`
+ - parameter `{ def: ReactNode }`
+ - output `Html`
- `userPanelAfterInfo`
- - no parameter
- - output `Html`
+ - no parameter
+ - output `Html`
- `uriChanged`
- - DEPRECATED: use `watchState('uri', callback)` instead.
- - parameter `{ uri: string, previous: string }`
+ - DEPRECATED: use `watchState('uri', callback)` instead.
+ - parameter `{ uri: string, previous: string }`
+- `sortCompare`
+ - you can decide the order of entries by comparing two entries.
+ Return a negative value if entry `a` must appear before `b`, or positive if you want the opposite.
+ Return zero or any falsy value if you want to leave the order to what the user decided in his options.
+ - parameter `{ a: DirEntry, b: DirEntry }`
+ - output `number | undefined`
+- `enableEntrySelection`
+ - selection of multiple entries is used for some standard actions like deletion or zip.
+ When none of such standard actions is permitted on an entry, its selection control (checkbox) is disabled.
+ If you want to override this behavior, because you have a custom action that makes use of the selection, return `true`.
+ - parameter `{ entry: DirEntry }`
+ - output `boolean`
+- `entryToggleSelection`
+ - an entry is being un/selected
+ - parameter `{ entry: DirEntry }`
+ - can be prevented
- All of the following have no parameters and you are supposed to output `Html` that will be displayed in the described place:
+- `appendMenuBar` inside menu-bar, at the end
- `afterMenuBar` between menu-bar and breadcrumbs
- `afterList` at the end of the files list
- `footer` at the bottom of the screen, even after the clipboard-bar (when visible)
@@ -400,8 +449,8 @@ api.events.on('deleting', async () => your-code-here)
### Stop, the way you prevent default behavior
-Some events allow you to stop their default behavior, by returning `api.events.stop`.
-This is reported in the list below with the word "stoppable".
+Some events allow you to stop their default behavior, by returning `api.events.preventDefault`.
+This is reported in the list below with the word "preventable".
```js
api.events.on('deleting', ({ node }) => node.source.endsWith('.jpg'))
@@ -417,7 +466,7 @@ This section is still partially documented, and you may need to have a look at t
- parameters: { node, ctx }
- called just before trying to delete a file or folder (which still may not exist and fail)
- async supported
- - stoppable
+ - preventable
- `login`
- `logout`
- `attemptingLogin`
@@ -443,11 +492,14 @@ This section is still partially documented, and you may need to have a look at t
- `pluginStarted`
- `uploadStart`
- parameters: { ctx, writeStream }
- - stoppable
+ - preventable
- return: callback to call when upload is finished
- `uploadFinished`
- `publicIpsChanged`
- parameters: { IPs, IP4, IP6, IPX }
+- `newSocket`
+ - parameters: { socket,ip }
+ - preventable
# Notifications (backend-to-frontend events)
@@ -561,6 +613,8 @@ You can refer to these published plugins for reference, like
Published plugins are required to specify the `apiRequired` property.
+### Multiple versions
+
It is possible to publish different versions of the plugin to be compatible with different versions of HFS.
To do that, just have your other versions in branches with name starting with `api`.
HFS will scan through them in inverted alphabetical order searching for a compatible one.
@@ -613,6 +667,20 @@ If you want to override a text regardless of the language, use the special langu
## API version history
+- 9.6 (v0.54.0)
+ - frontend event: showPlay
+ - api.addBlock
+ - api.misc
+ - frontend event: paste
+ - exports.customRest + HFS.customRestCall
+ - config.type: vfs_path
+ - frontend event: sortCompare
+ - HFS.userBelongsTo
+ - HFS.DirEntry
+ - frontend event: appendMenuBar
+ - config.helperText: basic md formatting
+ - HFS.onEvent.setOrder
+ - backend event: newSocket
- 8.891 (v0.53.0)
- api.openDb
- frontend event: menuZip
diff --git a/frontend/index.html b/frontend/index.html
index 73c7cd028..5633ca678 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,6 +7,7 @@
+