polka_billy/porridger
1
0
Fork 1
Code Issues 20 Pull Requests Packages Releases Activity

New auth form design, fixed useSend token sending

Browse Source
This commit is contained in:
Dmitriy Shishkov 2023-08-08 12:20:47 +03:00
parent c52a623907
commit 9a4226dc30
Signed by: dm1sh
GPG Key ID: 027994B0AA357688
6 changed files with 48 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/api/signup/index.ts
View File

@ -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 }

57
front/src/components/AuthForm.tsx
View File

@ -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>
)
}

2
front/src/hooks/api/useSignIn.ts
View File

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

2
front/src/hooks/api/useSignUp.ts
View File

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

2
front/src/hooks/useSend.ts
View File

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

30
front/src/pages/LoginPage.tsx
View File

@ -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')
const goBack = useCallback(() => (
function goBack() {
navigate(-1 - Number(import.meta.env.DEV))
), [navigate])
}
return (
<CardLayout text='Представьтесь'>
<Tabs
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>
<AuthForm goBack={goBack} />
</CardLayout>
)
}