feat: auth page

Author: Nilumilak

frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.tsx

@@ -1,6 +1,5 @@
 import React, { ElementType } from 'react';
 import ServiceImage from 'components/common/Icons/ServiceImage';
-import { useNavigate } from 'react-router-dom';
 
 import * as S from './AuthCard.styled';
 

frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.styled.tsx

@@ -5,3 +5,21 @@ export const OAuthSignInStyled = styled.div`
   flex-direction: column;
   gap: 8px;
 `;
+
+export const ErrorMessage = styled.div`
+  display: flex;
+  column-gap: 2px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 8px;
+`;
+
+export const ErrorMessageText = styled.span`
+  ${({ theme }) => theme.auth_page.signIn.errorMessage};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+`;

frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.tsx

@@ -6,6 +6,8 @@ import OktaIcon from 'components/common/Icons/OktaIcon';
 import KeycloakIcon from 'components/common/Icons/KeycloakIcon';
 import ServiceImage from 'components/common/Icons/ServiceImage';
 import { OAuthProvider } from 'generated-sources';
+import { useLocation } from 'react-router-dom';
+import AlertIcon from 'components/common/Icons/AlertIcon';
 
 import * as S from './OAuthSignIn.styled';
 import AuthCard from './AuthCard/AuthCard';
@@ -24,8 +26,16 @@ const ServiceIconMap: Record<string, ElementType> = {
 };
 
 function OAuthSignIn({ oAuthProviders }: Props) {
+  const { search } = useLocation();
+
   return (
     <S.OAuthSignInStyled>
+      {search.includes('error') && (
+        <S.ErrorMessage>
+          <AlertIcon />
+          <S.ErrorMessageText>Invalid credentials</S.ErrorMessageText>
+        </S.ErrorMessage>
+      )}
       {oAuthProviders?.map((provider) => (
         <AuthCard
           key={provider.clientName}