add https mixed mode request warning

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 && (
+        <Alert variant="destructive">
+            <ShieldEllipsis className="h-4 w-4"/>
+            <AlertTitle>HTTPS Session Detected</AlertTitle>
+            <AlertDescription>
+                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.
+            </AlertDescription>
+        </Alert>
+    ));
+}

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 (<>
+        <HttpsMixedModeRequestWarning/>
         <ServerAddForm/>
-        
+
         {props.servers.map(s =>
             <ContextMenu key={s.id}>
                 <ContextMenuTrigger>
@@ -93,7 +95,7 @@ function ServerList(props: { servers: AimeServer[] | undefined }) {
 function ServerAddForm() {
     const navigate = useNavigate();
     const location = useLocation();
-    
+
     const form = useForm<z.infer<typeof serverAdditionSchema>>({
         resolver: zodResolver(serverAdditionSchema),
         defaultValues: {
@@ -130,7 +132,7 @@ function ServerAddForm() {
             }
         })();
     }, [location, navigate, form]);
-    
+
     async function onSubmit(values: z.infer<typeof serverAdditionSchema>) {
         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 && (<>
-                    <div></div>
-                    <Alert variant="blank" className="text-orange-500 border-orange-500">
-                        <ShieldAlert className="h-5 w-5 text-orange-500"/>
-                        <AlertTitle>HTTPS Warning</AlertTitle>
-                        <AlertDescription>
-                            AMNet doesn&apos;t support HTTPS out-the-box.
-                            If you&apos;re using HTTPS, ensure a reverse-proxy or
-                            <a target="_blank"
-                               className="underline ml-1"
-                               href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/httpsys">
-                                HTTP.SYS <SquareArrowOutUpRight className="inline h-3 w-3"/>
-                            </a> has been configured and a valid, trusted SSL certificate has been configured.
-                        </AlertDescription>
-                    </Alert>
-                </>
-            )}
-
             <Form {...form}>
                 <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-3 items-start">
                     <FormField
@@ -211,11 +195,29 @@ function ServerAddForm() {
                             </FormItem>
                         )}
                     />
-                    <Button type="submit" disabled={blockSubmit} variant="outline" size="icon" className="flex-shrink-0">
+                    <Button type="submit" disabled={blockSubmit} variant="outline" size="icon"
+                            className="flex-shrink-0">
                         <Plus className="h-4 w-4"/>
                     </Button>
                 </form>
             </Form>
+
+            {showHttpsWarning && (<>
+                    <Alert variant="blank" className="text-orange-500 border-orange-500">
+                        <ShieldAlert className="h-5 w-5 text-orange-500"/>
+                        <AlertTitle>HTTPS Warning</AlertTitle>
+                        <AlertDescription>
+                            AMNet doesn&apos;t support HTTPS out-the-box.
+                            If you&apos;re using HTTPS, ensure a reverse-proxy or
+                            <a target="_blank"
+                               className="underline ml-1"
+                               href="https://learn.microsoft.com/en-us/aspnet/core/fundamentals/servers/httpsys">
+                                HTTP.SYS <SquareArrowOutUpRight className="inline h-3 w-3"/>
+                            </a> has been configured and a valid, trusted SSL certificate has been configured.
+                        </AlertDescription>
+                    </Alert>
+                </>
+            )}
         </>
     );
 }