olly/queueful
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

eto pizdec tovarishi

Browse Source
This commit is contained in:
Olly Hearn
2024-04-09 20:01:47 +03:00
parent 162f8b50df
commit 33ecc88796
4 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/src/components/AuthModal.tsx
View File

@ -3,6 +3,7 @@ import "./styles.css";
import { KeyOutlined, UserAddOutlined } from "@ant-design/icons"; import { KeyOutlined, UserAddOutlined } from "@ant-design/icons";
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { import {
TokenResponse,
useGetUserQuery, useGetUserQuery,
useLoginMutation, useLoginMutation,
useRegisterMutation, useRegisterMutation,
@ -37,7 +38,7 @@ const AuthModal = (props: {
loginUser(formData) loginUser(formData)
.unwrap() .unwrap()
.then((data) => { .then((data: TokenResponse) => {
store.dispatch(updateToken(data.access_token)); store.dispatch(updateToken(data.access_token));
}) })
.then(() => refetch()) .then(() => refetch())

30
frontend/app/src/components/HeaderComponent.tsx
View File

@ -1,5 +1,5 @@
import { LogoutOutlined, UserOutlined } from "@ant-design/icons"; import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Layout, Menu, MenuProps, Tooltip } from "antd"; import { Button, Layout, Menu, MenuProps, Popover, Tooltip } from "antd";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import AuthModal from "./AuthModal"; import AuthModal from "./AuthModal";
import "./styles.css"; import "./styles.css";
@ -12,30 +12,32 @@ type NullableUser = { name: string | null; username: string } | null;
const HeaderComponent = () => { const HeaderComponent = () => {
const [authModalOpen, setAuthModalOpen] = useState(false); const [authModalOpen, setAuthModalOpen] = useState(false);
const [userMenuOpen, setUserMenuOpen] = useState(false);
const user: NullableUser = useSelector( const user: NullableUser = useSelector(
(state: StorePrototype) => state.auth.user (state: StorePrototype) => state.auth.user
); );
// const userMenuItems: MenuProps["userMenuItems"] = [ const userMenuItems: MenuProps["userMenuItems"] = [
// { {
// label: <Button>Log out</Button>, label: "Log out",
// key: "logout", key: "logout",
// icon: <LogoutOutlined />, icon: <LogoutOutlined />,
// onClick: () => store.dispatch(logOut()), onClick: () => store.dispatch(logOut()),
// }, },
// ] ];
const items: MenuProps["items"] = [ const items: MenuProps["items"] = [
{ {
label: user ? ( label: user ? (
<Tooltip <Popover
title={ trigger="click"
<Button onClick={() => store.dispatch(logOut())}>Log out</Button> open={userMenuOpen}
} onOpenChange={(isOpen) => setUserMenuOpen(isOpen)}
content={<Menu theme="dark" mode="vertical" items={userMenuItems} />}
> >
{user.username} {user.username}
</Tooltip> </Popover>
) : ( ) : (
"Log In" "Log In"
), ),

3
frontend/app/src/config/style.ts
View File

@ -21,6 +21,9 @@ export const theme: ThemeConfig = {
Message: { Message: {
contentBg: "#001c36", contentBg: "#001c36",
}, },
Popover: {
colorBgElevated: "#001c36",
},
}, },
token: { token: {
colorText: "#ffffff", colorText: "#ffffff",

2
frontend/app/src/slice/AuthApi.ts
View File

@ -19,7 +19,7 @@ export interface RegisterRequest {
password2: string; password2: string;
} }
type TokenResponse = { export type TokenResponse = {
access_token: string; access_token: string;
token_type: string; token_type: string;
}; };