allow to update space while project loaded

server.js

@@ -120,7 +120,7 @@ app.get("/api/@me", checkUser, async (req, res) => {
 
 app.post("/api/deploy", checkUser, async (req, res) => {
   const { html, title, path } = req.body;
-  if (!html || !title) {
+  if (!html || (!path && !title)) {
     return res.status(400).send({
       ok: false,
       message: "Missing required fields",
@@ -358,6 +358,7 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
     const space = await spaceInfo({
       name: repoId,
       accessToken: token,
+      additionalFields: ["author"],
     });
 
     if (!space || space.sdk !== "static" || space.private) {
@@ -378,9 +379,28 @@ app.get("/api/remix/:username/:repo", async (req, res) => {
     // remove the last p tag including this url https://enzostvs-deepsite.hf.space
     html = html.replace(getPTag(repoId), "");
 
+    let user = null;
+
+    if (token) {
+      const request_user = await fetch(
+        "https://huggingface.co/oauth/userinfo",
+        {
+          headers: {
+            Authorization: `Bearer ${hf_token}`,
+          },
+        }
+      )
+        .then((res) => res.json())
+        .catch(() => null);
+
+      user = request_user;
+    }
+
     res.status(200).send({
       ok: true,
       html,
+      isOwner: space.author === user?.preferred_username,
+      path: repoId,
     });
   } catch (error) {
     return res.status(500).send({

src/components/App.tsx

@@ -18,7 +18,6 @@ import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "./../../utils/types";
 import Preview from "./preview/preview";
-import LoadButton from "./load-button/load-button";
 
 function App() {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
@@ -183,10 +182,7 @@ function App() {
           }
         }}
       >
-        <div className="flex items-center justify-end gap-5">
-          <LoadButton auth={auth} setHtml={setHtml} />
-          <DeployButton html={html} error={error} auth={auth} />
-        </div>
+        <DeployButton html={html} error={error} auth={auth} setHtml={setHtml} />
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div

src/components/deploy-button/deploy-button.tsx

@@ -8,6 +8,7 @@ import SpaceIcon from "@/assets/space.svg";
 import Loading from "../loading/loading";
 import Login from "../login/login";
 import { Auth } from "./../../../utils/types";
+import LoadButton from "../load-button/load-button";
 
 const MsgToast = ({ url }: { url: string }) => (
   <div className="w-full flex items-center justify-center gap-3">
@@ -27,10 +28,12 @@ function DeployButton({
   html,
   error = false,
   auth,
+  setHtml,
 }: {
   html: string;
   error: boolean;
   auth?: Auth;
+  setHtml: (html: string) => void;
 }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -78,128 +81,131 @@ function DeployButton({
   };
 
   return (
-    <div className="relative flex items-center justify-end">
-      {auth && (
-        <>
-          <button
-            className="mr-2 cursor-pointer"
-            onClick={() => {
-              if (confirm("Are you sure you want to log out?")) {
-                // go to /auth/logout page
-                window.location.href = "/auth/logout";
-              }
-            }}
-          >
-            <FaPowerOff className="text-lg text-red-500" />
-          </button>
-          <p className="mr-3 text-xs lg:text-sm text-gray-300">
-            <span className="max-lg:hidden">Connected as </span>
-            <a
-              href={`https://huggingface.co/${auth.preferred_username}`}
-              target="_blank"
-              className="underline hover:text-white"
+    <div className="flex items-center justify-end gap-5">
+      <LoadButton auth={auth} setHtml={setHtml} setPath={setPath} />
+      <div className="relative flex items-center justify-end">
+        {auth && (
+          <>
+            <button
+              className="mr-2 cursor-pointer"
+              onClick={() => {
+                if (confirm("Are you sure you want to log out?")) {
+                  // go to /auth/logout page
+                  window.location.href = "/auth/logout";
+                }
+              }}
             >
-              {auth.preferred_username}
-            </a>
-          </p>
-        </>
-      )}
-      <button
-        className={classNames(
-          "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
-          {
-            "bg-pink-400": open,
-            "bg-pink-500": !open,
-          }
-        )}
-        onClick={() => setOpen(!open)}
-      >
-        {path ? "Update Space" : "Deploy to Space"}
-      </button>
-      <div
-        className={classNames(
-          "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-        onClick={() => setOpen(false)}
-      ></div>
-      <div
-        className={classNames(
-          "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
-          {
-            "opacity-0 pointer-events-none": !open,
-          }
-        )}
-      >
-        {!auth ? (
-          <Login html={html}>
-            <p className="text-gray-500 text-sm mb-3">
-              Host this project for free and share it with your friends.
+              <FaPowerOff className="text-lg text-red-500" />
+            </button>
+            <p className="mr-3 text-xs lg:text-sm text-gray-300">
+              <span className="max-lg:hidden">Connected as </span>
+              <a
+                href={`https://huggingface.co/${auth.preferred_username}`}
+                target="_blank"
+                className="underline hover:text-white"
+              >
+                {auth.preferred_username}
+              </a>
             </p>
-          </Login>
-        ) : (
-          <>
-            <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
-              <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
-                <img src={SpaceIcon} alt="Space Icon" className="size-4" />
-                Space
-              </span>
-              Configure Deployment
-            </header>
-            <main className="px-4 pt-3 pb-4 space-y-3">
-              <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
-                {path ? (
-                  <span>
-                    Your space is live at{" "}
-                    <a
-                      href={`https://huggingface.co/spaces/${path}`}
-                      target="_blank"
-                      className="underline hover:text-amber-700"
-                    >
-                      huggingface.co/{path}
-                    </a>
-                    . You can update it by deploying again.
-                  </span>
-                ) : (
-                  "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
-                )}
-              </p>
-              {!path && (
-                <label className="block">
-                  <p className="text-gray-600 text-sm font-medium mb-1.5">
-                    Space Title
-                  </p>
-                  <input
-                    type="text"
-                    value={config.title}
-                    className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
-                    placeholder="My Awesome Space"
-                    onChange={(e) =>
-                      setConfig({ ...config, title: e.target.value })
-                    }
-                  />
-                </label>
-              )}
-              {error && (
-                <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
-                  Your code has errors. Fix them before deploying.
-                </p>
-              )}
-              <div className="pt-2 text-right">
-                <button
-                  disabled={error || loading || !config.title}
-                  className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
-                  onClick={createSpace}
-                >
-                  {path ? "Update Space" : "Create Space"}
-                  {loading && <Loading />}
-                </button>
-              </div>
-            </main>
           </>
         )}
+        <button
+          className={classNames(
+            "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
+            {
+              "bg-pink-400": open,
+              "bg-pink-500": !open,
+            }
+          )}
+          onClick={() => setOpen(!open)}
+        >
+          {path ? "Update Space" : "Deploy to Space"}
+        </button>
+        <div
+          className={classNames(
+            "h-screen w-screen bg-black/20 fixed left-0 top-0 z-10",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+          onClick={() => setOpen(false)}
+        ></div>
+        <div
+          className={classNames(
+            "absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden",
+            {
+              "opacity-0 pointer-events-none": !open,
+            }
+          )}
+        >
+          {!auth ? (
+            <Login html={html}>
+              <p className="text-gray-500 text-sm mb-3">
+                Host this project for free and share it with your friends.
+              </p>
+            </Login>
+          ) : (
+            <>
+              <header className="flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700">
+                <span className="text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5">
+                  <img src={SpaceIcon} alt="Space Icon" className="size-4" />
+                  Space
+                </span>
+                Configure Deployment
+              </header>
+              <main className="px-4 pt-3 pb-4 space-y-3">
+                <p className="text-xs text-amber-600 bg-amber-500/10 rounded-md p-2">
+                  {path ? (
+                    <span>
+                      Your space is live at{" "}
+                      <a
+                        href={`https://huggingface.co/spaces/${path}`}
+                        target="_blank"
+                        className="underline hover:text-amber-700"
+                      >
+                        huggingface.co/{path}
+                      </a>
+                      . You can update it by deploying again.
+                    </span>
+                  ) : (
+                    "Deploy your project to a space on the Hub. Spaces are a way to share your project with the world."
+                  )}
+                </p>
+                {!path && (
+                  <label className="block">
+                    <p className="text-gray-600 text-sm font-medium mb-1.5">
+                      Space Title
+                    </p>
+                    <input
+                      type="text"
+                      value={config.title}
+                      className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
+                      placeholder="My Awesome Space"
+                      onChange={(e) =>
+                        setConfig({ ...config, title: e.target.value })
+                      }
+                    />
+                  </label>
+                )}
+                {error && (
+                  <p className="text-red-500 text-xs bg-red-500/10 rounded-md p-2">
+                    Your code has errors. Fix them before deploying.
+                  </p>
+                )}
+                <div className="pt-2 text-right">
+                  <button
+                    disabled={error || loading || (!path && !config.title)}
+                    className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
+                    onClick={createSpace}
+                  >
+                    {path ? "Update Space" : "Create Space"}
+                    {loading && <Loading />}
+                  </button>
+                </div>
+              </main>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/load-button/load-button.tsx

@@ -9,25 +9,32 @@ import { Auth } from "../../../utils/types";
 function LoadButton({
   auth,
   setHtml,
+  setPath,
 }: {
   auth?: Auth;
   setHtml: (html: string) => void;
+  setPath: (path?: string) => void;
 }) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
-  const [path, setPath] = useState<string | undefined>(undefined);
+  const [url, setUrl] = useState<string | undefined>(undefined);
 
   const loadSpace = async () => {
     setLoading(true);
     try {
-      const res = await fetch(`/api/remix/${path}`);
+      const res = await fetch(`/api/remix/${url}`);
       const data = await res.json();
       if (res.ok) {
         if (data.html) {
           setHtml(data.html);
           toast.success("Project loaded successfully.");
         }
+        if (data.isOwner) {
+          setPath(data.path);
+        } else {
+          setPath(undefined);
+        }
         setOpen(false);
       } else {
         toast.error(data.message);
@@ -85,14 +92,14 @@ function LoadButton({
               </p>
               <input
                 type="text"
-                value={path}
+                value={url}
                 className="mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm"
                 placeholder="https://huggingface.co/spaces/username/space-name"
-                onChange={(e) => setPath(e.target.value)}
+                onChange={(e) => setUrl(e.target.value)}
                 onFocus={() => setError(false)}
                 onBlur={(e) => {
                   const pathParts = e.target.value.split("/");
-                  setPath(
+                  setUrl(
                     `${pathParts[pathParts.length - 2]}/${
                       pathParts[pathParts.length - 1]
                     }`
@@ -108,7 +115,7 @@ function LoadButton({
             )}
             <div className="pt-2 text-right">
               <button
-                disabled={error || loading || !path}
+                disabled={error || loading || !url}
                 className="relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300"
                 onClick={loadSpace}
               >