hfs 0.26.8 → 0.26.9

package/frontend/src/App.ts

@@ -1,25 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { BrowserRouter, Route, Routes } from "react-router-dom"
-import { createElement as h, Fragment } from 'react'
-import { BrowseFiles } from "./BrowseFiles"
-import { Dialogs } from './dialog'
-import useTheme from "./useTheme"
-import { useSnapState } from './state'
-
-function App() {
-    useTheme()
-    const { messageOnly } = useSnapState()
-    if (messageOnly)
-        return h('h1', { style: { textAlign: 'center'} }, messageOnly)
-    return h(Fragment, {},
-        h(BrowserRouter, {},
-            h(Routes, {},
-                h(Route, { path:'*', element: h(BrowseFiles) })
-            )
-        ),
-        h(Dialogs)
-    )
-}
-
-export default App;

package/frontend/src/Breadcrumbs.ts

@@ -1,43 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { Link, useLocation } from 'react-router-dom'
-import { createElement as h, Fragment, ReactElement } from 'react'
-import { hIcon } from './misc'
-import { state } from './state'
-import { reloadList } from './useFetchList'
-
-export function Breadcrumbs() {
-    const currentPath = useLocation().pathname.slice(1,-1)
-    let prev = ''
-    const parent = currentPath.split('/').slice(0,-1).join('/')+'/'
-    const breadcrumbs = currentPath ? currentPath.split('/').map(x => [prev = prev + x + '/', decodeURIComponent(x)]) : []
-    return h(Fragment, {},
-        h(Breadcrumb, { label: hIcon('parent', { alt:'parent folder' }), path: parent }),
-        h(Breadcrumb, { current: !currentPath, label: hIcon('home', { alt:'home' }) }),
-        breadcrumbs.map(([path,label]) =>
-            h(Breadcrumb, {
-                key: path,
-                path,
-                label,
-                current: path === currentPath+'/',
-            }) )
-    )
-}
-
-function Breadcrumb({ path, label, current }:{ current?: boolean, path?: string, label?: string | ReactElement }) {
-    const PAD = '\u00A0\u00A0' // make small elements easier to tap. Don't use min-width 'cause it requires display-inline that breaks word-wrapping
-    if (typeof label === 'string' && label.length < 3)
-        label = PAD+label+PAD
-    return h(Link, {
-        className: 'breadcrumb',
-        to: path || '/',
-        async onClick() {
-            if (current) {
-                state.remoteSearch = ''
-                state.stopSearch?.()
-                reloadList()
-            }
-        }
-    }, label)
-}
-

package/frontend/src/BrowseFiles.ts

