From e75f3c576902e5eb4877aa5a25a302c0cbcde417 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 1 Feb 2025 09:57:59 +0300 Subject: [PATCH] Updated login and logout buttons in top right menu --- .../UserButton/LoginButton/LoginButton.tsx | 20 ++++++++ .../UserButton/LogoutButton/LogoutButton.tsx | 48 +++++++++++++++++++ .../RightButtonBar/UserButton/UserButton.tsx | 24 +++------- enshi/src/utils/logout.ts | 13 +++++ enshi_back/REST_API_stuff/setCookie.go | 12 +++++ enshi_back/middleware/corsMiddleware.go | 2 +- enshi_back/routes/authRoutes/logout.go | 13 +++++ enshi_back/routes/routesSetup.go | 5 ++ 8 files changed, 118 insertions(+), 19 deletions(-) create mode 100644 enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx create mode 100644 enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx create mode 100644 enshi/src/utils/logout.ts create mode 100644 enshi_back/routes/authRoutes/logout.go diff --git a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx new file mode 100644 index 0000000..711c541 --- /dev/null +++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx @@ -0,0 +1,20 @@ +import { EnterIcon } from "@radix-ui/react-icons"; +import { Flex, Text } from "@radix-ui/themes"; +import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js"; +import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; + +export default function LoginButton() { + const { t } = useTranslation(); + + return ( + + + + + + {t("signIn")} + + + ); +} diff --git a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx new file mode 100644 index 0000000..cb820ac --- /dev/null +++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx @@ -0,0 +1,48 @@ +import { ExitIcon } from "@radix-ui/react-icons"; +import { Flex, Text } from "@radix-ui/themes"; +import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js"; +import { useMutation } from "@tanstack/react-query"; +import { useSetAtom } from "jotai"; +import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; +import queryClient from "../../../../../api/QueryClient/QueryClient"; +import { userAtom } from "../../../../../AtomStore/AtomStore"; +import useToast from "../../../../../hooks/useToast"; +import { logout } from "../../../../../utils/logout"; + +export default function LogoutButton() { + const { t } = useTranslation(); + const navigate = useNavigate(); + const setUserData = useSetAtom(userAtom) + + const createToast = useToast() + + const logoutMutation = useMutation({ + onMutate: () => { + queryClient.cancelQueries({ + queryKey: ["authKey"], + }); + }, + mutationFn: async () => { + await logout(); + }, + onError: () => {}, + onSuccess: () => { + setUserData(undefined) + createToast({ title: "Success!", description: "Logged out successfully"}) + navigate("/"); + }, + }); + + return ( + logoutMutation.mutate()} + > + + + + {t("signOut")} + + ); +} diff --git a/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx index ce9ca61..cd34fde 100644 --- a/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx +++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx @@ -1,8 +1,6 @@ import { - EnterIcon, - ExitIcon, LaptopIcon, - PersonIcon, + PersonIcon } from "@radix-ui/react-icons"; import { DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes"; import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js"; @@ -10,6 +8,8 @@ import { useAtomValue } from "jotai"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { userAtom } from "../../../../AtomStore/AtomStore"; +import LoginButton from "./LoginButton/LoginButton"; +import LogoutButton from "./LogoutButton/LogoutButton"; export default function UserButton() { const user = useAtomValue(userAtom); @@ -19,7 +19,7 @@ export default function UserButton() {
- + @@ -52,21 +52,9 @@ export default function UserButton() { {user ? ( - - - - - {t("signOut")} - + ) : ( - - - - - - {t("signIn")} - - + )} diff --git a/enshi/src/utils/logout.ts b/enshi/src/utils/logout.ts new file mode 100644 index 0000000..55c2594 --- /dev/null +++ b/enshi/src/utils/logout.ts @@ -0,0 +1,13 @@ +import { axiosLocalhost } from "../api/axios/axios"; + +export async function logout() { + try { + let response = await axiosLocalhost.delete('/auth/logout') + console.log(`Logout successful`) + return true; + } + catch (error) { + console.error(error) + return false; + } +} diff --git a/enshi_back/REST_API_stuff/setCookie.go b/enshi_back/REST_API_stuff/setCookie.go index 2d928a1..4756ce5 100644 --- a/enshi_back/REST_API_stuff/setCookie.go +++ b/enshi_back/REST_API_stuff/setCookie.go @@ -25,3 +25,15 @@ func SetCookie(c *gin.Context, params *CookieParams) { params.HttpOnly, ) } + +func RemoveCookie(c *gin.Context, params *CookieParams) { + c.SetCookie( + params.Name, + params.Value, + -1, + params.Path, + params.Domain, + params.Secure, + params.HttpOnly, + ) +} diff --git a/enshi_back/middleware/corsMiddleware.go b/enshi_back/middleware/corsMiddleware.go index d0b2b8a..8b74d08 100644 --- a/enshi_back/middleware/corsMiddleware.go +++ b/enshi_back/middleware/corsMiddleware.go @@ -12,7 +12,7 @@ func CORSMiddleware() gin.HandlerFunc { "authorization, Authorization, accept, origin, Cache-Control, "+ "X-Requested-With, Cookie", ) - c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT") + c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT, DELETE, PATCH") c.Writer.Header().Set("Access-Control-Expose-Headers", "Access-Token, Uid, Authorization") if c.Request.Method == "OPTIONS" { diff --git a/enshi_back/routes/authRoutes/logout.go b/enshi_back/routes/authRoutes/logout.go new file mode 100644 index 0000000..f09ffd1 --- /dev/null +++ b/enshi_back/routes/authRoutes/logout.go @@ -0,0 +1,13 @@ +package authRoutes + +import ( + "enshi/global" + "net/http" + + "github.com/gin-gonic/gin" +) + +func Logout(c *gin.Context) { + c.SetCookie("auth_cookie", "", -1, "/", global.DomainForCookies, false, true) + c.IndentedJSON(http.StatusOK, gin.H{"message": "you have been logged out"}) +} diff --git a/enshi_back/routes/routesSetup.go b/enshi_back/routes/routesSetup.go index 6efacf1..152b676 100644 --- a/enshi_back/routes/routesSetup.go +++ b/enshi_back/routes/routesSetup.go @@ -204,6 +204,11 @@ func SetupRotes(g *gin.Engine) error { authGroup.Use(middleware.AuthMiddleware()) authGroup.GET("check", testAuth) + authGroup.DELETE( + "logout", + authRoutes.Logout, + ) + temporal := g.Group("/") temporal.Use(middleware.AuthMiddleware())