feat: auth page

Nilumilak · Nilumilak · commit 23cea5edb670 · 2024-12-17T12:25:57.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/common/Icons/AlertIcon.tsx b/frontend/src/components/common/Icons/AlertIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const AlertIcon: React.FC = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.09265 2.06673C8.60703 1.25046 7.39297 1.25046 6.90735 2.06673L1.17092 11.7088C0.685293 12.5251 1.29232 13.5454 2.26357 13.5454H13.7364C14.7077 13.5454 15.3147 12.5251 14.8291 11.7088L9.09265 2.06673ZM7 6C7 5.44772 7.44772 5 8 5C8.55228 5 9 5.44772 9 6V8C9 8.55228 8.55228 9 8 9C7.44772 9 7 8.55228 7 8V6ZM7 11C7 10.4477 7.44772 10 8 10C8.55228 10 9 10.4477 9 11C9 11.5523 8.55228 12 8 12C7.44772 12 7 11.5523 7 11Z"
+        fill="#E63B19"
+      />
+    </svg>
+  );
+};
+
+export default AlertIcon;
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
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
