fix(frontend): refactor api error handling

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-01-14 22:35:37 +01:00
parent e93144eb40
commit 57bfca7b15
44 changed files with 387 additions and 465 deletions

View file

@ -4,18 +4,16 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { doLocalLogin } from '../../../api/auth/local'
import { AuthError as AuthErrorType } from '../../../api/auth/types'
import { useApplicationState } from '../../../hooks/common/use-application-state'
import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
import { ShowIf } from '../../common/show-if/show-if'
import { AuthError } from './auth-error/auth-error'
import { PasswordField } from './fields/password-field'
import { UsernameField } from './fields/username-field'
import { fetchAndSetUser } from './utils'
import Link from 'next/link'
import type { FormEvent } from 'react'
import React, { useCallback, useState } from 'react'
import { Button, Card, Form } from 'react-bootstrap'
import { Alert, Button, Card, Form } from 'react-bootstrap'
import { Trans, useTranslation } from 'react-i18next'
/**
@ -25,20 +23,14 @@ export const ViaLocal: React.FC = () => {
const { t } = useTranslation()
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState<AuthErrorType>()
const [error, setError] = useState<string>()
const allowRegister = useApplicationState((state) => state.config.allowRegister)
const onLoginSubmit = useCallback(
(event: FormEvent) => {
doLocalLogin(username, password)
.then(() => fetchAndSetUser())
.catch((error: Error) => {
setError(
Object.values(AuthErrorType).includes(error.message as AuthErrorType)
? (error.message as AuthErrorType)
: AuthErrorType.OTHER
)
})
.catch((error: Error) => setError(error.message))
event.preventDefault()
},
[username, password]
@ -56,7 +48,9 @@ export const ViaLocal: React.FC = () => {
<Form onSubmit={onLoginSubmit}>
<UsernameField onChange={onUsernameChange} invalid={!!error} />
<PasswordField onChange={onPasswordChange} invalid={!!error} />
<AuthError error={error} />
<Alert className='small' show={!!error} variant='danger'>
<Trans i18nKey={error} />
</Alert>
<div className='flex flex-row' dir='auto'>
<Button type='submit' variant='primary' className='mx-2'>