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

checking username availability

Browse Source
This commit is contained in:
balzack 2024-08-12 20:07:21 +02:00
parent 7deb3cac2c
commit 5e145f8950
6 changed files with 98 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/web/src/access/Access.module.css
View File

@ -47,6 +47,12 @@
margin: 4px;
}
.hidden {
width: 50%;
margin: 4px;
opacity: 0;
}
.title {
position: absolute;
top: 0;

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

@ -84,7 +84,6 @@ export function Access() {
{state.mode === 'account' && (
<>
<Title order={3}>{state.strings.login}</Title>
<Space h="md" />
<Button
size="compact-sm"
variant="transparent"
@ -92,6 +91,7 @@ export function Access() {
>
{state.host}
</Button>
<Space h="md" />
<TextInput
className={classes.input}
size="md"
@ -144,7 +144,6 @@ export function Access() {
{state.mode === 'reset' && (
<>
<Title order={3}>{state.strings.accessAccount}</Title>
<Space h="md" />
<Button
size="compact-sm"
variant="transparent"
@ -152,6 +151,7 @@ export function Access() {
>
{state.host}
</Button>
<Space h="md" />
<TextInput
className={classes.input}
size="md"
@ -184,8 +184,8 @@ export function Access() {
)}
{state.mode === 'create' && (
<>
<Title order={3}>{state.strings.createAccount}</Title>
<Space h="md" />
<Title order={3}>{state.strings.createAccount}</Title>
<Button
size="compact-sm"
variant="transparent"
@ -193,20 +193,20 @@ export function Access() {
>
{state.host}
</Button>
{(state.available === 0 || !state.availableSet) && (
<TextInput
className={classes.input}
size="md"
value={state.token}
disabled={!state.availableSet}
leftSectionPointerEvents="none"
leftSection={<IconKey />}
placeholder={state.strings.resetCode}
onChange={(event) =>
actions.setToken(event.currentTarget.value)
}
/>
)}
<Space h="md" />
<TextInput
className={
state.available === 0 ? classes.input : classes.hidden
}
size="md"
value={state.token}
leftSectionPointerEvents="none"
leftSection={<IconKey />}
placeholder={state.strings.accessCode}
onChange={(event) =>
actions.setToken(event.currentTarget.value)
}
/>
<TextInput
className={classes.input}
size="md"
@ -216,6 +216,7 @@ export function Access() {
onChange={(event) =>
actions.setUsername(event.currentTarget.value)
}
error={state.taken ? true : false}
/>
<PasswordInput
className={classes.input}
@ -236,7 +237,17 @@ export function Access() {
}
/>
<Space h="md" />
<Button variant="filled" className={classes.submit}>
<Button
variant="filled"
className={classes.submit}
onClick={login}
disabled={
state.taken ||
!state.username ||
!state.password ||
state.password !== state.confirm
}
>
{state.strings.create}
</Button>
<Button
@ -251,7 +262,6 @@ export function Access() {
{state.mode === 'admin' && (
<>
<Title order={3}>{state.strings.admin}</Title>
<Space h="md" />
<Button
size="compact-sm"
variant="transparent"
@ -259,6 +269,7 @@ export function Access() {
>
{state.host}
</Button>
<Space h="md" />
<PasswordInput
className={classes.input}
size="md"

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

@ -4,7 +4,8 @@ import { AppContext } from '../context/AppContext'
import { ContextType } from '../context/ContextType'
export function useAccess() {
const debounce = useRef(setTimeout(() => {}, 0))
const debounceAvailable = useRef(setTimeout(() => {}, 0))
const debounceTaken = useRef(setTimeout(() => {}, 0))
const app = useContext(AppContext) as ContextType
const settings = useContext(SettingsContext) as ContextType
const [state, setState] = useState({
@ -23,7 +24,7 @@ export function useAccess() {
secure: false,
host: '',
available: 0,
availableSet: false,
taken: false,
themes: settings.state.themes,
languages: settings.state.languages,
})
@ -48,31 +49,58 @@ export function useAccess() {
setUrl(`${protocol}//${host}`)
}, [])
useEffect(() => {
const { username, token, host, secure, mode } = state
if (mode === 'create') {
checkTaken(username, token, host, secure)
getAvailable(host, secure)
}
}, [state.mode, state.username, state.token, state.host, state.secure])
const setUrl = (node: string) => {
try {
const url = new URL(node)
const { protocol, host } = url
getAvailable(host, protocol === 'https:')
updateState({ node, host, secure: protocol === 'https:' })
} catch (err) {
console.log(err)
const { protocol, host } = location
getAvailable(host, protocol === 'https:')
updateState({ node, host, secure: protocol === 'https:' })
}
}
const getAvailable = (node: string, secure: boolean) => {
updateState({ availableSet: false })
clearTimeout(debounce.current)
debounce.current = setTimeout(async () => {
clearTimeout(debounceAvailable.current)
debounceAvailable.current = setTimeout(async () => {
try {
const available = await app.actions.getAvailable(node, secure)
updateState({ available, availableSet: true })
updateState({ available })
} catch (err) {
console.log(err)
updateState({ available: 0 })
}
}, 1000)
}, 2000)
}
const checkTaken = (
username: string,
token: string,
node: string,
secure: boolean
) => {
updateState({ taken: false })
clearTimeout(debounceTaken.current)
debounceTaken.current = setTimeout(async () => {
const available = await app.actions.getUsername(
username,
token,
node,
secure
)
updateState({ taken: !available })
console.log('TAKEN: ', taken)
}, 2000)
}
useEffect(() => {
@ -94,6 +122,8 @@ export function useAccess() {
},
setUsername: (username: string) => {
updateState({ username })
const { token, host, secure } = state
checkTaken(username, token, host, secure)
},
setPassword: (password: string) => {
updateState({ password })
@ -133,7 +163,7 @@ export function useAccess() {
},
adminLogin: async () => {
const { password, host, secure, code } = state
await app.actions.adminLogin(host, secure, password, code)
await app.actions.adminLogin(password, host, secure, code)
},
}

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

@ -78,7 +78,7 @@ export function useAppContext() {
version: '0.0.1',
appName: 'databag',
}
const session = sdk.current.create(
const session = await sdk.current.create(
handle,
password,
node,
@ -100,12 +100,20 @@ export function useAppContext() {
version: '0.0.1',
appName: 'databag',
}
const session = sdk.current.access(node, secure, token, params)
const session = await sdk.current.access(node, secure, token, params)
updateState({ session })
},
getAvailable: async (node: string, secure: boolean) => {
return await sdk.current.available(node, secure)
},
getUsername: async (
username: string,
token: string,
node: string,
secure: boolean
) => {
return await sdk.current.username(username, token, node, secure)
},
adminLogin: async (
token: string,
node: string,

13
app/client/web/src/node/Node.tsx
View File

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

5
app/sdk/src/index.ts
View File

@ -9,6 +9,7 @@ import { setAccess } from './net/setAccess';
import { addAccount } from './net/addAccount';
import { setAdmin } from './net/setAdmin';
import { getAvailable } from './net/getAvailable';
import { getUsername } from './net/getUsername';
import type { Session, Node, Bot, SqlStore, WebStore, Crypto, Logging } from './api';
import type { SessionParams } from './types';
import type { Login } from './entities';
@ -45,6 +46,10 @@ export class DatabagSDK {
return await getAvailable(node, secure);
}
public async username(name: string, token: string, node: string, secure: boolean): Promise<boolean> {
return await getUsername(name, token, node, secure);
}
public async login(handle: string, password: string, node: string, secure: boolean, mfaCode: string | null, params: SessionParams): Promise<Session> {
const { appName, version, deviceId, deviceToken, pushType, notifications } = params;
const { guid, appToken, created, pushSupported } = await setLogin(node, secure, handle, password, mfaCode, appName, version, deviceId, deviceToken, pushType, notifications);