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. + + + + )} ); }