admin/home: restyle
Massimo Melina committed
Mar 13, 2022 at 19:13 UTC
596c0285e975362f48dfc29c4015af5b0fcb815b
1 file changed
+26
-19
admin/src/HomePage.ts
+26
-19
@@ -1,10 +1,10 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { createElement as h, Fragment } from 'react'
4
-import { Alert, Box, Link } from '@mui/material'
4
+import { Box, Link } from '@mui/material'
5
import { useApi } from './api'
6
import { Dict, dontBotherWithKeys, InLink, objSameKeys, onlyTruthy, spinner } from './misc'
7
-import { Launch } from '@mui/icons-material'
7
+import { CheckCircle, Error, Info, Launch, Warning } from '@mui/icons-material'
8
import md from './md'
9
import { useSnapState } from './state'
10
@@ -22,38 +22,45 @@ export default function HomePage() {
22
const srv = goSecure ? https : (http?.listening && http)
23
const href = srv && `http${goSecure}://`+window.location.hostname + (srv.port === (goSecure ? 443 : 80) ? '' : ':'+srv.port)
24
const errorMap = objSameKeys(status, v =>
25
- v.busy ? [`port ${v.port} already used by ${v.busy} - choose a `, cfgLink('different port'), ` or stop ${v.busy}`]
25
+ v.busy ? [`port ${v.port} already used by ${v.busy} — choose a `, cfgLink('different port'), ` or stop ${v.busy}`]
26
: v.error )
27
const errors = errorMap && onlyTruthy(Object.entries(errorMap).map(([k,v]) =>
28
- v && [md(`Protocol _${k}_ cannot work: `), v, typeof v === 'string' && /certificate|key/.test(v) && [' - ', cfgLink("provide adequate files")]]))
28
+ v && [md(`Protocol _${k}_ cannot work: `), v, typeof v === 'string' && /certificate|key/.test(v) && [' — ', cfgLink("provide adequate files")]]))
29
return h(Box, { display:'flex', gap: 2, flexDirection:'column' },
30
- username && h(Alert, { severity: 'info' }, "Welcome "+username),
30
+ username && entry('', "Welcome "+username),
31
!cfg ? spinner() :
32
- errors.length ? errors.map((msg, i) => h(Alert, { key: i, severity: 'error' }, dontBotherWithKeys(msg)))
33
- : href && h(Alert, { severity: 'success' }, "Server is working"),
34
- href ? h(Box, { my:1, ml:1 },
35
- h(Box, { fontSize:'200%' },
36
- h(Link, { target:'frontend', href }, "Open frontend interface",
37
- h(Launch, { sx: { ml:1, mt:1 } }),
38
- )
39
- ),
40
- h(Box, { color:'text.secondary' },
41
- `Inside the frontend your users can see files and folders you share in the File System.`)
42
- ) : h(Alert, { severity: 'warning' }, "Frontend unreachable: ",
32
+ errors.length ? dontBotherWithKeys(errors.map(msg => entry('error', dontBotherWithKeys(msg))))
33
+ : entry('success', "Server is working"),
34
+ entry('', "Here you manage your server. Access your shared files in the ",
35
+ h(Link, { target:'frontend', href: '/' }, "Frontend interface", h(Launch, { sx: { verticalAlign: 'sub', ml: '.2em' } }))),
36
+ ! href && entry('warning', "Frontend unreachable: ",
37
!cfg ? '...'
38
: errors.length === 2 ? "both http and https are in error"
39
: h(Fragment, {},
40
['http','https'].map(k => k + " " + (errorMap[k] ? "is in error" : "is off")).join(', '),
47
- !errors.length && h(Fragment, {}, ' - ', cfgLink("switch http or https on"))
41
+ !errors.length && h(Fragment, {}, ' — ', cfgLink("switch http or https on"))
42
)
43
),
50
- !username && h(Alert, { severity: 'info' }, "You are accessing on localhost without an account - ", h(InLink, { to:'accounts' }, "give admin access to an account to be able to access from other computers")),
44
+ !username && entry('', "You are accessing on localhost without an account — ", h(InLink, { to:'accounts' }, "give admin access to an account to be able to access from other computers")),
45
46
vfs?.root && !vfs.root.children?.length && !vfs.root.source &&
53
- h(Alert, { severity: 'warning' }, "You have no files shared - ", fsLink("add some"))
47
+ entry('warning', "You have no files shared — ", fsLink("add some"))
48
)
49
}
50
51
+type Color = '' | 'success' | 'warning' | 'error'
52
+
53
+function entry(color: Color, ...content: any[]) {
54
+ return h(Box, {
55
+ fontSize: 'x-large',
56
+ color: th => color && th.palette[color]?.main,
57
+ },
58
+ h(({ success: CheckCircle, info: Info, '': Info, warning: Warning, error: Error })[color], {
59
+ sx: { mb: '-3px', mr: 1 }
60
+ }),
61
+ ...content)
62
+}
63
+
64
function fsLink(text=`File System page`) {
65
return h(InLink, { to:'fs' }, text)
66
}