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

Separated auth form component

Browse Source 
Added auth networking status
fixes #9
This commit is contained in:
Dmitriy Shishkov 2023-07-13 17:41:56 +03:00
parent 395b6c2d89
commit 619fd952a5
Signed by: dm1sh
GPG Key ID: 027994B0AA357688
3 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
front/src/components/AuthForm.tsx Normal file
View File

@ -0,0 +1,55 @@
import { FormEventHandler } from "react"
import { Button, Form } from "react-bootstrap"
type AuthFormProps = {
register: boolean
handleAuth: FormEventHandler<HTMLFormElement>,
loading: boolean,
error: string
}
const AuthForm = ({ handleAuth, register, loading, error }: AuthFormProps) => {
const buttonText = loading ? "Загрузка..." : (error || (register ? "Зарегистрироваться" : "Войти"))
return (
<Form onSubmit={handleAuth}>
<Form.Group className="mb-3" controlId="email">
<Form.Label>Почта</Form.Label>
<Form.Control type="email" required />
</Form.Group>
{register && <>
<Form.Group className="mb-3" controlId="name">
<Form.Label>Имя</Form.Label>
<Form.Control type="text" required />
</Form.Group>
<Form.Group className="mb-3" controlId="surname">
<Form.Label>Фамилия</Form.Label>
<Form.Control type="text" required />
</Form.Group>
</>}
<Form.Group className="mb-3" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" required />
</Form.Group>
{register &&
<Form.Group className="mb-3" controlId="privacyPolicyConsent">
<Form.Check label="<a>условиями обработки персональных данных</a>">
<Form.Check.Input type="checkbox" required />
<Form.Check.Label>
Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target="_blank" rel="noopener noreferrer">условиями обработки персональных данных</a>
</Form.Check.Label>
</Form.Check>
</Form.Group>
}
<Button variant="success" type="submit">
{buttonText}
</Button>
</Form>
)
}
export default AuthForm

2
front/src/components/index.ts
View File

@ -6,6 +6,7 @@ import LocationMarker from './LocationMarker'
import TrashboxMarkers from './TrashboxMarkers' import TrashboxMarkers from './TrashboxMarkers'
import WithToken from './WithToken' import WithToken from './WithToken'
import ClickHandler from './ClickHandler' import ClickHandler from './ClickHandler'
import AuthForm from "./AuthForm"
export { export {
AnnouncementDetails, AnnouncementDetails,
@ -16,4 +17,5 @@ export {
TrashboxMarkers, TrashboxMarkers,
WithToken, WithToken,
ClickHandler, ClickHandler,
AuthForm,
} }

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

@ -1,14 +1,15 @@
import { FormEventHandler } from 'react' import { FormEventHandler } from 'react'
import { Form, Button, Card, Tabs, Tab } from "react-bootstrap" import { Card, Tabs, Tab } from "react-bootstrap"
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useAuth } from "../hooks/api"; import { useAuth } from "../hooks/api";
import { setToken } from "../utils/auth"; import { setToken } from "../utils/auth";
import { AuthForm } from '../components';
function LoginPage() { function LoginPage() {
const navigate = useNavigate() const navigate = useNavigate()
const { doAuth } = useAuth() // TODO: Add loading and error handling const { doAuth, loading, error } = useAuth()
const handleAuth = (newAccount: boolean): FormEventHandler<HTMLFormElement> => async (event) => { const handleAuth = (newAccount: boolean): FormEventHandler<HTMLFormElement> => async (event) => {
event.preventDefault(); event.preventDefault();
@ -36,57 +37,10 @@ function LoginPage() {
<Card.Body> <Card.Body>
<Tabs defaultActiveKey="register" fill justify className="mb-3"> <Tabs defaultActiveKey="register" fill justify className="mb-3">
<Tab eventKey="register" title="Регистрация"> <Tab eventKey="register" title="Регистрация">
<Form onSubmit={handleAuth(true)}> <AuthForm handleAuth={handleAuth(true)} register={true} loading={loading} error={error} />
<Form.Group className="mb-3" controlId="email">
<Form.Label>Почта</Form.Label>
<Form.Control type="email" required />
</Form.Group>
<Form.Group className="mb-3" controlId="name">
<Form.Label>Имя</Form.Label>
<Form.Control type="text" required />
</Form.Group>
<Form.Group className="mb-3" controlId="surname">
<Form.Label>Фамилия</Form.Label>
<Form.Control type="text" required />
</Form.Group>
<Form.Group className="mb-3" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" required />
</Form.Group>
<Form.Group className="mb-3" controlId="privacyPolicyConsent">
<Form.Check label="<a>условиями обработки персональных данных</a>">
<Form.Check.Input type="checkbox" required />
<Form.Check.Label>
Я согласен с <a href={`${document.location.origin}/privacy_policy.pdf`} target="_blank" rel="noopener noreferrer">условиями обработки персональных данных</a>
</Form.Check.Label>
</Form.Check>
</Form.Group>
<Button variant="success" type="submit">
Зарегистрироваться
</Button>
</Form>
</Tab> </Tab>
<Tab eventKey="login" title="Вход"> <Tab eventKey="login" title="Вход">
<Form onSubmit={handleAuth(false)}> <AuthForm handleAuth={handleAuth(false)} register={false} loading={loading} error={error} />
<Form.Group className="mb-3" controlId="email">
<Form.Label>Почта</Form.Label>
<Form.Control type="email" required />
</Form.Group>
<Form.Group className="mb-3" controlId="password">
<Form.Label>Пароль</Form.Label>
<Form.Control type="password" required />
</Form.Group>
<Button variant="success" type="submit">
Войти
</Button>
</Form>
</Tab> </Tab>
</Tabs> </Tabs>
</Card.Body> </Card.Body>