enh(ui): use NcPasswordField for haproxy_password

Signed-off-by: Andrey Borysenko <andrey18106x@gmail.com>
nextcloud · Aug 2, 2024 · c0decca · c0decca
1 parent ca31774
commit c0decca
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/components/DaemonConfig/DaemonConfigDetailsModal.vue b/src/components/DaemonConfig/DaemonConfigDetailsModal.vue
@@ -20,9 +20,15 @@
 				<h3>{{ t('app_api', 'Deploy config') }}</h3>
 				<p><b>{{ t('app_api', 'Docker network') }}: </b>{{ daemon.deploy_config.net }}</p>
 				<p><b>{{ t('app_api', 'Nextcloud URL') }}: </b>{{ daemon.deploy_config.nextcloud_url }}</p>
-				<p v-if="daemon.deploy_config.haproxy_password">
-					<b>{{ t('app_api', 'HaProxy password') }}: </b>
-					{{ daemon.deploy_config?.haproxy_password }}
+				<p v-if="daemon.deploy_config.haproxy_password" class="external-label">
+					<label for="haproxy_password"><b>{{ t('app_api', 'HaProxy password') }}: </b></label>
+					<NcPasswordField
+						id="haproxy_password"
+						:value="daemon.deploy_config?.haproxy_password"
+						:disable="true"
+						style="width: fit-content;"
+						readonly
+						autocomplete="off" />
 				</p>
 				<p>
 					<b>{{ t('app_api', 'GPUs support') }}:</b> {{ daemon.deploy_config.computeDevice && daemon.deploy_config?.computeDevice?.id !== 'cpu' || false }}
@@ -60,6 +66,7 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import Connection from 'vue-material-design-icons/Connection.vue'
@@ -71,6 +78,7 @@ export default {
 		NcButton,
 		NcNoteCard,
 		NcLoadingIcon,
+		NcPasswordField,
 		Connection,
 	},
 	props: {
@@ -130,4 +138,14 @@ export default {
 	justify-content: space-between;
 	margin: 20px 0;
 }
+
+.external-label {
+	display: flex;
+	align-items: center;
+	width: 100%;
+
+	label {
+		margin-right: 5px;
+	}
+}
 </style>
diff --git a/src/components/DaemonConfig/ManageDaemonConfigModal.vue b/src/components/DaemonConfig/ManageDaemonConfigModal.vue
@@ -109,13 +109,14 @@
 								class="external-label"
 								:aria-label="t('app_api', 'HaProxy password')">
 								<label for="deploy-config-haproxy-password">{{ t('app_api', 'HaProxy password') }}</label>
-								<NcInputField
+								<NcPasswordField
 									id="deploy-config-haproxy-password"
 									:value.sync="deployConfig.haproxy_password"
 									:error="isHaProxyPasswordValid === false"
 									:placeholder="t('app_api', 'AppAPI Docker Socket Proxy authentication password')"
 									:aria-label="t('app_api', 'AppAPI Docker Socket Proxy authentication password')"
-									:helper-text="haProxyPasswordHelperText" />
+									:helper-text="haProxyPasswordHelperText"
+									autocomplete="off" />
 							</div>
 							<NcSelect
 								id="compute-device"
@@ -238,6 +239,7 @@ import { confirmPassword } from '@nextcloud/password-confirmation'
 
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
@@ -258,6 +260,7 @@ export default {
 		NcLoadingIcon,
 		NcModal,
 		NcInputField,
+		NcPasswordField,
 		UnfoldLessHorizontal,
 		UnfoldMoreHorizontal,
 		NcCheckboxRadioSwitch,