Add hosted instance link alert

HOSTED.md

@@ -0,0 +1,16 @@
+# Hosted Instances
+
+In order to share public links (accessible from anybody on the internet) you need a hosted instance. You can use a commercial service or self-host your own instance.
+
+## Commercial Services
+
+| Service                                | How To                                                        | Sign Up Link                           | Free To Try        |
+| -------------------------------------- | ------------------------------------------------------------- | -------------------------------------- | ------------------ |
+| [WebODM Lightning](https://webodm.net) | [Guide](https://docs.webodm.net/how-to/import-existing-tasks) | [Sign Up](https://webodm.net/register) | :heavy_check_mark: |
+|                                        |                                                               |                                        |                    |
+
+> **Commercial Service Providers:_**  To get your service listed here, please open a pull request.
+ 
+## Self-Host
+
+Pick a cloud service provider (e.g. [DigitalOcean](https://www.digitalocean.com/)) and [install WebODM](https://github.com/OpenDroneMap/WebODM?tab=readme-ov-file#run-it-on-the-cloud-google-compute-amazon-aws). Then import your tasks on the newly created instance in order to share links with others.

app/static/app/js/components/SharePopup.jsx

@@ -8,7 +8,8 @@ import QRCode from 'qrcode.react';
 import update from 'immutability-helper';
 import $ from 'jquery';
 import PluginsAPI from '../classes/plugins/API';
-import { _ } from '../classes/gettext';
+import { _, interpolate } from '../classes/gettext';
+import Storage from '../classes/Storage';
 
 class SharePopup extends React.Component{
   static propTypes = {
@@ -33,7 +34,8 @@ class SharePopup extends React.Component{
       error: "",
       showQR: false,
       linkControls: [], // coming from plugins,
-      relShareLink: this.getRelShareLink()
+      relShareLink: this.getRelShareLink(),
+      localLinkAlertDismissed: !!Storage.getItem("local_link_alert_dismissed")
     };
 
     this.handleEnableSharing = this.handleEnableSharing.bind(this);
@@ -117,6 +119,21 @@ class SharePopup extends React.Component{
     this.setState({showQR: !this.state.showQR});
   }
 
+  showLocalLinkAlert = () => {
+    const link = Utils.absoluteUrl("/");
+    return !this.state.localLinkAlertDismissed && 
+                      (link.indexOf("localhost") !== -1 || 
+                       link.indexOf("192.168.") !== -1 || 
+                       link.indexOf("0.0.0.0") !== -1 || 
+                       link.indexOf("127.0.0.1") !== -1 || 
+                       link.indexOf("::1") !== -1);
+  }
+
+  hideLocalLinkAlert = () => {
+    Storage.setItem("local_link_alert_dismissed", "1");
+    this.setState({localLinkAlertDismissed: true});
+  }
+
   render(){
     const shareLink = Utils.absoluteUrl(this.getRelShareLink());
     const iframeUrl = Utils.absoluteUrl(`public/task/${this.state.task.id}/iframe/${this.props.linksTarget}/${Utils.toSearchQuery(this.props.queryParams)}`);
@@ -168,6 +185,14 @@ class SharePopup extends React.Component{
             </div> : ""}
           </div>
           <div className={"share-links " + (this.state.task.public ? "show" : "")}>
+            {this.showLocalLinkAlert() ? 
+              <div className="alert alert-warning alert-dismissable link-alert">
+                <button type="button" className="close" title={_("Dismiss")} onClick={this.hideLocalLinkAlert}><span aria-hidden="true">&times;</span></button>
+                <i className="fa fa-exclamation-triangle"></i>
+                <span dangerouslySetInnerHTML={{__html: interpolate(_("The link below is accessible only within your local network. To share it with others online, use a %(link)s"), {link: `<a href="https://github.com/OpenDroneMap/WebODM/blob/master/HOSTED.md" target="_blank">${_("hosted instance")}</a>`})}}></span>
+              </div>
+            : ""}
+            
             <div className={"form-group " + (this.state.showQR ? "hide" : "")}>
               <label>
                 {_("Link:")}

app/static/app/js/css/SharePopup.scss

@@ -14,7 +14,23 @@
 		position: relative;
 		display: block;
 	    left: -26px;
-    	min-width: 232px;
+    	min-width: 280px;
+
+		.fa-exclamation-triangle{
+			margin-right: 4px;
+		}
+
+		.close{
+			right: 0;
+		}
+
+		.link-alert{
+			padding: 8px;
+		}
+
+		label{
+			width: 100%;
+		}
 
 		&.top{
 			top: -43px;
@@ -33,9 +49,11 @@
 		}
 
 		h3.popover-title{
+			font-size: 20px;
 			padding-top: 8px;
 			display: flex;
 			justify-content: space-between;
+			align-items: center;
 		}
 
 		.checkboxes{