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
This commit is contained in:
Matt (IPv4) Cowley
2021-05-13 15:28:17 +01:00
committed by GitHub
parent fe5f2b234d
commit 27d090daeb
22 changed files with 172 additions and 79 deletions

View File

@@ -44,8 +44,8 @@ THE SOFTWARE.
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<div class="field is-horizontal is-aligned-top">
<div class="field-label has-small-margin-top">
<label class="label">{{ $t('templates.globalSections.performance.brotliCompression') }}</label>
</div>
<div class="field-body">
@@ -58,6 +58,19 @@ THE SOFTWARE.
</PrettyCheck>
</div>
</div>
<div v-if="showBrotliWarning" class="control">
<label class="text message is-warning">
<span class="message-body">
{{ $t('templates.globalSections.performance.brotliIsANonStandardModule') }}
<ExternalLink
:text="$t('templates.globalSections.performance.brotliGoogleNgxBrotliProject')"
link="https://github.com/google/ngx_brotli"
></ExternalLink>
{{ $t('templates.globalSections.performance.brotliForBuildingNginxWithBrotli') }}
</span>
</label>
</div>
</div>
</div>
</div>
@@ -134,6 +147,7 @@ THE SOFTWARE.
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import ExternalLink from 'do-vue/src/templates/external_link';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
@@ -171,10 +185,19 @@ THE SOFTWARE.
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
ExternalLink,
},
props: {
data: Object, // Data delegated back to us from parent
},
computed: computedFromDefaults(defaults, 'performance'), // Getters & setters for the delegated data
computed: {
...computedFromDefaults(defaults, 'performance'), // Getters & setters for the delegated data
showBrotliWarning() {
return this.$props.data.brotliCompression.computed;
},
hasWarnings() {
return this.showBrotliWarning;
},
},
};
</script>

View File

@@ -55,14 +55,13 @@ THE SOFTWARE.
:placeholder="$props.data.contentSecurityPolicy.default"
/>
</div>
<template v-if="hasWordPress && !hasUnsafeEval">
<br />
<div class="message is-warning">
<div class="message-body"
v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
></div>
</div>
</template>
<div v-if="hasWordPress && !hasUnsafeEval" class="control">
<label class="text message is-warning">
<span class="message-body"
v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
></span>
</label>
</div>
</div>
</div>
</div>
@@ -203,6 +202,9 @@ THE SOFTWARE.
hasUnsafeEval() {
return this.$props.data.contentSecurityPolicy.computed.includes('\'unsafe-eval\'');
},
hasWarnings() {
return this.hasWordPress && !this.hasUnsafeEval;
},
},
watch: {
// Check referrer policy selection is valid