feat: 🔥 auth page

auth page

apps/frontend/package.json

@@ -19,7 +19,6 @@
 	},
 	"dependencies": {
 		"@reduxjs/toolkit": "1.8.3",
-		"@uiw/react-textarea-code-editor": "2.0.2",
 		"axios": "0.27.2",
 		"i18next": "21.8.13",
 		"react": "18.2.0",
@@ -28,8 +27,7 @@
 		"react-redux": "8.0.2",
 		"react-router-dom": "6.3.0",
 		"react-scripts": "5.0.1",
-		"typescript": "4.7.4",
-		"uniqid": "5.4.0"
+		"typescript": "4.7.4"
 	},
 	"devDependencies": {
 		"@babel/core": "7.18.6",
@@ -40,7 +38,6 @@
 		"@types/react": "18.0.15",
 		"@types/react-dom": "18.0.6",
 		"@types/react-router-dom": "5.3.3",
-		"@types/uniqid": "5.3.2",
 		"@typescript-eslint/eslint-plugin": "5.30.5",
 		"@typescript-eslint/parser": "5.30.5",
 		"depcheck": "1.4.3",

apps/frontend/src/App.tsx

@@ -6,7 +6,7 @@ import { type PayloadAction } from '@reduxjs/toolkit';
 import { backendApiAxios } from './utils/http';
 import type { IAutoLoginResponseData } from './interfaces/responses';
 import type { ILoginPayload } from './store/interfaces/auth';
-import type { AppDispatch, AppState } from './store/app';
+import type { AppState } from './store/app';
 import { authActions } from './store/reducers/auth';
 
 import AppView from './App.view';
@@ -26,7 +26,7 @@ const App: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
 		const authorizationInterceptor = backendApiAxios.interceptors.request.use((request) => {
 			let token: string | null;
 
-			if (request.url === '/user/auth/auto-login') {
+			if (request.url === '/user/auth/auto-login' || request.url === '/user/auth/refresh-token') {
 				token = localStorage.getItem('token');
 			} else {
 				token = sessionStorage.getItem('token');
@@ -74,11 +74,4 @@ const mapStateToProps = (state: AppState) => {
 	};
 };
 
-const mapDispatchToProps = (dispatch: AppDispatch): PropsFromDispatch => {
-	return {
-		login: (loginPayload: ILoginPayload): PayloadAction<ILoginPayload> =>
-			dispatch(authActions.login(loginPayload)),
-	};
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(React.memo(App));
+export default connect(mapStateToProps, { login: authActions.login })(React.memo(App));

apps/frontend/src/App.view.tsx

@@ -8,31 +8,19 @@ interface Props {
 }
 
 const Auth = React.lazy(() => import('./pages/Auth'));
-const GroupCenter = React.lazy(() => import('./pages/GroupCenter'));
-const TokenManagement = React.lazy(() => import('./pages/TokenManagement'));
 const ExternalAuthRedirect = React.lazy(() => import('./pages/ExternalAuthRedirect'));
 
 const AppView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => (
 	<BrowserRouter>
 		<Suspense fallback={null}>
-			<Routes>
-				{!props.isAuthenticated && (
-					<>
-						<Route path="/auth" element={<Auth />} />
-						<Route path="/external-auth-redirect" element={<ExternalAuthRedirect />} />
-						<Route path="*" element={<Navigate replace to="/auth" />} />
-					</>
-				)}
-				{props.isAuthenticated && (
-					<>
-						<Header />
-
-						<Route path="/group-center" element={<GroupCenter />} />
-						<Route path="/token-management" element={<TokenManagement />} />
-						<Route path="*" element={<Navigate replace to="/group-center" />} />
-					</>
-				)}
-			</Routes>
+			{!props.isAuthenticated && (
+				<Routes>
+					<Route path="/auth" element={<Auth />} />
+					<Route path="/external-auth-redirect" element={<ExternalAuthRedirect />} />
+					<Route path="*" element={<Navigate replace to="/auth" />} />
+				</Routes>
+			)}
+			{props.isAuthenticated && <Header />}
 		</Suspense>
 	</BrowserRouter>
 );

apps/frontend/src/components/containers/Auth/Auth.module.scss

@@ -14,7 +14,7 @@
 		justify-content: center;
 		width: 50%;
 		padding: 0 80px;
-		background-image: url('../../../assets/images/starsLoginBackground.png');
+		background-image: url('../../../assets/images/auth-background.png');
 		background-repeat: no-repeat;
 		background-position: center;
 		background-size: cover;