Restructure application to use /home for authenticated pages
- Move authenticated home page from /[locale] to /[locale]/home - Move login page from /[locale]/login to /[locale] (new landing page) - Move all restricted pages (bill, location, year-month, print, account) under /[locale]/home - Simplify middleware to protect all routes under /home instead of using publicPages array - Update auth config: change signIn page from /login to / - Update SignInButton callback URL to redirect to /home after login - Update all internal links throughout the application to reflect new structure - Update server action redirects in navigationActions.ts - Public share routes (/share/*) remain unchanged 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
@@ -16,7 +16,7 @@ const Page: FC = async () => {
|
||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title"><AccountCircle /> {t('title')}</h2>
|
||||
<Link href={`/${locale}/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
|
||||
<Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
31
app/[locale]/home/page.tsx
Normal file
31
app/[locale]/home/page.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { FC, Suspense } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import HomePage from '@/app/ui/HomePage';
|
||||
import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';
|
||||
|
||||
export interface PageProps {
|
||||
searchParams?: {
|
||||
year?: string;
|
||||
month?: string;
|
||||
};
|
||||
}
|
||||
|
||||
const HomePageSkeleton = () =>
|
||||
<>
|
||||
<MonthCardSkeleton checked={true} />
|
||||
<MonthCardSkeleton />
|
||||
<MonthCardSkeleton />
|
||||
</>
|
||||
|
||||
const Page:FC<PageProps> = async ({ searchParams }) => {
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Suspense fallback={<HomePageSkeleton />}>
|
||||
<HomePage searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,109 +0,0 @@
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
|
||||
import { authConfig } from "@/app/lib/auth";
|
||||
import { SignInButton } from '@/app/ui/SignInButton';
|
||||
import Image from 'next/image';
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import isWebview from "is-ua-webview";
|
||||
import { headers } from 'next/headers'
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Provider = {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
style: {
|
||||
logo: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
};
|
||||
};
|
||||
|
||||
function getProviders(): Provider[] {
|
||||
const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
|
||||
return authConfig.providers.map((provider) =>
|
||||
getKeyValuesFromObject<Provider>(provider, providerKeys)
|
||||
);
|
||||
}
|
||||
|
||||
function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
|
||||
return keys.reduce((acc, key) => {
|
||||
if (obj[key]) {
|
||||
acc[key] = obj[key];
|
||||
}
|
||||
return acc;
|
||||
}, {} as T);
|
||||
}
|
||||
|
||||
const Page:FC = async () => {
|
||||
|
||||
const providers = await getProviders();
|
||||
const t = await getTranslations("login-page");
|
||||
// get userAgent from NextJS
|
||||
|
||||
const headersList = headers();
|
||||
const userAgent = headersList.get("user-agent") as string;
|
||||
|
||||
const insideWebeview = isWebview(userAgent);
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<h1 className="text-3xl font-bold text-center">
|
||||
<span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
|
||||
<span className="text-indigo-400">{t("main-card.title-2")}</span>
|
||||
<span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
|
||||
</h1>
|
||||
<p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
|
||||
<p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
|
||||
{
|
||||
// Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
|
||||
insideWebeview &&
|
||||
<div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
|
||||
<figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
|
||||
<ExclamationTriangleIcon className="text-red-600 self-start" />
|
||||
</figure>
|
||||
<div className="card-body pl-2">
|
||||
{
|
||||
t.rich("main-card.in-app-browser-warning", {
|
||||
br: () => <br />,
|
||||
strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
|
||||
hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<span className="flex justify-center">
|
||||
{
|
||||
Object.values(providers).map((provider) => (
|
||||
<div key={provider.name}>
|
||||
<SignInButton provider={provider} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</span>
|
||||
<video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
|
||||
<source src={t("main-card.video-url")} type="video/webm" />
|
||||
</video>
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-1.text")}</p>
|
||||
<video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
|
||||
<source src={t("card-1.video-url")} type="video/webm" />
|
||||
</video>
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-2.text")}</p>
|
||||
<Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-3.text")}</p>
|
||||
<video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
|
||||
<source src={t("card-3.video-url")} type="video/webm" />
|
||||
</video>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,29 +1,107 @@
|
||||
import { FC, Suspense } from 'react';
|
||||
import { FC, ReactNode } from 'react';
|
||||
import { Main } from '@/app/ui/Main';
|
||||
import HomePage from '@/app/ui/HomePage';
|
||||
import { MonthCardSkeleton } from '@/app/ui/MonthCardSkeleton';
|
||||
|
||||
export interface PageProps {
|
||||
searchParams?: {
|
||||
year?: string;
|
||||
month?: string;
|
||||
import { authConfig } from "@/app/lib/auth";
|
||||
import { SignInButton } from '@/app/ui/SignInButton';
|
||||
import Image from 'next/image';
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import isWebview from "is-ua-webview";
|
||||
import { headers } from 'next/headers'
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Provider = {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
style: {
|
||||
logo: string;
|
||||
bg: string;
|
||||
text: string;
|
||||
};
|
||||
};
|
||||
|
||||
function getProviders(): Provider[] {
|
||||
const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
|
||||
return authConfig.providers.map((provider) =>
|
||||
getKeyValuesFromObject<Provider>(provider, providerKeys)
|
||||
);
|
||||
}
|
||||
|
||||
const HomePageSkeleton = () =>
|
||||
<>
|
||||
<MonthCardSkeleton checked={true} />
|
||||
<MonthCardSkeleton />
|
||||
<MonthCardSkeleton />
|
||||
</>
|
||||
function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
|
||||
return keys.reduce((acc, key) => {
|
||||
if (obj[key]) {
|
||||
acc[key] = obj[key];
|
||||
}
|
||||
return acc;
|
||||
}, {} as T);
|
||||
}
|
||||
|
||||
const Page:FC<PageProps> = async ({ searchParams }) => {
|
||||
const Page:FC = async () => {
|
||||
|
||||
const providers = await getProviders();
|
||||
const t = await getTranslations("login-page");
|
||||
// get userAgent from NextJS
|
||||
|
||||
const headersList = headers();
|
||||
const userAgent = headersList.get("user-agent") as string;
|
||||
|
||||
const insideWebeview = isWebview(userAgent);
|
||||
|
||||
return (
|
||||
<Main>
|
||||
<Suspense fallback={<HomePageSkeleton />}>
|
||||
<HomePage searchParams={searchParams} />
|
||||
</Suspense>
|
||||
<h1 className="text-3xl font-bold text-center">
|
||||
<span className="text-neutral-50 mr-3">{t("main-card.title-1")}</span>
|
||||
<span className="text-indigo-400">{t("main-card.title-2")}</span>
|
||||
<span className="text-neutral-50 ml-3">{t("main-card.title-3")}</span>
|
||||
</h1>
|
||||
<p className="p mt-[1em] text-center">{t("main-card.text-1")}</p>
|
||||
<p className="p mb-[1em] text-center">{t("main-card.text-2")}</p>
|
||||
{
|
||||
// Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
|
||||
insideWebeview &&
|
||||
<div className="card card-side bg-base-100 shadow-xl max-w-[30em] mx-auto mb-4">
|
||||
<figure className='pl-4 pr-1 pt-[2rem] min-w-[100px] max-w-[100px] self-start'>
|
||||
<ExclamationTriangleIcon className="text-red-600 self-start" />
|
||||
</figure>
|
||||
<div className="card-body pl-2">
|
||||
{
|
||||
t.rich("main-card.in-app-browser-warning", {
|
||||
br: () => <br />,
|
||||
strong: (chunks:ReactNode) => <strong className='text-indigo-300' >{chunks}</strong>,
|
||||
hint: (chunks:ReactNode) => <span className='text-indigo-300 block'> {chunks}</span>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<span className="flex justify-center">
|
||||
{
|
||||
Object.values(providers).map((provider) => (
|
||||
<div key={provider.name}>
|
||||
<SignInButton provider={provider} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</span>
|
||||
<video className="m-auto mt-4" title={t("main-card.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("main-card.image-url")}>
|
||||
<source src={t("main-card.video-url")} type="video/webm" />
|
||||
</video>
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-1.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-1.text")}</p>
|
||||
<video className="m-auto mt-4" title={t("card-1.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-1.image-url")}>
|
||||
<source src={t("card-1.video-url")} type="video/webm" />
|
||||
</video>
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-2.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-2.text")}</p>
|
||||
<Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
|
||||
|
||||
<h1 className="text-2xl font-bold text-neutral-50 my-5">{t("card-3.title")}</h1>
|
||||
<p className="p mt-[1em]">{t("card-3.text")}</p>
|
||||
<video className="m-auto mt-4" title={t("card-3.video-title")} role="img" data-js-id="hero" loop muted playsInline autoPlay poster={t("card-3.image-url")}>
|
||||
<source src={t("card-3.video-url")} type="video/webm" />
|
||||
</video>
|
||||
</Main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user