[Fix] Login return url and minor UI problems (#7)

* feat(logout): add logout feature * chore(home-page): add test logout and organization fetch as test * fix(auth-guard): fix a breakage with empty localstorage * fix(login): fix some minor ui issues with the login * fix(login): fix return url
someengineering · Sep 21, 2023 · be1e86b · be1e86b
1 parent ce15c94
commit be1e86b
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/src/containers/auth/AuthContainer.tsx b/src/containers/auth/AuthContainer.tsx
@@ -19,7 +19,7 @@ const AuthWrapper = styled(Container)(({ theme }) => ({
   right: 0,
   top: 0,
   background: theme.palette.common.white,
-  height: '100vh',
+  height: '100%',
   width: '50%',
   opacity: 0,
   animationDelay: '1s',

diff --git a/src/pages/auth/login/LoginPage.tsx b/src/pages/auth/login/LoginPage.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
       <Grid
         component="form"
         container
-        spacing={3}
+        rowSpacing={3}
         maxWidth={350}
         m="0 auto"
         alignItems="stretch"

diff --git a/src/pages/auth/login/LoginSocialMedia.tsx b/src/pages/auth/login/LoginSocialMedia.tsx
@@ -1,10 +1,12 @@
 import { Grid } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
+import { useSearchParams } from 'react-router-dom'
 import { SocialMediaButtonFromOauthType } from 'src/shared/social-media-button'
 import { oauthProvidersQuery } from './oauthProviders.query'
 
 export const LoginSocialMedia = () => {
-  const { data } = useQuery([], oauthProvidersQuery)
+  const [search] = useSearchParams()
+  const { data } = useQuery(['LoginSocialMedia', search.get('returnUrl') ?? '/'], oauthProvidersQuery)
 
   return (
     <>

diff --git a/src/pages/auth/login/oauthProviders.query.ts b/src/pages/auth/login/oauthProviders.query.ts
@@ -3,10 +3,11 @@ import { endPoints } from 'src/shared/constants'
 import { OAuthProvidersResponse } from 'src/shared/types/server'
 import { simpleAxios } from 'src/shared/utils/axios'
 
-export const oauthProvidersQuery = async ({ signal }: QueryFunctionContext) => {
+export const oauthProvidersQuery = async ({ signal, queryKey: [_, redirect_url] }: QueryFunctionContext<['LoginSocialMedia', string]>) => {
   return await simpleAxios
     .get<OAuthProvidersResponse>(endPoints.auth.oauthProviders, {
       signal,
+      params: { redirect_url },
     })
     .then((response) => response?.data)
     .then((res) => new Promise<OAuthProvidersResponse>((resolve) => window.setTimeout(() => resolve(res), 3000)))

diff --git a/src/shared/loading/Spinner.tsx b/src/shared/loading/Spinner.tsx
@@ -89,15 +89,15 @@ interface SpinnerProps {
   isLoading?: boolean
 }
 
-const SpinnerContainer = styled(Container, { shouldForwardProp })<{ isLoading?: boolean }>(({ theme, isLoading }) =>
-  isLoading
-    ? {}
-    : {
-        [theme.breakpoints.down('md')]: {
-          display: 'none',
-        },
-      },
-)
+const SpinnerContainer = styled(Container, { shouldForwardProp })<{ isLoading?: boolean }>(({ theme, isLoading }) => ({
+  transition: theme.transitions.create(['opacity'], {
+    duration: 1000,
+    easing: theme.transitions.easing.easeInOut,
+  }),
+  [theme.breakpoints.down('md')]: {
+    opacity: isLoading ? 1 : 0,
+  },
+}))
 
 export const Spinner = ({ width = 110, isDark, isLoading }: SpinnerProps) => {
   return (