Heb er een PWA van gemaakt en layout gecorrigeerd
This commit is contained in:
LogJurgenR
@@ -0,0 +1,26 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { SESSION_COOKIE } from "@/lib/auth";
|
||||||
|
|
||||||
|
export async function POST(request: Request) {
|
||||||
|
const body = await request.json().catch(() => null);
|
||||||
|
|
||||||
|
if (body?.username !== "admin" || body?.password !== "admin") {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: "invalid_credentials" },
|
||||||
|
{ status: 401 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = NextResponse.json({ success: true });
|
||||||
|
response.cookies.set({
|
||||||
|
name: SESSION_COOKIE,
|
||||||
|
value: "authenticated",
|
||||||
|
httpOnly: true,
|
||||||
|
sameSite: "lax",
|
||||||
|
secure: process.env.NODE_ENV === "production",
|
||||||
|
maxAge: 60 * 60 * 8,
|
||||||
|
path: "/",
|
||||||
|
});
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { NextResponse } from "next/server";
|
||||||
|
import { SESSION_COOKIE } from "@/lib/auth";
|
||||||
|
|
||||||
|
export async function POST() {
|
||||||
|
const response = NextResponse.json({ success: true });
|
||||||
|
response.cookies.set({
|
||||||
|
name: SESSION_COOKIE,
|
||||||
|
value: "",
|
||||||
|
expires: new Date(0),
|
||||||
|
httpOnly: true,
|
||||||
|
path: "/",
|
||||||
|
});
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import {
|
||||||
|
getLanguageName,
|
||||||
|
LOCALE_COOKIE,
|
||||||
|
locales,
|
||||||
|
type Locale,
|
||||||
|
} from "@/lib/i18n";
|
||||||
|
|
||||||
|
export default function LanguageSwitcher({
|
||||||
|
locale,
|
||||||
|
label,
|
||||||
|
onChange,
|
||||||
|
}: {
|
||||||
|
locale: Locale;
|
||||||
|
label: string;
|
||||||
|
onChange?: (locale: Locale) => void;
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
function handleChange(value: Locale) {
|
||||||
|
document.cookie = `${LOCALE_COOKIE}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`;
|
||||||
|
onChange?.(value);
|
||||||
|
router.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label className="flex h-10 items-center gap-2 text-sm">
|
||||||
|
<span className="sr-only">{label}</span>
|
||||||
|
<select
|
||||||
|
value={locale}
|
||||||
|
onChange={(event) => handleChange(event.target.value as Locale)}
|
||||||
|
className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
||||||
|
aria-label={label}
|
||||||
|
>
|
||||||
|
{locales.map((option) => (
|
||||||
|
<option key={option} value={option}>
|
||||||
|
{getLanguageName(option)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
}
|
||||||
+24
-5
@@ -1,5 +1,8 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { getLocale, LOCALE_COOKIE } from "@/lib/i18n";
|
||||||
|
import PwaRegister from "@/app/pwa-register";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
@@ -13,17 +16,33 @@ const geistMono = Geist_Mono({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "ADC BestelApp",
|
||||||
description: "Generated by create next app",
|
description: "Bekijk artikelen uit SAP Business One.",
|
||||||
|
applicationName: "ADC BestelApp",
|
||||||
|
manifest: "/manifest.webmanifest",
|
||||||
|
appleWebApp: {
|
||||||
|
capable: true,
|
||||||
|
title: "ADC BestelApp",
|
||||||
|
statusBarStyle: "default",
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
icon: "/icon.svg",
|
||||||
|
apple: "/icon.svg",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
export default async function RootLayout({ children }: LayoutProps<"/">) {
|
||||||
|
const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html
|
<html
|
||||||
lang="en"
|
lang={locale === "yue" ? "yue" : locale}
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||||
>
|
>
|
||||||
<body className="min-h-full flex flex-col">{children}</body>
|
<body className="min-h-full flex flex-col">
|
||||||
|
<PwaRegister />
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
|
||||||
|
|
||||||
|
export default async function Loading() {
|
||||||
|
const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen animate-pulse bg-slate-50" aria-busy="true">
|
||||||
|
<div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 py-12">
|
||||||
|
<div className="h-10 w-80 rounded-lg bg-white/20" />
|
||||||
|
<div className="mt-4 h-5 max-w-2xl rounded bg-white/15" />
|
||||||
|
<div className="mt-6 h-10 w-24 rounded-lg bg-white/20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mx-auto max-w-7xl px-6 py-10">
|
||||||
|
<div className="mb-6 inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
|
||||||
|
<div>
|
||||||
|
<div className="h-4 w-32 rounded bg-slate-200" />
|
||||||
|
<div className="mt-2 h-9 w-12 rounded bg-cyan-100" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
|
||||||
|
<div className="border-b border-slate-200 px-6 py-4">
|
||||||
|
<div className="h-6 w-28 rounded bg-slate-200" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center gap-3 px-6 py-8 text-sm text-slate-500">
|
||||||
|
<span className="h-5 w-5 rounded-full border-2 border-cyan-200 border-t-cyan-600 motion-safe:animate-spin" />
|
||||||
|
{t(locale, "articles.loading")}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-5 px-6 pb-8">
|
||||||
|
{[...Array(7)].map((_, index) => (
|
||||||
|
<div key={index} className="flex gap-6">
|
||||||
|
<div className="h-5 w-32 rounded bg-slate-200" />
|
||||||
|
<div className="h-5 flex-1 rounded bg-slate-200" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import type { SubmitEvent } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import LanguageSwitcher from "@/app/language-switcher";
|
||||||
|
import { getLocale, LOCALE_COOKIE, t, type Locale } from "@/lib/i18n";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [locale, setLocale] = useState<Locale>(() => {
|
||||||
|
if (typeof document === "undefined") return "nl";
|
||||||
|
const value = document.cookie
|
||||||
|
.split("; ")
|
||||||
|
.find((cookie) => cookie.startsWith(`${LOCALE_COOKIE}=`))
|
||||||
|
?.split("=")[1];
|
||||||
|
return getLocale(value);
|
||||||
|
});
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
async function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
|
||||||
|
event.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("/api/auth/login", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ username, password }),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setError(
|
||||||
|
data.error === "invalid_credentials"
|
||||||
|
? t(locale, "login.invalidCredentials")
|
||||||
|
: t(locale, "login.unexpectedError"),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
router.replace("/");
|
||||||
|
router.refresh();
|
||||||
|
} catch {
|
||||||
|
setError(t(locale, "login.unexpectedError"));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen items-center justify-center bg-slate-100 px-6">
|
||||||
|
<div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl ring-1 ring-slate-200">
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold uppercase tracking-wider text-cyan-700">
|
||||||
|
{t(locale, "appName")}
|
||||||
|
</p>
|
||||||
|
<h1 className="mt-2 text-3xl font-bold text-slate-900">{t(locale, "login.title")}</h1>
|
||||||
|
</div>
|
||||||
|
<LanguageSwitcher
|
||||||
|
locale={locale}
|
||||||
|
label={t(locale, "language.label")}
|
||||||
|
onChange={setLocale}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-slate-500">{t(locale, "login.description")}</p>
|
||||||
|
<p className="mt-2 text-slate-500">{t(locale, "login.demoCredentials")}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-5">
|
||||||
|
<label className="block">
|
||||||
|
<span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.username")}</span>
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
value={username}
|
||||||
|
onChange={(event) => setUsername(event.target.value)}
|
||||||
|
className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
||||||
|
autoComplete="username"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="block">
|
||||||
|
<span className="mb-2 block text-sm font-medium text-slate-700">{t(locale, "login.password")}</span>
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="password"
|
||||||
|
value={password}
|
||||||
|
onChange={(event) => setPassword(event.target.value)}
|
||||||
|
className="w-full rounded-lg border border-slate-300 px-4 py-3 text-slate-900 outline-none transition focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
||||||
|
autoComplete="current-password"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{error && <p className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{error}</p>}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className="w-full rounded-lg bg-cyan-700 px-4 py-3 font-semibold text-white transition hover:bg-cyan-800 disabled:cursor-not-allowed disabled:opacity-60"
|
||||||
|
>
|
||||||
|
{loading ? t(locale, "login.submitting") : t(locale, "login.submit")}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { t, type Locale } from "@/lib/i18n";
|
||||||
|
|
||||||
|
export default function LogoutButton({ locale }: { locale: Locale }) {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function handleLogout() {
|
||||||
|
await fetch("/api/auth/logout", { method: "POST" });
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleLogout}
|
||||||
|
className="inline-flex h-10 items-center rounded-lg bg-white/10 px-4 text-sm font-semibold text-white ring-1 ring-white/30 transition hover:bg-white/20"
|
||||||
|
>
|
||||||
|
{t(locale, "auth.logout")}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import type { MetadataRoute } from "next";
|
||||||
|
|
||||||
|
export default function manifest(): MetadataRoute.Manifest {
|
||||||
|
return {
|
||||||
|
name: "CF Demop App",
|
||||||
|
short_name: "CF Demop App",
|
||||||
|
description: "Bekijk artikelen uit SAP Business One.",
|
||||||
|
start_url: "/",
|
||||||
|
display: "standalone",
|
||||||
|
background_color: "#f8fafc",
|
||||||
|
theme_color: "#0e7490",
|
||||||
|
lang: "nl",
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: "/icon.svg",
|
||||||
|
sizes: "any",
|
||||||
|
type: "image/svg+xml",
|
||||||
|
purpose: "maskable",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
+109
-62
@@ -1,69 +1,116 @@
|
|||||||
import Image from "next/image";
|
import LogoutButton from "@/app/logout-button";
|
||||||
|
import LanguageSwitcher from "@/app/language-switcher";
|
||||||
|
import { getItems } from "@/lib/items";
|
||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
|
||||||
|
export default async function ItemsPage() {
|
||||||
|
const { items, error } = await getItems();
|
||||||
|
const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<main className="min-h-screen bg-slate-50">
|
||||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
{/* Header */}
|
||||||
<Image
|
<div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
|
||||||
className="dark:invert h-5 w-[100px]"
|
<div className="mx-auto max-w-7xl px-6 py-12">
|
||||||
src="/next.svg"
|
<h1 className="text-4xl font-bold tracking-tight">
|
||||||
alt="Next.js logo"
|
{t(locale, "articles.title")}
|
||||||
width={100}
|
|
||||||
height={20}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
|
||||||
To get started, edit the{" "}
|
|
||||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
|
||||||
page.tsx
|
|
||||||
</code>{" "}
|
|
||||||
file.
|
|
||||||
</h1>
|
</h1>
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
<p className="mt-3 max-w-2xl text-sky-100">
|
||||||
<a
|
{t(locale, "articles.description")}
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</a>{" "}
|
|
||||||
or the{" "}
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
</p>
|
||||||
|
<div className="mt-6 flex flex-wrap items-center gap-3">
|
||||||
|
<LogoutButton locale={locale} />
|
||||||
|
<LanguageSwitcher locale={locale} label={t(locale, "language.label")} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
</div>
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
<div className="mx-auto max-w-7xl px-6 py-10">
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
{/* KPI Card */}
|
||||||
target="_blank"
|
<div className="mb-6">
|
||||||
rel="noopener noreferrer"
|
<div className="inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
|
||||||
>
|
<div>
|
||||||
<Image
|
<p className="text-sm text-slate-500">{t(locale, "articles.count")}</p>
|
||||||
className="dark:invert h-[14px] w-4"
|
<p className="mt-1 text-3xl font-bold text-cyan-700">
|
||||||
src="/vercel.svg"
|
{items.length}
|
||||||
alt="Vercel logomark"
|
</p>
|
||||||
width={16}
|
</div>
|
||||||
height={14}
|
</div>
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
</div>
|
{/* Main Card */}
|
||||||
|
<div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
|
||||||
|
<div className="border-b border-slate-200 px-6 py-4">
|
||||||
|
<h2 className="text-lg font-semibold text-slate-800">
|
||||||
|
{t(locale, "articles.heading")}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && (
|
||||||
|
<div className="m-6 rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
|
||||||
|
{t(locale, "articles.error")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
{items.length > 0 && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-slate-100">
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
|
||||||
|
{t(locale, "articles.code")}
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-4 text-left text-sm font-semibold text-slate-700">
|
||||||
|
{t(locale, "articles.descriptionColumn")}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{items.map((item) => (
|
||||||
|
<tr
|
||||||
|
key={item.ItemCode}
|
||||||
|
className="border-t border-slate-100 transition-colors hover:bg-cyan-50"
|
||||||
|
>
|
||||||
|
<td className="px-6 py-4 font-mono text-sm font-medium text-cyan-700">
|
||||||
|
{item.ItemCode}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td className="px-6 py-4 text-slate-700">
|
||||||
|
{item.ItemName}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty State */}
|
||||||
|
{items.length === 0 && !error && (
|
||||||
|
<div className="py-20 text-center">
|
||||||
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
|
||||||
|
📦
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-lg font-semibold text-slate-700">
|
||||||
|
{t(locale, "articles.emptyTitle")}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="mt-2 text-slate-500">
|
||||||
|
{t(locale, "articles.emptyDescription")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
export default function PwaRegister() {
|
||||||
|
useEffect(() => {
|
||||||
|
if ("serviceWorker" in navigator) {
|
||||||
|
navigator.serviceWorker.register("/sw.js").catch((error) => {
|
||||||
|
console.error("Service worker registration failed", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export const SESSION_COOKIE = "adc_session";
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
// lib/config.ts
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
nodeEnv: process.env.NODE_ENV,
|
||||||
|
logLevel: process.env.LOG_LEVEL ?? "info",
|
||||||
|
destinationName: process.env.SAPB1_DESTINATION,
|
||||||
|
};
|
||||||
+117
@@ -0,0 +1,117 @@
|
|||||||
|
export const LOCALE_COOKIE = "adc_locale";
|
||||||
|
|
||||||
|
export const locales = ["nl", "en", "yue"] as const;
|
||||||
|
export type Locale = (typeof locales)[number];
|
||||||
|
|
||||||
|
type TranslationKey =
|
||||||
|
| "appName"
|
||||||
|
| "articles.title"
|
||||||
|
| "articles.description"
|
||||||
|
| "articles.count"
|
||||||
|
| "articles.heading"
|
||||||
|
| "articles.code"
|
||||||
|
| "articles.descriptionColumn"
|
||||||
|
| "articles.loading"
|
||||||
|
| "articles.emptyTitle"
|
||||||
|
| "articles.emptyDescription"
|
||||||
|
| "articles.error"
|
||||||
|
| "auth.logout"
|
||||||
|
| "login.title"
|
||||||
|
| "login.description"
|
||||||
|
| "login.demoCredentials"
|
||||||
|
| "login.username"
|
||||||
|
| "login.password"
|
||||||
|
| "login.submit"
|
||||||
|
| "login.submitting"
|
||||||
|
| "login.invalidCredentials"
|
||||||
|
| "login.unexpectedError"
|
||||||
|
| "language.label";
|
||||||
|
|
||||||
|
const translations: Record<Locale, Record<TranslationKey, string>> = {
|
||||||
|
nl: {
|
||||||
|
appName: "ADC BestelApp",
|
||||||
|
"articles.title": "SAP Business One Artikelen",
|
||||||
|
"articles.description": "Overzicht van artikelen opgehaald via de SAP Business One Service Layer.",
|
||||||
|
"articles.count": "Aantal artikelen",
|
||||||
|
"articles.heading": "Artikelen",
|
||||||
|
"articles.code": "Artikelcode",
|
||||||
|
"articles.descriptionColumn": "Omschrijving",
|
||||||
|
"articles.loading": "Artikelen laden...",
|
||||||
|
"articles.emptyTitle": "Geen artikelen gevonden",
|
||||||
|
"articles.emptyDescription": "De Service Layer heeft geen artikelen teruggegeven.",
|
||||||
|
"articles.error": "Er is een fout opgetreden bij het ophalen van de artikelen.",
|
||||||
|
"auth.logout": "Uitloggen",
|
||||||
|
"login.title": "Inloggen",
|
||||||
|
"login.description": "Log in om de artikelen te bekijken.",
|
||||||
|
"login.demoCredentials": "Gebruikersnaam: admin, wachtwoord: admin",
|
||||||
|
"login.username": "Gebruikersnaam",
|
||||||
|
"login.password": "Wachtwoord",
|
||||||
|
"login.submit": "Inloggen",
|
||||||
|
"login.submitting": "Bezig met inloggen...",
|
||||||
|
"login.invalidCredentials": "Ongeldige gebruikersnaam of wachtwoord.",
|
||||||
|
"login.unexpectedError": "Er is een fout opgetreden. Probeer het opnieuw.",
|
||||||
|
"language.label": "Taal",
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
appName: "ADC Order App",
|
||||||
|
"articles.title": "SAP Business One Items",
|
||||||
|
"articles.description": "Overview of items retrieved through the SAP Business One Service Layer.",
|
||||||
|
"articles.count": "Number of items",
|
||||||
|
"articles.heading": "Items",
|
||||||
|
"articles.code": "Item code",
|
||||||
|
"articles.descriptionColumn": "Description",
|
||||||
|
"articles.loading": "Loading items...",
|
||||||
|
"articles.emptyTitle": "No items found",
|
||||||
|
"articles.emptyDescription": "The Service Layer returned no items.",
|
||||||
|
"articles.error": "An error occurred while retrieving the items.",
|
||||||
|
"auth.logout": "Log out",
|
||||||
|
"login.title": "Sign in",
|
||||||
|
"login.description": "Sign in to view the items.",
|
||||||
|
"login.demoCredentials": "Username: admin, password: admin",
|
||||||
|
"login.username": "Username",
|
||||||
|
"login.password": "Password",
|
||||||
|
"login.submit": "Sign in",
|
||||||
|
"login.submitting": "Signing in...",
|
||||||
|
"login.invalidCredentials": "Invalid username or password.",
|
||||||
|
"login.unexpectedError": "An error occurred. Please try again.",
|
||||||
|
"language.label": "Language",
|
||||||
|
},
|
||||||
|
yue: {
|
||||||
|
appName: "ADC 訂貨應用程式",
|
||||||
|
"articles.title": "SAP Business One 貨品",
|
||||||
|
"articles.description": "透過 SAP Business One Service Layer 取得嘅貨品一覽。",
|
||||||
|
"articles.count": "貨品數量",
|
||||||
|
"articles.heading": "貨品",
|
||||||
|
"articles.code": "貨品編號",
|
||||||
|
"articles.descriptionColumn": "描述",
|
||||||
|
"articles.loading": "載入貨品中...",
|
||||||
|
"articles.emptyTitle": "搵唔到貨品",
|
||||||
|
"articles.emptyDescription": "Service Layer 冇返回任何貨品。",
|
||||||
|
"articles.error": "取得貨品時發生錯誤。",
|
||||||
|
"auth.logout": "登出",
|
||||||
|
"login.title": "登入",
|
||||||
|
"login.description": "登入後查看貨品。",
|
||||||
|
"login.demoCredentials": "使用者名稱：admin，密碼：admin",
|
||||||
|
"login.username": "使用者名稱",
|
||||||
|
"login.password": "密碼",
|
||||||
|
"login.submit": "登入",
|
||||||
|
"login.submitting": "登入中...",
|
||||||
|
"login.invalidCredentials": "使用者名稱或密碼錯誤。",
|
||||||
|
"login.unexpectedError": "發生錯誤，請再試一次。",
|
||||||
|
"language.label": "語言",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function getLocale(value?: string): Locale {
|
||||||
|
return locales.includes(value as Locale) ? (value as Locale) : "nl";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function t(locale: Locale, key: TranslationKey): string {
|
||||||
|
return translations[locale][key];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLanguageName(locale: Locale): string {
|
||||||
|
return { nl: "Nederlands", en: "English", yue: "廣東話" }[locale];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { TranslationKey };
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
import { executeHttpRequest } from "@sap-cloud-sdk/http-client";
|
||||||
|
|
||||||
|
type Item = {
|
||||||
|
ItemCode: string;
|
||||||
|
ItemName: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function getItems(): Promise<{ items: Item[]; error: string }> {
|
||||||
|
try {
|
||||||
|
const response = await executeHttpRequest(
|
||||||
|
{ destinationName: "SAP4SL" },
|
||||||
|
{ method: "GET", url: "/b1s/v2/Items" },
|
||||||
|
);
|
||||||
|
|
||||||
|
return { items: response.data.value || [], error: "" };
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
error: "items_request_failed",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import pino from "pino";
|
||||||
|
|
||||||
|
export const logger = pino({
|
||||||
|
level: process.env.LOG_LEVEL || "info",
|
||||||
|
});
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import axios, { AxiosResponse } from "axios";
|
||||||
|
|
||||||
|
export async function login(): Promise<string> {
|
||||||
|
try {
|
||||||
|
console.log("Login naar:", `https://servicelayer.logres.nl:50000/b1s/v2/Login`);
|
||||||
|
|
||||||
|
const response = await axios.post(
|
||||||
|
"https://servicelayer.logres.nl:50000/b1s/v2/Login",
|
||||||
|
{
|
||||||
|
CompanyDB: "DEMONLJR",
|
||||||
|
UserName: "manager",
|
||||||
|
Password: "manager",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
validateStatus: () => true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("STATUS:", response.status);
|
||||||
|
console.log("DATA:", response.data);
|
||||||
|
console.log("COOKIES:", response.headers["set-cookie"]);
|
||||||
|
|
||||||
|
const setCookie = extractCookie(response);
|
||||||
|
|
||||||
|
if (!setCookie) {
|
||||||
|
throw new Error("Geen set-cookie header ontvangen van SAP Business One");
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.isArray(setCookie) ? setCookie.join("; ") : setCookie;
|
||||||
|
} catch (error: unknown) {
|
||||||
|
console.error("MESSAGE:", (error as Error).message);
|
||||||
|
console.error("CODE:", (error as { code: string }).code);
|
||||||
|
|
||||||
|
if ((error as { response: unknown }).response) {
|
||||||
|
console.error("STATUS:", (error as { response: { status: number } }).response.status);
|
||||||
|
console.error("DATA:", (error as { response: { data: unknown } }).response.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error((error as Error).message || "Login failed");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractCookie(response: AxiosResponse): string | null {
|
||||||
|
const setCookie = response.headers['set-cookie'];
|
||||||
|
|
||||||
|
if (!setCookie) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return setCookie
|
||||||
|
.map((cookie: string) => cookie.split(";")[0])
|
||||||
|
.join("; ");
|
||||||
|
}
|
||||||
Generated
+909
-36
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,11 @@
|
|||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@sap-cloud-sdk/connectivity": "^4.8.0",
|
||||||
|
"@sap-cloud-sdk/http-client": "^4.8.0",
|
||||||
|
"axios": "^1.19.0",
|
||||||
"next": "16.3.1",
|
"next": "16.3.1",
|
||||||
|
"pino": "^10.3.1",
|
||||||
"react": "19.2.8",
|
"react": "19.2.8",
|
||||||
"react-dom": "19.2.8"
|
"react-dom": "19.2.8"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { NextRequest, NextResponse } from "next/server";
|
||||||
|
import { SESSION_COOKIE } from "@/lib/auth";
|
||||||
|
|
||||||
|
export function proxy(request: NextRequest) {
|
||||||
|
const hasSession = request.cookies.get(SESSION_COOKIE)?.value === "authenticated";
|
||||||
|
|
||||||
|
if (request.nextUrl.pathname === "/" && !hasSession) {
|
||||||
|
return NextResponse.redirect(new URL("/login", request.url));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (request.nextUrl.pathname === "/login" && hasSession) {
|
||||||
|
return NextResponse.redirect(new URL("/", request.url));
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.next();
|
||||||
|
}
|
||||||
|
|
||||||
|
export const config = {
|
||||||
|
matcher: ["/", "/login"],
|
||||||
|
};
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<rect width="512" height="512" rx="112" fill="#0e7490"/>
|
||||||
|
<path d="M256 76 394 136v108c0 94-58 158-138 192-80-34-138-98-138-192V136L256 76Z" fill="#fff" opacity=".96"/>
|
||||||
|
<path d="m256 126 88 38v78c0 57-31 101-88 130-57-29-88-73-88-130v-78l88-38Z" fill="#0e7490"/>
|
||||||
|
<path d="M208 211h96M208 256h96M208 301h58" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="22"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 453 B |
@@ -0,0 +1,40 @@
|
|||||||
|
const CACHE_NAME = "adc-bestelapp-v1";
|
||||||
|
const APP_SHELL = ["/login", "/manifest.webmanifest", "/icon.svg"];
|
||||||
|
|
||||||
|
self.addEventListener("install", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)),
|
||||||
|
);
|
||||||
|
self.skipWaiting();
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("activate", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then((keys) =>
|
||||||
|
Promise.all(
|
||||||
|
keys
|
||||||
|
.filter((key) => key !== CACHE_NAME)
|
||||||
|
.map((key) => caches.delete(key)),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
self.clients.claim();
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("fetch", (event) => {
|
||||||
|
const request = event.request;
|
||||||
|
const url = new URL(request.url);
|
||||||
|
|
||||||
|
if (request.method !== "GET" || url.origin !== self.location.origin) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Never cache authenticated pages or API responses containing private data.
|
||||||
|
if (url.pathname === "/" || url.pathname.startsWith("/api/")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.respondWith(
|
||||||
|
fetch(request).catch(() => caches.match(request)),
|
||||||
|
);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user