Refactor login components and adjust login API routes (#1678)

* Refactor login components and adjust API routes

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Adjust API /me response and redux state

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Fix moved function

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Update cypress tests

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Adjust mock response

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Integrate new common fields and hook into profile page

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Remove openid

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

* Fix config mock

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/login-page/auth/via-local.tsx

@@ -0,0 +1,82 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { ChangeEvent, FormEvent } from 'react'
+import React, { useCallback, useState } from 'react'
+import { Button, Card, Form } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { doLocalLogin } from '../../../api/auth/local'
+import { ShowIf } from '../../common/show-if/show-if'
+import { fetchAndSetUser } from './utils'
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { AuthError as AuthErrorType } from '../../../api/auth'
+import { UsernameField } from './fields/username-field'
+import { PasswordField } from './fields/password-field'
+import { AuthError } from './auth-error/auth-error'
+
+/**
+ * Renders the local login box with username and password field and the optional button for registering a new user.
+ */
+export const ViaLocal: React.FC = () => {
+  const { t } = useTranslation()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<AuthErrorType>()
+  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
+          )
+        })
+      event.preventDefault()
+    },
+    [username, password]
+  )
+
+  const onUsernameChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setUsername(event.target.value)
+  }, [])
+
+  const onPasswordChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value)
+  }, [])
+
+  return (
+    <Card className='bg-dark mb-4'>
+      <Card.Body>
+        <Card.Title>
+          <Trans i18nKey='login.signInVia' values={{ service: t('login.auth.username') }} />
+        </Card.Title>
+        <Form onSubmit={onLoginSubmit}>
+          <UsernameField onChange={onUsernameChange} invalid={!!error} />
+          <PasswordField onChange={onPasswordChange} invalid={!!error} />
+          <AuthError error={error} />
+
+          <div className='flex flex-row' dir='auto'>
+            <Button type='submit' variant='primary' className='mx-2'>
+              <Trans i18nKey='login.signIn' />
+            </Button>
+            <ShowIf condition={allowRegister}>
+              <Link to={'/register'}>
+                <Button type='button' variant='secondary' className='mx-2'>
+                  <Trans i18nKey='login.register.title' />
+                </Button>
+              </Link>
+            </ShowIf>
+          </div>
+        </Form>
+      </Card.Body>
+    </Card>
+  )
+}