Loading graphql/connection/LoginComp.tsx +49 −41 Original line number Diff line number Diff line Loading @@ -5,7 +5,7 @@ import { loginUrl } from '@inject/shared/config' import { notify } from '@inject/shared/notification/engine' import authenticatedFetch from '@inject/shared/utils/authenticatedFetch' import type { FormEvent } from 'react' import { useCallback, useState } from 'react' import { useCallback, useRef, useState } from 'react' import { sessionid } from './sessionid' const fields = css` Loading @@ -31,20 +31,32 @@ const loginForm = css` const Login = () => { const host = useHost() const [username, setUsername] = useState('') const [password, setPassword] = useState('') const username = useRef<HTMLInputElement>(null) const password = useRef<HTMLInputElement>(null) const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const login = useCallback(() => { const login = useCallback(async () => { if (!host) { return } if ( !username.current || !password.current || !username.current.value || !password.current.value ) { notify('Fill in username or password', { intent: 'danger', }) return } try { setLoading(true) authenticatedFetch(loginUrl(host), { const req = await authenticatedFetch(loginUrl(host), { body: JSON.stringify({ username, password, username: username.current.value, password: password.current.value, }), method: 'POST', headers: { Loading @@ -52,21 +64,22 @@ const Login = () => { 'Content-Type': 'application/json', }, }) .then(res => res.json()) .then((res: { sessionid: string }) => { const res: { sessionid: string } = await req.json() localStorage.clear() sessionStorage.clear() indexedDB.deleteDatabase('graphcache-v3') if (req.status === 403) { throw res as unknown as { status: string; detail: string } } sessionid(res.sessionid) }) .catch(err => notify(JSON.stringify(err), { } catch (err) { const { detail } = err as { status: string; detail: string } notify(detail, { intent: 'danger', }) ) .finally(() => { } finally { setLoading(false) }) } }, [host, password, username]) const handleSubmit = useCallback( Loading @@ -84,16 +97,18 @@ const Login = () => { <Label className={label}> Email <InputGroup value={username} onChange={e => setUsername(e.target.value)} id='username' inputRef={username} placeholder='email@inject.ex' /> </Label> <Label className={label}> Password <InputGroup id='password' inputRef={password} type={showPassword ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)} placeholder='password' rightElement={ <Button minimal Loading @@ -105,14 +120,7 @@ const Login = () => { </Label> </div> <Button icon='log-in' type='submit' loading={loading} disabled={!username || !password} title={!username || !password ? 'Fill in both fields' : undefined} intent='primary' > <Button icon='log-in' type='submit' loading={loading} intent='primary'> Login </Button> </form> Loading shared/notification/var/notifications.ts +1 −1 Original line number Diff line number Diff line Loading @@ -21,7 +21,7 @@ bc.onmessage = e => { // generates the toast message export const generateToast = (notification: BroadcastToastProps) => { toaster?.show({ toaster.show({ onDismiss(didTimeoutExpire) { if (!didTimeoutExpire) { removeNotify(notification.message, notification.timestamp) Loading Loading
graphql/connection/LoginComp.tsx +49 −41 Original line number Diff line number Diff line Loading @@ -5,7 +5,7 @@ import { loginUrl } from '@inject/shared/config' import { notify } from '@inject/shared/notification/engine' import authenticatedFetch from '@inject/shared/utils/authenticatedFetch' import type { FormEvent } from 'react' import { useCallback, useState } from 'react' import { useCallback, useRef, useState } from 'react' import { sessionid } from './sessionid' const fields = css` Loading @@ -31,20 +31,32 @@ const loginForm = css` const Login = () => { const host = useHost() const [username, setUsername] = useState('') const [password, setPassword] = useState('') const username = useRef<HTMLInputElement>(null) const password = useRef<HTMLInputElement>(null) const [showPassword, setShowPassword] = useState(false) const [loading, setLoading] = useState(false) const login = useCallback(() => { const login = useCallback(async () => { if (!host) { return } if ( !username.current || !password.current || !username.current.value || !password.current.value ) { notify('Fill in username or password', { intent: 'danger', }) return } try { setLoading(true) authenticatedFetch(loginUrl(host), { const req = await authenticatedFetch(loginUrl(host), { body: JSON.stringify({ username, password, username: username.current.value, password: password.current.value, }), method: 'POST', headers: { Loading @@ -52,21 +64,22 @@ const Login = () => { 'Content-Type': 'application/json', }, }) .then(res => res.json()) .then((res: { sessionid: string }) => { const res: { sessionid: string } = await req.json() localStorage.clear() sessionStorage.clear() indexedDB.deleteDatabase('graphcache-v3') if (req.status === 403) { throw res as unknown as { status: string; detail: string } } sessionid(res.sessionid) }) .catch(err => notify(JSON.stringify(err), { } catch (err) { const { detail } = err as { status: string; detail: string } notify(detail, { intent: 'danger', }) ) .finally(() => { } finally { setLoading(false) }) } }, [host, password, username]) const handleSubmit = useCallback( Loading @@ -84,16 +97,18 @@ const Login = () => { <Label className={label}> Email <InputGroup value={username} onChange={e => setUsername(e.target.value)} id='username' inputRef={username} placeholder='email@inject.ex' /> </Label> <Label className={label}> Password <InputGroup id='password' inputRef={password} type={showPassword ? 'text' : 'password'} value={password} onChange={e => setPassword(e.target.value)} placeholder='password' rightElement={ <Button minimal Loading @@ -105,14 +120,7 @@ const Login = () => { </Label> </div> <Button icon='log-in' type='submit' loading={loading} disabled={!username || !password} title={!username || !password ? 'Fill in both fields' : undefined} intent='primary' > <Button icon='log-in' type='submit' loading={loading} intent='primary'> Login </Button> </form> Loading
shared/notification/var/notifications.ts +1 −1 Original line number Diff line number Diff line Loading @@ -21,7 +21,7 @@ bc.onmessage = e => { // generates the toast message export const generateToast = (notification: BroadcastToastProps) => { toaster?.show({ toaster.show({ onDismiss(didTimeoutExpire) { if (!didTimeoutExpire) { removeNotify(notification.message, notification.timestamp) Loading