Skip to content

Commit 21edbf7

Browse files
NilumilakHaarolean
Nilumilak
and
Haarolean
committed
FE: Impl custom auth page (#402)
Co-authored-by: Roman Zabaluev <[email protected]>
1 parent 85330e8 commit 21edbf7

File tree

29 files changed

+929
-61
lines changed

29 files changed

+929
-61
lines changed

‎contract/src/main/resources/swagger/kafbat-ui-api.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2256,7 +2256,10 @@ paths:
22562256

22572257
/login:
22582258
post:
2259+
tags:
2260+
- Unmapped
22592261
summary: Authenticate
2262+
operationId: authenticate
22602263
requestBody:
22612264
required: true
22622265
content:

‎frontend/public/serviceImage.png‎

7.19 KB
Loading

‎frontend/src/components/App.tsx‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Suspense, useContext } from 'react';
2-
import { Routes, Route, Navigate } from 'react-router-dom';
2+
import { Routes, Route, Navigate, useMatch } from 'react-router-dom';
33
import {
44
accessErrorPage,
55
clusterPath,
@@ -24,6 +24,7 @@ import { GlobalSettingsProvider } from './contexts/GlobalSettingsContext';
2424
import { UserInfoRolesAccessProvider } from './contexts/UserInfoRolesAccessContext';
2525
import PageContainer from './PageContainer/PageContainer';
2626

27+
const AuthPage = React.lazy(() => import('components/AuthPage/AuthPage'));
2728
const Dashboard = React.lazy(() => import('components/Dashboard/Dashboard'));
2829
const ClusterPage = React.lazy(
2930
() => import('components/ClusterPage/ClusterPage')
@@ -49,54 +50,59 @@ const queryClient = new QueryClient({
4950
});
5051
const App: React.FC = () => {
5152
const { isDarkMode } = useContext(ThemeModeContext);
53+
const isAuthRoute = useMatch('/login');
5254

5355
return (
5456
<QueryClientProvider client={queryClient}>
55-
<GlobalSettingsProvider>
56-
<ThemeProvider theme={isDarkMode ? darkTheme : theme}>
57-
<Suspense fallback={<PageLoader fullSize />}>
58-
<UserInfoRolesAccessProvider>
59-
<ConfirmContextProvider>
60-
<GlobalCSS />
61-
<S.Layout>
62-
<PageContainer>
63-
<Routes>
64-
{['/', '/ui', '/ui/clusters'].map((path) => (
57+
<ThemeProvider theme={isDarkMode ? darkTheme : theme}>
58+
{isAuthRoute ? (
59+
<AuthPage />
60+
) : (
61+
<GlobalSettingsProvider>
62+
<Suspense fallback={<PageLoader fullSize />}>
63+
<UserInfoRolesAccessProvider>
64+
<ConfirmContextProvider>
65+
<GlobalCSS />
66+
<S.Layout>
67+
<PageContainer>
68+
<Routes>
69+
{['/', '/ui', '/ui/clusters'].map((path) => (
70+
<Route
71+
key="Home" // optional: avoid full re-renders on route changes
72+
path={path}
73+
element={<Dashboard />}
74+
/>
75+
))}
6576
<Route
66-
key="Home" // optional: avoid full re-renders on route changes
67-
path={path}
68-
element={<Dashboard />}
77+
path={getNonExactPath(clusterNewConfigPath)}
78+
element={<ClusterConfigForm />}
6979
/>
70-
))}
71-
<Route
72-
path={getNonExactPath(clusterNewConfigPath)}
73-
element={<ClusterConfigForm />}
74-
/>
75-
<Route
76-
path={getNonExactPath(clusterPath())}
77-
element={<ClusterPage />}
78-
/>
79-
<Route
80-
path={accessErrorPage}
81-
element={
82-
<ErrorPage status={403} text="Access is Denied" />
83-
}
84-
/>
85-
<Route path={errorPage} element={<ErrorPage />} />
86-
<Route
87-
path="*"
88-
element={<Navigate to={errorPage} replace />}
89-
/>
90-
</Routes>
91-
</PageContainer>
92-
<Toaster position="bottom-right" />
93-
</S.Layout>
94-
<ConfirmationModal />
95-
</ConfirmContextProvider>
96-
</UserInfoRolesAccessProvider>
97-
</Suspense>
98-
</ThemeProvider>
99-
</GlobalSettingsProvider>
80+
<Route
81+
path={getNonExactPath(clusterPath())}
82+
element={<ClusterPage />}
83+
/>
84+
<Route
85+
path={accessErrorPage}
86+
element={
87+
<ErrorPage status={403} text="Access is Denied" />
88+
}
89+
/>
90+
<Route path={errorPage} element={<ErrorPage />} />
91+
<Route
92+
path="*"
93+
element={<Navigate to={errorPage} replace />}
94+
/>
95+
</Routes>
96+
</PageContainer>
97+
<Toaster position="bottom-right" />
98+
</S.Layout>
99+
<ConfirmationModal />
100+
</ConfirmContextProvider>
101+
</UserInfoRolesAccessProvider>
102+
</Suspense>
103+
</GlobalSettingsProvider>
104+
)}
105+
</ThemeProvider>
100106
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
101107
</QueryClientProvider>
102108
);

‎frontend/src/components/AuthPage/AuthPage.styled.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const AuthPageStyled = styled.div(
4+
({ theme }) => css`
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: space-between;
9+
min-height: 100vh;
10+
background-color: ${theme.auth_page.backgroundColor};
11+
font-family: ${theme.auth_page.fontFamily};
12+
overflow-x: hidden;
13+
`
14+
);

‎frontend/src/components/AuthPage/AuthPage.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { useAuthSettings } from 'lib/hooks/api/appConfig';
3+
4+
import Header from './Header/Header';
5+
import SignIn from './SignIn/SignIn';
6+
import * as S from './AuthPage.styled';
7+
8+
function AuthPage() {
9+
const { data } = useAuthSettings();
10+
11+
return (
12+
<S.AuthPageStyled>
13+
<Header />
14+
{data && (
15+
<SignIn authType={data.authType} oAuthProviders={data.oAuthProviders} />
16+
)}
17+
</S.AuthPageStyled>
18+
);
19+
}
20+
21+
export default AuthPage;

‎frontend/src/components/AuthPage/Header/Header.styled.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const HeaderStyled = styled.div`
4+
display: grid;
5+
grid-template-columns: repeat(47, 41.11px);
6+
grid-template-rows: repeat(4, 41.11px);
7+
justify-content: center;
8+
margin-bottom: 13.5px;
9+
`;
10+
11+
export const HeaderCell = styled.div<{ $sections?: number }>(
12+
({ theme, $sections }) => css`
13+
border: 1.23px solid ${theme.auth_page.header.cellBorderColor};
14+
border-radius: 75.98px;
15+
${$sections && `grid-column: span ${$sections};`}
16+
`
17+
);
18+
19+
export const StyledSVG = styled.svg`
20+
grid-column: span 3;
21+
`;
22+
23+
export const StyledRect = styled.rect(
24+
({ theme }) => css`
25+
fill: ${theme.auth_page.header.LogoBgColor};
26+
`
27+
);
28+
29+
export const StyledPath = styled.path(
30+
({ theme }) => css`
31+
fill: ${theme.auth_page.header.LogoTextColor};
32+
`
33+
);

‎frontend/src/components/AuthPage/Header/Header.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
3+
import * as S from './Header.styled';
4+
import HeaderLogo from './HeaderLogo';
5+
6+
function Header() {
7+
return (
8+
<S.HeaderStyled>
9+
<S.HeaderCell $sections={2} />
10+
{Array(2).fill(<S.HeaderCell />)}
11+
<S.HeaderCell $sections={2} />
12+
{Array(2).fill(<S.HeaderCell />)}
13+
<S.HeaderCell $sections={3} />
14+
{Array(2).fill(<S.HeaderCell />)}
15+
{Array(4).fill(<S.HeaderCell $sections={2} />)}
16+
{Array(2).fill(<S.HeaderCell />)}
17+
<S.HeaderCell $sections={2} />
18+
{Array(2).fill(<S.HeaderCell />)}
19+
<S.HeaderCell $sections={2} />
20+
{Array(3).fill(<S.HeaderCell />)}
21+
<S.HeaderCell $sections={2} />
22+
{Array(2).fill(<S.HeaderCell />)}
23+
{Array(2).fill(<S.HeaderCell $sections={3} />)}
24+
{Array(2).fill(<S.HeaderCell />)}
25+
<S.HeaderCell $sections={3} />
26+
27+
{Array(3).fill(<S.HeaderCell $sections={2} />)}
28+
{Array(8).fill(<S.HeaderCell />)}
29+
<S.HeaderCell $sections={2} />
30+
{Array(2).fill(<S.HeaderCell />)}
31+
<S.HeaderCell $sections={2} />
32+
{Array(3).fill(<S.HeaderCell />)}
33+
<S.HeaderCell $sections={2} />
34+
{Array(6).fill(<S.HeaderCell />)}
35+
{Array(3).fill(<S.HeaderCell $sections={3} />)}
36+
<S.HeaderCell />
37+
<S.HeaderCell $sections={2} />
38+
{Array(2).fill(<S.HeaderCell />)}
39+
<S.HeaderCell $sections={2} />
40+
41+
<S.HeaderCell $sections={2} />
42+
<S.HeaderCell />
43+
<S.HeaderCell $sections={2} />
44+
<S.HeaderCell />
45+
<S.HeaderCell $sections={3} />
46+
{Array(2).fill(<S.HeaderCell />)}
47+
<S.HeaderCell $sections={2} />
48+
<S.HeaderCell />
49+
<S.HeaderCell $sections={2} />
50+
{Array(3).fill(<S.HeaderCell />)}
51+
<S.HeaderCell $sections={3} />
52+
<S.HeaderCell />
53+
{Array(3).fill(<S.HeaderCell $sections={2} />)}
54+
<S.HeaderCell />
55+
{Array(3).fill(<S.HeaderCell $sections={3} />)}
56+
{Array(3).fill(<S.HeaderCell />)}
57+
<S.HeaderCell $sections={3} />
58+
<S.HeaderCell $sections={2} />
59+
60+
<S.HeaderCell />
61+
<S.HeaderCell $sections={2} />
62+
{Array(2).fill(<S.HeaderCell />)}
63+
<S.HeaderCell $sections={3} />
64+
{Array(2).fill(<S.HeaderCell />)}
65+
{Array(5).fill(<S.HeaderCell $sections={2} />)}
66+
{Array(2).fill(<S.HeaderCell />)}
67+
68+
<HeaderLogo />
69+
70+
{Array(5).fill(<S.HeaderCell $sections={2} />)}
71+
{Array(2).fill(<S.HeaderCell />)}
72+
<S.HeaderCell $sections={2} />
73+
{Array(2).fill(<S.HeaderCell />)}
74+
<S.HeaderCell $sections={3} />
75+
<S.HeaderCell />
76+
<S.HeaderCell $sections={2} />
77+
</S.HeaderStyled>
78+
);
79+
}
80+
81+
export default Header;

‎frontend/src/components/AuthPage/Header/HeaderLogo.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
3+
import * as S from './Header.styled';
4+
5+
const HeaderLogo = () => (
6+
<S.StyledSVG
7+
width="125"
8+
height="41"
9+
viewBox="0 0 125 41"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<S.StyledRect
13+
x="0.33313"
14+
y="0.333313"
15+
width="123.74"
16+
height="39.8993"
17+
rx="19.9496"
18+
/>
19+
<S.StyledPath d="M22.5302 7.67111C22.5302 7.67111 27.7857 15.256 37.1346 18.8977C37.1346 18.8977 43.3721 13.6116 37.341 21.2112C31.31 28.8109 22.1277 33.4135 22.5302 32.848C23.727 31.1663 27.6746 27.9528 25.6569 25.9708C29.6175 22.0802 20.7073 19.5151 20.7073 19.5151C23.0162 14.4527 22.5302 7.67111 22.5302 7.67111Z" />
20+
<S.StyledPath d="M103.507 16.2373V18.1592H97.4464V16.2373H103.507ZM98.9427 14.4659H101.427V23.609C101.427 23.9431 101.478 24.1993 101.578 24.3778C101.684 24.5517 101.821 24.6706 101.99 24.7347C102.16 24.7987 102.347 24.8308 102.553 24.8308C102.709 24.8308 102.85 24.8193 102.979 24.7965C103.111 24.7736 103.212 24.753 103.281 24.7347L103.699 26.6771C103.567 26.7229 103.377 26.7732 103.13 26.8281C102.887 26.883 102.59 26.9151 102.237 26.9242C101.615 26.9425 101.054 26.8487 100.556 26.6428C100.057 26.4323 99.6611 26.1074 99.3683 25.6682C99.08 25.2289 98.9381 24.6798 98.9427 24.0209V14.4659Z" />
21+
<S.StyledPath d="M90.5643 26.9929C89.8962 26.9929 89.2945 26.8739 88.7591 26.6359C88.2283 26.3934 87.8073 26.0365 87.4962 25.5652C87.1896 25.0939 87.0363 24.5128 87.0363 23.8218C87.0363 23.2269 87.1461 22.735 87.3658 22.3461C87.5854 21.9571 87.8851 21.646 88.2649 21.4126C88.6447 21.1793 89.0725 21.0031 89.5484 20.8841C90.0289 20.7606 90.5254 20.6713 91.0379 20.6164C91.6556 20.5524 92.1567 20.4952 92.541 20.4448C92.9254 20.3899 93.2045 20.3076 93.3784 20.1977C93.5569 20.0833 93.6461 19.9072 93.6461 19.6692V19.628C93.6461 19.111 93.4928 18.7106 93.1862 18.4269C92.8796 18.1432 92.4381 18.0013 91.8615 18.0013C91.2529 18.0013 90.7702 18.134 90.4133 18.3994C90.0609 18.6648 89.823 18.9783 89.6994 19.3398L87.3795 19.0103C87.5625 18.3697 87.8645 17.8343 88.2855 17.4042C88.7065 16.9695 89.2213 16.6446 89.8298 16.4295C90.4384 16.2099 91.1111 16.1001 91.8478 16.1001C92.3557 16.1001 92.8613 16.1596 93.3647 16.2785C93.868 16.3975 94.3279 16.5943 94.7443 16.8688C95.1607 17.1388 95.4947 17.5071 95.7464 17.9739C96.0027 18.4406 96.1308 19.024 96.1308 19.7241V26.7801H93.7422V25.3318H93.6598C93.5088 25.6247 93.296 25.8992 93.0215 26.1555C92.7515 26.4072 92.4106 26.6108 91.9988 26.7664C91.5915 26.9174 91.1134 26.9929 90.5643 26.9929ZM91.2095 25.1671C91.7082 25.1671 92.1406 25.0687 92.5067 24.872C92.8728 24.6706 93.1542 24.4052 93.351 24.0758C93.5523 23.7463 93.653 23.3871 93.653 22.9982V21.7558C93.5752 21.8199 93.4425 21.8794 93.2549 21.9343C93.0718 21.9892 92.8659 22.0372 92.6371 22.0784C92.4083 22.1196 92.1818 22.1562 91.9576 22.1882C91.7334 22.2203 91.5389 22.2477 91.3742 22.2706C91.0036 22.3209 90.6718 22.4033 90.3789 22.5177C90.0861 22.6321 89.855 22.7922 89.6857 22.9982C89.5164 23.1995 89.4318 23.4603 89.4318 23.7806C89.4318 24.2382 89.5988 24.5837 89.9328 24.817C90.2668 25.0504 90.6924 25.1671 91.2095 25.1671Z" />
22+
<S.StyledPath d="M75.8523 26.7801V13.6661H78.337V17.9807H78.4399C78.568 17.7245 78.7488 17.4522 78.9822 17.164C79.2155 16.8711 79.5313 16.6217 79.9294 16.4158C80.3274 16.2053 80.8354 16.1001 81.4531 16.1001C82.2676 16.1001 83.002 16.3083 83.6564 16.7247C84.3153 17.1365 84.8369 17.7474 85.2213 18.5573C85.6103 19.3626 85.8047 20.351 85.8047 21.5224C85.8047 22.6801 85.6148 23.6639 85.235 24.4739C84.8552 25.2838 84.3382 25.9015 83.6838 26.3271C83.0295 26.7526 82.2882 26.9654 81.46 26.9654C80.856 26.9654 80.3549 26.8647 79.9568 26.6634C79.5587 26.4621 79.2384 26.2195 78.9959 25.9358C78.7579 25.6476 78.5726 25.3753 78.4399 25.1191H78.2958V26.7801H75.8523ZM78.2889 21.5087C78.2889 22.1905 78.385 22.7877 78.5772 23.3002C78.7739 23.8127 79.0554 24.213 79.4214 24.5013C79.7921 24.785 80.2405 24.9269 80.7667 24.9269C81.3158 24.9269 81.7757 24.7804 82.1463 24.4876C82.517 24.1902 82.7961 23.7852 82.9837 23.2727C83.1759 22.7556 83.272 22.1676 83.272 21.5087C83.272 20.8544 83.1782 20.2732 82.9906 19.7653C82.803 19.2574 82.5239 18.8593 82.1532 18.571C81.7826 18.2827 81.3204 18.1386 80.7667 18.1386C80.2359 18.1386 79.7852 18.2782 79.4146 18.5573C79.0439 18.8364 78.7625 19.2277 78.5703 19.731C78.3827 20.2343 78.2889 20.8269 78.2889 21.5087Z" />
23+
<S.StyledPath d="M74.1831 17.7462V19.668H67.9508V17.7462H74.1831ZM69.5089 26.7801V16.751C69.5089 16.0417 69.6553 15.4514 69.9482 14.9801C70.2456 14.5088 70.6437 14.1564 71.1425 13.9231C71.6413 13.6897 72.1949 13.573 72.8035 13.573C73.2337 13.573 73.6157 13.6073 73.9498 13.676C74.2838 13.7446 74.5309 13.8064 74.6911 13.8613L74.1969 15.7832C74.0916 15.7511 73.9589 15.7191 73.7988 15.6871C73.6386 15.6505 73.4602 15.6322 73.2634 15.6322C72.8012 15.6322 72.4741 15.7443 72.2819 15.9685C72.0943 16.1881 72.0005 16.5039 72.0005 16.9157V26.7801H69.5089Z" />
24+
<S.StyledPath d="M61.1648 26.9929C60.4967 26.9929 59.895 26.8739 59.3596 26.6359C58.8288 26.3934 58.4078 26.0365 58.0967 25.5652C57.7901 25.0939 57.6368 24.5128 57.6368 23.8218C57.6368 23.2269 57.7466 22.735 57.9663 22.3461C58.1859 21.9571 58.4856 21.646 58.8654 21.4126C59.2452 21.1793 59.6731 21.0031 60.149 20.8841C60.6294 20.7606 61.1259 20.6713 61.6384 20.6164C62.2561 20.5524 62.7572 20.4952 63.1416 20.4448C63.5259 20.3899 63.805 20.3076 63.9789 20.1977C64.1574 20.0833 64.2466 19.9072 64.2466 19.6692V19.628C64.2466 19.111 64.0933 18.7106 63.7867 18.4269C63.4802 18.1432 63.0386 18.0013 62.462 18.0013C61.8535 18.0013 61.3707 18.134 61.0138 18.3994C60.6614 18.6648 60.4235 18.9783 60.3 19.3398L57.98 19.0103C58.163 18.3697 58.465 17.8343 58.886 17.4042C59.307 16.9695 59.8218 16.6446 60.4304 16.4295C61.0389 16.2099 61.7116 16.1001 62.4483 16.1001C62.9562 16.1001 63.4619 16.1596 63.9652 16.2785C64.4685 16.3975 64.9284 16.5943 65.3448 16.8688C65.7612 17.1388 66.0953 17.5071 66.3469 17.9739C66.6032 18.4406 66.7313 19.024 66.7313 19.7241V26.7801H64.3427V25.3318H64.2603C64.1093 25.6247 63.8966 25.8992 63.622 26.1555C63.352 26.4072 63.0111 26.6108 62.5993 26.7664C62.1921 26.9174 61.7139 26.9929 61.1648 26.9929ZM61.81 25.1671C62.3087 25.1671 62.7412 25.0687 63.1072 24.872C63.4733 24.6706 63.7547 24.4052 63.9515 24.0758C64.1528 23.7463 64.2535 23.3871 64.2535 22.9982V21.7558C64.1757 21.8199 64.043 21.8794 63.8554 21.9343C63.6723 21.9892 63.4664 22.0372 63.2376 22.0784C63.0089 22.1196 62.7823 22.1562 62.5581 22.1882C62.3339 22.2203 62.1394 22.2477 61.9747 22.2706C61.6041 22.3209 61.2723 22.4033 60.9795 22.5177C60.6866 22.6321 60.4555 22.7922 60.2862 22.9982C60.1169 23.1995 60.0323 23.4603 60.0323 23.7806C60.0323 24.2382 60.1993 24.5837 60.5333 24.817C60.8674 25.0504 61.2929 25.1671 61.81 25.1671Z" />
25+
<S.StyledPath d="M49.7783 23.4718L49.7714 20.4723H50.1695L53.9583 16.2373H56.8617L52.2012 21.4264H51.6864L49.7783 23.4718ZM47.5132 26.7801V13.6661H49.9979V26.7801H47.5132ZM54.1299 26.7801L50.698 21.9823L52.3728 20.2321L57.1019 26.7801H54.1299Z" />
26+
</S.StyledSVG>
27+
);
28+
29+
export default HeaderLogo;

‎frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.styled.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import styled from 'styled-components';
2+
3+
export const Fieldset = styled.fieldset`
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
justify-content: center;
8+
gap: 16px;
9+
border: none;
10+
width: 100%;
11+
`;
12+
13+
export const Form = styled.form`
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
gap: 40px;
19+
width: 100%;
20+
21+
${Fieldset} div {
22+
width: 100%;
23+
}
24+
`;
25+
26+
export const Field = styled.div`
27+
${({ theme }) => theme.auth_page.signIn.label};
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: flex-start;
31+
align-items: flex-start;
32+
gap: 4px;
33+
`;
34+
35+
export const Label = styled.label`
36+
font-size: 12px;
37+
font-weight: 500;
38+
line-height: 16px;
39+
`;
40+
41+
export const ErrorMessage = styled.div`
42+
display: flex;
43+
column-gap: 2px;
44+
align-items: center;
45+
justify-content: center;
46+
font-weight: 400;
47+
font-size: 14px;
48+
line-height: 20px;
49+
`;
50+
51+
export const ErrorMessageText = styled.span`
52+
${({ theme }) => theme.auth_page.signIn.errorMessage};
53+
font-weight: 400;
54+
font-size: 14px;
55+
line-height: 20px;
56+
`;

0 commit comments

Comments
 (0)