@@ -1,141 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { Link, useLocation } from 'react-router-dom'
-import { createElement as h, Fragment, memo, useEffect, useMemo, useState } from 'react'
-import { formatBytes, hError, hfsEvent, hIcon, isMobile } from './misc'
-import { Checkbox, Html, Spinner } from './components'
-import { Head } from './Head'
-import { state, useSnapState } from './state'
-import { alertDialog } from './dialog'
-import useFetchList from './useFetchList'
-import useAuthorized from './useAuthorized'
-
-export function usePath() {
-    return decodeURI(useLocation().pathname)
-}
-
-export interface DirEntry { n:string, s?:number, m?:string, c?:string,
-    ext:string, isFolder:boolean, t?:Date } // we memoize these value for speed
-export type DirList = DirEntry[]
-
-export function BrowseFiles() {
-    useFetchList()
-    const { error, list, serverConfig } = useSnapState()
-    return useAuthorized() && h(Fragment, {},
-        h(Html, { code: serverConfig?.custom_header }),
-        h(Head),
-        hError(error)
-        || h(list ? FilesList : Spinner))
-}
-
-function FilesList() {
-    const { filteredList, list, loading, stoppedSearch } = useSnapState()
-    const midnight = useMidnight() // as an optimization we calculate this only once per list and pass it down
-    const pageSize = 100
-    const [page, setPage] = useState(0)
-    const offset = page * pageSize
-    const theList = filteredList || list
-    const total = theList.length
-
-    useEffect(() => setPage(0), [theList])
-    useEffect(() => document.scrollingElement?.scrollTo(0,0), [page])
-
-    return h(Fragment, {},
-        h('ul', { className: 'dir' },
-            !list.length ? (!loading && (stoppedSearch ? "Stopped before finding anything" : "Nothing here"))
-                : filteredList && !filteredList.length ? "No match for this filter"
-                    : theList.slice(offset, offset + pageSize).map((entry: DirEntry) =>
-                        h(Entry, { key: entry.n, midnight, ...entry })),
-            loading && h(Spinner),
-        ),
-        total > pageSize && h(Paging, { total, current:page, pageSize, pageChange:setPage })
-    )
-}
-
-interface PagingProps {
-    total: number
-    current: number
-    pageSize: number
-    pageChange:(newPage:number) => void
-}
-function Paging({ total, current, pageSize, pageChange }: PagingProps) {
-    const nPages = Math.ceil(total / pageSize)
-    const pages = []
-    for (let i=0; i<nPages; i++)
-        pages.push(h('button', {
-            ...i===current && { className:'toggled' },
-            onClick(){
-                pageChange(i)
-            }
-        }, i*pageSize || 1))
-    return h('div', { id:'paging' }, ...pages)
-}
-
-function useMidnight() {
-    const [midnight, setMidnight] = useState(calcMidnight)
-    useEffect(() => {
-        setTimeout(()=> setMidnight(calcMidnight()), 10 * 60_000) // refresh every 10 minutes
-    }, [])
-    return midnight
-
-    function calcMidnight() {
-        const recent = new Date()
-        recent.setHours(recent.getHours() - 6)
-        const midnight = new Date()
-        midnight.setHours(0,0,0,0)
-        return recent < midnight ? recent : midnight
-    }
-}
-
-const Entry = memo(function(entry: DirEntry & { midnight: Date }) {
-    let { n: relativePath, isFolder } = entry
-    const base = usePath()
-    const { showFilter, selected } = useSnapState()
-    const href = fixUrl(relativePath)
-    const containerDir = isFolder ? '' : relativePath.substring(0, relativePath.lastIndexOf('/')+1)
-    const name = relativePath.substring(containerDir.length)
-    return h('li', { className: isFolder ? 'folder' : 'file' },
-        showFilter && h(Checkbox, {
-            value: selected[relativePath],
-            onChange(v){
-                if (v)
-                    return state.selected[relativePath] = true
-                delete state.selected[relativePath]
-            },
-        }),
-        isFolder ? h(Link, { to: base+href }, hIcon('folder'), relativePath)
-            : h(Fragment, {},
-                containerDir && h(Link, { to: base+fixUrl(containerDir), className:'container-folder' }, hIcon('file'), containerDir ),
-                h('a', { href }, !containerDir && hIcon('file'),  name)
-            ),
-        h(EntryProps, entry),
-        h('div', { style:{ clear:'both' } })
-    )
-})
-
-function fixUrl(s:string) {
-    return s.replace(/#/g, encodeURIComponent)
-}
-
-const EntryProps = memo(function(entry: DirEntry & { midnight: Date }) {
-    const { t, s } = entry
-    const today = t && t > entry.midnight
-    const shortTs = isMobile()
-    const code = useMemo(()=> hfsEvent('additionalEntryProps', { entry }).join(''),
-        [entry])
-    return h('div', { className:'entry-props' },
-        h(Html, { code, className:'add-props' }),
-        s !== undefined && h(Fragment, {},
-            h('span', { className:'entry-size' }, formatBytes(s)),
-            " — ",
-        ),
-        t && h('span', {
-            className: 'entry-ts',
-            title: today || !shortTs ? null : t.toLocaleString(),
-            onClick() { // mobile has no hover
-                if (shortTs)
-                    alertDialog("Full timestamp:\n" + t.toLocaleString()).then()
-            }
-        }, !shortTs ? t.toLocaleString() : today ? t.toLocaleTimeString() : t.toLocaleDateString()),
-    )
-})

package/frontend/src/Head.ts

@@ -1,45 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, useMemo} from 'react'
-import { formatBytes, hIcon, prefix } from './misc'
-import { Spinner } from './components'
-import { useSnapState } from './state'
-import { MenuPanel } from './menu'
-import { Breadcrumbs } from './Breadcrumbs'
-
-export function Head() {
-    return h('header', {},
-        h(MenuPanel),
-        h(Breadcrumbs),
-        h(FolderStats),
-        h('div', { style:{ clear:'both' }}),
-    )
-}
-
-function FolderStats() {
-    const { list, loading, filteredList, selected, stoppedSearch } = useSnapState()
-    const stats = useMemo(() =>{
-        let files = 0, folders = 0, size = 0
-        for (const x of list) {
-            if (x.isFolder)
-                ++folders
-            else
-                ++files
-            size += x.s||0
-        }
-        return { files, folders, size }
-    }, [list])
-    const sel = Object.keys(selected).length
-    const fil = filteredList?.length
-    return h('div', { id:'folder-stats' },
-        stoppedSearch ? hIcon('interrupted', { title:'Search was interrupted' })
-            : list.length>0 && loading && h(Spinner),
-        [
-            prefix('', stats.files,' file(s)'),
-            prefix('', stats.folders, ' folder(s)'),
-            stats.size ? formatBytes(stats.size) : '',
-            sel && sel+' selected',
-            fil !== undefined && fil < list.length && fil+' displayed',
-        ].filter(Boolean).join(', ')
-    )
-}

