login attached to main body

This commit is contained in:
Berkay 2025-05-14 16:10:36 +03:00
parent b15f58c319
commit 4bdac8aa61
31 changed files with 156 additions and 97 deletions

View File

@ -1,6 +0,0 @@
'use server';
import Login from "@/webPages/auth/Login/page";
const LoginPage = async () => { return <Login language="en" /> };
export default LoginPage;

View File

@ -0,0 +1,15 @@
'use server';
import { AuthLayout } from "@/layouts/auth/layout";
import { AuthServerProps } from "@/validations/mutual/pages/props";
import getPage from "@/webPages/getPage";
const AuthPageEn = async ({ params, searchParams }: AuthServerProps) => {
const lang = "en";
const awaitedParams = await params;
const awaitedSearchParams = await searchParams;
const pageUrlFromParams = `/${awaitedParams.page?.join("/")}` || "/login";
const FoundPage = getPage(pageUrlFromParams, { language: lang, query: awaitedSearchParams });
return <AuthLayout lang={lang} page={FoundPage} activePageUrl={pageUrlFromParams} />
}
export default AuthPageEn;

View File

@ -0,0 +1,15 @@
'use server';
import { AuthServerProps } from "@/validations/mutual/pages/props";
import { AuthLayout } from "@/layouts/auth/layout";
import getPage from "@/webPages/getPage";
const AuthPageTr = async ({ params, searchParams }: AuthServerProps) => {
const lang = "tr";
const awaitedParams = await params;
const awaitedSearchParams = await searchParams;
const pageUrlFromParams = `/${awaitedParams.page?.join("/")}` || "/login";
const FoundPage = getPage(pageUrlFromParams, { language: lang, query: awaitedSearchParams });
return <AuthLayout lang={lang} page={FoundPage} activePageUrl={pageUrlFromParams} />
}
export default AuthPageTr;

View File

@ -1,29 +0,0 @@
import type { Metadata } from "next";
import { Suspense } from "react";
export const metadata: Metadata = {
title: "WAG Frontend",
description: "WAG Frontend Application",
};
export default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
<div className="w-1/4">
<div className="flex flex-col items-center justify-center h-screen bg-purple-600">
<div className="text-2xl font-bold">WAG Frontend</div>
<div className="text-sm text-gray-500 mt-4">
Welcome to the WAG Frontend Application
</div>
</div>
</div>
<div className="w-3/4 text-black">
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
</div>
</div>
);
}

View File

