resources/js/components/SettingSnmp3auth.vue
<!--
- SettingSnmpv3auth.vue
-
- Description-
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License
- along with this program. If not, see <https://www.gnu.org/licenses/>.
-
- @package LibreNMS
- @link https://www.librenms.org
- @copyright 2019 Tony Murray
- @author Tony Murray <murraytony@gmail.com>
-->
<template>
<div>
<draggable v-model="localList" @end="dragged()" :disabled="disabled">
<div v-for="(item, id) in localList">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ id+1 }}. <span class="pull-right text-danger" @click="removeItem(id)" v-if="!disabled"><i class="fa fa-minus-circle"></i></span></h3>
</div>
<div class="panel-body">
<form @onsubmit.prevent>
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" id="authlevel" v-model="item.authlevel" :disabled="disabled" @change="updateItem(id, $event.target.id, $event.target.value)">
<option value="noAuthNoPriv" v-text="$t('settings.settings.snmp.v3.level.noAuthNoPriv')"></option>
<option value="authNoPriv" v-text="$t('settings.settings.snmp.v3.level.authNoPriv')"></option>
<option value="authPriv" v-text="$t('settings.settings.snmp.v3.level.authPriv')"></option>
</select>
</div>
</div>
<fieldset name="algo" v-show="item.authlevel.toString().substring(0, 4) === 'auth'" :disabled="disabled">
<legend class="h4" v-text="$t('settings.settings.snmp.v3.auth')"></legend>
<div class="form-group">
<label for="authalgo" class="col-sm-3 control-label" v-text="$t('settings.settings.snmp.v3.fields.authalgo')"></label>
<div class="col-sm-9">
<select class="form-control" id="authalgo" name="authalgo" v-model="item.authalgo" @change="updateItem(id, $event.target.id, $event.target.value)">
<option v-for="name in authAlgorithms" :value="name" v-text="name"></option>
</select>
</div>
</div>
<div class="form-group">
<label for="authname" class="col-sm-3 control-label" v-text="$t('settings.settings.snmp.v3.fields.authname')"></label>
<div class="col-sm-9">
<input type="text" class="form-control" id="authname" :value="item.authname" @input="updateItem(id, $event.target.id, $event.target.value)">
</div>
</div>
<div class="form-group">
<label for="authpass" class="col-sm-3 control-label" v-text="$t('settings.settings.snmp.v3.fields.authpass')"></label>
<div class="col-sm-9">
<input type="text" class="form-control" id="authpass" :value="item.authpass" @input="updateItem(id, $event.target.id, $event.target.value)">
</div>
</div>
</fieldset>
<fieldset name="crypt" v-show="item.authlevel === 'authPriv'" :disabled="disabled">
<legend class="h4" v-text="$t('settings.settings.snmp.v3.crypto')"></legend>
<div class="form-group">
<label for="cryptoalgo" class="col-sm-3 control-label">Cryptoalgo</label>
<div class="col-sm-9">
<select class="form-control" id="cryptoalgo" v-model="item.cryptoalgo" @change="updateItem(id, $event.target.id, $event.target.value)">
<option v-for="name in cryptoAlgorithms" :value="name" v-text="name"></option>
</select>
</div>
</div>
<div class="form-group">
<label for="cryptopass" class="col-sm-3 control-label" v-text="$t('settings.settings.snmp.v3.fields.authpass')"></label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cryptopass" :value="item.cryptopass" @input="updateItem(id, $event.target.id, $event.target.value)">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</draggable>
<div class="row snmp3-add-button" v-if="!disabled">
<div class="col-sm-12">
<button class="btn btn-primary" @click="addItem()"><i class="fa fa-plus-circle"></i> {{ $t('New') }}</button>
</div>
</div>
</div>
</template>
<script>
import BaseSetting from "./BaseSetting";
export default {
name: "SettingSnmp3auth",
mixins: [BaseSetting],
data() {
return {
localList: this.value,
authAlgorithms: ['MD5', 'AES'],
cryptoAlgorithms: ['AES', 'DES'],
}
},
mounted() {
axios.get(route('snmp.capabilities')).then((res) => {
this.authAlgorithms = res.data.auth;
this.cryptoAlgorithms = res.data.crypto;
})
},
methods: {
addItem() {
this.localList.push({
authlevel: 'noAuthNoPriv',
authalgo: 'MD5',
authname: '',
authpass: '',
cryptoalgo: 'AES',
cryptopass: ''
});
this.$emit('input', this.localList);
},
removeItem(index) {
this.localList.splice(index, 1);
this.$emit('input', this.localList);
},
updateItem(index, key, value) {
this.localList[index][key] = value;
this.$emit('input', this.localList);
},
dragged() {
this.$emit('input', this.localList);
}
},
watch: {
value($value) {
this.localList = $value;
}
}
}
</script>
<style scoped>
.authlevel {
font-size: 18px;
text-align: left;
}
.fa-minus-circle {
cursor: pointer;
}
.snmp3-add-button {
margin-top: 5px;
}
</style>