Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Settings.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="card" id="settings"> | <div class="card" id="settings"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<div class="card-title"> | <div class="card-title"> | ||||
{{ $t('dashboard.settings') }} | {{ $t('dashboard.settings') }} | ||||
</div> | </div> | ||||
<div class="card-text"> | <div class="card-text"> | ||||
<form @submit.prevent="submit"> | <form @submit.prevent="submit"> | ||||
<div class="row mb-3"> | <div class="row mb-3"> | ||||
<label class="col-sm-4 col-form-label">{{ $t('user.passwordpolicy') }}</label> | <label class="col-sm-4 col-form-label">{{ $t('settings.password-policy') }}</label> | ||||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||||
<ul id="password_policy" class="list-group ms-1 mt-1"> | <ul id="password_policy" class="list-group ms-1 mt-1"> | ||||
<li v-for="rule in passwordPolicy" :key="rule.label" class="list-group-item border-0 form-check pt-1 pb-1"> | <li v-for="rule in passwordPolicy" :key="rule.label" class="list-group-item border-0 form-check pt-1 pb-1"> | ||||
<input type="checkbox" class="form-check-input" | <input type="checkbox" class="form-check-input" | ||||
:id="'policy-' + rule.label" | :id="'policy-' + rule.label" | ||||
:name="rule.label" | :name="rule.label" | ||||
:checked="rule.enabled || isRequired(rule)" | :checked="rule.enabled || isRequired(rule)" | ||||
:disabled="isRequired(rule)" | :disabled="isRequired(rule)" | ||||
> | > | ||||
<span v-if="rule.label == 'last'" v-html="ruleLastHTML(rule)"></span> | <span v-if="rule.label == 'last'" v-html="ruleLastHTML(rule)"></span> | ||||
<label v-else :for="'policy-' + rule.label" class="form-check-label pe-2" style="opacity: 1;">{{ rule.name.split(':')[0] }}</label> | <label v-else :for="'policy-' + rule.label" class="form-check-label pe-2" style="opacity: 1;">{{ rule.name.split(':')[0] }}</label> | ||||
<input type="text" class="form-control form-control-sm w-auto d-inline" v-if="['min', 'max'].includes(rule.label)" :value="rule.param" size="3"> | <input type="text" class="form-control form-control-sm w-auto d-inline" v-if="['min', 'max'].includes(rule.label)" :value="rule.param" size="3"> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="row mb-3"> | |||||
<label class="col-sm-4 col-form-label">{{ $t('settings.password-retention') }}</label> | |||||
<div class="col-sm-8"> | |||||
<ul id="password_retention" class="list-group ms-1 mt-1"> | |||||
<li class="list-group-item border-0 form-check pt-1 pb-1"> | |||||
<input type="checkbox" class="form-check-input" id="max_password_age" :checked="config.max_password_age"> | |||||
<label for="max_password_age" class="form-check-label pe-2">{{ $t('settings.password-max-age') }}</label> | |||||
<select class="form-select form-select-sm d-inline w-auto" id="max_password_age_value"> | |||||
<option v-for="num in [3, 6, 9, 12]" :key="num" :value="num" :selected="num == config.max_password_age"> | |||||
{{ num }} {{ $t('form.months') }} | |||||
</option> | |||||
</select> | |||||
</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
<btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn> | <btn class="btn-primary" type="submit" icon="check">{{ $t('btn.submit') }}</btn> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
config: [], | |||||
passwordPolicy: [] | passwordPolicy: [] | ||||
} | } | ||||
}, | }, | ||||
created() { | created() { | ||||
this.wallet = this.$store.state.authInfo.wallet | this.wallet = this.$store.state.authInfo.wallet | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.$root.startLoading() | this.$root.startLoading() | ||||
axios.get('/api/v4/password-policy') | axios.get('/api/v4/password-policy') | ||||
.then(response => { | .then(response => { | ||||
this.$root.stopLoading() | this.$root.stopLoading() | ||||
if (response.data.list) { | if (response.data.list) { | ||||
this.passwordPolicy = response.data.list | this.passwordPolicy = response.data.list | ||||
this.config = response.data.config | |||||
} | } | ||||
}) | }) | ||||
.catch(this.$root.errorHandler) | .catch(this.$root.errorHandler) | ||||
}, | }, | ||||
methods: { | methods: { | ||||
isRequired(rule) { | isRequired(rule) { | ||||
return rule.label == 'min' || rule.label == 'max' | return rule.label == 'min' || rule.label == 'max' | ||||
}, | }, | ||||
ruleLastHTML(rule) { | ruleLastHTML(rule) { | ||||
let parts = rule.name.split(/[0-9]+/) | let parts = rule.name.split(/[0-9]+/) | ||||
let options = [1, 2, 3, 4, 5, 6] | let options = [1, 2, 3, 4, 5, 6] | ||||
options = options.map(num => { | options = options.map(num => { | ||||
let selected = num == rule.param ? ' selected' : '' | let selected = num == rule.param ? ' selected' : '' | ||||
return `<option value="${num}"${selected}>${num}</option>` | return `<option value="${num}"${selected}>${num}</option>` | ||||
}) | }) | ||||
return `<label for="policy-last" class="form-check-label pe-2"> | return `<label for="policy-last" class="form-check-label pe-2"> | ||||
${parts[0]} <select class="form-select form-select-sm d-inline w-auto">${options.join('')}</select> ${parts[1]} | ${parts[0]} <select class="form-select form-select-sm d-inline w-auto">${options.join('')}</select> ${parts[1]} | ||||
</label>` | </label>` | ||||
}, | }, | ||||
submit() { | submit() { | ||||
this.$root.clearFormValidation($('#settings form')) | this.$root.clearFormValidation($('#settings form')) | ||||
let max_password_age = $('#max_password_age:checked').length ? $('#max_password_age_value').val() : 0 | |||||
let password_policy = []; | let password_policy = []; | ||||
$('#password_policy > li > input:checked').each((i, element) => { | $('#password_policy > li > input:checked').each((i, element) => { | ||||
let entry = element.name | let entry = element.name | ||||
let param = $(element.parentNode).find('select,input[type=text]').val() | let param = $(element.parentNode).find('select,input[type=text]').val() | ||||
if (param) { | if (param) { | ||||
entry += ':' + param | entry += ':' + param | ||||
} | } | ||||
password_policy.push(entry) | password_policy.push(entry) | ||||
}) | }) | ||||
let post = { password_policy: password_policy.join(',') } | let post = { | ||||
max_password_age, | |||||
password_policy: password_policy.join(','), | |||||
} | |||||
axios.post('/api/v4/users/' + this.wallet.user_id + '/config', post) | axios.post('/api/v4/users/' + this.wallet.user_id + '/config', post) | ||||
.then(response => { | .then(response => { | ||||
this.$toast.success(response.data.message) | this.$toast.success(response.data.message) | ||||
}) | }) | ||||
}, | }, | ||||
} | } | ||||
} | } | ||||
</script> | </script> |