diff options
Diffstat (limited to 'apps/settings/src/components/AdminTwoFactor.vue')
| -rw-r--r-- | apps/settings/src/components/AdminTwoFactor.vue | 55 |
1 files changed, 31 insertions, 24 deletions
diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue index 950b857b07a..e24bee02593 100644 --- a/apps/settings/src/components/AdminTwoFactor.vue +++ b/apps/settings/src/components/AdminTwoFactor.vue @@ -1,6 +1,10 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <NcSettingsSection :title="t('settings', 'Two-Factor Authentication')" - :description="t('settings', 'Two-factor authentication can be enforced for all users and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')" + <NcSettingsSection :name="t('settings', 'Two-Factor Authentication')" + :description="t('settings', 'Two-factor authentication can be enforced for all accounts and specific groups. If they do not have a two-factor provider configured, they will be unable to log into the system.')" :doc-url="twoFactorAdminDoc"> <p v-if="loading"> <span class="icon-loading-small two-factor-loading" /> @@ -19,36 +23,38 @@ {{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }} </p> <p> - <NcMultiselect v-model="enforcedGroups" + <label for="enforcedGroups"> + <span>{{ t('settings', 'Enforced groups') }}</span> + </label> + <NcSelect v-model="enforcedGroups" + input-id="enforcedGroups" :options="groups" - :placeholder="t('settings', 'Enforced groups')" :disabled="loading" :multiple="true" - :searchable="true" :loading="loadingGroups" - :show-no-options="false" :close-on-select="false" - @search-change="searchGroup" /> + @search="searchGroup" /> </p> <p class="top-margin"> {{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }} </p> <p> - <NcMultiselect v-model="excludedGroups" + <label for="excludedGroups"> + <span>{{ t('settings', 'Excluded groups') }}</span> + </label> + <NcSelect v-model="excludedGroups" + input-id="excludedGroups" :options="groups" - :placeholder="t('settings', 'Excluded groups')" :disabled="loading" :multiple="true" - :searchable="true" :loading="loadingGroups" - :show-no-options="false" :close-on-select="false" - @search-change="searchGroup" /> + @search="searchGroup" /> </p> <p class="top-margin"> <em> <!-- this text is also found in the documentation. update it there as well if it ever changes --> - {{ t('settings', 'When groups are selected/excluded, they use the following logic to determine if a user has 2FA enforced: If no groups are selected, 2FA is enabled for everyone except members of the excluded groups. If groups are selected, 2FA is enabled for all members of these. If a user is both in a selected and excluded group, the selected takes precedence and 2FA is enforced.') }} + {{ t('settings', 'When groups are selected/excluded, they use the following logic to determine if an account has 2FA enforced: If no groups are selected, 2FA is enabled for everyone except members of the excluded groups. If groups are selected, 2FA is enabled for all members of these. If an account is both in a selected and excluded group, the selected takes precedence and 2FA is enforced.') }} </em> </p> </template> @@ -65,19 +71,21 @@ <script> import axios from '@nextcloud/axios' -import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect' -import NcButton from '@nextcloud/vue/dist/Components/NcButton' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection' +import NcSelect from '@nextcloud/vue/components/NcSelect' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import { loadState } from '@nextcloud/initial-state' -import _ from 'lodash' +import sortedUniq from 'lodash/sortedUniq.js' +import uniq from 'lodash/uniq.js' +import debounce from 'lodash/debounce.js' import { generateUrl, generateOcsUrl } from '@nextcloud/router' export default { name: 'AdminTwoFactor', components: { - NcMultiselect, + NcSelect, NcButton, NcCheckboxRadioSwitch, NcSettingsSection, @@ -123,19 +131,19 @@ export default { mounted() { // Groups are loaded dynamically, but the assigned ones *should* // be valid groups, so let's add them as initial state - this.groups = _.sortedUniq(_.uniq(this.enforcedGroups.concat(this.excludedGroups))) + this.groups = sortedUniq(uniq(this.enforcedGroups.concat(this.excludedGroups))) // Populate the groups with a first set so the dropdown is not empty // when opening the page the first time this.searchGroup('') }, methods: { - searchGroup: _.debounce(function(query) { + searchGroup: debounce(function(query) { this.loadingGroups = true axios.get(generateOcsUrl('cloud/groups?offset=0&search={query}&limit=20', { query })) .then(res => res.data.ocs) .then(ocs => ocs.data.groups) - .then(groups => { this.groups = _.sortedUniq(_.uniq(this.groups.concat(groups))) }) + .then(groups => { this.groups = sortedUniq(uniq(this.groups.concat(groups))) }) .catch(err => console.error('could not search groups', err)) .then(() => { this.loadingGroups = false }) }, 500), @@ -167,8 +175,7 @@ export default { .two-factor-loading { display: inline-block; vertical-align: sub; - margin-left: -2px; - margin-right: 1px; + margin-inline: -2px 1px; } .top-margin { |