Merge pull request #121 from ArnasDickus/develop

Merge develop branch to main

.env

@@ -9,6 +9,6 @@ LOCAL_BASE_URL=http://localhost:3000
 PRODUCTION_BASE_URL=https://www.uabbaltic.lt/
 
 NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET=
+NEXTAUTH_SECRET=CYoR7/bdQ5N0YXAmBEEvBMAIE9BWeTysKqd04BRHxqs=
 
 WEATHER_API_KEY=81370007d0d092ddea848a509c0fdad6

cypress.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   projectId: "q8jzd3",
+  chromeWebSecurity: false,
   component: {
     devServer: {
       framework: "next",

cypress/e2e/authentication/forgot-password.cy.ts

@@ -13,7 +13,7 @@ describe("Forgot password", () => {
   it("Display Reset Email Modal", () => {
     cy.visit("en/forgot-password");
     cy.get('[data-testid="forgotPasswordEmail"]').type(
-      Cypress.env("EMAIL_USERNAME")
+      Cypress.env("TEST_USERNAME")
     );
     cy.get('[data-testid="forgotPasswordButton"]').click();
     cy.get('[data-testid="ForgotPasswordSuccessModal"]').should("be.visible", {

cypress/e2e/authentication/login.cy.ts

@@ -4,9 +4,8 @@ describe("Login User and redirect to home page", () => {
   });
 
   it("Login user", () => {
-    cy.get('[data-testid="loginEmail"]').type(Cypress.env("EMAIL_USERNAME"));
-    cy.get('[data-testid="loginPassword"]').type(Cypress.env("EMAIL_PASSWORD"));
-    cy.get('[data-testid="loginSubmitButton"]').click();
+    cy.loginUI(Cypress.env("TEST_USERNAME"), Cypress.env("TEST_PASSWORD"));
+    cy.get('[data-testid="logoutButtonId"]');
   });
 
   it("Visit Sign In Page", () => {

cypress/e2e/chess/home-chess.cy.ts

@@ -0,0 +1,9 @@
+describe("check Chess redirection", () => {
+  it("Visit play chess page", () => {
+    cy.loginUI(Cypress.env("TEST_USERNAME"), Cypress.env("TEST_PASSWORD"));
+    cy.wait(5000);
+    cy.visit("en/chess");
+    cy.get('[data-testid="playChessLinkButton"]').click();
+    cy.get('[data-testid="pagePlayChessId"]');
+  });
+});

cypress/support/commands.ts

@@ -8,6 +8,58 @@ Cypress.Commands.add("registerUI", (name, username, email, password) => {
   cy.get('[data-testid="submitButton"]').click();
 });
 
+Cypress.Commands.add("loginUI", (email, password) => {
+  cy.visit("en/login");
+  cy.get('[data-testid="loginEmail"]').type(email);
+  cy.get('[data-testid="loginPassword"]').type(password);
+  cy.get('[data-testid="loginSubmitButton"]').click();
+});
+
+// @ts-ignore
+Cypress.Commands.add("loginPR", (email, password) => {
+  cy.request("GET", "/api/auth/csrf").then((csrfResponse: any) => {
+    const csrfToken = csrfResponse.body.csrfToken;
+    console.log("email", email);
+    console.log("password", password);
+    console.log("csrfToken", csrfToken);
+    cy.request("POST", "/api/auth/signin/credentials", {
+      email,
+      password,
+      csrfToken,
+    }).then((loginResponse) => {
+      console.log("loginResponse", loginResponse);
+
+      // You can add assertions or further actions here if needed
+
+      // Example: Assert that the login was successful
+      expect(loginResponse.status).to.equal(200);
+      cy.log("Response Body:", loginResponse.body);
+      cy.log("Response Headers:", loginResponse.headers);
+    });
+  });
+
+  // cy.request("GET", "/api/auth/csrf").then((response) => {
+  //   console.log("response", response);
+  //   cy.request("POST", "/api/auth/signin/credentials", {
+  //     email,
+  //     password,
+  //     redirect: false,
+  //     csrfToken: response.body.csrfToken,
+  //   }).then((loginResponse) => {
+  //     console.log("loginResponse", loginResponse);
+  //   });
+  // });
+
+  // await signIn("credentials", {
+  //   email: email,
+  //   password: password,
+  //   redirect: false,
+  // });
+
+  return cy.wrap(null);
+  // cy.get('[data-testid="loginSubmitButton"]').click();
+});
+
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite

cypress/support/index.ts

@@ -9,6 +9,14 @@ declare global {
         email: string,
         password: string
       ): Chainable<IPageRegisterInputs>;
+      loginUI(
+        email: string,
+        password: string
+      ): Chainable<Pick<IPageRegisterInputs, "email" | "password">>;
+      loginPR(
+        email: string,
+        password: string
+      ): Chainable<Pick<IPageRegisterInputs, "email" | "password">>;
     }
   }
 }

cypress/tsconfig.json

@@ -1,6 +1,8 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress"]
+    "types": ["cypress", "mocha"]
   },
-  "include": ["../node_modules/cypress", "./**/*.ts"]
+  "include": ["../node_modules/cypress", "./**/*.ts", "../cypress.config.ts"],
+  "exclude": ["src/*.test.ts"]
 }

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.6",
+    "@dnd-kit/core": "^6.1.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
@@ -64,6 +65,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.200",
+    "@types/mocha": "^10.0.6",
     "@types/node": "^20.9.4",
     "@types/nodemailer": "^6.4.14",
     "@types/react": "^18.2.38",

src/app/[lng]/chess/chess.module.css

@@ -0,0 +1,12 @@
+.container {
+  background-color: #302e2b;
+}
+
+.wrapper {
+  padding-top: 20px;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 920px;
+  padding-right: 10px;
+  padding-left: 10px;
+}

src/app/[lng]/chess/components/chess-buttons/chess-buttons.tsx

@@ -0,0 +1,24 @@
+import { useTranslation } from "@/app/i18n";
+import Button from "@/components/button/button";
+import Link from "next/link";
+
+const ChessButtons = async ({ language }: { language: string }) => {
+  const { t } = await useTranslation({
+    language,
+    ns: "chess",
+  });
+
+  return (
+    <div>
+      <Button
+        dataTestIdButton="playChessLinkButton"
+        buttonProps={{
+          type: "button",
+        }}>
+        {/* @ts-ignore */}
+        <Link href={`/${language}/chess/play-chess`}>{t("newGame")}</Link>
+      </Button>
+    </div>
+  );
+};
+export default ChessButtons;

src/app/[lng]/chess/components/chess-header/chess-header.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { useSession } from "next-auth/react";
+
+const ChessHeader = () => {
+  const { data: session } = useSession();
+
+  return (
+    <div className="pb-5 pt-5">
+      <h2 className="text-white font-semibold text-2xl">
+        {session?.user?.name}
+      </h2>
+    </div>
+  );
+};
+export default ChessHeader;

src/app/[lng]/chess/page.tsx

@@ -0,0 +1,23 @@
+import PageContainer from "@/styles/components/page-container";
+import classes from "./chess.module.css";
+import { IPageParamProps } from "@/constants/interfaces";
+import { ServerFooter } from "@/components/layout/footer/serverfooter";
+import ChessHeader from "./components/chess-header/chess-header";
+import ChessButtons from "./components/chess-buttons/chess-buttons";
+import NavbarWrapper from "@/styles/components/navbar-wrapper/navbar-wrapper";
+
+const PageChessHome = ({ params }: IPageParamProps) => {
+  return (
+    <div className={classes.container}>
+      <PageContainer
+        language={params.lng}
+        footer={<ServerFooter language={params.lng} path="/chess" />}>
+        <NavbarWrapper>
+          <ChessHeader />
+          <ChessButtons language={params.lng} />
+        </NavbarWrapper>
+      </PageContainer>
+    </div>
+  );
+};
+export default PageChessHome;

src/app/[lng]/chess/play-chess/components/chess-game/chess-game.tsx

@@ -0,0 +1,16 @@
+import { DndContext } from "@dnd-kit/core";
+import Draggable from "./draggable/draggable";
+import Droppable from "./droppable/droppable";
+
+const ChessGame = () => {
+  return (
+    <div className="pt-20">
+      <DndContext>
+        <Draggable />
+        <Droppable />
+      </DndContext>
+      <p>ChessGame</p>
+    </div>
+  );
+};
+export default ChessGame;

src/app/[lng]/chess/play-chess/components/chess-game/draggable/draggable.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+
+const Draggable = (props: any) => {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: "draggable",
+  });
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : undefined;
+
+  return (
+    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
+      {props.children}
+    </button>
+  );
+};
+
+export default Draggable;

src/app/[lng]/chess/play-chess/components/chess-game/droppable/droppable.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { useDroppable } from "@dnd-kit/core";
+
+const Droppable = (props: any) => {
+  const { isOver, setNodeRef } = useDroppable({
+    id: "droppable",
+  });
+  const style = {
+    color: isOver ? "green" : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      {props.children}
+    </div>
+  );
+};
+
+export default Droppable;

src/app/[lng]/chess/play-chess/page.tsx

@@ -0,0 +1,8 @@
+const PagePlayChess = () => {
+  return (
+    <div data-testid="pagePlayChessId">
+      <p>PagePlayChess</p>
+    </div>
+  );
+};
+export default PagePlayChess;

src/app/[lng]/components/auth-guard/auth-guard.tsx

@@ -24,6 +24,8 @@ const AuthGuard = ({
     `/${language}/reset-password`,
   ];
 
+  const privateRoutes = [`/${language}/chess`, `/${language}/chess/play-chess`];
+
   if (status === "loading") {
     return <PageLoader />;
   }
@@ -32,6 +34,9 @@ const AuthGuard = ({
     router.push(`/${language}`);
   }
 
+  if (status === "unauthenticated" && privateRoutes.includes(pathname)) {
+    router.push(`/${language}`);
+  }
   return <>{children}</>;
 };
 export default AuthGuard;

src/app/[lng]/login/components/login-form/login-form.tsx

@@ -5,7 +5,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as Yup from "yup";
 import Input from "@/components/input/input";
 import Button from "@/components/button/button";
-import { signIn } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import {
   formButtonContainerClassNames,
   formClassNames,
@@ -22,7 +22,7 @@ import CustomLink from "@/components/typography/custom-link";
 const LoginForm = ({ language }: { language: string }) => {
   const { t } = useTranslation({ language, ns: "login_form" });
   const dispatch = useAppDispatch();
-
+  const { data: session } = useSession();
   const validationSchema = Yup.object().shape({
     email: Yup.string().required(t("required")),
     password: Yup.string().required(t("required")),

src/app/[lng]/page.tsx

@@ -13,11 +13,13 @@ export const metadata: Metadata = {
 
 const Home: FC<IPageParamProps> = async ({ params: { lng } }) => {
   return (
-    <PageContainer
-      language={lng}
-      footer={<ServerFooter language={lng} path="/" />}>
-      <HeroSection language={lng} />
-    </PageContainer>
+    <div data-testid="homePageId">
+      <PageContainer
+        language={lng}
+        footer={<ServerFooter language={lng} path="/" />}>
+        <HeroSection language={lng} />
+      </PageContainer>
+    </div>
   );
 };
 

src/app/api/auth/[...nextauth]/route.ts

@@ -36,6 +36,7 @@ const handler = NextAuth({
           return {
             id: user.id,
             email: user.email,
+            name: user.username,
           };
         }
         return null;

src/app/i18n/locales/en/chess.json

@@ -0,0 +1,3 @@
+{
+  "newGame": "New Game"
+}

src/app/i18n/locales/en/header.json

@@ -6,5 +6,6 @@
   "signUp": "Sign Up",
   "logout": "Logout",
   "resume": "CV",
-  "projects": "Projects"
+  "projects": "Projects",
+  "chess": "Chess"
 }

src/app/i18n/locales/lt/chess.json

@@ -0,0 +1,3 @@
+{
+  "newGame": "Naujas žaidimas"
+}

src/app/i18n/locales/lt/header.json

@@ -6,5 +6,6 @@
   "signUp": "Registruotis",
   "logout": "Atsijungti",
   "resume": "Resume",
-  "projects": "Projektai"
+  "projects": "Projektai",
+  "chess": "Šachmatai"
 }