package/frontend/src/UserPanel.ts

@@ -1,52 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { useSnapState } from './state'
-import { createElement as h } from 'react'
-import { alertDialog, closeDialog, newDialog, promptDialog } from './dialog'
-import { createVerifierAndSalt, SRPParameters, SRPRoutines } from 'tssrp6a'
-import { apiCall } from './api'
-import { logout } from './login'
-import { MenuButton } from './menu'
-
-export default function showUserPanel() {
-    newDialog({ Content })
-}
-
-function Content() {
-    const snap = useSnapState()
-    return h('div', { id: 'user-panel' },
-        h('div', {}, "User: " + snap.username),
-        h(MenuButton, {
-            icon: 'password',
-            label: "Change password",
-            async onClick() {
-                const pwd = await promptDialog("Enter new password", { type: 'password' })
-                if (!pwd) return
-                const check = await promptDialog("RE-enter new password", { type: 'password' })
-                if (!check) return
-                if (check !== pwd)
-                    return alertDialog("The second password you entered did not match the first. Procedure aborted.", 'warning')
-                const srp6aNimbusRoutines = new SRPRoutines(new SRPParameters())
-                const res = await createVerifierAndSalt(srp6aNimbusRoutines, snap.username, pwd)
-                try {
-                    await apiCall('change_srp', { salt: String(res.s), verifier: String(res.v) }).catch(e => {
-                        if (e.code !== 406) // 406 = server was configured to support clear text authentication
-                            throw e
-                        return apiCall('change_password', { newPassword: pwd }) // unencrypted version
-                    })
-                    return alertDialog("Password changed")
-                }
-                catch(e) {
-                    return alertDialog(e as Error)
-                }
-            }
-        }),
-        h(MenuButton, {
-            icon: 'logout',
-            label: "Logout",
-            onClick() {
-                logout().then(closeDialog, alertDialog)
-            }
-        })
-    )
-}

package/frontend/src/api.ts

@@ -1,78 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { useEffect, useState } from 'react';
-import { Dict, Falsy, getCookie, working } from './misc'
-
-const PREFIX = '/~/api/'
-
-interface ApiCallOptions { noModal?:true }
-export function apiCall(cmd: string, params?: Dict, options: ApiCallOptions={}) : Promise<any> {
-    const stop = options.noModal ? undefined : working()
-    const csrf = getCsrf()
-    if (csrf)
-        params = { csrf, ...params }
-    return fetch(PREFIX+cmd, {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: params && JSON.stringify(params),
-    }).then(res => {
-        stop?.()
-        if (res.ok)
-            return res.json()
-        const msg = `Failed API ${cmd}: ${res.statusText}`
-        console.warn(msg + (params ? ' ' + JSON.stringify(params) : ''))
-        throw new ApiError(res.status, msg)
-    }, err => {
-        stop?.()
-        if (err?.message?.includes('fetch'))
-            throw Error("Network error")
-        throw err
-    })
-}
-
-export class ApiError extends Error {
-    constructor(readonly code:number, message: string) {
-        super(message);
-    }
-}
-
-export function useApi(cmd: string | Falsy, params?: object) : any {
-    const [x, setX] = useState()
-    useEffect(()=>{
-        setX(undefined)
-        if (cmd)
-            apiCall(cmd, params).then(setX, setX)
-    }, [cmd, JSON.stringify(params)]) //eslint-disable-line
-    return x
-}
-
-type EventHandler = (type:string, data?:any) => void
-
-export function apiEvents(cmd: string, params: Dict, cb:EventHandler) {
-    const csrf = getCsrf()
-    const processed: Record<string,string> = { csrf: csrf && JSON.stringify(csrf) }
-    for (const k in params) {
-        const v = params[k]
-        if (v === undefined) continue
-        processed[k] = JSON.stringify(v)
-    }
-    const source = new EventSource(PREFIX + cmd + '?' + new URLSearchParams(processed))
-    source.onopen = () => cb('connected')
-    source.onerror = err => cb('error', err)
-    source.onmessage = ({ data }) => {
-        if (!data) {
-            cb('closed')
-            return source.close()
-        }
-        try { data = JSON.parse(data) }
-        catch {
-            return cb('string', data)
-        }
-        cb('msg', data)
-    }
-    return source
-}
-
-function getCsrf() {
-    return getCookie('csrf')
-}

