update global (texte + logo)

Linkwarden/layouts/AuthRedirect.tsx

@@ -0,0 +1,84 @@
+import { ReactNode } from "react";
+import { useSession } from "next-auth/react";
+import Loader from "../components/Loader";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import useInitialData from "@/hooks/useInitialData";
+import useAccountStore from "@/store/account";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function AuthRedirect({ children }: Props) {
+  const router = useRouter();
+  const { status, data } = useSession();
+  const [redirect, setRedirect] = useState(true);
+  const { account } = useAccountStore();
+
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+  const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
+
+  useInitialData();
+
+  useEffect(() => {
+    if (!router.pathname.startsWith("/public")) {
+      if (
+        status === "authenticated" &&
+        account.id &&
+        !account.subscription?.active &&
+        stripeEnabled
+      ) {
+        router.push("/subscribe").then(() => {
+          setRedirect(false);
+        });
+      }
+      // Redirect to "/choose-username" if user is authenticated and is either a subscriber OR subscription is undefiend, and doesn't have a username
+      else if (
+        emailEnabled &&
+        status === "authenticated" &&
+        account.subscription?.active &&
+        stripeEnabled &&
+        account.id &&
+        !account.username
+      ) {
+        router.push("/choose-username").then(() => {
+          setRedirect(false);
+        });
+      } else if (
+        status === "authenticated" &&
+        account.id &&
+        (router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/subscribe" ||
+          router.pathname === "/choose-username" ||
+          router.pathname === "/forgot" ||
+          router.pathname === "/")
+      ) {
+        router.push("/dashboard").then(() => {
+          setRedirect(false);
+        });
+      } else if (
+        status === "unauthenticated" &&
+        !(
+          router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/forgot"
+        )
+      ) {
+        router.push("/login").then(() => {
+          setRedirect(false);
+        });
+      } else if (status === "loading") setRedirect(true);
+      else setRedirect(false);
+    } else {
+      setRedirect(false);
+    }
+  }, [status, account, router.pathname]);
+
+  if (status !== "loading" && !redirect) return <>{children}</>;
+  else return <></>;
+  // return <>{children}</>;
+}

Linkwarden/layouts/CenteredForm.tsx

@@ -0,0 +1,44 @@
+import useLocalSettingsStore from "@/store/localSettings";
+import Image from "next/image";
+import Link from "next/link";
+import React, { ReactNode, useEffect } from "react";
+
+interface Props {
+  text?: string;
+  children: ReactNode;
+}
+
+export default function CenteredForm({ text, children }: Props) {
+  const { settings } = useLocalSettingsStore();
+
+  return (
+    <div className="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center p-5">
+      <div className="m-auto flex flex-col gap-2 w-full">
+        {settings.theme ? (
+          <Image
+            src={`/linkwarden_${
+              settings.theme === "dark" ? "dark" : "light"
+            }.png`}
+            width={640}
+            height={136}
+            alt="Linkwarden"
+            className="h-12 w-fit mx-auto"
+          />
+        ) : undefined}
+        {text ? (
+          <p className="text-lg max-w-[30rem] min-w-80 w-full mx-auto font-semibold px-2 text-center">
+            {text}
+          </p>
+        ) : undefined}
+        {children}
+        <p className="text-center text-xs text-neutral mb-5">
+          © {new Date().getFullYear()}{" "}
+          <Link href="https://linkwarden.app" className="font-semibold">
+            Linkwarden
+          </Link>
+          . All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+}

Linkwarden/layouts/MainLayout.tsx

@@ -0,0 +1,59 @@
+import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
+import Sidebar from "@/components/Sidebar";
+import { ReactNode, useEffect, useState } from "react";
+import getLatestVersion from "@/lib/client/getLatestVersion";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function MainLayout({ children }: Props) {
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
+
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
+
+  useEffect(() => {
+    if (showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "true");
+      setShowAnnouncement(true);
+    } else if (!showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "false");
+      setShowAnnouncement(false);
+    }
+  }, [showAnnouncement]);
+
+  const toggleAnnouncementBar = () => {
+    setShowAnnouncement(!showAnnouncement);
+  };
+
+  return (
+    <>
+      {showAnnouncement ? (
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+      ) : undefined}
+
+      <div className="flex">
+        <div className="hidden lg:block">
+          <Sidebar
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
+        </div>
+
+        <div
+          className={`w-full sm:pb-0 pb-20 flex flex-col min-h-${
+            showAnnouncement ? "full" : "screen"
+          } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
+        >
+          <Navbar />
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

Linkwarden/layouts/SettingsLayout.tsx

@@ -0,0 +1,73 @@
+import SettingsSidebar from "@/components/SettingsSidebar";
+import React, { ReactNode, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import Link from "next/link";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function SettingsLayout({ children }: Props) {
+  const router = useRouter();
+
+  const [sidebar, setSidebar] = useState(false);
+
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [width]);
+
+  useEffect(() => {
+    setSidebar(false);
+  }, [router]);
+
+  const toggleSidebar = () => {
+    setSidebar(!sidebar);
+  };
+
+  return (
+    <>
+      <div className="flex max-w-screen-md mx-auto">
+        <div className="hidden lg:block fixed h-screen">
+          <SettingsSidebar />
+        </div>
+
+        <div className="w-full min-h-screen p-5 lg:ml-64">
+          <div className="gap-2 inline-flex mr-3">
+            <div
+              onClick={toggleSidebar}
+              className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
+            >
+              <i className="bi-list text-2xl leading-none"></i>
+            </div>
+
+            <Link
+              href="/dashboard"
+              className="text-neutral btn btn-square btn-sm btn-ghost"
+            >
+              <i className="bi-chevron-left text-xl"></i>
+            </Link>
+          </div>
+
+          {children}
+
+          {sidebar ? (
+            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
+              <ClickAwayHandler
+                className="h-full"
+                onClickOutside={toggleSidebar}
+              >
+                <div className="slide-right h-full shadow-lg">
+                  <SettingsSidebar />
+                </div>
+              </ClickAwayHandler>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+}