From 5e145f8950b683482c245c968c98bc45f8c7abce Mon Sep 17 00:00:00 2001 From: balzack Date: Mon, 12 Aug 2024 20:07:21 +0200 Subject: [PATCH] checking username availability --- app/client/web/src/access/Access.module.css | 6 +++ app/client/web/src/access/Access.tsx | 49 +++++++++++------- app/client/web/src/access/useAccess.hook.ts | 50 +++++++++++++++---- .../web/src/context/useAppContext.hook.ts | 12 ++++- app/client/web/src/node/Node.tsx | 13 ++--- app/sdk/src/index.ts | 5 ++ 6 files changed, 98 insertions(+), 37 deletions(-) diff --git a/app/client/web/src/access/Access.module.css b/app/client/web/src/access/Access.module.css index 569e6f96..9e417e28 100644 --- a/app/client/web/src/access/Access.module.css +++ b/app/client/web/src/access/Access.module.css @@ -47,6 +47,12 @@ margin: 4px; } + .hidden { + width: 50%; + margin: 4px; + opacity: 0; + } + .title { position: absolute; top: 0; diff --git a/app/client/web/src/access/Access.tsx b/app/client/web/src/access/Access.tsx index 4434d7bd..2196dabb 100644 --- a/app/client/web/src/access/Access.tsx +++ b/app/client/web/src/access/Access.tsx @@ -84,7 +84,6 @@ export function Access() { {state.mode === 'account' && ( <> {state.strings.login} - + {state.strings.accessAccount} - + - {state.strings.createAccount} + {state.strings.createAccount} - {(state.available === 0 || !state.availableSet) && ( - } - placeholder={state.strings.resetCode} - onChange={(event) => - actions.setToken(event.currentTarget.value) - } - /> - )} + + } + placeholder={state.strings.accessCode} + onChange={(event) => + actions.setToken(event.currentTarget.value) + } + /> actions.setUsername(event.currentTarget.value) } + error={state.taken ? true : false} /> - + {}, 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) }, } diff --git a/app/client/web/src/context/useAppContext.hook.ts b/app/client/web/src/context/useAppContext.hook.ts index f331bbf8..352fa050 100644 --- a/app/client/web/src/context/useAppContext.hook.ts +++ b/app/client/web/src/context/useAppContext.hook.ts @@ -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, diff --git a/app/client/web/src/node/Node.tsx b/app/client/web/src/node/Node.tsx index e8732df5..265d2d87 100644 --- a/app/client/web/src/node/Node.tsx +++ b/app/client/web/src/node/Node.tsx @@ -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 ( -
- Node -
- ) + const app = useContext(AppContext) as ContextType + + return } diff --git a/app/sdk/src/index.ts b/app/sdk/src/index.ts index 0fb324ca..0a57e196 100644 --- a/app/sdk/src/index.ts +++ b/app/sdk/src/index.ts @@ -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 { + return await getUsername(name, token, node, secure); + } + public async login(handle: string, password: string, node: string, secure: boolean, mfaCode: string | null, params: SessionParams): Promise { 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);