added custom login screen

Dockerfile

@@ -36,9 +36,11 @@ ENV NODE_ENV production
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
+COPY --from=builder /app/public/* /app/public/
 # this file is required for the pdfjs-dist package
 COPY --from=builder /app/node_modules/pdfjs-dist/build/pdf.worker.min.mjs /app/public/pdf.worker.min.mjs
 
+
 # Set the correct permission for prerender cache
 RUN mkdir .next
 RUN chown nextjs:nodejs .next

app/lib/auth.ts

@@ -3,7 +3,7 @@ import GoogleProvider from 'next-auth/providers/google';
 import { Session } from 'next-auth';
 import { AuthenticatedUser } from './types/next-auth';
 
-const authConfig: NextAuthConfig = {
+export const authConfig: NextAuthConfig = {
    callbacks: {
       // method verifies if the user is logged in or not
       // -> is called by Next-Auth when the midleware calls the `auth` method (exported below)
@@ -45,6 +45,9 @@ const authConfig: NextAuthConfig = {
       // Note: `jwt` is automatically set to `true` if no database is specified.
       strategy: 'jwt'
    },
+   pages: {
+      signIn: '/login',
+   },
 };
 
 export const { auth, handlers: { GET, POST } } = NextAuth(authConfig);

app/login/page.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import { Main } from '@/app/ui/Main';
+
+import { authConfig } from "@/app/lib/auth";
+import { SignInButton } from '../ui/SignInButton';
+
+export type Provider = {
+  id: string;
+  name: string;
+  type: string;
+  style: {
+    logo: string;
+    bg: string;
+    text: string;
+  };
+};
+
+export 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()
+
+ return (
+    <Main>
+      <h1 className="text-3xl font-bold">
+        <span className="text-neutral-50 mr-3">Što je pristiglo?</span>
+        <span className="text-indigo-400">Što je plaćeno?</span>
+        <span className="text-neutral-50 ml-3">Koliki su mi troškovi?</span>
+      </h1>
+      <p className="p mt-[1em] text-center">To su pitanja na koje ova jednostavna i besplatna aplikacija daje odgovore ...</p>
+      <p className="p mb-[1em] text-center">... isprobajte je i koristite potpuno besplatno!</p>
+      <span className="text-center">
+      {
+        Object.values(providers).map((provider) => (
+          <div key={provider.name}>
+            <SignInButton provider={provider} />
+          </div>
+        ))
+      }
+      </span>
+      <video className="m-auto h-[524px] w=[440px]" title="Team discussing work in the Slack app" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="hero.png">
+        <source src="/screencast.webm" type="video/webm" />
+      </video>
+    </Main>
+  );
+}
+
+export default Page;

app/ui/PageFooter.tsx

@@ -8,9 +8,9 @@ export const PageFooter: React.FC = () =>
             <div>
                 <div className="flex items-center gap-2">
                     <Image src="/icon4.png" alt="logo" width={64} height={64}></Image>
-                    <div className="font-title inline-flex text-3xl font-black ml-2">Bills Tracker</div>
+                    <div className="font-title inline-flex text-3xl font-black ml-2">Moje Režije</div>
                 </div>
-                <p className="text-base-content/70 mb-5">Web app for tracking home utility bills</p>
+                <p className="text-base-content/70 mb-5">Web aplikacija za vođenje evidencije o pristiglim i plaćenim režijskim troškovima</p>
                 <Link href="/" className="link link-hover">Home</Link>
                 <Link href="/policy/" className="link link-hover">Privacy Policy</Link>
                 <Link href="/terms/" className="link link-hover">Terms of Service</Link>

app/ui/PageHeader.tsx

@@ -3,5 +3,5 @@ import Link from "next/link";
 
 export const PageHeader = () =>
 <div className="navbar bg-base-100 mb-6">
-    <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Utility Bills Tracker</Link>
+    <Link className="btn btn-ghost text-xl" href="/"><Image src="/icon3.png" alt="logo" width={48} height={48} /> Moje Režije</Link>
 </div>

app/ui/SignInButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { signIn } from "next-auth/react"
+import { Button } from "@/app/ui/button";
+
+const providerLogo = (provider: {id:string, name:string}) => {
+    switch(provider.id) {
+        case "google": return "https://authjs.dev/img/providers/google.svg";
+        case "facebook": return "https://authjs.dev/img/providers/facebook.svg";
+        case "github": return "https://authjs.dev/img/providers/github.svg";
+        case "twitter": return "https://authjs.dev/img/providers/twitter.svg";
+        case "email": return "https://authjs.dev/img/providers/email.svg";
+        default: return "https://authjs.dev/img/providers/google.svg";
+    }
+}
+
+export const SignInButton:React.FC<{ provider: {id:string, name:string} }> = ({ provider }) =>
+<button className="btn btn-neutral" onClick={() => signIn(provider.id)}>
+    <img loading="lazy" height="24" width="24" id="provider-logo-dark" src={providerLogo(provider)} />
+    <span>Sign in with {provider.name}</span>
+</button>
+
+

middleware.ts

@@ -9,5 +9,5 @@ export default auth; // middleware will call NextAuth's `auth` method, which wil
  
 export const config = {
   // midleware will NOT be called for paths: ['/api/auth/*', '/_next/static/*', '/_next/image*']
-  matcher: ['/((?!api|policy|terms|_next/static|_next/image|.*\\.png$).*)'],
+  matcher: ['/((?!api|policy|terms|_next/static|_next/image|.*\\.png$|.*\\.webm$).*)'],
 };