feat: auth page

Author: Nilumilak

frontend/src/components/App.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense, useContext } from 'react';
-import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { Routes, Route, Navigate, useMatch } from 'react-router-dom';
 import {
   accessErrorPage,
   clusterPath,
@@ -50,17 +50,16 @@ const queryClient = new QueryClient({
 });
 const App: React.FC = () => {
   const { isDarkMode } = useContext(ThemeModeContext);
-  const location = useLocation();
-  const isAuthPage = location.pathname === '/auth';
+  const isAuthRoute = useMatch('/auth/*');
 
   return (
     <QueryClientProvider client={queryClient}>
-      <GlobalSettingsProvider>
-        <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
-          <Suspense fallback={<PageLoader fullSize />}>
-            {isAuthPage ? (
-              <AuthPage />
-            ) : (
+      <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
+        {isAuthRoute ? (
+          <AuthPage />
+        ) : (
+          <GlobalSettingsProvider>
+            <Suspense fallback={<PageLoader fullSize />}>
               <UserInfoRolesAccessProvider>
                 <ConfirmContextProvider>
                   <GlobalCSS />
@@ -100,10 +99,10 @@ const App: React.FC = () => {
                   <ConfirmationModal />
                 </ConfirmContextProvider>
               </UserInfoRolesAccessProvider>
-            )}
-          </Suspense>
-        </ThemeProvider>
-      </GlobalSettingsProvider>
+            </Suspense>
+          </GlobalSettingsProvider>
+        )}
+      </ThemeProvider>
       <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
     </QueryClientProvider>
   );

frontend/src/components/AuthPage/AuthPage.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
+import { useAuthSettings } from 'lib/hooks/api/appConfig';
 
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
 import SignIn from './SignIn/SignIn';
 import * as S from './AuthPage.styled';
 
 function AuthPage() {
+  const { data } = useAuthSettings();
+
   return (
     <S.AuthPageStyled>
       <Header />
-      <SignIn type="service" />
+      {data && <SignIn appAuthenticationSettings={data} />}
       <Footer />
     </S.AuthPageStyled>
   );

frontend/src/components/AuthPage/Footer/Footer.tsx

@@ -5,16 +5,16 @@ import { useLatestVersion } from 'lib/hooks/api/latestVersion';
 import * as S from './Footer.styled';
 
 function Footer() {
-  const { data: latestVersionInfo = {} } = useLatestVersion();
-  const { versionTag } = latestVersionInfo.latestRelease;
-  const { commitId } = latestVersionInfo.build;
+  // const { data: latestVersionInfo = {} } = useLatestVersion();
+  // const { versionTag } = latestVersionInfo.latestRelease;
+  // const { commitId } = latestVersionInfo.build;
 
   return (
     <S.FooterStyledWrapper>
       <S.AppVersionStyled>
         <GitHubIcon />
         <S.AppVersionTextStyled>
-          {versionTag} ({commitId})
+          {/* {versionTag} ({commitId}) */}
         </S.AppVersionTextStyled>
       </S.AppVersionStyled>
       <S.InformationTextStyled>

frontend/src/components/AuthPage/SignIn/ServiceSignIn/AuthCard/AuthCard.styled.tsx renamed to frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.styled.tsx

@@ -1,5 +1,7 @@
 import styled, { css } from 'styled-components';
 import GitHubIcon from 'components/common/Icons/GitHubIcon';
+import { Link } from 'react-router-dom';
+import { Button } from 'components/common/Button/Button';
 
 export const AuthCardStyled = styled.div(
   ({ theme }) => css`
@@ -56,3 +58,10 @@ export const ServiceTextStyled = styled.span(
     line-height: 16px;
   `
 );
+
+export const ServiceButton = styled(Button)`
+  width: 100%;
+  border-radius: 8px;
+  font-size: 14px;
+  text-decoration: none;
+`

frontend/src/components/AuthPage/SignIn/ServiceSignIn/AuthCard/AuthCard.tsx renamed to frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.tsx

@@ -1,15 +1,15 @@
 import React, { ElementType } from 'react';
-import { Button } from 'components/common/Button/Button';
 import ServiceImage from 'components/common/Icons/ServiceImage';
 
 import * as S from './AuthCard.styled';
 
 interface Props {
   serviceName: string;
+  authPath: string | undefined;
   Icon?: ElementType;
 }
 
-function AuthCard({ serviceName, Icon = ServiceImage }: Props) {
+function AuthCard({ serviceName, authPath, Icon = ServiceImage }: Props) {
   return (
     <S.AuthCardStyled>
       <S.ServiceData>
@@ -21,14 +21,13 @@ function AuthCard({ serviceName, Icon = ServiceImage }: Props) {
           </S.ServiceTextStyled>
         </S.ServiceDataTextContainer>
       </S.ServiceData>
-      <Button
+      <S.ServiceButton
         buttonSize="L"
         buttonType="primary"
-        onClick={() => console.log('click')}
-        style={{ borderRadius: '8px', fontSize: '14px' }}
+        to={`http://localhost:8080${authPath}`}
       >
         Log in with {serviceName}
-      </Button>
+      </S.ServiceButton>
     </S.AuthCardStyled>
   );
 }

frontend/src/components/AuthPage/SignIn/ServiceSignIn/ServiceSignIn.styled.tsx renamed to frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const ServiceSignInStyled = styled.div`
+export const OAuthSignInStyled = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;

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

@@ -0,0 +1,35 @@
+import React, { ElementType } from 'react';
+import GitHubIcon from 'components/common/Icons/GitHubIcon';
+import GoogleIcon from 'components/common/Icons/GoogleIcon';
+import ServiceImage from 'components/common/Icons/ServiceImage';
+import { OAuthProvider } from 'generated-sources';
+
+import * as S from './OAuthSignIn.styled';
+import AuthCard from './AuthCard/AuthCard';
+
+interface Props {
+  oAuthProviders: OAuthProvider[] | undefined;
+}
+
+const ServiceIconMap: Record<string, ElementType> = {
+  github: GitHubIcon,
+  google: GoogleIcon,
+  unknownService: ServiceImage,
+};
+
+function OAuthSignIn({ oAuthProviders }: Props) {
+  return (
+    <S.OAuthSignInStyled>
+      {oAuthProviders?.map((provider) => (
+        <AuthCard
+          key={provider.clientName}
+          authPath={provider.authorizationUri}
+          Icon={ServiceIconMap[provider.clientName?.toLowerCase() || 'unknownService']}
+          serviceName={provider.clientName || ''}
+        />
+      ))}
+    </S.OAuthSignInStyled>
+  );
+}
+
+export default OAuthSignIn;

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

@@ -1,19 +1,25 @@
 import React from 'react';
+import { AppAuthenticationSettings, AuthType } from 'generated-sources';
 
 import BasicSignIn from './BasicSignIn/BasicSignIn';
 import * as S from './SignIn.styled';
-import ServiceSignIn from './ServiceSignIn/ServiceSignIn';
+import OAuthSignIn from './OAuthSignIn/OAuthSignIn';
 
 interface Props {
-  type: 'service' | 'basic';
+  appAuthenticationSettings: AppAuthenticationSettings;
 }
 
-function SignInForm({ type }: Props) {
+function SignInForm({ appAuthenticationSettings }: Props) {
+  const { authType, oAuthProviders } = appAuthenticationSettings;
+
   return (
     <S.SignInStyled>
       <S.SignInTitle>Sign in</S.SignInTitle>
-      {type === 'basic' && <BasicSignIn />}
-      {type === 'service' && <ServiceSignIn />}
+      {(authType === AuthType.LDAP ||
+        authType === AuthType.LOGIN_FORM) && <BasicSignIn />}
+      {authType === AuthType.OAUTH2 && (
+        <OAuthSignIn oAuthProviders={oAuthProviders} />
+      )}
     </S.SignInStyled>
   );
 }

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

@@ -9,6 +9,7 @@ export interface Props
     ButtonProps {
   to?: string | object;
   inProgress?: boolean;
+  className?: string;
 }
 
 export const Button: FC<Props> = ({
@@ -20,7 +21,7 @@ export const Button: FC<Props> = ({
 }) => {
   if (to) {
     return (
-      <Link to={to}>
+      <Link to={to} className={props.className}>
         <StyledButton disabled={disabled} type="button" {...props}>
           {children}
         </StyledButton>