refactor: toast position

xgeekshq · Jan 5, 2023 · 8713801 · 8713801
1 parent 844147e
commit 8713801
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 29 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -36,4 +36,7 @@ AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 
 # azure tenant ID
-AZURE_TENANT_ID=
+AZURE_TENANT_ID=
+
+#enable only login via sso
+NEXT_PUBLIC_LOGIN_SSO_ONLY=false
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -13,7 +13,7 @@ module.exports = {
 		NEXT_PUBLIC_ENABLE_AZURE: process.env.NEXT_PUBLIC_ENABLE_AZURE,
 		NEXT_PUBLIC_ENABLE_GIT: process.env.NEXT_PUBLIC_ENABLE_GIT,
 		NEXT_PUBLIC_ENABLE_GOOGLE: process.env.NEXT_PUBLIC_ENABLE_GOOGLE,
-		NEXT_PUBLIC_MANUAL_LOGIN: process.env.NEXT_PUBLIC_MANUAL_LOGIN,
+		NEXT_PUBLIC_LOGIN_SSO_ONLY: process.env.NEXT_PUBLIC_LOGIN_SSO_ONLY,
 	},
 	serverRuntimeConfig: {
 		AZURE_CLIENT_ID: process.env.AZURE_CLIENT_ID,

diff --git a/frontend/public/xgeeks_logo.png b/frontend/public/xgeeks_logo.png
diff --git a/frontend/src/components/Primitives/Toast.tsx b/frontend/src/components/Primitives/Toast.tsx
@@ -37,7 +37,7 @@ const StyledToast = styled(ToastPrimitive.Root, {
   boxShadow: '0px 4px 16px -4px rgba(18, 25, 34, 0.2)',
   display: 'flex',
   height: '$56',
-  width: '$455',
+  width: '$362',
   justifyContent: 'space-between',
   alignItems: 'center',
   direction: 'raw',

diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import router from 'next/router';
 import { RedirectableProviderType } from 'next-auth/providers';
@@ -21,7 +21,7 @@ import {
   NEXT_PUBLIC_ENABLE_AZURE,
   NEXT_PUBLIC_ENABLE_GIT,
   NEXT_PUBLIC_ENABLE_GOOGLE,
-  NEXT_PUBLIC_MANUAL_LOGIN,
+  NEXT_PUBLIC_LOGIN_SSO_ONLY,
 } from '@/utils/constants';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
@@ -59,21 +59,6 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
     loginAzure();
   };
 
-  /**
-   * Show error toast when change loginErrorCode
-   * If this error is different of -1
-   */
-  useEffect(() => {
-    if (loginErrorCode !== -1) {
-      setToastState({
-        open: true,
-        type: ToastStateEnum.ERROR,
-        content: getAuthError(loginErrorCode),
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loginErrorCode]);
-
   const handleLogin = async (credentials: LoginUser) => {
     setLoading((prevState) => ({ ...prevState, credentials: true }));
     const result = await signIn<RedirectableProviderType>('credentials', {
@@ -88,6 +73,13 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
     }
 
     setLoginErrorCode(result.status);
+    if (result.error) {
+      setToastState({
+        open: true,
+        type: ToastStateEnum.ERROR,
+        content: getAuthError(result.status),
+      });
+    }
 
     setLoading((prevState) => ({ ...prevState, credentials: false }));
   };
@@ -96,7 +88,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
     setShowTroubleLogin(true);
   };
 
-  return !NEXT_PUBLIC_MANUAL_LOGIN ? (
+  return NEXT_PUBLIC_LOGIN_SSO_ONLY ? (
     <LoginSSO handleLoginAzure={handleLoginAzure} />
   ) : (
     <FormProvider {...methods}>

diff --git a/frontend/src/components/icons/SecondaryBanner.tsx b/frontend/src/components/icons/SecondaryBanner.tsx
diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
@@ -7,15 +7,15 @@ import {
   ImageBackground,
 } from '@/styles/pages/error.styles';
 
-import Banner from '@/components/icons/Banner';
 import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text';
+import SecondaryBanner from '@/components/icons/SecondaryBanner';
 
 export default function Custom404() {
   return (
     <ImageBackground>
       <BannerContainer>
-        <Banner />
+        <SecondaryBanner />
       </BannerContainer>
 
       <ContainerSection>

diff --git a/frontend/src/pages/500.tsx b/frontend/src/pages/500.tsx
@@ -7,14 +7,14 @@ import {
   ImageBackground,
 } from '@/styles/pages/error.styles';
 
-import Banner from '@/components/icons/Banner';
 import LogoIcon from '@/components/icons/Logo';
 import Text from '@/components/Primitives/Text';
+import SecondaryBanner from '@/components/icons/SecondaryBanner';
 
 const Custom500 = () => (
   <ImageBackground>
     <BannerContainer>
-      <Banner />
+      <SecondaryBanner />
     </BannerContainer>
 
     <ContainerSection>

diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
@@ -58,7 +58,11 @@ function Root({
               </RecoilRoot>
               <ToastViewport
                 css={{
-                  paddingRight: router.asPath === ROUTES.START_PAGE_ROUTE ? 162 : 56,
+                  left: router.asPath === ROUTES.START_PAGE_ROUTE ? '0' : 'none',
+                  right: router.asPath === ROUTES.START_PAGE_ROUTE ? 'none' : 0,
+                  top: router.asPath === ROUTES.START_PAGE_ROUTE ? 'calc(10% + 60px)' : '$106',
+                  paddingRight: router.asPath === ROUTES.START_PAGE_ROUTE ? 0 : 56,
+                  paddingLeft: router.asPath === ROUTES.START_PAGE_ROUTE ? '$72' : 0,
                 }}
               />
             </ToastProvider>

diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
@@ -11,7 +11,7 @@ import Banner from '@/components/icons/Banner';
 import Text from '@/components/Primitives/Text';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
 import Flex from '@/components/Primitives/Flex';
-import { NEXT_PUBLIC_MANUAL_LOGIN } from '@/utils/constants';
+import { NEXT_PUBLIC_LOGIN_SSO_ONLY } from '@/utils/constants';
 import StyledImage from '@/components/Primitives/Image';
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
   const [showTroubleLogin, setShowTroubleLogin] = useState(false);
 
   const renderFooter = () => {
-    if (NEXT_PUBLIC_MANUAL_LOGIN) {
+    if (!NEXT_PUBLIC_LOGIN_SSO_ONLY) {
       return currentTab === 'login' ? (
         <Text css={{ mb: '15%', textAlign: 'center', mt: '$10' }}>
           No account yet?{' '}

diff --git a/frontend/src/styles/stitches/partials/sizes.ts b/frontend/src/styles/stitches/partials/sizes.ts
@@ -50,6 +50,7 @@ const sizes = {
   347: '21.688rem',
   353: '22.063rem',
   360: '22.5rem',
+  362: '22.625rem',
   384: '24rem',
   400: '25rem',
   455: '28.4375rem',

diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -16,7 +16,7 @@ export const TENANT_ID = serverRuntimeConfig.AZURE_TENANT_ID;
 export const NEXT_PUBLIC_ENABLE_AZURE = publicRuntimeConfig.NEXT_PUBLIC_ENABLE_AZURE === 'true';
 export const NEXT_PUBLIC_ENABLE_GIT = publicRuntimeConfig.NEXT_PUBLIC_ENABLE_GIT === 'true';
 export const NEXT_PUBLIC_ENABLE_GOOGLE = publicRuntimeConfig.NEXT_PUBLIC_ENABLE_GOOGLE === 'true';
-export const NEXT_PUBLIC_MANUAL_LOGIN = publicRuntimeConfig.NEXT_PUBLIC_MANUAL_LOGIN === 'true';
+export const NEXT_PUBLIC_LOGIN_SSO_ONLY = publicRuntimeConfig.NEXT_PUBLIC_LOGIN_SSO_ONLY === 'true';
 
 export const AUTH_SSO =
   NEXT_PUBLIC_ENABLE_AZURE || NEXT_PUBLIC_ENABLE_GIT || NEXT_PUBLIC_ENABLE_GOOGLE;