hfs 0.26.8 → 0.27.2

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||'#'))
-})