@ -1,6 +1,6 @@
import { loginViaAccessKeys } from "@/apicalls/custom/login/login";
import { NextResponse } from "next/server";
import { loginSchemaEmail } from "@/webPages/auth/Login/schemas";
import { loginSchemaEmail } from "@/webPages/auth/login/schemas";
export async function POST(req: Request): Promise<NextResponse> {
try {

View File

@ -1,5 +1,5 @@
import { z } from "zod";
import { loginSelectOccupant } from "@/apicalls/login/login";
import { loginSelectOccupant } from "@/apicalls/custom/login/login";
import { NextResponse } from "next/server";
const loginSchemaOccupant = z.object({

View File

@ -4,7 +4,7 @@ import { HeaderProps } from "@/validations/mutual/dashboard/props";
import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
import { langGetKey } from "@/lib/langGet";
const HeaderComponent: FC<HeaderProps> = ({ translations, lang, activePageUrl }) => {
const HeaderComponent: FC<HeaderProps> = ({ translations, lang, activePageUrl, prefix }) => {
return (
<div className="flex justify-between h-24 items-center p-4 border-emerald-150 border-b-2 shadow-sm backdrop-blur-sm sticky top-0 z-50 bg-emerald-50">
@ -12,7 +12,7 @@ const HeaderComponent: FC<HeaderProps> = ({ translations, lang, activePageUrl })
<p className="text-2xl font-bold mx-3">{langGetKey(translations, 'selectedPage')} :</p>
<p className="text-lg font-bold mx-3"> {langGetKey(translations, 'page')}</p>
</div>
<LanguageSelectionComponent lang={lang} activePage={activePageUrl} />
<LanguageSelectionComponent lang={lang} activePage={activePageUrl} prefix={prefix} />
</div>
);
};

View File

@ -7,9 +7,9 @@ import { LanguageTypes } from "@/validations/mutual/language/validations";
import LanguageSelectionItem from "./languageItem";
const LanguageSelectionComponent: React.FC<{ lang: LanguageTypes, activePage: string }> = ({ lang, activePage }) => {
const LanguageSelectionComponent: React.FC<{ lang: LanguageTypes, activePage: string, prefix: string }> = ({ lang, activePage, prefix }) => {
const translations = langGet(lang, languageSelectionTranslation);
const getPageWithLocale = (locale: LanguageTypes): string => { return `/${locale}/${activePage}` }
const getPageWithLocale = (locale: LanguageTypes): string => { return `${prefix}/${locale}/${activePage}` }
const englishButtonProps = {
activeLang: lang,
@ -30,8 +30,7 @@ const LanguageSelectionComponent: React.FC<{ lang: LanguageTypes, activePage: st
<DropdownMenuTrigger asChild>
<Button className="w-48 h-12 text-center text-md">{langGetKey(translations, "title")}</Button>
</DropdownMenuTrigger>
<LanguageSelectionItem {...englishButtonProps} />
<LanguageSelectionItem {...turkishButtonProps} />
<LanguageSelectionItem {...englishButtonProps} /><LanguageSelectionItem {...turkishButtonProps} />
</DropdownMenu>
</div>
);

View File

@ -0,0 +1,23 @@
'use server';
import { FC, Suspense } from "react";
import { AuthLayoutProps } from "@/validations/mutual/auth/props";
import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
const AuthLayout: FC<AuthLayoutProps> = async ({ lang, page, activePageUrl }) => {
return (
<div className="min-h-screen min-w-screen flex h-screen w-screen overflow-hidden">
<div className="w-1/4">
<div className="flex flex-col items-center justify-center h-screen bg-purple-600">
<div className="text-2xl font-bold">WAG Frontend</div>
<div className="text-sm text-gray-500 mt-4">Welcome to the WAG Frontend Application</div>
</div>
</div>
<div className="w-3/4 text-black">
<LanguageSelectionComponent lang={lang} activePage={activePageUrl} prefix={"/auth"} />
<Suspense fallback={<div>Loading...</div>}>{page}</Suspense>
</div>
</div>
);
}
export { AuthLayout };

View File

@ -19,7 +19,7 @@ const DashboardLayout: FC<DashboardLayoutProps> = async ({ params, searchParams,
const translations = langGet(lang, langDynamicPagesGet(activePageUrl, dynamicPagesIndex));
const menuTranslationsFlatten = dynamicRetrieveMenuFlattenGet(menuItems);
const headerProps = { translations: translations.header, lang, activePageUrl }
const headerProps = { translations: translations.header, lang, activePageUrl, prefix: "/panel" }
const menuProps = { lang, activePageUrl, menuTranslationsFlatten, menuItems }
const contentProps = { translations: translations.content, lang, activePageUrl, mode, isMulti: true }

View File

@ -4,13 +4,13 @@ import superUserTenantSomethingSecond from "./management/account/tenantSomething
import superUserBuildingPartsTenantSomething from "./building/parts/tenantSomething/page";
const pageIndexMulti: Record<string, Record<string, React.FC<ContentProps>>> = {
"management/account/tenant/something": {
"panel/management/account/tenant/something": {
superUserTenantSomething: superUserTenantSomething,
},
"management/account/tenant/somethingSecond": {
"panel/management/account/tenant/somethingSecond": {
superUserTenantSomething: superUserTenantSomethingSecond,
},
"building/parts/tenant/something": {
"panel/building/parts/tenant/something": {
superUserTenantSomething: superUserBuildingPartsTenantSomething,
},
};

View File

@ -0,0 +1,13 @@
import { LanguageTypes } from "../language/validations";
// <AuthLayout params={params} searchParams={searchParams} lang={lang} page={page} />
interface AuthLayoutProps {
page: React.ReactNode;
lang: LanguageTypes;
activePageUrl: string;
}
interface AuthPageProps {
query?: { [key: string]: string | string[] | undefined };
language: LanguageTypes;
}
export type { AuthLayoutProps, AuthPageProps };

View File

@ -1,6 +1,5 @@
import { LanguageTypes } from "@/validations/mutual/language/validations";
type ParamsType = { page: string[] | undefined };
import { ParamsType } from "@/validations/mutual/pages/props";
interface MaindasboardPageProps {
params: Promise<ParamsType>;
@ -39,6 +38,7 @@ interface HeaderProps {
translations: Record<string, string>;
lang: LanguageTypes;
activePageUrl: string;
prefix: string;
}
export type {

View File

@ -0,0 +1,7 @@
type ParamsType = { page: string[] | undefined };
interface AuthServerProps {
params: Promise<{ page: string[] | undefined }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export type { ParamsType, AuthServerProps };

View File

@ -1,9 +1,12 @@
import { LanguageTypes } from "@/validations/mutual/language/validations";
export function loginHook(
startTransition: any,
data: any,
setError: any,
setJsonText: any,
Router: any
Router: any,
lang: LanguageTypes
) {
try {
const sendData = { ...data };
@ -18,7 +21,7 @@ export function loginHook(
response.json().then((data) => {
console.log("data", data); // setJsonText(JSON.stringify(data));
setTimeout(() => {
Router.push("/auth/en/select");
Router.push(`/auth/${lang}/select`);
}, 100);
});
} else {

View File

@ -1,38 +1,27 @@
"use client";
import { useState, useTransition, useEffect } from "react";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { LoginFormData } from "./types";
import { loginSchemaEmail } from "./schemas";
import { loginTranslation } from "./language";
// import { LanguageSelectionComponent } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
import { loginHook } from "./hook";
import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
function Login({ language }: { language: "tr" | "en" }) {
import { AuthPageProps } from "@/validations/mutual/auth/props";
function Login({ language }: AuthPageProps) {
const Router = useRouter();
const translation = loginTranslation[language];
const [isPending, startTransition] = useTransition();
const [error, setError] = useState<string | null>(null);
const [jsonText, setJsonText] = useState<string | null>(null);
const [translation, setTranslation] = useState(loginTranslation[language]);
const [lang, setLang] = useState(language);
useEffect(() => { setTranslation(loginTranslation[lang]) }, [lang]);
const { register, formState: { errors }, handleSubmit, } = useForm<LoginFormData>({ resolver: zodResolver(loginSchemaEmail) });
const onSubmit = async (data: LoginFormData) => { loginHook(startTransition, data, setError, setJsonText, Router) };
return (
<>
{/* <div className="absolute top-4 right-4">
<LanguageSelectionComponent
lang={lang}
setLang={setLang}
className="border px-3 py-2 rounded-lg"
/>
</div> */}
<div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
<div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
<h2 className="mb-6 text-center text-2xl font-bold text-gray-900">{translation.login}</h2>

View File

@ -0,0 +1,8 @@
'use server';
import Login from "./page";
import { FC } from "react";
import { AuthPageProps } from "@/validations/mutual/auth/props";
const LoginPage: FC<AuthPageProps> = async ({ query, language }) => { return <Login language={language} query={query} /> };
export default LoginPage;

View File

@ -7,7 +7,8 @@ import { selectEmployeeHook } from "./hook";
function LoginEmployee({
selectionList,
translation
translation,
lang
}: LoginEmployeeProps) {
const isArrayLengthOne = Array.isArray(selectionList) && selectionList.length === 1;
const isArrayLengthZero = Array.isArray(selectionList) && selectionList.length === 0;
@ -19,7 +20,7 @@ function LoginEmployee({
const [jsonText, setJsonText] = useState<string | null>(null);
const onSubmitEmployee = async (uu_id: string) => {
selectEmployeeHook(startTransition, { company_uu_id: uu_id }, setError, setJsonText, Router)
selectEmployeeHook(startTransition, { company_uu_id: uu_id }, setError, setJsonText, Router, lang)
};
// Render a company card with consistent styling

View File

@ -7,6 +7,7 @@ import { selectOccupantHook } from "./hook";
function LoginOccupant({
selectionList,
translation,
lang
}: LoginOccupantProps) {
const Router = useRouter();
@ -15,7 +16,7 @@ function LoginOccupant({
const [jsonText, setJsonText] = useState<string | null>(null);
const onSubmitOccupant = async (data: any) => {
selectOccupantHook(startTransition, data, setError, setJsonText, Router)
selectOccupantHook(startTransition, data, setError, setJsonText, Router, lang)
};
const isArrayLengthZero = Array.isArray(selectionList) && selectionList.length === 0;

View File

@ -1,12 +1,16 @@
import { LanguageTypes } from "@/validations/mutual/language/validations";
function selectEmployeeHook(
startTransition: any,
data: any,
setError: any,
setJsonText: any,
Router: any
Router: any,
lang: LanguageTypes
) {
try {
const sendData = { ...data };
const urlToDirect = `/auth/${lang}/panel/building/parts/tenant/something`;
startTransition(() => {
fetch("/api/selection/employee", {
method: "POST",
@ -18,7 +22,7 @@ function selectEmployeeHook(
response.json().then((data) => {
console.log("data", data); // setJsonText(JSON.stringify(data));
setTimeout(() => {
Router.push("/en/building/parts/tenant/something");
Router.push(urlToDirect);
}, 100);
});
} else {
@ -39,10 +43,12 @@ function selectOccupantHook(
data: any,
setError: any,
setJsonText: any,
Router: any
Router: any,
lang: LanguageTypes
) {
try {
const sendData = { ...data };
const urlToDirect = `/auth/${lang}/panel/building/parts/tenant/something`;
startTransition(() => {
fetch("/api/selection/occupant", {
method: "POST",
@ -54,7 +60,7 @@ function selectOccupantHook(
response.json().then((data) => {
console.log("data", data); // setJsonText(JSON.stringify(data));
setTimeout(() => {
Router.push("/en/building/parts/tenant/something");
Router.push(urlToDirect);
}, 100);
});
} else {

View File

@ -5,15 +5,16 @@ import LoginEmployee from "./LoginEmployee";
import { Company, SelectListProps, BuildingMap } from "./types";
import { selectEmployeeTranslation, selectOccupantTranslation } from "./language";
// import { LanguageSelectionComponent } from "@/components/common/HeaderSelections/LanguageSelectionComponent";
const Select: React.FC<SelectListProps> = ({ selectionList, isEmployee, isOccupant, language }) => {
const Select: React.FC<SelectListProps> = ({ selectionList, isEmployee, isOccupant, language, query }) => {
const isEmployeee = query?.isEmployee == "true";
const isOccupante = query?.isOccupant == "true";
const userType = isEmployeee || isOccupante ? isEmployeee ? "employee" : "occupant" : "employee";
const isEmployeeTrue = isEmployee && Array.isArray(selectionList)
const isOccupantTrue = isOccupant && !Array.isArray(selectionList)
const initTranslation = isEmployee ? selectEmployeeTranslation[language as "en" | "tr"] : selectOccupantTranslation[language as "en" | "tr"]
const isEmployeeTrue = userType == "employee" && Array.isArray(selectionList)
const isOccupantTrue = userType == "occupant" && !Array.isArray(selectionList)
const initTranslation = userType == "employee" ? selectEmployeeTranslation[language] : selectOccupantTranslation[language]
const [lang, setLang] = useState(language);
const [translation, setTranslation] = useState(initTranslation);
const [listEmployeeSelection, setListEmployeeSelection] = useState<Company[]>(selectionList as Company[]);
const [listOccupantSelection, setListOccupantSelection] = useState<BuildingMap>(selectionList as BuildingMap);
@ -24,23 +25,15 @@ const Select: React.FC<SelectListProps> = ({ selectionList, isEmployee, isOccupa
}, []);
useEffect(() => {
setTranslation(isEmployee ? selectEmployeeTranslation[lang as "en" | "tr"] : selectOccupantTranslation[lang as "en" | "tr"]);
}, [lang]);
setTranslation(isEmployee ? selectEmployeeTranslation[language] : selectOccupantTranslation[language]);
}, [language]);
return (
<>
{/* <div className="absolute top-4 right-4">
<LanguageSelectionComponent
lang={lang as "en" | "tr"}
setLang={setLang}
className="border px-3 py-2 rounded-lg"
/>
</div> */}
<div className="flex h-full min-h-[inherit] flex-col items-center justify-center gap-4">
<div className="w-full max-w-md rounded-lg bg-white p-8 shadow-md">
{isEmployeeTrue && <LoginEmployee translation={translation} selectionList={listEmployeeSelection} />}
{isOccupantTrue && <LoginOccupant translation={translation} selectionList={listOccupantSelection} />}
{isEmployeeTrue && <LoginEmployee translation={translation} selectionList={listEmployeeSelection} lang={language} />}
{isOccupantTrue && <LoginOccupant translation={translation} selectionList={listOccupantSelection} lang={language} />}
</div>
</div>
</>

View File

@ -1,11 +1,12 @@
"use server";
import React from "react";
import Select from "@/webPages/auth/Select/page";
import React, { FC } from "react";
import Select from "./page";
import { redirect } from "next/navigation";
import { checkAccessTokenIsValid, retrieveUserType } from "@/apicalls/mutual/cookies/token";
import { AuthPageProps } from "@/validations/mutual/auth/props";
const SelectPage = async () => {
const SelectPage: FC<AuthPageProps> = async ({ query, language }) => {
const token_is_valid = await checkAccessTokenIsValid();
const selection = await retrieveUserType();
const isEmployee = selection?.userType == "employee";
@ -13,7 +14,7 @@ const SelectPage = async () => {
const selectionList = selection?.selectionList;
if (!selectionList || !token_is_valid) { redirect("/auth/en/login") }
return <Select selectionList={selectionList} isEmployee={isEmployee} isOccupant={isOccupant} language={"en"} />
return <Select selectionList={selectionList} isEmployee={isEmployee} isOccupant={isOccupant} language={language} query={query} />
}
export default SelectPage;

View File

@ -1,3 +1,5 @@
import { LanguageTypes } from "@/validations/mutual/language/validations";
interface Company {
uu_id: string;
public_name: string;
@ -31,17 +33,20 @@ interface SelectListProps {
selectionList: Company[] | BuildingMap;
isEmployee: boolean;
isOccupant: boolean;
language?: "en" | "tr";
language: LanguageTypes;
query?: { [key: string]: string | string[] | undefined };
}
interface LoginOccupantProps {
selectionList: BuildingMap;
translation: any;
lang: LanguageTypes;
}
interface LoginEmployeeProps {
selectionList: Company[];
translation: any;
lang: LanguageTypes;
}
export type {

View File

@ -0,0 +1,15 @@
import LoginPage from "./auth/login/serverPage";
import SelectPage from "./auth/select/serverPage";
export default function getPage(pageName: string, props: any) {
switch (pageName) {
case "/login":
return <LoginPage {...props} />;
case "/select":
return <SelectPage {...props} />;
default:
return <LoginPage {...props} />;
}
return <></>
}