Bugfix: Remove password buttons when disabled (#10096)

* Bugfix: Remove password buttons when disabled

* Add changelog

* Add unittests

changelog/unreleased/bugfix-remove-input-password-buttons-when-disabled

@@ -0,0 +1,6 @@
+Bugfix: Remove password buttons on input if disabled
+
+We've removed the password buttons on an input field which is disabled to not confuse the user.
+
+https://github.com/owncloud/web/pull/10096
+https://github.com/owncloud/web/issues/10084

packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts

@@ -88,6 +88,10 @@ describe('OcTextInput', () => {
         const wrapper2 = getMountedWrapper({ props: { type: 'password' } })
         expect(wrapper2.find(selectors.copyPasswordBtn).exists()).toBeFalsy()
       })
+      it('should not exist if the input is disabled', () => {
+        const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } })
+        expect(wrapper.find(selectors.copyPasswordBtn).exists()).toBeFalsy()
+      })
       it('should exist if type is "password" and value entered', async () => {
         const wrapper = getMountedWrapper({ props: { type: 'password' } })
         await wrapper.find(selectors.inputField).setValue('password')
@@ -108,6 +112,10 @@ describe('OcTextInput', () => {
         const wrapper2 = getMountedWrapper({ props: { type: 'password' } })
         expect(wrapper2.find(selectors.showPasswordToggleBtn).exists()).toBeFalsy()
       })
+      it('should not exist if the input is disabled', () => {
+        const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } })
+        expect(wrapper.find(selectors.showPasswordToggleBtn).exists()).toBeFalsy()
+      })
       it('should exist if type is "password" and value entered', async () => {
         const wrapper = getMountedWrapper({ props: { type: 'password' } })
         await wrapper.find(selectors.inputField).setValue('password')
@@ -130,6 +138,10 @@ describe('OcTextInput', () => {
         const wrapper2 = getMountedWrapper({ props: { type: 'password' } })
         expect(wrapper2.find(selectors.generatePasswordBtn).exists()).toBeFalsy()
       })
+      it('should not exist if the input is disabled', () => {
+        const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } })
+        expect(wrapper.find(selectors.generatePasswordBtn).exists()).toBeFalsy()
+      })
       it('should exist if type is "password" and prop "generatePasswordMethod" is provided', () => {
         const wrapper = getMountedWrapper({
           props: { generatePasswordMethod: jest.fn(), type: 'password' }

packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap

@@ -2,11 +2,11 @@
 
 exports[`OcTextInput password input field password policy displays error state if password does not match criteria 1`] = `
 <div class="">
-  <label class="oc-label" for="oc-textinput-21"></label>
+  <label class="oc-label" for="oc-textinput-24"></label>
   <div class="oc-position-relative">
     <!--v-if-->
     <div class="oc-text-input-password-wrapper">
-      <input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-21" type="password">
+      <input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-24" type="password">
       <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default" type="button">
         <!--v-if-->
         <!-- @slot Content of the button -->
@@ -43,11 +43,11 @@ exports[`OcTextInput password input field password policy displays error state i
 
 exports[`OcTextInput password input field password policy displays success state if password matches criteria 1`] = `
 <div class="">
-  <label class="oc-label" for="oc-textinput-22"></label>
+  <label class="oc-label" for="oc-textinput-25"></label>
   <div class="oc-position-relative">
     <!--v-if-->
     <div class="oc-text-input-password-wrapper">
-      <input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-22" type="password">
+      <input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-25" type="password">
       <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default" type="button">
         <!--v-if-->
         <!-- @slot Content of the button -->

packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue

@@ -11,10 +11,11 @@
       ref="passwordInput"
       v-model="password"
       :type="showPassword ? 'text' : 'password'"
+      :disabled="disabled"
       @input="onPasswordEntered"
     />
     <oc-button
-      v-if="password"
+      v-if="password && !disabled"
       v-oc-tooltip="$gettext('Show password')"
       class="oc-text-input-show-password-toggle oc-px-s oc-background-default"
       appearance="raw"
@@ -24,7 +25,7 @@
       <oc-icon size="small" :name="showPassword ? 'eye-off' : 'eye'" />
     </oc-button>
     <oc-button
-      v-if="password"
+      v-if="password && !disabled"
       v-oc-tooltip="$gettext('Copy password')"
       class="oc-text-input-copy-password-button oc-px-s oc-background-default"
       appearance="raw"
@@ -34,7 +35,7 @@
       <oc-icon size="small" :name="copyPasswordIcon" />
     </oc-button>
     <oc-button
-      v-if="generatePasswordMethod"
+      v-if="generatePasswordMethod && !disabled"
       v-oc-tooltip="$gettext('Generate password')"
       class="oc-text-input-generate-password-button oc-px-s oc-background-default"
       appearance="raw"
@@ -105,6 +106,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['passwordChallengeCompleted', 'passwordChallengeFailed', 'passwordGenerated'],