Use latest components

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

1 files changed, 47 insertions, 56 deletions

diff --git a/src/AdminSettings.vue b/src/AdminSettings.vue
index 145484f..8cbb2cf 100644
--- a/src/AdminSettings.vue
+++ b/src/AdminSettings.vue
@@ -29,85 +29,73 @@
 
 		<ul class="password-policy__settings-list">
 			<li>
-				<input id="password-policy__settings__min-length"
-					v-model="config.minLength"
-					type="number"
-					@change="updateNumberSetting('minLength')">
-				<span>{{ t('password_policy', 'Minimum password length') }}</span>
+				<label>
+					<input id="password-policy__settings__min-length"
+						v-model="config.minLength"
+						type="number"
+						@change="updateNumberSetting('minLength')">
+					{{ t('password_policy', 'Minimum password length') }}
+				</label>
 			</li>
 			<li>
-				<input id="password-policy-history-size"
-					v-model="config.historySize"
-					type="number"
-					@change="updateNumberSetting('historySize')">
-				<span>{{ t('password_policy', 'User password history') }}</span>
+				<label>
+					<input id="password-policy-history-size"
+						v-model="config.historySize"
+						type="number"
+						@change="updateNumberSetting('historySize')">
+					{{ t('password_policy', 'User password history') }}
+				</label>
 			</li>
 			<li>
-				<input id="password-policy-expiration"
-					v-model="config.expiration"
-					type="number"
-					@change="updateNumberSetting('expiration')">
-				<span>{{ t('password_policy', 'Number of days until user password expires') }}</span>
+				<label>
+					<input id="password-policy-expiration"
+						v-model="config.expiration"
+						type="number"
+						@change="updateNumberSetting('expiration')">
+					{{ t('password_policy', 'Number of days until user password expires') }}
+				</label>
 			</li>
 			<li>
-				<input id="password-policy_failed-login"
-					v-model="config.maximumLoginAttempts"
-					type="number"
-					@change="updateNumberSetting('maximumLoginAttempts')">
-				<span>{{ t('password_policy', 'Number of login attempts before the user account is blocked (0 for no limit)') }}</span>
+				<label>
+					<input id="password-policy_failed-login"
+						v-model="config.maximumLoginAttempts"
+						type="number"
+						@change="updateNumberSetting('maximumLoginAttempts')">
+					{{ t('password_policy', 'Number of login attempts before the user account is blocked (0 for no limit)') }}
+				</label>
 			</li>
 		</ul>
+
 		<ul class="password-policy__settings-list">
-			<li />
 			<li>
-				<input id="password-policy__settings__enforce-non-common"
-					v-model="config.enforceNonCommonPassword"
-					type="checkbox"
-					class="checkbox"
-					@change="updateBoolSetting('enforceNonCommonPassword')">
-				<label for="password-policy__settings__enforce-non-common">
+				<CheckboxRadioSwitch :checked.sync="config.enforceNonCommonPassword"
+					@update:checked="updateBoolSetting('enforceNonCommonPassword')">
 					{{ t('password_policy', 'Forbid common passwords') }}
-				</label>
+				</CheckboxRadioSwitch>
 			</li>
 			<li>
-				<input id="password-policy__settings__enforce-upper-lower-case"
-					v-model="config.enforceUpperLowerCase"
-					type="checkbox"
-					class="checkbox"
-					@change="updateBoolSetting('enforceUpperLowerCase')">
-				<label for="password-policy__settings__enforce-upper-lower-case">
+				<CheckboxRadioSwitch :checked.sync="config.enforceUpperLowerCase"
+					@update:checked="updateBoolSetting('enforceUpperLowerCase')">
 					{{ t('password_policy', 'Enforce upper and lower case characters') }}
-				</label>
+				</CheckboxRadioSwitch>
 			</li>
 			<li>
-				<input id="password-policy__settings__enforce-numeric-char"
-					v-model="config.enforceNumericCharacters"
-					type="checkbox"
-					class="checkbox"
-					@change="updateBoolSetting('enforceNumericCharacters')">
-				<label for="password-policy__settings__enforce-numeric-char">
+				<CheckboxRadioSwitch :checked.sync="config.enforceNumericCharacters"
+					@update:checked="updateBoolSetting('enforceNumericCharacters')">
 					{{ t('password_policy', 'Enforce numeric characters') }}
-				</label>
+				</CheckboxRadioSwitch>
 			</li>
 			<li>
-				<input id="password-policy__settings__enforce-special-char"
-					v-model="config.enforceSpecialCharacters"
-					type="checkbox"
-					class="checkbox"
-					@change="updateBoolSetting('enforceSpecialCharacters')">
-				<label for="password-policy__settings__enforce-special-char">
+				<CheckboxRadioSwitch :checked.sync="config.enforceSpecialCharacters"
+					@update:checked="updateBoolSetting('enforceSpecialCharacters')">
 					{{ t('password_policy', 'Enforce special characters') }}
-				</label>
+				</CheckboxRadioSwitch>
 			</li>
 			<li>
-				<input id="password-policy__settings__enforce-haveibeenpwned"
-					v-model="config.enforceHaveIBeenPwned"
-					type="checkbox"
-					class="checkbox"
-					@change="updateBoolSetting('enforceHaveIBeenPwned')">
-				<label for="password-policy__settings__enforce-haveibeenpwned">
+				<CheckboxRadioSwitch :checked.sync="config.enforceHaveIBeenPwned"
+					@update:checked="updateBoolSetting('enforceHaveIBeenPwned')">
 					{{ t('password_policy', 'Check password against the list of breached passwords from haveibeenpwned.com') }}
-				</label>
+				</CheckboxRadioSwitch>
 				<p class="havibeenpwned-hint">
 					{{ t('password_policy', 'This check creates a hash of the password and sends the first 5 characters of this hash to the haveibeenpwned.com API to retrieve a list of all hashes that start with those. Then it checks on the Nextcloud instance if the password hash is in the result set.') }}
 				</p>
@@ -118,11 +106,13 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
+import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch'
 import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
 
 export default {
 	name: 'AdminSettings',
 	components: {
+		CheckboxRadioSwitch,
 		SettingsSection,
 	},
 
@@ -187,6 +177,7 @@ export default {
 	&__settings-list li input[type='number'] {
 		width: 75px;
 	}
+
 	// Little spacing between two lists (used between number/checkbox inputs)
 	&__settings-list + &__settings-list {
 		margin-top: 8px;