Show warning icons in tabs (#260)

* Add unstyled warning to onion tab

* Style the warning icon

* Add warning for http3

* Add warning icon to global security tab

* Surface warnings for domains

* Show warning icon for duplicate domains

* Improve http3 warning string names

* Show warning message/icon for Brotli

src/nginxconfig/templates/global.vue

@@ -29,7 +29,10 @@ THE SOFTWARE.
         <div class="tabs">
             <ul>
                 <li v-for="tab in tabs" :class="tabClass(tab.key)">
-                    <a @click="showTab(tab.key)">{{ $t(tab.display) }}{{ changes(tab.key) }}</a>
+                    <a @click="showTab(tab.key)">
+                        {{ $t(tab.display) }}{{ changes(tab.key) }}
+                        <i v-if="warnings(tab.key)" class="fas fa-exclamation-triangle"></i>
+                    </a>
                 </li>
             </ul>
         </div>
@@ -37,6 +40,7 @@ THE SOFTWARE.
         <component :is="tab"
                    v-for="tab in tabs"
                    :key="tab.key"
+                   :ref="tab.key"
                    :data="$props.data[tab.key]"
                    :style="{ display: active === tab.key ? undefined : 'none' }"
                    class="container"
@@ -99,6 +103,10 @@ THE SOFTWARE.
                 if (changes) return ` (${changes.toLocaleString()})`;
                 return '';
             },
+            warnings(tab) {
+                if (!Object.prototype.hasOwnProperty.call(this.$refs, tab)) return false;
+                return this.$refs[tab][0].hasWarnings || false;
+            },
             setValue(tab, key, val) {
                 Object.assign(this.$props.data[tab][key], { value: val, computed: val });
             },