use new dialogs
Massimo Melina committed
Dec 26, 2021 at 15:39 UTC
2a36cfa005d33c85571242c89bbeca6486d6448d
3 files changed
+25
-8
frontend/src/Head.ts
+17
-6
@@ -6,6 +6,7 @@ import { formatBytes, hIcon, prefix } from './misc'
6
import { Spinner } from './components'
7
import { state, useSnapState } from './state'
8
import { useDebounce } from 'use-debounce'
9
+import { closeDialog, newDialog, promptDialog } from './dialog'
10
11
export function Head() {
12
return h('header', {},
@@ -53,12 +54,12 @@ function MenuPanel() {
54
icon: 'search',
55
label: 'Search',
56
async onClick() {
56
- state.remoteSearch = prompt('Search for...') ||''
57
+ state.remoteSearch = await promptDialog('Search for...') ||''
58
}
59
}
60
)
61
),
61
- remoteSearch && h('div', { id:'searched' }, 'Searched for: ',remoteSearch),
62
+ remoteSearch && h('div', { id: 'searched' }, (stopSearch ? 'Searching' : 'Searched') + ': ' + remoteSearch),
63
showFilter && h('input',{
64
id: 'filter',
65
placeholder: 'Filter',
@@ -83,16 +84,26 @@ function LoginButton() {
84
icon: 'user',
85
label: snap.username,
86
onClick(){
86
- if (window.confirm('Logout?'))
87
- logout()
87
+ newDialog({
88
+ content: ()=> h('div',{ id:'user-panel' },
89
+ h('div',{}, 'User: '+snap.username),
90
+ h(MenuButton,{
91
+ icon: 'logout',
92
+ label: 'Logout',
93
+ onClick(){
94
+ logout().then(closeDialog)
95
+ }
96
+ })
97
+ )
98
+ })
99
},
100
} : {
101
icon: 'login',
102
label: 'Login',
103
async onClick(){
93
- const user = prompt('Username')
104
+ const user = await promptDialog('Username')
105
if (!user) return
95
- const password = prompt('Password')
106
+ const password = await promptDialog('Password', { type:'password' })
107
if (!password) return
108
await login(user, password)
109
}
frontend/src/index.scss
+5
@@ -142,6 +142,11 @@ ul.dir {
142
#searched {
143
margin: .2em;
144
}
145
+#user-panel {
146
+ display:flex;
147
+ flex-direction: column;
148
+ gap: 1em;
149
+}
150
151
@media (max-width: 50em) {
152
#menu-bar button:nth-child(1n+2) label { display: none } /* icons only */
frontend/src/login.ts
+3
-2
@@ -1,5 +1,6 @@
1
import { apiCall, ApiError } from './api'
2
import { state } from './state'
3
+import { alertDialog } from './dialog'
4
5
let refresher: NodeJS.Timeout
6
@@ -15,7 +16,7 @@ export async function login(user:string, password:string) {
16
if (err instanceof ApiError)
17
if (err.code === 401)
18
err = 'Invalid credentials'
18
- alert(err)
19
+ await alertDialog(err as Error, 'error')
20
}
21
}
22
apiCall('refresh_session').then(sessionRefresher, ()=>{})
@@ -30,5 +31,5 @@ function sessionRefresher({ exp, user }:{ exp:string, user:string }) {
31
}
32
33
export function logout(){
33
- apiCall('logout').then(()=> state.username = '')
34
+ return apiCall('logout').then(()=> state.username = '')
35
}