init frontend

2024-04-02 11:18:51 +03:00
parent de951ae100
commit 07dd23ee8e
75 changed files with 9329 additions and 3 deletions
@@ -0,0 +1,70 @@
+import { FormEvent } from "react";
+import { API_BASE, API_CREATE_TOKEN, API_REG } from "../../app/APIurl";
+import { useNavigate } from 'react-router-dom';
+  
+//логин
+export const submitLogin = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const formProps = Object.fromEntries(formData);
+    console.log(formProps)
+
+
+    fetch(`${API_BASE}${API_CREATE_TOKEN}`, {
+      method: "POST",
+      headers: {
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify(formProps) 
+  })
+  .then(response => {
+    
+      console.log(response.status);
+
+      if (response.ok) { 
+          console.log('Создан:', response.headers.get('Location'));
+          return response.json(); 
+      } else {
+
+          throw new Error('Код ошибки: ' + response.status);
+      }
+  })
+  .then(data => {
+      console.log('Успешно:', data);
+  })
+  .catch(error => {
+      console.error('Возникла ошибка с логином:', error);
+  });
+}
+
+//регистрация
+export const submitRegister = (e: FormEvent<HTMLFormElement>, navigate: Function) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const formProps = Object.fromEntries(formData);
+
+    fetch(`${API_BASE}${API_REG}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(formProps) 
+    })
+    .then(response => {
+        console.log(response.status);
+        if (response.ok) { 
+            console.log('Создан:', response.headers.get('Location'));
+            navigate('../successful');
+            return response.json(); 
+        } else {
+
+            throw new Error('Код ошибки: ' + response.status);
+        }
+    })
+    .then(data => {
+        console.log('Успешно:', data);
+    })
+    .catch(error => {
+        console.error('Возникла ошибка с регой:', error);
+    });
+}
@@ -0,0 +1,25 @@
+.header{
+    height: 60px;
+    border-bottom-width: 1px;
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    padding: 0px 32px;
+    width: 100%;
+
+}
+
+@logo-size: 80px;
+.logo{
+    width: @logo-size;
+    height: @logo-size;
+}
+@icon-size: 20px;
+.icon{
+    width: @icon-size;
+    height: @icon-size;
+}
+.line-block{
+    display: flex;
+    gap: 5px;
+}
@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface HeaderProps {
+    children: ReactNode;
+}
@@ -0,0 +1,62 @@
+import { useTranslation } from "react-i18next";
+import {
+    Menubar,
+    MenubarContent,
+    MenubarItem,
+    MenubarMenu,
+    MenubarSeparator,
+    MenubarShortcut,
+
+    MenubarTrigger,
+} from "../../shared/ui/menubar"
+import {
+    Dialog,
+    DialogTrigger,
+} from "../../shared/ui/dialog"
+
+import less from "./Header.module.less"
+import { ResetIcon } from "@radix-ui/react-icons";
+
+import { Separator } from "../../shared/ui/separator";
+import { ModeToggle } from "../../mode-toggle";
+import { Link } from "react-router-dom";
+
+
+const Header = () => {
+    const { t, i18n } = useTranslation();
+    const handleTrans = (code: string) => {
+        i18n.changeLanguage(code);
+    };
+
+    
+    return (
+        <header className={less.header}>
+            <Link to={"/"}><img className={less.logo} src='/logo.svg'></img></Link>
+            <div className={less["line-block"]}>
+                <Menubar>
+                    <MenubarMenu>
+                        <MenubarTrigger >{t("flag")} {t("langCode").toUpperCase()}</MenubarTrigger>
+                        <MenubarContent>
+                            <MenubarItem onClick={() => handleTrans("ru")}>
+                                🇷🇺 RU<MenubarShortcut>⌘R</MenubarShortcut>
+                            </MenubarItem>
+                            <MenubarItem onClick={() => handleTrans("en")}>
+                                🇬🇧 EN <MenubarShortcut>⌘E</MenubarShortcut>
+                            </MenubarItem>
+                            <MenubarItem onClick={() => handleTrans("zh")}>
+                                🇨🇳 ZH <MenubarShortcut>⌘Z</MenubarShortcut>
+                            </MenubarItem>
+                            <MenubarSeparator />
+                            <MenubarItem onClick={() => handleTrans(navigator.language)}>System language<MenubarShortcut><ResetIcon /></MenubarShortcut></MenubarItem>
+                        </MenubarContent>
+                    </MenubarMenu>
+                    <ModeToggle />
+
+                </Menubar>
+            </div>
+
+
+        </header>
+    )
+}
+export default Header;