feat: auth page

Nilumilak · Nilumilak · commit aa6667d67262 · 2024-12-17T12:15:44.000+03:00
diff --git a/contract/src/main/resources/swagger/kafbat-ui-api.yaml b/contract/src/main/resources/swagger/kafbat-ui-api.yaml
@@ -2256,7 +2256,10 @@ paths:
 
   /auth:
     post:
+      tags:
+        - ApplicationConfig
       summary: Authenticate
+      operationId: authenticate
       requestBody:
         required: true
         content:
diff --git a/frontend/src/components/AuthPage/AuthPage.tsx b/frontend/src/components/AuthPage/AuthPage.tsx
@@ -1,7 +1,6 @@
 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';
@@ -13,7 +12,6 @@ function AuthPage() {
     <S.AuthPageStyled>
       <Header />
       {data && <SignIn appAuthenticationSettings={data} />}
-      <Footer />
     </S.AuthPageStyled>
   );
 }
diff --git a/frontend/src/components/AuthPage/Footer/Footer.styled.tsx b/frontend/src/components/AuthPage/Footer/Footer.styled.tsx
diff --git a/frontend/src/components/AuthPage/Footer/Footer.tsx b/frontend/src/components/AuthPage/Footer/Footer.tsx
diff --git a/frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.styled.tsx b/frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.styled.tsx
@@ -6,6 +6,7 @@ export const Form = styled.form`
   align-items: center;
   justify-content: center;
   gap: 40px;
+  width: 100%;
 
   div {
     width: 100%;
@@ -19,6 +20,7 @@ export const Fieldset = styled.fieldset`
   justify-content: center;
   gap: 16px;
   border: none;
+  width: 100%;
 `;
 
 export const Field = styled.div`
@@ -35,3 +37,20 @@ export const Label = styled.label`
   font-weight: 500;
   line-height: 16px;
 `;
+
+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;
+`;
+
+export const ErrorMessageText = styled.span`
+  ${({ theme }) => theme.auth_page.signIn.errorMessage};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+`;
diff --git a/frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.tsx b/frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { Button } from 'components/common/Button/Button';
 import Input from 'components/common/Input/Input';
-import { FormProvider, useForm } from 'react-hook-form';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { useAuthenticate } from 'lib/hooks/api/appConfig';
+import AlertIcon from 'components/common/Icons/AlertIcon';
+import { useNavigate } from 'react-router-dom';
 
 import * as S from './BasicSignIn.styled';
 
@@ -11,36 +14,78 @@ interface FormValues {
 }
 
 function BasicSignIn() {
-  const methods = useForm<FormValues>();
+  const methods = useForm<FormValues>({
+    defaultValues: { username: '', password: '' },
+  });
+  const navigate = useNavigate();
+  const { mutateAsync } = useAuthenticate();
+
+  const onSubmit = async (data: FormValues) => {
+    await mutateAsync(data, {
+      onSuccess(response) {
+        if (response.raw.url.includes('error')) {
+          methods.setError('root', { message: 'error' });
+        } else {
+          navigate('/');
+        }
+      },
+    });
+  };
 
   return (
     <FormProvider {...methods}>
-      <S.Form style={{ width: '100%' }}>
-        <S.Fieldset style={{ width: '100%' }}>
-          <S.Field>
-            <S.Label htmlFor="username">Username</S.Label>
-            <Input
-              name="username"
-              id="username"
-              placeholder="Enter your username"
-              style={{ borderRadius: '8px' }}
-            />
-          </S.Field>
-          <S.Field>
-            <S.Label htmlFor="password">Password</S.Label>
-            <Input
-              name="password"
-              id="password"
-              placeholder="Enter your password"
-              style={{ borderRadius: '8px' }}
-            />
-          </S.Field>
+      <S.Form onSubmit={methods.handleSubmit(onSubmit)}>
+        <S.Fieldset>
+          {methods.formState.errors.root && (
+            <S.ErrorMessage>
+              <AlertIcon />
+              <S.ErrorMessageText>
+                Username or password entered incorrectly
+              </S.ErrorMessageText>
+            </S.ErrorMessage>
+          )}
+          <Controller
+            name="username"
+            control={methods.control}
+            render={({ field }) => (
+              <S.Field>
+                <S.Label htmlFor={field.name}>Username</S.Label>
+                <Input
+                  onChange={field.onChange}
+                  value={field.value}
+                  name={field.name}
+                  id={field.name}
+                  placeholder="Enter your username"
+                  style={{ borderRadius: '8px' }}
+                />
+              </S.Field>
+            )}
+          />
+          <Controller
+            name="password"
+            control={methods.control}
+            render={({ field }) => (
+              <S.Field>
+                <S.Label htmlFor={field.name}>Password</S.Label>
+                <Input
+                  onChange={field.onChange}
+                  value={field.value}
+                  name={field.name}
+                  type="password"
+                  id={field.name}
+                  placeholder="Enter your password"
+                  style={{ borderRadius: '8px' }}
+                />
+              </S.Field>
+            )}
+          />
         </S.Fieldset>
         <Button
           buttonSize="L"
           buttonType="primary"
-          onClick={() => console.log('click')}
+          type="submit"
           style={{ width: '100%', borderRadius: '8px' }}
+          disabled={!methods.formState.isValid}
         >
           Log in
         </Button>
diff --git a/frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.styled.tsx b/frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.styled.tsx
@@ -1,6 +1,5 @@
 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(
@@ -64,4 +63,4 @@ export const ServiceButton = styled(Button)`
   border-radius: 8px;
   font-size: 14px;
   text-decoration: none;
