Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jun 9, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e389df
feat: implemented base routing and base register page
wzarek Jun 8, 2024
1ed52e0
feat: implemented input ids/names, added password confirmation, chang…
wzarek Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion Client/reasn-client/apps/web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Footer, Navbar } from "@reasn/ui/src/components/shared";
import "../styles/global.css";
import "@reasn/ui/src/styles.css";

Expand All @@ -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>
);
}
20 changes: 20 additions & 0 deletions Client/reasn-client/apps/web/app/login/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
7 changes: 7 additions & 0 deletions Client/reasn-client/apps/web/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const LoginPage = () => {
return <div>page</div>;
};

export default LoginPage;
13 changes: 6 additions & 7 deletions Client/reasn-client/apps/web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
20 changes: 20 additions & 0 deletions Client/reasn-client/apps/web/app/register/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 68 additions & 0 deletions Client/reasn-client/apps/web/app/register/organizer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
"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ę" />
<FloatingInput type="text" label="nazwisko" />
<FloatingInput type="text" label="nazwa użytkownika" />
<FloatingInput type="email" label="email" />
<FloatingInput type="tel" label="numer telefonu" />
<FloatingInput type="password" label="hasło" />
</>
)}
{currentStep === 2 && (
<>
<FloatingInput type="text" label="miasto" />
<FloatingInput type="text" label="kraj" />
<FloatingInput type="text" label="ulica" />
<FloatingInput type="text" label="województwo" />
<FloatingInput type="text" label="kod pocztowy" />
</>
)}
</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 <br /> 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ę <br /> 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;
36 changes: 36 additions & 0 deletions Client/reasn-client/apps/web/app/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 68 additions & 0 deletions Client/reasn-client/apps/web/app/register/user/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
"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ę" />
<FloatingInput type="text" label="nazwisko" />
<FloatingInput type="text" label="nazwa użytkownika" />
<FloatingInput type="email" label="email" />
<FloatingInput type="tel" label="numer telefonu" />
<FloatingInput type="password" label="hasło" />
wzarek marked this conversation as resolved.
Show resolved Hide resolved
</>
)}
{currentStep === 2 && (
<>
<FloatingInput type="text" label="miasto" />
<FloatingInput type="text" label="kraj" />
<FloatingInput type="text" label="ulica" />
<FloatingInput type="text" label="województwo" />
<FloatingInput type="text" label="kod pocztowy" />
</>
)}
</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 <br /> nam coś?
wzarek marked this conversation as resolved.
Show resolved Hide resolved
</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ę <br /> 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 RegisterUser;
Empty file removed Client/reasn-client/apps/web/styles/index.module.css
View file
Open in desktop
Empty file.
7 changes: 6 additions & 1 deletion Client/reasn-client/apps/web/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"]
Expand Down
15 changes: 8 additions & 7 deletions Client/reasn-client/packages/ui/src/components/shared/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
18 changes: 18 additions & 0 deletions Client/reasn-client/packages/ui/src/components/shared/form/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
50 changes: 50 additions & 0 deletions Client/reasn-client/packages/ui/src/components/shared/form/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import clsx from "clsx";
import React, { useState } from "react";

interface InputProps {
type: string;
label?: string;
onFocus?: () => void;
onBlur?: () => void;
}

export const FloatingInput = (props: InputProps) => {
const [isFocused, setIsFocused] = useState(false);
const [isFilled, setIsFilled] = useState(false);
const { label, type, onFocus, onBlur } = props;

const handleFocus = () => {
onFocus?.();
setIsFocused(true);
};

const handleBlur = () => {
onBlur?.();
setIsFocused(false);
};

return (
<div
className={clsx("relative rounded-xl bg-[#232327] p-1", {
"bg-gradient-to-r from-[#32346A] to-[#4E4F75]": isFocused,
})}
>
<label
className={clsx(
"absolute left-3 transition-all duration-300",
{ "top-[-50%] text-xs": isFocused || isFilled },
{ "top-3 text-base": !isFocused && !isFilled },
)}
>
{label ?? ""}
</label>
<input
type={type}
className="h-full w-full rounded-lg bg-[#232327] p-2 focus:outline-none"
onFocus={handleFocus}
onBlur={handleBlur}
onChange={(e) => setIsFilled(!!e.target.value)}
/>
</div>
);
};
2 changes: 2 additions & 0 deletions Client/reasn-client/packages/ui/src/components/shared/form/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { ButtonBase } from "./Button";
export { FloatingInput } from "./Input";
Loading
Loading