fix(foxy-payments-api-payment-method-form): use password controls for…

… `key` and `third_party_key`
Foxy · Jan 8, 2025 · 89731d4 · 89731d4
1 parent ebcfc69
commit 89731d4
Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.test.ts
@@ -6,6 +6,7 @@ import './index';
 
 import { PaymentsApiPaymentMethodForm as Form } from './PaymentsApiPaymentMethodForm';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { InternalPasswordControl } from '../../internal/InternalPasswordControl/InternalPasswordControl';
 import { InternalSummaryControl } from '../../internal/InternalSummaryControl/InternalSummaryControl';
 import { InternalSwitchControl } from '../../internal/InternalSwitchControl/InternalSwitchControl';
 import { InternalSelectControl } from '../../internal/InternalSelectControl/InternalSelectControl';
@@ -30,6 +31,11 @@ describe('PaymentsApiPaymentMethodForm', () => {
     expect(customElements.get('vaadin-button')).to.exist;
   });
 
+  it('imports and defines foxy-internal-password-control', () => {
+    const element = customElements.get('foxy-internal-password-control');
+    expect(element).to.equal(InternalPasswordControl);
+  });
+
   it('imports and defines foxy-internal-switch-control', () => {
     const element = customElements.get('foxy-internal-switch-control');
     expect(element).to.equal(InternalSwitchControl);
@@ -621,7 +627,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     }
   });
 
-  it('renders a text control for live and test 3rd-party key if applicable', async () => {
+  it('renders a password control for live and test 3rd-party key if applicable', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -664,7 +670,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
       const field = tabPanel.querySelector(`[infer="${prefix}third-party-key"]`);
 
       expect(field).to.exist;
-      expect(field).to.be.instanceOf(InternalTextControl);
+      expect(field).to.be.instanceOf(InternalPasswordControl);
       expect(field).to.have.attribute('placeholder', 'default_additional_field_placeholder');
       expect(field).to.have.attribute('helper-text', '');
       expect(field).to.have.attribute('layout', 'summary-item');
@@ -684,7 +690,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
     }
   });
 
-  it('renders a text control for live and test account key if applicable', async () => {
+  it('renders a password control for live and test account key if applicable', async () => {
     const router = createRouter();
 
     const wrapper = await fixture(html`
@@ -721,7 +727,7 @@ describe('PaymentsApiPaymentMethodForm', () => {
       const field = tabPanel.querySelector(`[infer="${prefix}account-key"]`);
 
       expect(field).to.exist;
-      expect(field).to.be.instanceOf(InternalTextControl);
+      expect(field).to.be.instanceOf(InternalPasswordControl);
       expect(field).to.have.attribute('placeholder', 'default_additional_field_placeholder');
       expect(field).to.have.attribute('helper-text', '');
       expect(field).to.have.attribute('layout', 'summary-item');

diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts b/src/elements/public/PaymentsApiPaymentMethodForm/PaymentsApiPaymentMethodForm.ts
@@ -419,26 +419,26 @@ export class PaymentsApiPaymentMethodForm extends Base<Data> {
               : ''}
             ${this.form.helper?.third_party_key_description
               ? html`
-                  <foxy-internal-text-control
+                  <foxy-internal-password-control
                     placeholder=${this.t('default_additional_field_placeholder')}
                     helper-text=""
                     layout="summary-item"
                     label=${this.form.helper.third_party_key_description}
                     infer="${prefix}third-party-key"
                   >
-                  </foxy-internal-text-control>
+                  </foxy-internal-password-control>
                 `
               : ''}
             ${this.form.helper?.key_description
               ? html`
-                  <foxy-internal-text-control
+                  <foxy-internal-password-control
                     placeholder=${this.t('default_additional_field_placeholder')}
                     layout="summary-item"
                     helper-text=""
                     label=${this.form.helper.key_description}
                     infer="${prefix}account-key"
                   >
-                  </foxy-internal-text-control>
+                  </foxy-internal-password-control>
                 `
               : ''}
             ${blocks.map(block => this.__renderBlock(block))}

diff --git a/src/elements/public/PaymentsApiPaymentMethodForm/index.ts b/src/elements/public/PaymentsApiPaymentMethodForm/index.ts
@@ -1,5 +1,6 @@
 import '@vaadin/vaadin-button';
 
+import '../../internal/InternalPasswordControl/index';
 import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalSwitchControl/index';
 import '../../internal/InternalSelectControl/index';