1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<template>
<SettingsSection :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.')"
:doc-url="twoFactorAdminDoc">
<p v-if="loading">
<span class="icon-loading-small two-factor-loading" />
<span>{{ t('settings', 'Enforce two-factor authentication') }}</span>
</p>
<CheckboxRadioSwitch v-else
id="two-factor-enforced"
:checked.sync="enforced"
type="switch">
{{ t('settings', 'Enforce two-factor authentication') }}
</CheckboxRadioSwitch>
<template v-if="enforced">
<h3>{{ t('settings', 'Limit to groups') }}</h3>
{{ t('settings', 'Enforcement of two-factor authentication can be set for certain groups only.') }}
<p class="top-margin">
{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
</p>
<p>
<Multiselect v-model="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" />
</p>
<p class="top-margin">
{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
</p>
<p>
<Multiselect v-model="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" />
</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.') }}
</em>
</p>
</template>
<p class="top-margin">
<ButtonVue v-if="dirty"
type="primary"
:disabled="loading"
@click="saveChanges">
{{ t('settings', 'Save changes') }}
</ButtonVue>
</p>
</SettingsSection>
</template>
<script>
import axios from '@nextcloud/axios'
import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue'
import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
import { loadState } from '@nextcloud/initial-state'
import _ from 'lodash'
import { generateUrl, generateOcsUrl } from '@nextcloud/router'
export default {
name: 'AdminTwoFactor',
components: {
Multiselect,
ButtonVue,
CheckboxRadioSwitch,
SettingsSection,
},
data() {
return {
loading: false,
dirty: false,
groups: [],
loadingGroups: false,
twoFactorAdminDoc: loadState('settings', 'two-factor-admin-doc'),
}
},
computed: {
enforced: {
get() {
return this.$store.state.enforced
},
set(val) {
this.dirty = true
this.$store.commit('setEnforced', val)
},
},
enforcedGroups: {
get() {
return this.$store.state.enforcedGroups
},
set(val) {
this.dirty = true
this.$store.commit('setEnforcedGroups', val)
},
},
excludedGroups: {
get() {
return this.$store.state.excludedGroups
},
set(val) {
this.dirty = true
this.$store.commit('setExcludedGroups', val)
},
},
},
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)))
// 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) {
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))) })
.catch(err => console.error('could not search groups', err))
.then(() => { this.loadingGroups = false })
}, 500),
saveChanges() {
this.loading = true
const data = {
enforced: this.enforced,
enforcedGroups: this.enforcedGroups,
excludedGroups: this.excludedGroups,
}
axios.put(generateUrl('/settings/api/admin/twofactorauth'), data)
.then(resp => resp.data)
.then(state => {
this.state = state
this.dirty = false
})
.catch(err => {
console.error('could not save changes', err)
})
.then(() => { this.loading = false })
},
},
}
</script>
<style scoped>
.two-factor-loading {
display: inline-block;
vertical-align: sub;
margin-left: -2px;
margin-right: 1px;
}
.top-margin {
margin-top: 0.5rem;
}
</style>
|
