diff --git a/aimenet-web/src/components/https-mixed-mode-request-warning.tsx b/aimenet-web/src/components/https-mixed-mode-request-warning.tsx
new file mode 100644
index 0000000..fd3d3dd
--- /dev/null
+++ b/aimenet-web/src/components/https-mixed-mode-request-warning.tsx
@@ -0,0 +1,22 @@
+import {useEffect, useState} from "react";
+import {ShieldEllipsis} from "lucide-react";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
+
+export function HttpsMixedModeRequestWarning() {
+ const [showWarning, setShowWarning] = useState(false);
+
+ useEffect(() => {
+ setShowWarning(location.protocol === "https:");
+ }, []);
+
+ return (showWarning && (
+
+
+ HTTPS Session Detected
+
+ Using HTTPS will disable any servers using HTTP unless you enable mixed-mode requests.
+ Consider switching to HTTP if you're having issues connecting to servers.
+
+
+ ));
+}
\ No newline at end of file
diff --git a/aimenet-web/src/pages/server-listing.tsx b/aimenet-web/src/pages/server-listing.tsx
index 06f5d2f..20f2442 100644
--- a/aimenet-web/src/pages/server-listing.tsx
+++ b/aimenet-web/src/pages/server-listing.tsx
@@ -22,6 +22,7 @@ import {Button} from "@/components/ui/button";
import {LoadingIndicator} from "@/components/loading-indicator";
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
import {Form, FormControl, FormField, FormItem, FormMessage} from "@/components/ui/form";
+import {HttpsMixedModeRequestWarning} from "@/components/https-mixed-mode-request-warning";
import {
ContextMenu,
ContextMenuContent,
@@ -30,10 +31,10 @@ import {
ContextMenuTrigger
} from "@/components/ui/context-menu";
-import {AMFooter} from "@/components/am-footer.tsx";
-import {AMHeader} from "@/components/am-header.tsx";
-import {AMNET_API_VERSION} from "@/lib/aime-net.ts";
-import {AMCard, AMCardDetail} from "@/components/am-card.tsx";
+import {AMFooter} from "@/components/am-footer";
+import {AMHeader} from "@/components/am-header";
+import {AMNET_API_VERSION} from "@/lib/aime-net";
+import {AMCard, AMCardDetail} from "@/components/am-card";
const serverAdditionSchema = z.object({
address: z.string().startsWith("http")
@@ -59,8 +60,9 @@ function ServerList(props: { servers: AimeServer[] | undefined }) {
}
return (<>
+
-
+
{props.servers.map(s =>
@@ -93,7 +95,7 @@ function ServerList(props: { servers: AimeServer[] | undefined }) {
function ServerAddForm() {
const navigate = useNavigate();
const location = useLocation();
-
+
const form = useForm>({
resolver: zodResolver(serverAdditionSchema),
defaultValues: {
@@ -130,7 +132,7 @@ function ServerAddForm() {
}
})();
}, [location, navigate, form]);
-
+
async function onSubmit(values: z.infer) {
const existingServer = await db.servers
.where("address")
@@ -162,7 +164,7 @@ function ServerAddForm() {
validateAddress(event.target.value);
callback(event);
}
-
+
function validateAddress(address: string) {
try {
const url = new URL(address);
@@ -177,24 +179,6 @@ function ServerAddForm() {
return (
<>
- {showHttpsWarning && (<>
-
-
-
- HTTPS Warning
-
- AMNet doesn't support HTTPS out-the-box.
- If you're using HTTPS, ensure a reverse-proxy or
-
- HTTP.SYS
- has been configured and a valid, trusted SSL certificate has been configured.
-
-
- >
- )}
-
+
+ {showHttpsWarning && (<>
+
+
+ HTTPS Warning
+
+ AMNet doesn't support HTTPS out-the-box.
+ If you're using HTTPS, ensure a reverse-proxy or
+
+ HTTP.SYS
+ has been configured and a valid, trusted SSL certificate has been configured.
+
+
+ >
+ )}
>
);
}