[RSN-65] - Implemented base routing and base register page (#51)

* feat: implemented base routing and base register page * feat: implemented input ids/names, added password confirmation, changed texts displayed for user
wzarek · Jun 9, 2024 · fa322e2 · fa322e2
1 parent d99aaab
commit fa322e2
Show file tree

Hide file tree

Showing 15 changed files with 338 additions and 19 deletions.
diff --git a/Client/reasn-client/apps/web/app/layout.tsx b/Client/reasn-client/apps/web/app/layout.tsx
@@ -1,3 +1,4 @@
+import { Footer, Navbar } from "@reasn/ui/src/components/shared";
 import "../styles/global.css";
 import "@reasn/ui/src/styles.css";
 
@@ -8,7 +9,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="min-h-screen overflow-x-clip bg-[#161618] text-white">
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
     </html>
   );
 }
diff --git a/Client/reasn-client/apps/web/app/login/layout.tsx b/Client/reasn-client/apps/web/app/login/layout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const LoginLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default LoginLayout;
diff --git a/Client/reasn-client/apps/web/app/login/page.tsx b/Client/reasn-client/apps/web/app/login/page.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const LoginPage = () => {
+  return <div>page</div>;
+};
+
+export default LoginPage;
diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
@@ -5,16 +5,15 @@ import {
   HeroSection,
   QuickFilters,
 } from "@reasn/ui/src/components/web";
-import { Navbar, Footer } from "@reasn/ui/src/components/shared";
 
