Validate that bare servers can actually function and fix CSS.

src/locales/en.json

@@ -75,5 +75,6 @@
     "catppuccinFrappe": "Catppuccin Frappe",
     "catppuccinLatte": "Catppuccin Latte"
   },
-  "clipboard": "URL copied to clipboard!"
+  "clipboard": "URL copied to clipboard!",
+  "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked."
 }

src/locales/es.json

@@ -74,5 +74,6 @@
     "catppuccinFrappe": "Catppuccin Frappe",
     "catppuccinLatte": "Catppuccin Latte"
   },
-  "clipboard": "¡URL copiada al portapapeles!"
+  "clipboard": "¡URL copiada al portapapeles!",
+  "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado."
 }

src/locales/ja.json

@@ -74,5 +74,6 @@
     "catppuccinFrappe": "Catppuccin Frappe",
     "catppuccinLatte": "Catppuccin Latte"
   },
-  "clipboard": "URL がクリップボードにコピーされました!"
+  "clipboard": "URL がクリップボードにコピーされました!",
+  "bareError": "それはうまくいきませんでした。Bare サーバーが存在し、ブロックされていないことを再確認してください。"
 }

src/pages/Settings/BareInput.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "preact/hooks";
 import { set } from "../../util/IDB";
 import { uninstallServiceWorkers } from "../../util/SWHelper";
 import { useTranslation } from "react-i18next";
+import { ToastContainer, toast } from "react-toastify";
+import { BareTest } from "./BareTest";
 
 interface BareInputProps {
   placeholder: string;
@@ -31,14 +33,30 @@ function BareInput(props: BareInputProps) {
     return finalUrl;
   }
   function handleChange() {
-    const url = validateUrl((document.getElementById("input") as HTMLInputElement).value);
-    setInputValue((document.getElementById("input") as HTMLInputElement).value);
+    const url = validateUrl(
+      (document.getElementById("input") as HTMLInputElement).value
+    );
+    BareTest(url + "v3/").then((result) => {
+      if (result) {
+        setInputValue(
+          (document.getElementById("input") as HTMLInputElement).value
+        );
         set(props.storageKey, url);
         localStorage.setItem(props.storageKey, url);
         uninstallServiceWorkers();
         window.location.reload();
+      } else {
+        (document.getElementById("input") as HTMLInputElement).value =
+          localStorage.getItem("bare") || "/bare/";
+        toast(t("bareError"), {
+          type: "error"
+        });
+      }
+    });
   }
   return (
+    <div>
+      <ToastContainer position="bottom-right" theme="dark" />
       <div className="flex flex-col items-center">
         <input
           type="text"
@@ -47,12 +65,14 @@ function BareInput(props: BareInputProps) {
           id="input"
           className="font-roboto flex h-14 w-56 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl"
         />
-      <div className="font-roboto items-center justify-center flex h-4 w-24 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl" 
+        <div
+          className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg"
           onClick={handleChange}
         >
           {t("settings.bare.select")}
         </div>
       </div>
+    </div>
   );
 }
 

src/pages/Settings/BareTest.tsx

@@ -0,0 +1,29 @@
+export function BareTest(bareUrl) {
+  const headers = new Headers({
+    "x-bare-url": "https://www.google.com",
+    "X-Bare-Headers": JSON.stringify({
+      Accept:
+        "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
+    })
+  });
+
+  return fetch(bareUrl, {
+    method: "GET",
+    headers: headers
+  })
+    .then((response) => {
+      if (
+        response.headers.get("x-bare-status") === "200" ||
+        response.headers.get("x-bare-status") === "302"
+      ) {
+        return true;
+      } else {
+        // the site is a real site but doesn't act like a bare server
+        return false;
+      }
+    })
+    .catch((error) => {
+      // incase the site doesn't exist
+      return false;
+    });
+}

src/pages/Settings/Customization.tsx

@@ -27,7 +27,7 @@ function Customization({ id, active }) {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-col items-center justify-center text-center"
       >
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.theme.title")}
           </div>

src/pages/Settings/Proxy.tsx

@@ -39,7 +39,7 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
       >
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxy.title")}
           </div>
@@ -48,7 +48,7 @@ const Proxy = ({ id, active }) => {
           </div>
           <Dropdown storageKey="proxy" options={engines} refresh={false} />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.proxymodes.title")}
           </div>
@@ -61,7 +61,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.search.title")}
           </div>
@@ -74,7 +74,7 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
-        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-4 text-center">
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
             {t("settings.bare.title")}
           </div>