Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

568

enzostvs HF Staff commited on Jan 13

Commit

3d6f13d

1 Parent(s): c3a6273

UI for not authorized domain

Browse files

Files changed (2) hide show

app/layout.tsx +2 -16
components/not-authorized.tsx +124 -26

app/layout.tsx CHANGED Viewed

@@ -2,7 +2,6 @@ import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { NextStepProvider } from "nextstepjs";
 import Script from "next/script";
-import { headers } from "next/headers";
 import "@/app/globals.css";
 import { ThemeProvider } from "@/components/providers/theme";
@@ -10,7 +9,6 @@ import { AuthProvider } from "@/components/providers/session";
 import { Toaster } from "@/components/ui/sonner";
 import { ReactQueryProvider } from "@/components/providers/react-query";
 import { generateSEO, generateStructuredData } from "@/lib/seo";
-import { ALLOWED_DOMAINS } from "@/lib/utils";
 import { NotAuthorizedDomain } from "@/components/not-authorized";
 const geistSans = Geist({
@@ -56,13 +54,6 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const headersList = await headers();
-  const hostname = (
-    headersList.get("x-forwarded-host") ??
-    headersList.get("host") ??
-    ""
-  ).split(":")[0];
   const structuredData = generateStructuredData("WebApplication", {
     name: "DeepSite",
     description: "Build websites with AI, no code required",
@@ -73,8 +64,6 @@ export default async function RootLayout({
     url: "https://huggingface.co/deepsite",
   });
-  const isAllowedDomain = ALLOWED_DOMAINS.includes(hostname);
   return (
     <html lang="en" suppressHydrationWarning>
       <body
@@ -107,11 +96,8 @@ export default async function RootLayout({
               disableTransitionOnChange
             >
               <NextStepProvider>
-                {isAllowedDomain ? (
-                  children
-                ) : (
-                  <NotAuthorizedDomain hostname={hostname} />
-                )}
               </NextStepProvider>
             </ThemeProvider>
           </ReactQueryProvider>

 import { Geist, Geist_Mono } from "next/font/google";
 import { NextStepProvider } from "nextstepjs";
 import Script from "next/script";
 import "@/app/globals.css";
 import { ThemeProvider } from "@/components/providers/theme";
 import { Toaster } from "@/components/ui/sonner";
 import { ReactQueryProvider } from "@/components/providers/react-query";
 import { generateSEO, generateStructuredData } from "@/lib/seo";
 import { NotAuthorizedDomain } from "@/components/not-authorized";
 const geistSans = Geist({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const structuredData = generateStructuredData("WebApplication", {
     name: "DeepSite",
     description: "Build websites with AI, no code required",
     url: "https://huggingface.co/deepsite",
   });
   return (
     <html lang="en" suppressHydrationWarning>
       <body
               disableTransitionOnChange
             >
               <NextStepProvider>
+                {children}
+                <NotAuthorizedDomain />
               </NextStepProvider>
             </ThemeProvider>
           </ReactQueryProvider>

components/not-authorized.tsx CHANGED Viewed

@@ -1,33 +1,131 @@
 import Image from "next/image";
 import { Button } from "./ui/button";
 import Link from "next/link";
-export const NotAuthorizedDomain = ({ hostname }: { hostname: string }) => {
   return (
-    <section className="h-screen w-full flex items-center justify-center">
-      <div className="max-w-md text-center p-6">
-        <Image
-          src="/logo.svg"
-          alt="DeepSite"
-          width={48}
-          height={48}
-          className="mb-6 mx-auto"
-        />
-        <h1 className="text-3xl font-bold mb-4">Access Denied</h1>
-        <p className="text-lg text-muted-foreground mb-6">
-          Unfortunately, you don&apos;t have access to DeepSite from this
-          domain:{" "}
-          <span className="font-mono font-semibold bg-indigo-500/10 border-2 border-indigo-500/10 text-indigo-500 text-base px-2 py-1 rounded-md">
-            {hostname}
-          </span>
-          .
-        </p>
-        <Link href="https://huggingface.co/deepsite" target="_blank">
-          <Button size="lg" className="text-base!">
-            Go to DeepSite
-          </Button>
-        </Link>
-      </div>
-    </section>
   );
 };

+"use client";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import { Button } from "./ui/button";
 import Link from "next/link";
+import { useMount } from "react-use";
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
+export const NotAuthorizedDomain = () => {
+  const [open, setOpen] = useState(false);
+  useMount(() => {
+    const isAllowedDomain = (hostname: string) => {
+      const host = hostname.toLowerCase();
+      return (
+        host.endsWith(".huggingface.co") ||
+        host.endsWith(".hf.co") ||
+        host === "huggingface.co" ||
+        host === "hf.co" ||
+        host === "enzostvs-deepsite.hf.space" ||
+        host === "huggingface.co/deepsite"
+      );
+    };
+    const isInIframe = () => {
+      try {
+        return window.self !== window.top;
+      } catch {
+        return true;
+      }
+    };
+    const isEmbedded = () => {
+      try {
+        return window.location !== window.parent.location;
+      } catch {
+        return true;
+      }
+    };
+    const addCanonicalUrl = () => {
+      const existingCanonical = document.querySelector('link[rel="canonical"]');
+      if (existingCanonical) {
+        existingCanonical.remove();
+      }
+      const canonical = document.createElement("link");
+      canonical.rel = "canonical";
+      canonical.href = window.location.href;
+      document.head.appendChild(canonical);
+      if (isInIframe() || isEmbedded()) {
+        try {
+          const parentHostname = document.referrer
+            ? new URL(document.referrer).hostname
+            : null;
+          if (parentHostname && !isAllowedDomain(parentHostname)) {
+            const noIndexMeta = document.createElement("meta");
+            noIndexMeta.name = "robots";
+            noIndexMeta.content = "noindex, nofollow";
+            document.head.appendChild(noIndexMeta);
+          }
+        } catch (error) {
+          console.debug(
+            "SEO: Could not determine parent domain for iframe indexing rules"
+          );
+        }
+      }
+    };
+    const shouldShowWarning = () => {
+      if (!isInIframe() && !isEmbedded()) {
+        return false; // Not in an iframe
+      }
+      try {
+        const parentHostname = window.parent.location.hostname;
+        return !isAllowedDomain(parentHostname);
+      } catch {
+        try {
+          if (document.referrer) {
+            const referrerUrl = new URL(document.referrer);
+            return !isAllowedDomain(referrerUrl.hostname);
+          }
+        } catch {}
+        return true;
+      }
+    };
+    addCanonicalUrl();
+    if (shouldShowWarning()) {
+      setOpen(true);
+    }
+  });
   return (
+    <Dialog open={open}>
+      <DialogContent
+        showCloseButton={false}
+        className="lg:min-w-4xl w-full rounded-3xl! p-0! overflow-hidden"
+      >
+        <DialogTitle className="hidden" />
+        <div className="max-w-md mx-auto text-center px-6 py-12">
+          <Image
+            src="/logo.svg"
+            alt="DeepSite"
+            width={48}
+            height={48}
+            className="mb-6 mx-auto"
+          />
+          <h1 className="text-3xl font-bold mb-4">Access Denied</h1>
+          <p className="text-lg text-muted-foreground mb-6">
+            Unfortunately, you don&apos;t have access to DeepSite from this
+            domain:{" "}
+            <span className="font-mono font-semibold bg-indigo-500/10 border-2 border-indigo-500/10 text-indigo-500 text-base px-2 py-1 rounded-md">
+              {window.location.hostname}
+            </span>
+            .
+          </p>
+          <Link href="https://huggingface.co/deepsite" target="_blank">
+            <Button size="lg" className="text-base!">
+              Go to DeepSite
+            </Button>
+          </Link>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 };