Merge branch 'release/1.29.0'

app/[locale]/login/page.tsx

@@ -1,10 +1,13 @@
-import { FC } from 'react';
+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;
@@ -37,6 +40,12 @@ 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>
@@ -47,14 +56,32 @@ const Page:FC = async () => {
       </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>
-      <span className="flex justify-center">
       {
-        Object.values(providers).map((provider) => (
-          <div key={provider.name}>
-            <SignInButton provider={provider} />
+        // 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" />

app/i18n.ts

@@ -10,7 +10,7 @@ export const localeNames:Record<string,string> = {
   hr: 'Hrvatski'
 };
 
-export const defaultLocale = 'en';
+export const defaultLocale = 'hr';
 
 /** Templating function type as returned by `useTemplate` and `getTranslations` */
 export type IntlTemplateFn =

docker-compose-deploy.yml

@@ -9,7 +9,7 @@ networks:
 
 services:
   web-app:
-    image: utility-bills-tracker:1.28.0
+    image: utility-bills-tracker:1.29.0
     networks:
       - traefik-network
       - mongo-network

messages/en.json

@@ -17,6 +17,7 @@
       "title-3": "How much are my expenses?",
       "text-1": "These are the questions this simple and free app will help you with ...",
       "text-2": "... try it & use it completly free!",
+      "in-app-browser-warning": "<strong>WARNING:</strong> we detected you're using an in-app browser.<br></br>This might prevent this app to work properly.<hint>Please use a regular browser to sign in (rezije.app) 😉</hint>",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
       "image-url": "/hero.png",
       "video-title": "Demo osnovnih koraka u aplikaciji"

messages/hr.json

@@ -15,15 +15,16 @@
       "title-1": "Koji računi su stigli?",
       "title-2": "Koji su plaćeni?",
       "title-3": "Koliki su mi troškovi?",
-      "text-1": "To su pitanja na koja će vam ova jednostavna aplikacija odgovoriti ...",
-      "text-2": "... isprobajte je i koristite potpuno besplatno!",
+      "text-1": "To su pitanja na koja će ti ova jednostavna aplikacija odgovoriti ...",
+      "text-2": "... isprobaj je i koristi potpuno besplatno!",
+      "in-app-browser-warning": "<strong>UPOZORENJE!</strong><br></br>Detektirali smo da je web stranica otvorena u in-app pregledniku. To može dovesti do probleme u radu ove web aplikacije. <hint>Molimo otvori web aplikaciju u normalnom web pregledniku (rezije.app) 😉</hint>",
       "video-url": "/welcome-demo-vp9-25fps-1500bps.webm",
       "image-url": "/hero.png",
       "video-title": "Demo osnovnih koraka u aplikaciji"
     },
     "card-1": {
       "title": "Prijenos režija u idući mjesec",
-      "text": "Sve vaše nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne morate svaki mjesec ponovno unositi iste podatke.",
+      "text": "Sve tvoje nekretnine i pripadajuće režije se automatski prenose u idući mjesec, tako da ne moraš svaki mjesec ponovno unositi iste podatke.",
       "video-url": "/kopiranje-mjeseca-demo.webm",
       "image-url": "/status-color-demo.png",
       "video-title": "Demo kopiranja mjeseca"

package-lock.json

@@ -14,6 +14,7 @@
         "bcrypt": "^5.1.1",
         "clsx": "^2.0.0",
         "daisyui": "^4.5.0",
+        "is-ua-webview": "^1.1.2",
         "mongodb": "^6.3.0",
         "next": "^14.0.2",
         "next-auth": "^5.0.0-beta.4",
@@ -4803,6 +4804,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-ua-webview": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-ua-webview/-/is-ua-webview-1.1.2.tgz",
+      "integrity": "sha512-xX3WpvJGmT0EjmGRQxs4AgaBd4EWNr4lWCWGOgd40by6DWOQZN9RIOCsEaVp41crZqzWr8AsM+2x8UC2ZAuLPA=="
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",
     "daisyui": "^4.5.0",
+    "is-ua-webview": "^1.1.2",
     "mongodb": "^6.3.0",
     "next": "^14.0.2",
     "next-auth": "^5.0.0-beta.4",