enh(ui): use link to docs and NcPasswordField (nextcloud#345)

1. Use link to AppAPI docs in ExApps management page
2. Use NcPasswordField for haproxy_password

---------

Signed-off-by: Andrey Borysenko <andrey18106x@gmail.com>

Author: andrey18106

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>

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,

src/views/Apps.vue

@@ -56,8 +56,9 @@
 
 				<NcAppNavigationItem
 					id="admin-section"
-					:href="linkToAdminSettings"
-					:name="t('app_api', 'Admin settings') + ' ↗'">
+					href="https://cloud-py-api.github.io/app_api/"
+					target="_blank"
+					:name="t('app_api', 'Documentation') + ' ↗'">
 					<template v-if="!state.daemon_config_accessible" #icon>
 						<Alert :size="20" />
 					</template>
@@ -162,7 +163,6 @@ import DaemonDetails from '../components/Apps/DaemonDetails.vue'
 import ScopesDetails from '../components/Apps/ScopesDetails.vue'
 
 import { APPS_SECTION_ENUM } from '../constants/AppsConstants.js'
-import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 
 Vue.use(VueLocalStorage)
@@ -277,9 +277,6 @@ export default {
 			// For customers of the Nextcloud GmbH the app level will be set to `300` for apps that are supported in their subscription
 			return this.apps.some(app => app.level === 300)
 		},
-		linkToAdminSettings() {
-			return generateUrl('/settings/admin/app_api')
-		},
 	},
 
 	watch: {