fix: frontend: trying to access a protected folder, and then clicking 'back', didn't make the login dialog go away
Massimo Melina committed
Mar 13, 2023 at 15:54 UTC
2843efc2f0de81e2825c5d34e78eca89fd2eec82
4 files changed
+26
-24
frontend/src/BrowseFiles.ts
+1
-1
@@ -17,7 +17,7 @@ import { Head } from './Head'
17
import { state, useSnapState } from './state'
18
import { alertDialog } from './dialog'
19
import useFetchList from './useFetchList'
20
-import useAuthorized from './useAuthorized'
20
+import { useAuthorized } from './login'
21
import { acceptDropFiles, enqueue } from './upload'
22
import _ from 'lodash'
23
import { useI18N } from './i18n'
frontend/src/login.ts
+24
-3
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { apiCall } from './api'
4
-import { state } from './state'
4
+import { state, useSnapState } from './state'
5
import { alertDialog, newDialog } from './dialog'
6
import { getPrefixUrl, hIcon, srpSequence, working } from './misc'
7
import { useNavigate } from 'react-router-dom'
@@ -47,12 +47,17 @@ export function logout(){
47
})
48
}
49
50
+export let closeLoginDialog: undefined | (() => void)
51
export async function loginDialog(navigate: ReturnType<typeof useNavigate>) {
52
+ if (closeLoginDialog) return
53
return new Promise(resolve => {
52
- const closeDialog = newDialog({
54
+ const closeDialog = closeLoginDialog = newDialog({
55
className: 'dialog-login',
56
icon: () => hIcon('login'),
55
- onClose: resolve,
57
+ onClose(v) {
58
+ resolve(v)
59
+ closeLoginDialog = undefined
60
+ },
61
title: tComponent("Login"),
62
Content() {
63
const usrRef = useRef<HTMLInputElement>()
@@ -120,3 +125,19 @@ export async function loginDialog(navigate: ReturnType<typeof useNavigate>) {
125
})
126
})
127
}
128
+
129
+export function useAuthorized() {
130
+ const { loginRequired } = useSnapState()
131
+ const navigate = useNavigate()
132
+ useEffect(() => {
133
+ (async () => {
134
+ if (!loginRequired)
135
+ return closeLoginDialog?.()
136
+ if (closeLoginDialog) return
137
+ while (state.loginRequired)
138
+ await loginDialog(navigate).then()
139
+ })()
140
+ }, [loginRequired, navigate])
141
+ return loginRequired ? null : true
142
+}
143
+
frontend/src/useAuthorized.ts
deleted
-19
@@ -1,19 +0,0 @@
1
-// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
-
3
-import { state, useSnapState } from './state'
4
-import { useNavigate } from 'react-router-dom'
5
-import { useEffect } from 'react'
6
-import { loginDialog } from './login'
7
-
8
-export default function useAuthorized() {
9
- const { loginRequired } = useSnapState()
10
- const navigate = useNavigate()
11
- useEffect(() => {
12
- (async () => {
13
- while (state.loginRequired)
14
- await loginDialog(navigate).then()
15
- })()
16
- }, [loginRequired, navigate])
17
- return loginRequired ? null : true
18
-}
19
-
frontend/src/useFetchList.ts
+1
-1
@@ -23,7 +23,6 @@ export default function useFetchList() {
23
const isMounted = useIsMounted()
24
const navigate = useNavigate()
25
useEffect(()=>{
26
- if (snap.loginRequired) return
26
const previous = lastPath.current
27
lastPath.current = desiredPath
28
if (previous !== desiredPath) {
@@ -70,6 +69,7 @@ export default function useFetchList() {
69
lastReq.current = undefined
70
return
71
case 'msg':
72
+ state.loginRequired = false
73
data.forEach(async (entry: any) => {
74
const { error } = entry
75
if (error === 405) { // "method not allowed" happens when we try to directly access an unauthorized file, and we get a login prompt, and then file_list the file (because we didn't know it was file or folder)