75 lines
No EOL
2.7 KiB
JavaScript
75 lines
No EOL
2.7 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
const Vue = window.Vue;
|
|
|
|
Vue.component("domain-rules", {
|
|
props: ["domainNames", "selectedDomain"],
|
|
template: `
|
|
<div class="domain-rules-container well">
|
|
<div class="radio" v-for="aDomain in domainNames">
|
|
<label>
|
|
<input type="radio"
|
|
:value="aDomain"
|
|
v-model="selectedDomain"
|
|
@change="onRadioChange">
|
|
{{ aDomain }}
|
|
<span class="glyphicon glyphicon-remove"
|
|
v-if="!isDefault(aDomain)"
|
|
data-domain="{{ aDomain }}"
|
|
@click="onRemoveClick"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="alert alert-danger" role="alert" v-if="errorMessage">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<div class="form-group" v-bind:class="{ 'has-error': errorMessage }">
|
|
<label for="newDomainName">Add New Domain Rule</label>
|
|
<input class="form-control" v-model.trim="newDomain" placeholder="*.example.org">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-default btn-block" @click="newDomainSubmitted">Add Rule</button>
|
|
</div>
|
|
`,
|
|
data: function () {
|
|
return {
|
|
newDomain: "",
|
|
errorMessage: ""
|
|
};
|
|
},
|
|
methods: {
|
|
newDomainSubmitted: function () {
|
|
|
|
const state = this.$root.$data;
|
|
|
|
if (this.newDomain.length === 0) {
|
|
this.errorMessage = "Domain rule field cannot be empty.";
|
|
return;
|
|
}
|
|
|
|
if (state.domainNames.indexOf(this.newDomain) !== -1) {
|
|
this.errorMessage = "There are already settings for this domain pattern.";
|
|
return;
|
|
}
|
|
|
|
state.addDomainRule(this.newDomain);
|
|
this.newDomain = "";
|
|
},
|
|
onRadioChange: function () {
|
|
this.$root.$data.setSelectedDomain(this.selectedDomain);
|
|
},
|
|
onRemoveClick: function (event) {
|
|
const targetElement = event.target;
|
|
const domain = targetElement.dataset.domain;
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
this.$root.$data.deleteDomainRule(domain);
|
|
},
|
|
isDefault: function (domainName) {
|
|
return domainName === "(default)";
|
|
}
|
|
}
|
|
});
|
|
}()); |