From 619fd952a5b42ce1dc96de85548a222a3b1ec5e0 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Thu, 13 Jul 2023 17:41:56 +0300
Subject: [PATCH] Separated auth form component Added auth networking status
 fixes #9

---
 front/src/components/AuthForm.tsx | 55 ++++++++++++++++++++++++++++++
 front/src/components/index.ts     |  2 ++
 front/src/pages/LoginPage.tsx     | 56 +++----------------------------
 3 files changed, 62 insertions(+), 51 deletions(-)
 create mode 100644 front/src/components/AuthForm.tsx

diff --git a/front/src/components/AuthForm.tsx b/front/src/components/AuthForm.tsx
new file mode 100644
index 0000000..0c0f1cf
--- /dev/null
+++ b/front/src/components/AuthForm.tsx
@@ -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
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
index eeffa7d..8dec666 100644
--- a/front/src/components/index.ts
+++ b/front/src/components/index.ts
@@ -6,6 +6,7 @@ import LocationMarker from './LocationMarker'
 import TrashboxMarkers from './TrashboxMarkers'
 import WithToken from './WithToken'
 import ClickHandler from './ClickHandler'
+import AuthForm from "./AuthForm"
 
 export {
     AnnouncementDetails,
@@ -16,4 +17,5 @@ export {
     TrashboxMarkers,
     WithToken,
     ClickHandler,
+    AuthForm,
 }
diff --git a/front/src/pages/LoginPage.tsx b/front/src/pages/LoginPage.tsx
index f1e5ae4..2e65982 100644
--- a/front/src/pages/LoginPage.tsx
+++ b/front/src/pages/LoginPage.tsx
@@ -1,14 +1,15 @@
 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 { useAuth } from "../hooks/api";
 import { setToken } from "../utils/auth";
+import { AuthForm } from '../components';
 
 function LoginPage() {
     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) => {
         event.preventDefault();
@@ -36,57 +37,10 @@ function LoginPage() {
             <Card.Body>
                 <Tabs defaultActiveKey="register" fill justify className="mb-3">
                     <Tab eventKey="register" title="Регистрация">
-                        <Form onSubmit={handleAuth(true)}>
-                            <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>
+                        <AuthForm handleAuth={handleAuth(true)} register={true} loading={loading} error={error} />
                     </Tab>
                     <Tab eventKey="login" title="Вход">
-                        <Form onSubmit={handleAuth(false)}>
-                            <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>
+                        <AuthForm handleAuth={handleAuth(false)} register={false} loading={loading} error={error} />
                     </Tab>
                 </Tabs>
             </Card.Body>