-`
+`;
diff --git a/frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.tsx b/frontend/src/components/AuthPage/SignIn/OAuthSignIn/OAuthSignIn.tsx
@@ -24,7 +24,11 @@ function OAuthSignIn({ oAuthProviders }: Props) {
         <AuthCard
           key={provider.clientName}
           authPath={provider.authorizationUri}
-          Icon={ServiceIconMap[provider.clientName?.toLowerCase() || 'unknownService']}
+          Icon={
+            ServiceIconMap[
+              provider.clientName?.toLowerCase() || 'unknownService'
+            ]
+          }
           serviceName={provider.clientName || ''}
         />
       ))}
diff --git a/frontend/src/components/AuthPage/SignIn/SignIn.styled.tsx b/frontend/src/components/AuthPage/SignIn/SignIn.styled.tsx
@@ -7,6 +7,7 @@ export const SignInStyled = styled.div`
   justify-content: center;
   width: 320px;
   gap: 56px;
+  flex-grow: 1;
 `;
 
 export const SignInTitle = styled.span(
diff --git a/frontend/src/components/AuthPage/SignIn/SignIn.tsx b/frontend/src/components/AuthPage/SignIn/SignIn.tsx
@@ -15,8 +15,9 @@ function SignInForm({ appAuthenticationSettings }: Props) {
   return (
     <S.SignInStyled>
       <S.SignInTitle>Sign in</S.SignInTitle>
-      {(authType === AuthType.LDAP ||
-        authType === AuthType.LOGIN_FORM) && <BasicSignIn />}
+      {(authType === AuthType.LDAP || authType === AuthType.LOGIN_FORM) && (
+        <BasicSignIn />
+      )}
       {authType === AuthType.OAUTH2 && (
         <OAuthSignIn oAuthProviders={oAuthProviders} />
       )}
diff --git a/frontend/src/components/NavBar/UserInfo/UserInfo.tsx b/frontend/src/components/NavBar/UserInfo/UserInfo.tsx
@@ -19,7 +19,7 @@ const UserInfo = () => {
         </S.Wrapper>
       }
     >
-      <DropdownItem href={`${window.basePath}/logout`}>
+      <DropdownItem href="logout">
         <S.LogoutLink>Log out</S.LogoutLink>
       </DropdownItem>
     </Dropdown>
diff --git a/frontend/src/components/contexts/GlobalSettingsContext.tsx b/frontend/src/components/contexts/GlobalSettingsContext.tsx
@@ -1,6 +1,7 @@
 import { useAppInfo } from 'lib/hooks/api/appConfig';
 import React from 'react';
 import { ApplicationInfoEnabledFeaturesEnum } from 'generated-sources';
+import { useNavigate } from 'react-router-dom';
 
 interface GlobalSettingsContextProps {
   hasDynamicConfig: boolean;
@@ -15,6 +16,14 @@ export const GlobalSettingsProvider: React.FC<
   React.PropsWithChildren<unknown>
 > = ({ children }) => {
   const info = useAppInfo();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (info.data?.raw.url.includes('auth')) {
+      navigate('auth');
+    }
+  }, []);
+
   const value = React.useMemo(() => {
     const features = info.data?.enabledFeatures || [];
     return {
diff --git a/frontend/src/lib/hooks/api/appConfig.ts b/frontend/src/lib/hooks/api/appConfig.ts
@@ -14,10 +14,19 @@ export function useAuthSettings() {
   );
 }
 
+export function useAuthenticate() {
+  return useMutation({
+    mutationFn: (params: { username: string; password: string }) =>
+      api.authenticateRaw(params, {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      }),
+  });
+}
+
 export function useAppInfo() {
   return useQuery(
     ['app', 'info'],
-    () => api.getApplicationInfo(),
+    () => api.getApplicationInfoRaw(),
     QUERY_REFETCH_OFF_OPTIONS
   );
 }
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
@@ -57,6 +57,7 @@ const Colors = {
     '10': '#FAD1D1',
     '20': '#F5A3A3',
     '50': '#E51A1A',
+    '52': '#E63B19',
     '55': '#CF1717',
     '60': '#B81414',
   },
@@ -89,6 +90,9 @@ const baseTheme = {
     },
     signIn: {
       titleColor: Colors.brand[90],
+      errorMessage: {
+        color: Colors.red[52],
+      },
       label: {
         color: Colors.brand[70],
       },
@@ -866,12 +870,14 @@ export const darkTheme: ThemeType = {
       LogoTextColor: Colors.brand[90],
     },
     signIn: {
+      ...baseTheme.auth_page.signIn,
       titleColor: Colors.brand[0],
       label: {
         color: Colors.brand[30],
       },
       authCard: {
         ...baseTheme.auth_page.signIn.authCard,
+        borderColor: Colors.brand[80],
         backgroundColor: Colors.brand[85],
         serviceNamecolor: Colors.brand[0],
       },
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
