New auth form design, fixed useSend token sending

front/src/api/signup/index.ts

@@ -5,6 +5,12 @@ const composeSignUpURL = () => (
     API_URL + '/signup?'
 )
 
+const composeSignUpBody = (formData: FormData) => {
+    formData.append('nickname', formData.get('username') ?? '')
+
+    return formData
+}
+
 const processSignUp = (data: SignUpResponse): SignUp => {
     if (!data.Success) {
         throw new Error(data.Message)
@@ -13,4 +19,4 @@ const processSignUp = (data: SignUpResponse): SignUp => {
     return true
 }
 
-export { composeSignUpURL, processSignUp }
+export { composeSignUpURL, composeSignUpBody, processSignUp }

front/src/components/AuthForm.tsx

@@ -1,14 +1,14 @@
 import { FormEventHandler, useCallback } from 'react'
-import { Button, Form } from 'react-bootstrap'
+import { Button, ButtonGroup, Form } from 'react-bootstrap'
 
 import { useSignIn, useSignUp } from '../hooks/api'
+import { composeSignUpBody } from '../api/signup'
 
 type AuthFormProps = {
-    register: boolean,
     goBack: () => void,
 }
 
-function AuthForm({ goBack, register }: AuthFormProps) {
+const AuthForm = ({ goBack }: AuthFormProps) => {
     const { handleSignUp, signUpButton } = useSignUp()
 
     const { handleSignIn, signInButton } = useSignIn()
@@ -19,9 +19,11 @@ function AuthForm({ goBack, register }: AuthFormProps) {
 
         const formData = new FormData(e.currentTarget)
 
+        const register = (e.nativeEvent as SubmitEvent).submitter?.id === 'register'
+
         void (async () => {
             const accountCreated = register ? (
-                await handleSignUp(formData)
+                await handleSignUp(composeSignUpBody(formData))
             ) : true
 
             if (accountCreated) {
@@ -31,34 +33,45 @@ function AuthForm({ goBack, register }: AuthFormProps) {
             }
 
         })()
-    }, [register, goBack, handleSignUp, handleSignIn])
+    }, [goBack, handleSignUp, handleSignIn])
 
     return (
         <Form onSubmit={handleAuth}>
             <Form.Group className='mb-3' controlId='username'>
-                <Form.Label>Как вас называть?</Form.Label>
+                <Form.Label>Как меня называть</Form.Label>
-                <Form.Control name='username' type='text' required />
+                <Form.Control placeholder='Имя или псевдоним' name='username' type='text' required />
             </Form.Group>
 
             <Form.Group className='mb-3' controlId='password'>
-                <Form.Label>Пароль</Form.Label>
+                <Form.Label>И я могу доказать, что это я</Form.Label>
-                <Form.Control name='password' type='password' required />
+                <Form.Control placeholder='Пароль' name='password' type='password' required />
             </Form.Group>
 
-            {register &&
+            <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
-                <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
+                <Form.Check>
-                    <Form.Check>
+                    <Form.Check.Input type='checkbox' required />
-                        <Form.Check.Input type='checkbox' required />
+                    <Form.Check.Label>
-                        <Form.Check.Label>
+                        Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
-                            Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
+                    </Form.Check.Label>
-                        </Form.Check.Label>
+                </Form.Check>
-                    </Form.Check>
+            </Form.Group>
-                </Form.Group>
-            }
 
-            <Button variant='success' type='submit' {
+            <ButtonGroup className='d-flex'>
-                ...(register ? signUpButton : signInButton)
+                <Button
-            } />
+                    className='w-100'
+                    id='register'
+                    variant='success'
+                    type='submit'
+                    {...signUpButton}
+                />
+                <Button
+                    className='w-100'
+                    id='login'
+                    variant='success'
+                    type='submit'
+                    {...signInButton}
+                />
+            </ButtonGroup>
         </Form>
     )
 }

front/src/hooks/api/useSignIn.ts

@@ -5,7 +5,7 @@ import { setToken } from '../../utils/auth'
 
 function useSignIn() {
     const { doSend, button } = useSendWithButton(
-        'Войти',
+        'Мы уже знакомы',
         'Войдено',
         false,
         composeTokenURL(),

front/src/hooks/api/useSignUp.ts

@@ -4,7 +4,7 @@ import { isSignUpResponse } from '../../api/signup/types'
 
 function useSignUp() {
     const { doSend, button } = useSendWithButton(
-        'Зарегистрироваться',
+        'Я здесь впервые',
         'Зарегистрирован',
         false,
         composeSignUpURL(),

front/src/hooks/useSend.ts

@@ -48,7 +48,7 @@ function useSend<R, T extends NonNullable<unknown>>(
                 return undefined
             }
 
-            headers.append('Auth', `Bearer ${token}`)
+            headers.append('Authorization', `Bearer ${token}`)
         }
 
         try {

front/src/pages/LoginPage.tsx

@@ -1,42 +1,18 @@
-import { useCallback, useState } from 'react'
-import { Tabs, Tab } from 'react-bootstrap'
 import { useNavigate } from 'react-router-dom'
 
 import { AuthForm } from '../components'
-import { isLiteralUnion } from '../utils/types'
 import CardLayout from '../components/CardLayout'
 
-const tabKeys = ['register', 'login'] as const
-type TabKeys = typeof tabKeys[number]
-
-const isTabKeys = (s: string | null): s is TabKeys => (
-    isLiteralUnion(s, tabKeys)
-)
-
 function LoginPage() {
     const navigate = useNavigate()
 
-    const [tab, setTab] = useState<TabKeys>('register')
+    function goBack() {
-
-    const goBack = useCallback(() => (
         navigate(-1 - Number(import.meta.env.DEV))
-    ), [navigate])
+    }
 
     return (
         <CardLayout text='Представьтесь'>
-            <Tabs
+            <AuthForm goBack={goBack} />
-                activeKey={tab}
-                onSelect={(k) => isTabKeys(k) && setTab(k)}
-                fill justify
-                className='mb-3'
-            >
-                <Tab eventKey='register' title='Регистрация'>
-                    <AuthForm goBack={goBack} register={true} />
-                </Tab>
-                <Tab eventKey='login' title='Вход'>
-                    <AuthForm goBack={goBack} register={false} />
-                </Tab>
-            </Tabs>
         </CardLayout>
     )
 }