New auth form design, fixed useSend token sending

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.Control name='username' type='text' required />
+                <Form.Label>Как меня называть</Form.Label>
+                <Form.Control placeholder='Имя или псевдоним' name='username' type='text' required />
             </Form.Group>
 
             <Form.Group className='mb-3' controlId='password'>
-                <Form.Label>Пароль</Form.Label>
-                <Form.Control name='password' type='password' required />
+                <Form.Label>И я могу доказать, что это я</Form.Label>
+                <Form.Control placeholder='Пароль' name='password' type='password' required />
             </Form.Group>
 
-            {register &&
-                <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
-                    <Form.Check>
-                        <Form.Check.Input type='checkbox' required />
-                        <Form.Check.Label>
-                            Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
-                        </Form.Check.Label>
-                    </Form.Check>
-                </Form.Group>
-            }
+            <Form.Group className='mb-3' controlId='privacyPolicyConsent'>
+                <Form.Check>
+                    <Form.Check.Input type='checkbox' required />
+                    <Form.Check.Label>
+                        Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target='_blank'>условиями обработки персональных данных</a>
+                    </Form.Check.Label>
+                </Form.Check>
+            </Form.Group>
 
-            <Button variant='success' type='submit' {
-                ...(register ? signUpButton : signInButton)
-            } />
+            <ButtonGroup className='d-flex'>
+                <Button
+                    className='w-100'
+                    id='register'
+                    variant='success'
+                    type='submit'
+                    {...signUpButton}
+                />
+                <Button
+                    className='w-100'
+                    id='login'
+                    variant='success'
+                    type='submit'
+                    {...signInButton}
+                />
+            </ButtonGroup>
         </Form>
     )
 }