Merge pull request #5902 from nextcloud-libraries/backport/5896/next

[next] feat(NcPasswordField): add as-text prop to remove autocomplete

src/components/NcPasswordField/NcPasswordField.vue

@@ -44,6 +44,10 @@ General purpose password field component.
 		<NcPasswordField v-model="text5"
 			:disabled="true"
 			label="Disabled" />
+
+		<NcPasswordField :value.sync="text6"
+			label="Secret token"
+			as-text />
 	</div>
 </template>
 <script>
@@ -57,6 +61,7 @@ export default {
 			text3: 'hunter',
 			text4: '',
 			text5: '',
+			text6: 'secret-token',
 		}
 	},
 
@@ -91,7 +96,7 @@ export default {
 <template>
 	<NcInputField v-bind="propsToForward"
 		ref="inputField"
-		:type="isPasswordHidden ? 'password' : 'text'"
+		:type="isPasswordHidden && !asText ? 'password' : 'text'"
 		:trailing-button-label="trailingButtonLabelPassword"
 		:helper-text="computedHelperText"
 		:error="computedError"
@@ -204,6 +209,18 @@ export default {
 			type: Number,
 			default: null,
 		},
+
+		/**
+		 * Render as input[type=text] that looks like password field.
+		 * Allows to avoid unwanted password-specific browser behavior,
+		 * such as save or generate password prompt.
+		 * Useful for secret token fields.
+		 * Note: autocomplete="off" is ignored by browsers.
+		 */
+		asText: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [
@@ -324,3 +341,11 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.password-field__input--secure-text) {
+	// Emulate password field look
+	// This is not a part of the standard but well supported
+	-webkit-text-security: disc;
+}
+</style>