package/frontend/src/components.ts

@@ -1,54 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { hIcon } from './misc'
-import { createElement as h, HTMLAttributes, ReactNode, useMemo } from 'react'
-
-export function Spinner() {
-    return hIcon('spinner', { className:'spinner' })
-}
-
-export function Flex({ gap='1em', vert=false, children=null }) {
-    return h('div', {
-        style: {
-            display: 'flex',
-            gap,
-            flexDirection: vert ? 'column' : undefined,
-        }
-    }, children)
-}
-
-export function FlexV(props:any) {
-    return h(Flex, { vert:true, ...props })
-}
-
-interface CheckboxProps { children?:ReactNode, value:any, onChange?:(v:boolean)=>void }
-export function Checkbox({ onChange, value, children, ...props }:CheckboxProps) {
-    return h('label', {},
-        h('input',{
-            type:'checkbox',
-            onChange: ev => onChange?.(Boolean(ev.target.checked)),
-            checked: Boolean(value),
-            value: 1,
-            ...props
-        }),
-        children
-    )
-}
-
-type Options = { label:string, value:string }[]
-interface SelectProps { value:any, onChange?:(v:string)=>void, options:Options }
-export function Select({ onChange, value, options, ...props }:SelectProps) {
-    return h('select', {
-        onChange: ev => // @ts-ignore
-            onChange?.(ev.target.value),
-        value,
-        ...props,
-    }, options.map(({ value, label }) => h('option', { key:value, value }, label)))
-}
-
-export function Html({ code, ...rest }:{ code:string } & HTMLAttributes<any>) {
-    const o = useMemo(() => ({ __html: code }), [code])
-    if (!code)
-        return null
-    return h('span', { ...rest, dangerouslySetInnerHTML: o })
-}

package/frontend/src/dialog.css

@@ -1,76 +0,0 @@
-.dialog-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: #888a;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-.dialog {
-    background: #fff; /*fallback*/
-    background: var(--bg);
-    padding: max(0.5em, 1vw);
-    border-radius: 1em;
-    position: relative;
-    margin: 0 3vw;
-    overflow: hidden;
-    max-height: calc(100vh - 2em)
-}
-.dialog-icon {
-    color: #fff;
-    background-color: var(--color);
-    position: absolute;
-    top: 0;
-    width: 1.8em;
-    height: 1.7em;
-    text-align: center;
-    border-radius: .8em 0;
-}
-.dialog-closer {
-    border-radius: 0 0.8em;
-    right: 0;
-    padding: 0;
-    background-color: #c99;
-}
-.dialog-icon ~ .dialog-content {
-    margin-top: 1.3em;
-}
-.dialog-type {
-    left: 0;
-    top: 0;
-    overflow: hidden;
-    line-height: 1.7em;
-}
-.dialog-content {
-    overflow: auto;
-    max-height: calc(100vh - 4em);
-}
-.dialog-content p {
-    white-space: pre-wrap;
-    margin: .5em 0;
-}
-.dialog-confirm .dialog-content button {
-    margin-top: 1em;
-}
-.dialog-alert-info {
-    --color: #282
-}
-.dialog-alert-warning {
-    --color: #c91
-}
-.dialog-alert-error {
-    --color: #822;
-}
-
-@media (max-width: 50em) {
-    .dialog-closer {
-        font-size: 120%
-    }
-    .dialog-icon ~ .dialog-content {
-        margin-top: 2em;
-    }
-}

package/frontend/src/dialog.ts

