frontend: added title and icon to Login, Options and User-panel
Massimo Melina committed
Jan 15, 2023 at 17:58 UTC
20a1260f8e01fd828b6ae77d642692b66d1b4fff
7 files changed
+35
-22
frontend/src/UserPanel.ts
+6
-1
@@ -7,9 +7,14 @@ import { createVerifierAndSalt, SRPParameters, SRPRoutines } from 'tssrp6a'
7
import { apiCall } from './api'
8
import { logout } from './login'
9
import { MenuButton } from './menu'
10
+import { hIcon } from './misc'
11
12
export default function showUserPanel() {
12
- newDialog({ Content })
13
+ newDialog({
14
+ title: "User panel",
15
+ icon: () => hIcon('user'),
16
+ Content
17
+ })
18
}
19
20
function Content() {
frontend/src/dialog.css
+2
-2
@@ -31,7 +31,7 @@
31
border-radius: .8em 0;
32
}
33
.dialog-title {
34
- margin-top: -.5em;
34
+ margin-top: -.4em;
35
font-size: 110%;
36
}
37
.dialog-icon ~ .dialog-title {
@@ -44,7 +44,7 @@
44
background-color: #c99;
45
}
46
.dialog-icon ~ .dialog-content {
47
- margin-top: 1.3em;
47
+ margin-top: 2em;
48
}
49
.dialog-type {
50
left: 0;
frontend/src/dialog.ts
+4
-3
@@ -2,16 +2,17 @@
2
3
import { createElement as h, ReactElement, ReactNode, useEffect, useRef } from 'react'
4
import './dialog.css'
5
-import { newDialog, closeDialog } from '@hfs/shared/dialogs'
5
+import { newDialog, closeDialog, DialogOptions } from '@hfs/shared/dialogs'
6
import _ from 'lodash'
7
export * from '@hfs/shared/dialogs'
8
9
-interface PromptOptions { def?:string, type?:string }
10
-export async function promptDialog(msg: string, { def, type }:PromptOptions={}) : Promise<string | null> {
9
+interface PromptOptions extends Partial<DialogOptions> { def?:string, type?:string }
10
+export async function promptDialog(msg: string, { def, type, ...rest }:PromptOptions={}) : Promise<string | null> {
11
return new Promise(resolve => newDialog({
12
className: 'dialog-prompt',
13
icon: '?',
14
onClose: resolve,
15
+ ...rest,
16
Content
17
}) )
18
frontend/src/login.ts
+16
-3
@@ -2,10 +2,11 @@
2
3
import { apiCall, ApiError } from './api'
4
import { state } from './state'
5
-import { alertDialog } from './dialog'
6
-import { srpSequence, working } from './misc'
5
+import { alertDialog, promptDialog } from './dialog'
6
+import { hIcon, srpSequence, working } from './misc'
7
+import { useNavigate } from 'react-router-dom'
8
8
-export async function login(username:string, password:string) {
9
+async function login(username:string, password:string) {
10
const stopWorking = working()
11
return srpSequence(username, password, apiCall).then(res => {
12
stopWorking()
@@ -48,3 +49,15 @@ export function logout(){
49
throw res
50
})
51
}
52
+
53
+export async function loginDialog(navigate: ReturnType<typeof useNavigate>) {
54
+ const title = "Login"
55
+ const icon = () => hIcon('login')
56
+ const user = await promptDialog('Username', { title, icon })
57
+ if (!user) return
58
+ const password = await promptDialog('Password', { type: 'password', title, icon })
59
+ if (!password) return
60
+ const res = await login(user, password)
61
+ if (res?.redirect)
62
+ navigate(res.redirect)
63
+}
frontend/src/menu.ts
+1
-11
@@ -5,7 +5,7 @@ import { createElement as h, useEffect, useState } from 'react'
5
import { useDebounce } from 'use-debounce'
6
import { alertDialog, confirmDialog, ConfirmOptions, promptDialog } from './dialog'
7
import { hIcon, isMobile, prefix, useStateMounted } from './misc'
8
-import { login } from './login'
8
+import { loginDialog } from './login'
9
import { showOptions } from './options'
10
import showUserPanel from './UserPanel'
11
import { useNavigate } from 'react-router-dom'
@@ -185,13 +185,3 @@ function LoginButton() {
185
onClick: () => loginDialog(navigate),
186
})
187
}
188
-
189
-export async function loginDialog(navigate: ReturnType<typeof useNavigate>) {
190
- const user = await promptDialog('Username')
191
- if (!user) return
192
- const password = await promptDialog('Password', { type: 'password' })
193
- if (!password) return
194
- const res = await login(user, password)
195
- if (res?.redirect)
196
- navigate(res.redirect)
197
-}
frontend/src/options.ts
+5
-1
@@ -9,7 +9,11 @@ import { MenuLink } from './menu'
9
10
export function showOptions (){
11
const options = ['name', 'extension', 'size', 'time']
12
- const close = newDialog({ Content })
12
+ const close = newDialog({
13
+ title: "Options",
14
+ icon: () => hIcon('settings'),
15
+ Content
16
+ })
17
18
function Content(){
19
const snap = useSnapState()
frontend/src/useAuthorized.ts
+1
-1
@@ -3,7 +3,7 @@
3
import { state, useSnapState } from './state'
4
import { useNavigate } from 'react-router-dom'
5
import { useEffect } from 'react'
6
-import { loginDialog } from './menu'
6
+import { loginDialog } from './login'
7
8
export default function useAuthorized() {
9
const { loginRequired } = useSnapState()