martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 23:45:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix formatting

Browse Source
This commit is contained in:
balzack 2024-08-11 01:55:12 +02:00
parent 961216ac29
commit 103438b28a
5 changed files with 69 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/client/web/src/access/Access.tsx
View File

@ -11,15 +11,21 @@ import {
PasswordInput, PasswordInput,
TextInput, TextInput,
} from '@mantine/core' } from '@mantine/core'
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks'
import login from '../images/login.png' import login from '../images/login.png'
import { IconLock, IconUser, IconSettings, IconServer, IconKey } from '@tabler/icons-react' import {
IconLock,
IconUser,
IconSettings,
IconServer,
IconKey,
} from '@tabler/icons-react'
export function Access() { export function Access() {
const { state, actions } = useAccess() const { state, actions } = useAccess()
const [opened, { open, close }] = useDisclosure(false); const [opened, { open, close }] = useDisclosure(false)
console.log("AVAILABLE: ", state.availableSet); console.log('AVAILABLE: ', state.availableSet)
return ( return (
<div className={classes.split}> <div className={classes.split}>
@ -53,11 +59,9 @@ console.log("AVAILABLE: ", state.availableSet);
<> <>
<Title order={3}>{state.strings.login}</Title> <Title order={3}>{state.strings.login}</Title>
<Space h="md" /> <Space h="md" />
<Button <Button size="compact-sm" variant="transparent" onClick={open}>
size="compact-sm" {state.hostname}
variant="transparent" </Button>
onClick={open}
>{ state.hostname }</Button>
<TextInput <TextInput
className={classes.input} className={classes.input}
size="md" size="md"
@ -101,21 +105,19 @@ console.log("AVAILABLE: ", state.availableSet);
<> <>
<Title order={3}>{state.strings.accessAccount}</Title> <Title order={3}>{state.strings.accessAccount}</Title>
<Space h="md" /> <Space h="md" />
<Button <Button size="compact-sm" variant="transparent" onClick={open}>
size="compact-sm" {state.hostname}
variant="transparent" </Button>
onClick={open} <TextInput
>{ state.hostname }</Button> className={classes.input}
<TextInput size="md"
className={classes.input} leftSectionPointerEvents="none"
size="md" leftSection={<IconKey />}
leftSectionPointerEvents="none" placeholder={state.strings.accessCode}
leftSection={<IconKey />} onChange={(event) =>
placeholder={state.strings.accessCode} actions.setToken(event.currentTarget.value)
onChange={(event) => }
actions.setToken(event.currentTarget.value) />
}
/>
<Space h="md" /> <Space h="md" />
<Button variant="filled" className={classes.submit}> <Button variant="filled" className={classes.submit}>
{state.strings.login} {state.strings.login}
@ -129,18 +131,14 @@ console.log("AVAILABLE: ", state.availableSet);
</Button> </Button>
</> </>
)} )}
{state.mode === 'create' && ( {state.mode === 'create' && (
<> <>
<Title order={3}>{state.strings.createAccount}</Title> <Title order={3}>{state.strings.createAccount}</Title>
<Space h="md" /> <Space h="md" />
<Button <Button size="compact-sm" variant="transparent" onClick={open}>
size="compact-sm" {state.hostname}
variant="transparent" </Button>
onClick={open} {(state.available === 0 || !state.availableSet) && (
>{ state.hostname }</Button>
{ (state.available === 0 || !state.availableSet) && (
<TextInput <TextInput
className={classes.input} className={classes.input}
size="md" size="md"
@ -185,7 +183,11 @@ console.log("AVAILABLE: ", state.availableSet);
<Button variant="filled" className={classes.submit}> <Button variant="filled" className={classes.submit}>
{state.strings.create} {state.strings.create}
</Button> </Button>
<Button variant="subtle" onClick={() => actions.setMode('login')} size="compact-sm"> <Button
variant="subtle"
onClick={() => actions.setMode('login')}
size="compact-sm"
>
{state.strings.accountLogin} {state.strings.accountLogin}
</Button> </Button>
</> </>
@ -194,11 +196,9 @@ console.log("AVAILABLE: ", state.availableSet);
<> <>
<Title order={3}>{state.strings.admin}</Title> <Title order={3}>{state.strings.admin}</Title>
<Space h="md" /> <Space h="md" />
<Button <Button size="compact-sm" variant="transparent" onClick={open}>
size="compact-sm" {state.hostname}
variant="transparent" </Button>
onClick={open}
>{ state.hostname }</Button>
<PasswordInput <PasswordInput
className={classes.input} className={classes.input}
size="md" size="md"
@ -237,9 +237,7 @@ console.log("AVAILABLE: ", state.availableSet);
leftSection={<IconServer />} leftSection={<IconServer />}
placeholder={state.strings.host} placeholder={state.strings.host}
value={state.node} value={state.node}
onChange={(event) => onChange={(event) => actions.setNode(event.currentTarget.value)}
actions.setNode(event.currentTarget.value)
}
/> />
</Modal> </Modal>
</div> </div>

46
app/client/web/src/access/useAccess.hook.ts
View File

@ -4,7 +4,7 @@ import { AppContext } from '../context/AppContext'
import { ContextType } from '../context/ContextType' import { ContextType } from '../context/ContextType'
export function useAccess() { export function useAccess() {
const debounce = useRef(null); const debounce = useRef(setTimeout(() => {}, 0))
const app = useContext(AppContext) as ContextType const app = useContext(AppContext) as ContextType
const settings = useContext(SettingsContext) as ContextType const settings = useContext(SettingsContext) as ContextType
const [state, setState] = useState({ const [state, setState] = useState({
@ -32,41 +32,38 @@ export function useAccess() {
useEffect(() => { useEffect(() => {
const { protocol, hostname, port } = location const { protocol, hostname, port } = location
setUrl(`${protocol}//${hostname}:${port}`); setUrl(`${protocol}//${hostname}:${port}`)
}, []) }, [])
const setUrl = (node: string) => { const setUrl = (node: string) => {
try { try {
const url = new URL(node); const url = new URL(node)
const { protocol, hostname, port } = url; const { protocol, hostname, port } = url
getAvailable(`${hostname}:${port}`, protocol === 'https:'); getAvailable(`${hostname}:${port}`, protocol === 'https:')
updateState({ node, hostname: hostname }); updateState({ node, hostname: hostname })
} } catch (err) {
catch(err) { console.log(err)
console.log(err); const { protocol, hostname, port } = location
const { protocol, hostname, port } = location; getAvailable(`${hostname}:${port}`, protocol === 'https:')
getAvailable(`${hostname}:${port}`, protocol === 'https:'); updateState({ node, hostname: location.hostname })
updateState({ node, hostname: location.hostname });
} }
} }
const getAvailable = (node: string, secure: boolean) => { const getAvailable = (node: string, secure: boolean) => {
updateState({ availableSet: false }); updateState({ availableSet: false })
clearTimeout(debounce.current); clearTimeout(debounce.current)
debounce.current = setTimeout(async () => { debounce.current = setTimeout(async () => {
try { try {
const available = await app.actions.getAvailable(node, secure); const available = await app.actions.getAvailable(node, secure)
console.log("AVAILABLE: ", available); console.log('AVAILABLE: ', available)
updateState({ available, availableSet: true }); updateState({ available, availableSet: true })
} catch (err) {
console.log(err)
} }
catch (err) { }, 1000)
console.log(err);
}
}, 1000);
} }
useEffect(() => { useEffect(() => {
const { display, strings, themes, theme, languages, language } = const { display, strings, themes, theme, languages, language } =
@ -98,7 +95,7 @@ console.log("AVAILABLE: ", available);
updateState({ token }) updateState({ token })
}, },
setNode: (node: string) => { setNode: (node: string) => {
setUrl(node); setUrl(node)
}, },
setLanguage: (code: string) => { setLanguage: (code: string) => {
settings.actions.setLanguage(code) settings.actions.setLanguage(code)
@ -106,8 +103,7 @@ console.log("AVAILABLE: ", available);
setTheme: (theme: string) => { setTheme: (theme: string) => {
settings.actions.setTheme(theme) settings.actions.setTheme(theme)
}, },
login: () => { login: () => {},
},
} }
return { state, actions } return { state, actions }

2
app/client/web/src/constants/Strings.ts
View File

@ -222,7 +222,7 @@ export const fr = {
ok: 'OK', ok: 'OK',
cancel: 'Annuler', cancel: 'Annuler',
enableNotifications: 'Notifications Push', enableNotifications: 'Notifications Push',
accessCode: 'Code d\'Accès', accessCode: "Code d'Accès",
forgotPassword: 'Mot de Passe Oublié', forgotPassword: 'Mot de Passe Oublié',
new: 'Nouveau', new: 'Nouveau',

10
app/client/web/src/context/useAppContext.hook.ts
View File

@ -50,17 +50,15 @@ export function useAppContext() {
}, },
accountLogout: async () => { accountLogout: async () => {
if (state.session) { if (state.session) {
await sdk.current.logout(state.session, false); await sdk.current.logout(state.session, false)
updateState({ session: null }) updateState({ session: null })
} }
}, },
getAvailable: async (node: string, secure: boolean) => { getAvailable: async (node: string, secure: boolean) => {
return await sdk.current.available(node, secure); return await sdk.current.available(node, secure)
},
adminLogin: async () => {
},
adminLogout: async () => {
}, },
adminLogin: async () => {},
adminLogout: async () => {},
} }
return { state, actions } return { state, actions }

10
app/client/web/src/session/Session.tsx
View File

@ -1,12 +1,10 @@
import React, { useContext } from 'react' import React, { useContext } from 'react'
import { Button } from '@mantine/core' import { Button } from '@mantine/core'
import { AppContext } from '../context/AppContext'; import { AppContext } from '../context/AppContext'
import { ContextType } from '../context/ContextType'; import { ContextType } from '../context/ContextType'
export function Session() { export function Session() {
const app = useContext(AppContext) as ContextType; const app = useContext(AppContext) as ContextType
return ( return <Button onClick={app.actions.accountLogout}>Session Logout</Button>
<Button onClick={app.actions.accountLogout}>Session Logout</Button>
)
} }