@@ -1,105 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, ReactElement, ReactNode, useEffect, useRef } from 'react'
-import './dialog.css'
-import { newDialog, closeDialog } from '@hfs/shared/lib/dialogs'
-export * from '@hfs/shared/lib/dialogs'
-
-interface PromptOptions { def?:string, type?:string }
-export async function promptDialog(msg: string, { def, type }:PromptOptions={}) : Promise<string | null> {
-    return new Promise(resolve => newDialog({
-        className: 'dialog-prompt',
-        icon: '?',
-        onClose: resolve,
-        Content
-    }) )
-
-    function Content() {
-        const ref = useRef<HTMLInputElement>()
-        useEffect(()=>{
-            const e = ref.current
-            if (!e) return
-            const inp = e as HTMLInputElement
-            setTimeout(()=> inp.focus(),100)
-            if (def)
-                inp.value = def
-        },[])
-        return h('div', {},
-            h('p', {}, msg),
-            h('input', {
-                ref,
-                type,
-                autoFocus: true,
-                onKeyDown(ev: KeyboardEvent) {
-                    const { key } = ev
-                    if (key === 'Escape')
-                        return closeDialog(null)
-                    if (key === 'Enter')
-                        return go()
-                }
-            }),
-            h('div', { style: { textAlign: 'right', marginTop: '.8em' } },
-                h('button', {  onClick: go }, "Continue")),
-        )
-
-        function go() {
-            closeDialog(ref.current?.value)
-        }
-    }
-}
-
-type AlertType = 'error' | 'warning' | 'info'
-
-export async function alertDialog(msg: ReactElement | string | Error, type:AlertType='info') {
-    if (msg instanceof Error) {
-        msg = String(msg)
-        type = 'error'
-    }
-    return new Promise(resolve => newDialog({
-        className: 'dialog-alert-'+type,
-        icon: '!',
-        onClose: resolve,
-        Content
-    }))
-
-    function Content(){
-        if (typeof msg === 'string' || msg instanceof Error)
-            msg = h('p', {}, String(msg))
-        return msg
-    }
-}
-
-export interface ConfirmOptions { href?: string, afterButtons?: ReactNode }
-export async function confirmDialog(msg: ReactElement | string, { href, afterButtons }: ConfirmOptions={}) : Promise<boolean> {
-    if (typeof msg === 'string')
-        msg = h('p', {}, msg)
-    return new Promise(resolve => newDialog({
-        className: 'dialog-confirm',
-        icon: '?',
-        onClose: resolve,
-        Content
-    }) )
-
-    function Content() {
-        return h('div', {},
-            msg,
-            h('div', {
-                style: {
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: '1em'
-                },
-            },
-                h('a', {
-                    href,
-                    onClick() { closeDialog(true) },
-                }, h('button', {}, "Confirm")),
-                h('button', {
-                    onClick() { closeDialog(false) },
-                }, "Don't"),
-                afterButtons,
-            )
-        )
-    }
-}
-

package/frontend/src/icons.ts

@@ -1,46 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { state, useSnapState } from './state'
-import { createElement as h, memo } from 'react'
-
-const SYS_ICONS = {
-    login: 'user:👤',
-    user: 'user:👤',
-    filter: ':✂',
-    search: ':🔍',
-    search_off: 'cancel:❌',
-    stop: ':⏹️',
-    settings: 'cog:⚙',
-    archive: 'file-archive:📦',
-    logout: ':🚪',
-    home: ':🏠',
-    parent: 'level-up mirror:⬆',
-    folder: ':📂',
-    file: 'doc:📄',
-    spinner: 'spin6 spinner:🎲',
-    password: 'key:🗝️',
-    download: ':📥',
-    invert: 'retweet:🙃',
-    admin: 'crown:👑',
-    check: ':✔️',
-}
-
-document.fonts.ready.then(async ()=> {
-    const fontTester = '9px "fontello"'
-    await document.fonts.load(fontTester) // force font to be loaded even if we didn't display anything with it yet
-    if (document.fonts.check(fontTester))
-        state.iconsClass = ' ' // with fontello we don't need an additional class (unlike google material icons), but the empty space will cause reload
-})
-
-export const Icon = memo(({ name, alt, className='', ...props }: { name:string, className?:string, alt?:string, style?:any }) => {
-    // @ts-ignore
-    const [clazz,emoji] = (SYS_ICONS[name] || name).split(':')
-    const { iconsClass } = useSnapState()
-    className += ' icon ' + (iconsClass ? 'fa-'+(clazz||name) : 'emoji')
-    return h('span',{
-        ...props,
-        'aria-label': alt,
-        role: 'img',
-        className,
-    }, iconsClass ? null : (emoji||'#'))
-})