From 910c0753af27fbb44557a79a1d50c031ab76e9e4 Mon Sep 17 00:00:00 2001 From: cue Date: Mon, 1 Apr 2024 11:24:03 +0300 Subject: [PATCH] [feat] fix auth, add UserProfile + CreateTeam + TeamCard --- frontend/src/components/app/APIurl.ts | 6 + .../features/SearchBar/SearchBar.module.less | 1 - .../UserProfile/UserProfile.module.less | 39 +++++ .../features/UserProfile/UserProfile.tsx | 41 +++++ .../src/components/pages/MyTeams/MyTeams.tsx | 9 +- frontend/src/components/shared/ui/sheet.tsx | 140 ++++++++++++++++++ .../widgets/CreateTeam/CreateTeam.module.less | 0 .../widgets/CreateTeam/CreateTeam.tsx | 28 ++++ .../src/components/widgets/Header/AuthAPI.ts | 57 +++++-- .../components/widgets/Header/AuthForm.tsx | 2 +- .../widgets/TeamCard/TeamCard.module.less | 39 +++++ .../components/widgets/TeamCard/TeamCard.tsx | 40 +++++ 12 files changed, 383 insertions(+), 19 deletions(-) create mode 100644 frontend/src/components/app/APIurl.ts create mode 100644 frontend/src/components/features/UserProfile/UserProfile.module.less create mode 100644 frontend/src/components/features/UserProfile/UserProfile.tsx create mode 100644 frontend/src/components/shared/ui/sheet.tsx create mode 100644 frontend/src/components/widgets/CreateTeam/CreateTeam.module.less create mode 100644 frontend/src/components/widgets/CreateTeam/CreateTeam.tsx create mode 100644 frontend/src/components/widgets/TeamCard/TeamCard.module.less create mode 100644 frontend/src/components/widgets/TeamCard/TeamCard.tsx diff --git a/frontend/src/components/app/APIurl.ts b/frontend/src/components/app/APIurl.ts new file mode 100644 index 0000000..f9dc4f1 --- /dev/null +++ b/frontend/src/components/app/APIurl.ts @@ -0,0 +1,6 @@ +// export const API_BASE = "http://158.160.56.239:8080/api/" +// export const API_BASE = "http://212.22.79.188:9090/api/" //2 сервер +export const API_BASE = "http://localhost:8080/api/" //3 сервер + +export const API_REG = "registration/" +export const API_CREATE_TOKEN = "token/" diff --git a/frontend/src/components/features/SearchBar/SearchBar.module.less b/frontend/src/components/features/SearchBar/SearchBar.module.less index 3c56a78..0fbdfa4 100644 --- a/frontend/src/components/features/SearchBar/SearchBar.module.less +++ b/frontend/src/components/features/SearchBar/SearchBar.module.less @@ -13,7 +13,6 @@ font-weight: 900; font-size: 16px; line-height: 100%; -color: #000; } .input-search{ border: 0; diff --git a/frontend/src/components/features/UserProfile/UserProfile.module.less b/frontend/src/components/features/UserProfile/UserProfile.module.less new file mode 100644 index 0000000..8e5a755 --- /dev/null +++ b/frontend/src/components/features/UserProfile/UserProfile.module.less @@ -0,0 +1,39 @@ +@icon-size: 256px; + +.user-icon{ + margin: 20px; + + width: @icon-size; + height: @icon-size; + + border-radius: 200px; + + background-color: #222222; + border: 2px #3c3c3c solid; +} +.username{ + + color: #828282; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: lighter; + font-weight: 200; + font-size: 24px; +} +.card{ + margin: 20px; + padding: 10px; + width: calc(100% - 20px); + +} +.info-line{ + display: flex; +} + +.h1{ + font-size: 36px; +} +.p{ + font-size: 16px; + color: #d3d3d3; +} + diff --git a/frontend/src/components/features/UserProfile/UserProfile.tsx b/frontend/src/components/features/UserProfile/UserProfile.tsx new file mode 100644 index 0000000..5a92879 --- /dev/null +++ b/frontend/src/components/features/UserProfile/UserProfile.tsx @@ -0,0 +1,41 @@ + +import { Separator } from "../../shared/ui/separator"; +import { Card } from "../../shared/ui/card"; +import less from "./UserProfile.module.less" +import { PanelRightDashedIcon, Pointer, PointerOff } from "lucide-react"; + +const UserProfile = () => { + return ( +
+
+
user-icon
+

username

+ +
+ + +

Город

Москва

+
+ + +

Город

Москва

+
+ + + +

telegram

@wolf

+
+ +
+
+
+ +

Имя Фамилия

+ +

