Carousel!

frontend/app/src/components/AuthModal.tsx

@@ -1,10 +1,10 @@
-import { Form, Input, Menu, MenuProps, Modal, Spin } from "antd";
+import { Carousel, Form, Input, Menu, MenuProps, Modal, Spin } from "antd";
 import {
   KeyOutlined,
   LoadingOutlined,
   UserAddOutlined,
 } from "@ant-design/icons";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import {
   TokenResponse,
   useGetUserQuery,
@@ -21,6 +21,8 @@ const AuthModal = (props: {
   setOpen: (arg0: boolean) => void;
 }) => {
   const navigate = useNavigate();
+  const messageApi = useContext(MessageContext);
+  const carousel = useRef();
 
   const [loginForm] = Form.useForm();
   const [registerForm] = Form.useForm();
@@ -33,7 +35,11 @@ const AuthModal = (props: {
   }, [data, isFetching, useGetUserQuery]);
 
   const [current, setCurrent] = useState("login");
-  const messageApi = useContext(MessageContext);
+  useEffect(() => {
+    if (carousel?.current !== undefined) {
+      carousel.current.goTo(["login", "register"].indexOf(current));
+    }
+  }, [current]);
 
   const [loginUser, { isLoading: isLoggingIn }] = useLoginMutation();
   const [registerUser, { isLoading: isRegistering }] = useRegisterMutation();
@@ -48,11 +54,11 @@ const AuthModal = (props: {
       .then((data: TokenResponse) => {
         store.dispatch(updateToken(data.access_token));
       })
+      .then(() => loginForm.resetFields())
       .then(() => refetch())
       .then(() => props.setOpen(false))
       .then(() => navigate("/dashboard"))
       .catch(() => messageApi.error(tr("Login failed!")));
-    loginForm.resetFields();
   };
 
   const submitRegisterForm = (formData: {
@@ -63,6 +69,7 @@ const AuthModal = (props: {
   }) => {
     registerUser(formData)
       .unwrap()
+      .then(() => submitLoginForm(formData))
       .then(() => props.setOpen(false))
       .catch(() => messageApi.error(tr("Registration failed!")));
   };
@@ -108,7 +115,44 @@ const AuthModal = (props: {
           />
         </div>
         <br />
-        {current === "register" ? (
+        <Carousel
+          ref={carousel}
+          dots={false}
+          speed={200}
+          onSwipe={(dir) => setCurrent(dir === "left" ? "register" : "login")}
+          infinite={false}
+        >
+          <Form
+            form={loginForm}
+            onFinish={submitLoginForm}
+            layout="vertical"
+            requiredMark={false}
+          >
+            <Form.Item
+              name="username"
+              label={tr("Username")}
+              rules={[
+                {
+                  required: true,
+                  message: tr("Please input your Username!"),
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="password"
+              label={tr("Password")}
+              rules={[
+                {
+                  required: true,
+                  message: tr("Please input your Password!"),
+                },
+              ]}
+            >
+              <Input type="password" />
+            </Form.Item>
+          </Form>
           <Form
             form={registerForm}
             onFinish={submitRegisterForm}
@@ -167,39 +211,7 @@ const AuthModal = (props: {
               <Input type="password" />
             </Form.Item>
           </Form>
-        ) : (
+        </Carousel>
-          <Form
-            form={loginForm}
-            onFinish={submitLoginForm}
-            layout="vertical"
-            requiredMark={false}
-          >
-            <Form.Item
-              name="username"
-              label={tr("Username")}
-              rules={[
-                {
-                  required: true,
-                  message: tr("Please input your Username!"),
-                },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-              name="password"
-              label={tr("Password")}
-              rules={[
-                {
-                  required: true,
-                  message: tr("Please input your Password!"),
-                },
-              ]}
-            >
-              <Input type="password" />
-            </Form.Item>
-          </Form>
-        )}
       </Spin>
     </Modal>
   );

frontend/app/src/components/HeaderComponent.tsx

@@ -5,7 +5,7 @@ import {
   SettingOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import { Layout, Menu, MenuProps, Popover, Select } from "antd";
+import { Layout, Menu, MenuProps, Popover } from "antd";
 import React, { useState } from "react";
 import AuthModal from "./AuthModal";
 import "./styles.css";

frontend/app/src/components/queue/QueuesList.tsx

@@ -17,7 +17,6 @@ type Queue = {
 
 const QueuesList = (): JSX.Element => {
   const { data, isLoading } = useGetQueuesQuery({});
-  console.log(isLoading);
   return (
     <div className="card">
       <Button

frontend/app/src/config/translationMap.json

@@ -3,13 +3,13 @@
         "ru": "Организация очередей еще никогда не была настолько простой"
     },
     "Log in": {
-        "ru": "Войти"
+        "ru": "Вход"
     },
     "Log out": {
         "ru": "Выйти"
     },
     "Register": {
-        "ru": "Зарегистрироваться"
+        "ru": "Регистрация"
     },
     "Username": {
         "ru": "Логин"
@@ -67,5 +67,8 @@
     },
     "Page not found": {
         "ru": "Страница не найдена"
+    },
+    "You have no queues! Create one here": {
+        "ru": "У вас нет очередей! Создайте новую"
     }
 }