-export default function Web() {
+const Web = () => {
   return (
-    <div className="min-h-screen bg-[#161618] text-white">
-      <Navbar />
+    <>
       <HeroSection />
       <QuickFilters />
       <CTASection />
-      <Footer />
-    </div>
+    </>
   );
-}
+};
+
+export default Web;
diff --git a/Client/reasn-client/apps/web/app/register/layout.tsx b/Client/reasn-client/apps/web/app/register/layout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const RegisterLayout = ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: {
+    tag: string;
+    item: string;
+  };
+}) => {
+  return (
+    <section className="relative mx-auto flex h-screen w-3/4 justify-between py-10">
+      {children}
+    </section>
+  );
+};
+
+export default RegisterLayout;
diff --git a/Client/reasn-client/apps/web/app/register/organizer/page.tsx b/Client/reasn-client/apps/web/app/register/organizer/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  ButtonBase,
+  FloatingInput,
+} from "@reasn/ui/src/components/shared/form";
+import React, { useRef, useState } from "react";
+
+const RegisterOrganizer = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleFormSubmit = () => {
+    console.log("form submitted");
+    formRef.current?.submit();
+  };
+
+  return (
+    <>
+      <div className="flex w-1/2 items-center justify-center">
+        <form className="flex w-full flex-col gap-8" ref={formRef}>
+          {currentStep === 1 && (
+            <>
+              <FloatingInput type="text" label="imię" name="name" />
+              <FloatingInput type="text" label="nazwisko" name="surname" />
+              <FloatingInput
+                type="text"
+                label="nazwa użytkownika"
+                name="username"
+              />
+              <FloatingInput type="email" label="email" name="email" />
+              <FloatingInput type="tel" label="numer telefonu" name="phone" />
+              <FloatingInput type="password" label="hasło" name="password" />
+              <FloatingInput
+                type="password"
+                label="powtórz hasło"
+                name="confirm-password"
+              />
+            </>
+          )}
+          {currentStep === 2 && (
+            <>
+              <FloatingInput type="text" label="miasto" name="city" />
+              <FloatingInput type="text" label="kraj" name="country" />
+              <FloatingInput type="text" label="ulica" name="street" />
+              <FloatingInput type="text" label="województwo" name="state" />
+              <FloatingInput type="text" label="kod pocztowy" name="postcode" />
+            </>
+          )}
+        </form>
+      </div>
+      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+        {currentStep === 1 && (
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+            to jak, zorganizujesz nam coś?
+          </p>
+        )}
+        {currentStep === 2 && (
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+            gdzie możemy cię znaleźć?
+          </p>
+        )}
+        <ButtonBase
+          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+          onClick={() =>
+            currentStep === 2
+              ? handleFormSubmit()
+              : setCurrentStep(currentStep + 1)
+          }
+        />
+      </div>
+      <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+    </>
+  );
+};
+
+export default RegisterOrganizer;
diff --git a/Client/reasn-client/apps/web/app/register/page.tsx b/Client/reasn-client/apps/web/app/register/page.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const RegisterMiddleware = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-4/5 w-full flex-col items-center justify-evenly gap-8">
+      <h2 className="w-full text-5xl font-bold">kim jesteś?</h2>
+      <div className="flex w-full gap-8">
+        <div
+          className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10"
+          onClick={() => router.push("/register/organizer")}
+        >
+          <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
+          <p className="text-lg font-semibold duration-500 group-hover:text-3xl">
+            Organizator
+          </p>
+        </div>
+        <div
+          className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10"
+          onClick={() => router.push("/register/user")}
+        >
+          <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
+            Uczestnik
+          </p>
+          <div className="absolute right-0 top-1/2 h-4/5 w-3/5 -translate-y-1/2 rounded-l-xl bg-black duration-500 group-hover:h-full group-hover:w-2/3"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterMiddleware;
diff --git a/Client/reasn-client/apps/web/app/register/user/page.tsx b/Client/reasn-client/apps/web/app/register/user/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  ButtonBase,
+  FloatingInput,
+} from "@reasn/ui/src/components/shared/form";
+import React, { useRef, useState } from "react";
+
+const RegisterUser = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleFormSubmit = () => {
+    console.log("form submitted");
+    formRef.current?.submit();
+  };
+
+  return (
+    <>
+      <div className="flex w-1/2 items-center justify-center">
+        <form className="flex w-full flex-col gap-8" ref={formRef}>
+          {currentStep === 1 && (
+            <>
+              <FloatingInput type="text" label="imię" name="name" />
+              <FloatingInput type="text" label="nazwisko" name="surname" />
+              <FloatingInput
+                type="text"
+                label="nazwa użytkownika"
+                name="username"
+              />
+              <FloatingInput type="email" label="email" name="email" />
+              <FloatingInput type="tel" label="numer telefonu" name="phone" />
+              <FloatingInput type="password" label="hasło" name="password" />
+              <FloatingInput
+                type="password"
+                label="powtórz hasło"
+                name="confirm-password"
+              />
+            </>
+          )}
+          {currentStep === 2 && (
+            <>
+              <FloatingInput type="text" label="miasto" name="city" />
+              <FloatingInput type="text" label="kraj" name="country" />
+              <FloatingInput type="text" label="ulica" name="street" />
+              <FloatingInput type="text" label="województwo" name="state" />
+              <FloatingInput type="text" label="kod pocztowy" name="postcode" />
+            </>
+          )}
+        </form>
+      </div>
+      <div className="z-10 flex h-full w-1/3 flex-col flex-wrap items-start justify-center gap-24">
+        {currentStep === 1 && (
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+            znalazłeś już swój powód do spotkań?
+          </p>
+        )}
+        {currentStep === 2 && (
+          <p className="bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-5xl font-bold leading-tight text-transparent">
+            gdzie powinniśmy cię szukać?
+          </p>
+        )}
+        <ButtonBase
+          text={currentStep === 2 ? "zarejestruj" : "kontynuuj"}
+          onClick={() =>
+            currentStep === 2
+              ? handleFormSubmit()
+              : setCurrentStep(currentStep + 1)
+          }
+        />
+      </div>
+      <div className="absolute right-[-50%] top-0 z-0 h-full w-4/5 rounded-full bg-[#000b6d] opacity-15 blur-3xl"></div>
+    </>
+  );
+};
+
+export default RegisterUser;
diff --git a/Client/reasn-client/apps/web/styles/index.module.css b/Client/reasn-client/apps/web/styles/index.module.css
diff --git a/Client/reasn-client/apps/web/tsconfig.json b/Client/reasn-client/apps/web/tsconfig.json
@@ -1,7 +1,12 @@
 {
   "extends": "@reasn/typescript-config/nextjs.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

diff --git a/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx b/Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx
@@ -1,24 +1,25 @@
 import React from "react";
+import Link from "next/link";
 
 export const Navbar = () => {
   return (
     <nav className="sticky top-0 z-[50] flex h-16 w-full flex-wrap items-center justify-between rounded-b-2xl bg-black text-base text-white">
       <div className="mx-auto flex w-4/5 justify-between">
         <div>
-          <a href="#" className="text-2xl font-bold hover:text-[#ccc]">
+          <Link href="/" className="text-2xl font-bold hover:text-[#ccc]">
             Reasn.
-          </a>
+          </Link>
         </div>
         <div className="flex items-center gap-8">
-          <a href="#" className="hover:text-[#ccc]">
+          <Link href="/login" className="hover:text-[#ccc]">
             logowanie
-          </a>
-          <a
-            href="#"
+          </Link>
+          <Link
+            href="/register"
             className="rounded-2xl border-2 border-white px-6 py-1.5 hover:bg-white hover:text-black"
           >
             rejestracja
-          </a>
+          </Link>
         </div>
       </div>
     </nav>

diff --git a/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx b/Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+interface ButtonProps {
+  text: string;
+  onClick: () => void;
+}
+
+export const ButtonBase = (props: ButtonProps) => {
+  const { text, onClick } = props;
+  return (
+    <button
+      onClick={onClick}
+      className="w-36 rounded-2xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] px-4 py-2"
+    >
+      {text}
+    </button>
+  );
+};