+ + +
+ ) +} +export default UserProfile; \ No newline at end of file diff --git a/frontend/src/components/pages/MyTeams/MyTeams.tsx b/frontend/src/components/pages/MyTeams/MyTeams.tsx index 90e37cf..0a7e52f 100644 --- a/frontend/src/components/pages/MyTeams/MyTeams.tsx +++ b/frontend/src/components/pages/MyTeams/MyTeams.tsx @@ -1,9 +1,16 @@ +import TeamCard from "../../widgets/TeamCard/TeamCard"; +import UserProfile from "../../features/UserProfile/UserProfile"; import less from "./MyTeams.module.less" +import CreateTeam from "../../widgets/CreateTeam/CreateTeam"; const MyTeams = () => { return ( -

My teams

+ <> + + + + ) } export default MyTeams; \ No newline at end of file diff --git a/frontend/src/components/shared/ui/sheet.tsx b/frontend/src/components/shared/ui/sheet.tsx new file mode 100644 index 0000000..49e8d14 --- /dev/null +++ b/frontend/src/components/shared/ui/sheet.tsx @@ -0,0 +1,140 @@ +"use client" + +import * as React from "react" +import * as SheetPrimitive from "@radix-ui/react-dialog" +import { Cross2Icon } from "@radix-ui/react-icons" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "../../../../lib/utils" + +const Sheet = SheetPrimitive.Root + +const SheetTrigger = SheetPrimitive.Trigger + +const SheetClose = SheetPrimitive.Close + +const SheetPortal = SheetPrimitive.Portal + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName + +const sheetVariants = cva( + "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +) + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +SheetContent.displayName = SheetPrimitive.Content.displayName + +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetHeader.displayName = "SheetHeader" + +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +SheetFooter.displayName = "SheetFooter" + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetTitle.displayName = SheetPrimitive.Title.displayName + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SheetDescription.displayName = SheetPrimitive.Description.displayName + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +} diff --git a/frontend/src/components/widgets/CreateTeam/CreateTeam.module.less b/frontend/src/components/widgets/CreateTeam/CreateTeam.module.less new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/widgets/CreateTeam/CreateTeam.tsx b/frontend/src/components/widgets/CreateTeam/CreateTeam.tsx new file mode 100644 index 0000000..d5875e2 --- /dev/null +++ b/frontend/src/components/widgets/CreateTeam/CreateTeam.tsx @@ -0,0 +1,28 @@ +import { Textarea } from "../../shared/ui/textarea"; +import { Input } from "../../shared/ui/input"; +import { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, Sheet } from "../../shared/ui/sheet"; +import less from "./CreateTeam.module.less" +import { Button } from "../../shared/ui/button"; + +const CreateTeam = () =>{ + return( + + Open + + + Создание команды + + Тут вы можете создать свою команду для участия, к примеру.... в хакатонах + + + + + + + + + + + ) +} +export default CreateTeam; \ No newline at end of file diff --git a/frontend/src/components/widgets/Header/AuthAPI.ts b/frontend/src/components/widgets/Header/AuthAPI.ts index 293a30c..4752a05 100644 --- a/frontend/src/components/widgets/Header/AuthAPI.ts +++ b/frontend/src/components/widgets/Header/AuthAPI.ts @@ -1,42 +1,67 @@ import { FormEvent } from "react"; +import { API_BASE, API_CREATE_TOKEN, API_REG } from "../../app/APIurl"; - +//логин export const submitLogin = (e: FormEvent) => { 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('Возникла ошибка с логином4:', error); + }); } + +//регистрация export const submitRegister = (e: FormEvent) => { e.preventDefault(); const formData = new FormData(e.currentTarget); const formProps = Object.fromEntries(formData); - console.log(formProps) - const apiUrl = "http://localhost:8080/api/registration/"; - fetch(apiUrl, { + fetch(`${API_BASE}${API_REG}`, { method: "POST", headers: { "Content-Type": "application/json" }, - body: formData + body: JSON.stringify(formProps) }) .then(response => { - console.log(response.status) - if (response.status === 201) { - console.log('Создан:', response.headers.get('Location')); - } else if (!(response.status === 201)) { - throw new Error('Код ошибки: ' + response.status); + console.log(response.status); + if (response.ok) { + console.log('Создан:', response.headers.get('Location')); + return response.json(); + } else { + throw new Error('Код ошибки: ' + response.status); } - return response.json(); - }) - .then(data => { + }) + .then(data => { console.log('Успешно:', data); - }) - .catch(error => { + }) + .catch(error => { console.error('Возникла ошибка с регой:', error); - }); + }); } + \ No newline at end of file diff --git a/frontend/src/components/widgets/Header/AuthForm.tsx b/frontend/src/components/widgets/Header/AuthForm.tsx index 371a1b2..aa0c4e8 100644 --- a/frontend/src/components/widgets/Header/AuthForm.tsx +++ b/frontend/src/components/widgets/Header/AuthForm.tsx @@ -21,7 +21,7 @@ const AuthForm = () => {
- +
diff --git a/frontend/src/components/widgets/TeamCard/TeamCard.module.less b/frontend/src/components/widgets/TeamCard/TeamCard.module.less new file mode 100644 index 0000000..4c1f9b9 --- /dev/null +++ b/frontend/src/components/widgets/TeamCard/TeamCard.module.less @@ -0,0 +1,39 @@ +@icon-size: 256px; + +.user-icon{ + margin: 20px; + + width: @icon-size; + height: @icon-size; + + border-radius: 0px; + + background-color: #222222; + border: 2px #3c3c3c solid; +} +.username{ + + color: #828282; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: lighter; + font-weight: 200; + font-size: 24px; +} +.card{ + margin: 20px; + padding: 10px; + width: calc(100% - 20px); + +} +.info-line{ + display: flex; +} + +.h1{ + font-size: 36px; +} +.p{ + font-size: 16px; + color: #d3d3d3; +} + diff --git a/frontend/src/components/widgets/TeamCard/TeamCard.tsx b/frontend/src/components/widgets/TeamCard/TeamCard.tsx new file mode 100644 index 0000000..7efae65 --- /dev/null +++ b/frontend/src/components/widgets/TeamCard/TeamCard.tsx @@ -0,0 +1,40 @@ +import { Card } from "../../shared/ui/card"; +import less from "./TeamCard.module.less" +import { Separator } from "../../shared/ui/separator"; +import { Button } from "../../shared/ui/button"; + +const TeamCard = () => { + return( +
+
+
user-icon
+ +
+ + +

Город

Москва

+
+ + +

Город

Москва

+
+ + + + + +

18+

+
+ +
+
+
+ +

Организация

+ + + +
) +} + +export default TeamCard; \ No newline at end of file