Fix loading indicator and better feedback with radio type switch

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: skjnldsv

js/password_policy-settings.js

@@ -5,27 +5,7 @@
  * @license  MIT
  */
 
-/**
- * @copyright Copyright (c) 2019 Greta Doci <gretadoci@gmail.com>
- *
- * @author Greta Doci <gretadoci@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero 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 Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
+/*! For license information please see CheckboxRadioSwitch.js.LICENSE.txt */
 
 /**
  * @copyright Copyright (c) 2021 Jonas Rittershofer <jotoeri@users.noreply.github.com>

js/password_policy-settings.js.LICENSE.txt

@@ -23,44 +23,48 @@
 
 <template>
 	<SettingsSection :title="t('password_policy', 'Password policy')">
-		<div id="password-policy__saving-msg" class="msg success inlineblock" style="display: none;">
+		<div id="password-policy__saving-msg" class="msg success inlineblock" style="display:none">
 			{{ t('password_policy', 'Saved') }}
 		</div>
 
 		<ul class="password-policy__settings-list">
 			<li>
-				<label>
-					<input id="password-policy__settings__min-length"
-						v-model="config.minLength"
-						type="number"
-						@change="updateNumberSetting('minLength')">
+				<input id="password-policy__settings__min-length"
+					v-model="config.minLength"
+					min="0"
+					type="number"
+					@change="updateNumberSetting('minLength')">
+				<label for="password-policy__settings__min-length">
 					{{ t('password_policy', 'Minimum password length') }}
 				</label>
 			</li>
 			<li>
-				<label>
-					<input id="password-policy-history-size"
-						v-model="config.historySize"
-						type="number"
-						@change="updateNumberSetting('historySize')">
+				<input id="password-policy-history-size"
+					v-model="config.historySize"
+					min="0"
+					type="number"
+					@change="updateNumberSetting('historySize')">
+				<label for="password-policy-history-size">
 					{{ t('password_policy', 'User password history') }}
 				</label>
 			</li>
 			<li>
-				<label>
-					<input id="password-policy-expiration"
-						v-model="config.expiration"
-						type="number"
-						@change="updateNumberSetting('expiration')">
+				<input id="password-policy-expiration"
+					v-model="config.expiration"
+					min="0"
+					type="number"
+					@change="updateNumberSetting('expiration')">
+				<label for="password-policy-expiration">
 					{{ t('password_policy', 'Number of days until user password expires') }}
 				</label>
 			</li>
 			<li>
-				<label>
-					<input id="password-policy_failed-login"
-						v-model="config.maximumLoginAttempts"
-						type="number"
-						@change="updateNumberSetting('maximumLoginAttempts')">
+				<input id="password-policy_failed-login"
+					v-model="config.maximumLoginAttempts"
+					min="0"
+					type="number"
+					@change="updateNumberSetting('maximumLoginAttempts')">
+				<label for="password-policy_failed-login">
 					{{ t('password_policy', 'Number of login attempts before the user account is blocked (0 for no limit)') }}
 				</label>
 			</li>
@@ -69,30 +73,35 @@
 		<ul class="password-policy__settings-list">
 			<li>
 				<CheckboxRadioSwitch :checked.sync="config.enforceNonCommonPassword"
+					type="switch"
 					@update:checked="updateBoolSetting('enforceNonCommonPassword')">
 					{{ t('password_policy', 'Forbid common passwords') }}
 				</CheckboxRadioSwitch>
 			</li>
 			<li>
 				<CheckboxRadioSwitch :checked.sync="config.enforceUpperLowerCase"
+					type="switch"
 					@update:checked="updateBoolSetting('enforceUpperLowerCase')">
 					{{ t('password_policy', 'Enforce upper and lower case characters') }}
 				</CheckboxRadioSwitch>
 			</li>
 			<li>
 				<CheckboxRadioSwitch :checked.sync="config.enforceNumericCharacters"
+					type="switch"
 					@update:checked="updateBoolSetting('enforceNumericCharacters')">
 					{{ t('password_policy', 'Enforce numeric characters') }}
 				</CheckboxRadioSwitch>
 			</li>
 			<li>
 				<CheckboxRadioSwitch :checked.sync="config.enforceSpecialCharacters"
+					type="switch"
 					@update:checked="updateBoolSetting('enforceSpecialCharacters')">
 					{{ t('password_policy', 'Enforce special characters') }}
 				</CheckboxRadioSwitch>
 			</li>
 			<li>
 				<CheckboxRadioSwitch :checked.sync="config.enforceHaveIBeenPwned"
+					type="switch"
 					@update:checked="updateBoolSetting('enforceHaveIBeenPwned')">
 					{{ t('password_policy', 'Check password against the list of breached passwords from haveibeenpwned.com') }}
 				</CheckboxRadioSwitch>
@@ -123,12 +132,10 @@ export default {
 	},
 
 	methods: {
-		updateBoolSetting(setting) {
-			OCP.AppConfig.setValue('password_policy', setting, this.config[setting] ? '1' : '0')
+		async updateBoolSetting(setting) {
+			await this.setValue(setting, this.config[setting] ? '1' : '0')
 		},
-		updateNumberSetting(setting) {
-			OC.msg.startSaving('#password-policy__saving-msg')
-
+		async updateNumberSetting(setting) {
 			// If value not only (positive) numbers
 			if (!/^\d+$/.test(this.config[setting])) {
 				let message = t('password_policy', 'Unknown error')
@@ -146,27 +153,42 @@ export default {
 					message = t('password_policy', 'Maximum login attempts have to be a non negative number')
 					break
 				}
-				OC.msg.finishedSaving('#password-policy__saving-msg',
-					{
-						status: 'failure',
-						data: {
-							message,
-						},
-					}
-				)
+				OC.msg.finishedSaving('#password-policy__saving-msg', {
+					status: 'failure',
+					data: {
+						message,
+					},
+				})
 				return
 			}
 
 			// Otherwise store Value
-			OCP.AppConfig.setValue('password_policy', setting, this.config[setting])
-			OC.msg.finishedSaving('#password-policy__saving-msg',
-				{
+			await this.setValue(setting, this.config[setting])
+		},
+
+		/**
+		 * Save the provided setting and value
+		 *
+		 * @param {string} setting the app config key
+		 * @param {string} value the app config value
+		 */
+		async setValue(setting, value) {
+			OC.msg.startSaving('#password-policy__saving-msg')
+
+			OCP.AppConfig.setValue('password_policy', setting, value, {
+				success: () => OC.msg.finishedSaving('#password-policy__saving-msg', {
 					status: 'success',
 					data: {
 						message: t('password_policy', 'Saved'),
 					},
-				}
-			)
+				}),
+				error: () => OC.msg.finishedSaving('#password-policy__saving-msg', {
+					status: 'failure',
+					data: {
+						message: t('password_policy', 'Error while saving'),
+					},
+				}),
+			})
 		},
 	},
 }