arbisoft · farhan2742 · Jan 29, 2025 · Jan 23, 2025 · Jan 23, 2025
diff --git a/next.config.js b/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   eslint: {
     dirs: ["src", "playwright-tests"],
   },
+  images: {
+    domains: ["www.google.com"],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@mui/material": "6.1.6",
     "@mui/x-date-pickers": "7.22.2",
     "@react-oauth/google": "^0.12.0",
+    "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.0",
     "@types/node": "20.14.10",
@@ -49,6 +50,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.45.4",
     "react-i18next": "^15.0.0",
+    "react-redux": "^9.2.0",
     "react-virtuoso": "4.12.0",
     "typescript": "5.5.4",
     "yup": "^1.2.0"

diff --git a/playwright-tests/login/login.spec.ts b/playwright-tests/login/login.spec.ts
@@ -0,0 +1,7 @@
+import { test, expect } from "@playwright/test";
+
+test("should have login title", async ({ page }) => {
+  await page.goto("/en/login");
+  const title = await page.title();
+  expect(title).toBe("Login");
+});
diff --git a/public/images/arbisoft-logo.png b/public/images/arbisoft-logo.png
diff --git a/src/app/[language]/layout.tsx b/src/app/[language]/layout.tsx
@@ -3,7 +3,6 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
-import CssBaseline from "@mui/material/CssBaseline";
 import { dir } from "i18next";
 import "@/services/i18n/config";
 import { languages } from "@/services/i18n/config";
@@ -16,6 +15,8 @@ import QueryClientProvider from "@/services/react-query/query-client-provider";
 import queryClient from "@/services/react-query/query-client";
 import ReactQueryDevtools from "@/services/react-query/react-query-devtools";
 import InitColorSchemeScript from "@/components/theme/init-color-scheme-script";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { Providers } from "@/redux/store/provider";
 
 type Props = {
   params: { language: string };
@@ -40,19 +41,24 @@ export default function RootLayout({
   children: React.ReactNode;
   params: { language: string };
 }) {
+  const clientId = process.env.NEXT_PUBLIC_CLIENT_ID;
+
   return (
     <html lang={language} dir={dir(language)}>
       <body>
         <InitColorSchemeScript />
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools initialIsOpen={false} />
-          <ThemeProvider>
-            <CssBaseline />
-            <SnackbarProvider maxSnack={3}>
-              <StoreLanguageProvider>{children}</StoreLanguageProvider>
-            </SnackbarProvider>
-          </ThemeProvider>
-        </QueryClientProvider>
+        <GoogleOAuthProvider clientId={clientId ? clientId : ""}>
+          <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools initialIsOpen={false} />
+            <ThemeProvider>
+              <SnackbarProvider maxSnack={3}>
+                <StoreLanguageProvider>
+                  <Providers>{children}</Providers>
+                </StoreLanguageProvider>
+              </SnackbarProvider>
+            </ThemeProvider>
+          </QueryClientProvider>
+        </GoogleOAuthProvider>
       </body>
     </html>
   );

diff --git a/src/app/[language]/login/page.tsx b/src/app/[language]/login/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import { getServerTranslation } from "@/services/i18n";
+import LoginPage from "@/features/LoginPage";
+
+type Props = {
+  params: { language: string };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { t } = await getServerTranslation(params.language, "login");
+
+  return {
+    title: t("title"),
+  };
+}
+
+export default LoginPage;
diff --git a/src/app/[language]/page.tsx b/src/app/[language]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { getServerTranslation } from "@/services/i18n";
-import Typography from "@mui/material/Typography";
+import HomePage from "@/features/HomePage";
+
 type Props = {
   params: { language: string };
 };
@@ -16,5 +17,5 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 export default async function Home({ params }: Props) {
   const { t } = await getServerTranslation(params.language, "home");
 
-  return <Typography variant="h3">{t("description")}</Typography>;
+  return <HomePage description={t("description")} />;
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1 +1,10 @@
 /* Your global CSS here */
+body {
+  background: linear-gradient(
+    145deg,
+    rgba(16, 24, 56, 1) 0%,
+    rgba(23, 54, 85, 1) 100%
+  );
+  height: 100vh;
+  margin: 0;
+}
diff --git a/src/components/AlertModal/alertModal.tsx b/src/components/AlertModal/alertModal.tsx
@@ -0,0 +1,27 @@
+import { FC } from "react";
+import Snackbar from "@mui/material/Snackbar";
+import { AlertModalProps } from "./types";
+import { AlertContainer } from "./styled";
+
+const AlertModal: FC<AlertModalProps> = ({
+  handleCloseAlertModal,
+  errorMessage = "Something wrong happened",
+  vertical = "top",
+  horizontal = "right",
+  severity = "error",
+}) => {
+  return (
+    <Snackbar
+      open={!!errorMessage}
+      autoHideDuration={6000}
+      onClose={handleCloseAlertModal}
+      anchorOrigin={{ vertical: vertical, horizontal: horizontal }}
+    >
+      <AlertContainer onClose={handleCloseAlertModal} severity={severity}>
+        {errorMessage}
+      </AlertContainer>
+    </Snackbar>
+  );
+};
+
+export default AlertModal;
diff --git a/src/components/AlertModal/index.ts b/src/components/AlertModal/index.ts
@@ -0,0 +1,3 @@
+import AlertModal from "./alertModal";
+
+export default AlertModal;
diff --git a/src/components/AlertModal/styled.tsx b/src/components/AlertModal/styled.tsx
@@ -0,0 +1,10 @@
+import Alert from "@mui/material/Alert";
+import { styled, css } from "@mui/material/styles";
+
+export const AlertContainer = styled(Alert, {
+  name: "AlertContainer",
+})(
+  () => css`
+    width: 100%;
+  `
+);
diff --git a/src/components/AlertModal/types.ts b/src/components/AlertModal/types.ts
@@ -0,0 +1,7 @@
+export type AlertModalProps = {
+  handleCloseAlertModal: () => void;
+  errorMessage?: string;
+  vertical?: "bottom" | "top";
+  horizontal?: "center" | "left" | "right";
+  severity?: "success" | "info" | "warning" | "error";
+};
diff --git a/src/endpoints/index.ts b/src/endpoints/index.ts
@@ -0,0 +1,3 @@
+import * as login from "./login";
+
+export { login };
diff --git a/src/endpoints/login.ts b/src/endpoints/login.ts
@@ -0,0 +1 @@
+export const login = "/users/login";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import AlertModal from "./alertModal";

		export default AlertModal;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import * as login from "./login";

		export { login };