FIX ESLint issues

silverstripe · Jun 29, 2023 · 0fbc683 · 0fbc683
1 parent b8157e3
commit 0fbc683
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 48 deletions.
diff --git a/client/src/components/TOTP/Register.js b/client/src/components/TOTP/Register.js
@@ -127,8 +127,9 @@ class Register extends Component {
         <div className="mfa-totp__scan">
           <p>{ i18n._t(
             'TOTPRegister.INTRO',
-            'Verification codes are created by an app on your phone. '
-          ) }{ this.renderSupportLink() }</p>
+            'Verification codes are created by an app on your phone. ',
+          ) }{ this.renderSupportLink() }
+          </p>
 
           <div className="mfa-totp__scan-code">
             <div className="mfa-totp__scan-left">
@@ -142,8 +143,9 @@ class Register extends Component {
             <div className="mfa-totp__scan-right">
               <p>{i18n._t(
                 'TOTPRegister.MANUAL',
-                'Enter manually the following code into authentication app:'
-              )}</p>
+                'Enter manually the following code into authentication app:',
+              )}
+              </p>
               <p className="mfa-totp__manual-code">
                 { formattedCode }
               </p>
@@ -257,5 +259,5 @@ export default inject(
   (TOTPVerifyComponent) => ({
     TOTPVerifyComponent,
   }),
-  () => 'MFA.Register'
+  () => 'MFA.Register',
 )(Register);
diff --git a/client/src/components/TOTP/Verify.js b/client/src/components/TOTP/Verify.js
@@ -18,7 +18,7 @@ class Verify extends Component {
 
     // Note: deliberately React 15 compatible ref syntax for SS 4.0-4.3 support
     this.codeInput = null;
-    this.setCodeInput = element => {
+    this.setCodeInput = (element) => {
       this.codeInput = element;
     };
 
@@ -110,7 +110,6 @@ class Verify extends Component {
     );
   }
 
-
   /**
    * If there is a configured support link, will render a link to the TOTP authenticator's
    * support documentation (e.g. userhelp).
@@ -146,14 +145,15 @@ class Verify extends Component {
         <div className={formGroupClasses}>
           <p>{ i18n._t(
             'TOTPVerify.VERIFY',
-            'Use verification code from your authenticator app. '
-          ) }{ this.renderSupportLink() }</p>
+            'Use verification code from your authenticator app. ',
+          ) }{ this.renderSupportLink() }
+          </p>
 
           <label htmlFor="totp-code" className="control-label">
             {
               i18n.inject(
                 i18n._t('TOTPVerify.ENTER_CODE', 'Enter {length}-digit code'),
-                { length: codeLength }
+                { length: codeLength },
               )
             }
           </label>

diff --git a/client/src/components/TOTP/tests/Register-test.js b/client/src/components/TOTP/tests/Register-test.js
@@ -1,8 +1,8 @@
 /* global jest, test, expect */
 
 import React from 'react';
-import { Component as Register } from '../Register';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { Component as Register } from '../Register';
 
 window.ss = {
   i18n: { _t: (key, string) => string },
@@ -26,17 +26,17 @@ function makeProps(obj = {}) {
         {moreOptionsControl}
       </div>
     ),
-    ...obj
+    ...obj,
   };
 }
 
 test('Register handleBack() calls the onBack prop', async () => {
   const onBack = jest.fn();
   render(
     <Register {...makeProps({
-      onBack
+      onBack,
     })}
-    />
+    />,
   );
   const back = await screen.findByText('Back');
   fireEvent.click(back);
@@ -48,7 +48,7 @@ test('Register renderErrorScreen renders the providded errors', async () => {
     <Register {...makeProps({
       errors: ['Something went wrong', 'I am a unit test'],
     })}
-    />
+    />,
   );
   const el = await screen.findByText('Something went wrong, I am a unit test');
   expect(el.classList).toContain('mfa-totp__errors');
@@ -57,9 +57,9 @@ test('Register renderErrorScreen renders the providded errors', async () => {
 test('Register handleBackToScan() clears errors when clicking on the back button', async () => {
   const { container } = render(
     <Register {...makeProps({
-      error: 'Something went wrong'
+      error: 'Something went wrong',
     })}
-    />
+    />,
   );
   const back = await screen.findByText('Back');
   fireEvent.click(back);
@@ -70,7 +70,7 @@ test('Register handleBackToScan() clears errors when clicking on the back button
 
 test('Register renderActionsMenu() renders a "Next" and "Back" button', async () => {
   render(
-    <Register {...makeProps()}/>
+    <Register {...makeProps()} />,
   );
   const next = await screen.findByText('Next');
   const back = await screen.findByText('Back');
@@ -80,7 +80,7 @@ test('Register renderActionsMenu() renders a "Next" and "Back" button', async ()
 
 test('Register goes to the input validation screen when clicking "Next" on the QR code screen', async () => {
   render(
-    <Register {...makeProps()}/>
+    <Register {...makeProps()} />,
   );
   const next = await screen.findByText('Next');
   fireEvent.click(next);
@@ -90,7 +90,7 @@ test('Register goes to the input validation screen when clicking "Next" on the Q
 
 test('Register renderScanCodeScreen() renders a QR code', async () => {
   const { container } = render(
-    <Register {...makeProps()}/>
+    <Register {...makeProps()} />,
   );
   await screen.findByText('How to use authenticator apps.');
   expect(container.querySelectorAll('.mfa-totp__scan-left svg')).toHaveLength(1);
@@ -102,17 +102,17 @@ test('Register renderSupportLink() renders nothing when no support link is defin
       method: {
         urlSegment: 'totp',
         name: 'TOTP',
-      }
+      },
     })}
-    />
+    />,
   );
   await screen.findByText('Verification codes are created by an app on your phone.');
   expect(screen.queryByText('How to use authenticator apps.')).toBeNull();
 });
 
 test('Register renderSupportLink() renders a support link for the provided method on both screens', async () => {
   render(
-    <Register {...makeProps()}/>
+    <Register {...makeProps()} />,
   );
   await screen.findByText('Verification codes are created by an app on your phone.');
   expect(screen.queryByText('How to use authenticator apps.')).not.toBeNull();

diff --git a/client/src/components/TOTP/tests/Verify-test.js b/client/src/components/TOTP/tests/Verify-test.js
@@ -1,13 +1,13 @@
 /* global jest, test, expect */
 
 import React from 'react';
-import Verify from '../Verify';
 import { render, screen, fireEvent } from '@testing-library/react';
+import Verify from '../Verify';
 
 window.ss = {
   i18n: {
     inject: (string) => string,
-    _t: (key, string) => string
+    _t: (key, string) => string,
   },
 };
 
@@ -22,13 +22,13 @@ function makeProps(obj = {}) {
       thumbnail: 'totp.svg',
     },
     onCompleteVerification: () => null,
-    ...obj
+    ...obj,
   };
 }
 
 test('Verify canSubmit() returns false when code in not 6 chars', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   const input = await screen.findByLabelText('Enter {length}-digit code');
   fireEvent.change(input, { target: { value: '12345' } });
@@ -38,7 +38,7 @@ test('Verify canSubmit() returns false when code in not 6 chars', async () => {
 
 test('Verify canSubmit() returns true when code is 6 chars', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   const input = await screen.findByLabelText('Enter {length}-digit code');
   fireEvent.change(input, { target: { value: '123456' } });
@@ -50,9 +50,9 @@ test('Verify handleInputKeyUp() treats enter key as a form submission when code
   const onCompleteVerification = jest.fn();
   render(
     <Verify {...makeProps({
-      onCompleteVerification
+      onCompleteVerification,
     })}
-    />
+    />,
   );
   const input = await screen.findByLabelText('Enter {length}-digit code');
   fireEvent.change(input, { target: { value: '123456' } });
@@ -64,9 +64,9 @@ test('Verify handleInputKeyUp() does nothing when the code is invalid', async ()
   const onCompleteVerification = jest.fn();
   render(
     <Verify {...makeProps({
-      onCompleteVerification
+      onCompleteVerification,
     })}
-    />
+    />,
   );
   const input = await screen.findByLabelText('Enter {length}-digit code');
   fireEvent.change(input, { target: { value: 'ABC' } });
@@ -78,9 +78,9 @@ test('Verify handleSubmit() calls onCompleteVerification() and passes the code',
   const onCompleteVerification = jest.fn();
   render(
     <Verify {...makeProps({
-      onCompleteVerification
+      onCompleteVerification,
     })}
-    />
+    />,
   );
   const input = await screen.findByLabelText('Enter {length}-digit code');
   fireEvent.change(input, { target: { value: '123456' } });
@@ -95,25 +95,25 @@ test('Verify renderSupportLink() renders nothing when no support link is defined
       method: {
         urlSegment: 'totp',
         name: 'TOTP',
-      }
+      },
     })}
-    />
+    />,
   );
   await screen.findByLabelText('Enter {length}-digit code');
   expect(screen.queryByText('How to use authenticator apps.')).toBeNull();
 });
 
 test('Verify renderSupportLink() renders a support link for the provided method on both screens', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   await screen.findByLabelText('Enter {length}-digit code');
   expect(screen.queryByText('How to use authenticator apps.')).not.toBeNull();
 });
 
 test('Verify renderVerifyForm() renders an input for the code', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   const el = await screen.findByLabelText('Enter {length}-digit code');
   expect(el.classList).toContain('mfa-totp__code');
@@ -122,25 +122,25 @@ test('Verify renderVerifyForm() renders an input for the code', async () => {
 test('Verify renderVerifyForm() identifies errors when passed', async () => {
   render(
     <Verify {...makeProps({
-      error: 'Something went wrong'
+      error: 'Something went wrong',
     })}
-    />
+    />,
   );
   const el = await screen.findByText('Something went wrong');
   expect(el).not.toBeNull();
 });
 
 test('Verify renders the method thumbnail', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   const el = await screen.findByAltText('TOTP');
   expect(el.classList).toContain('mfa-totp__validate-img');
 });
 
 test('Verify renderVerifyForm() defaults to a 6 character code length', async () => {
   render(
-    <Verify {...makeProps()}/>
+    <Verify {...makeProps()} />,
   );
   const el = await screen.findByLabelText('Enter {length}-digit code');
   expect(el.getAttribute('maxlength')).toBe('6');
@@ -149,9 +149,9 @@ test('Verify renderVerifyForm() defaults to a 6 character code length', async ()
 test('Verify renderVerifyForm() allows the code length to be configured', async () => {
   render(
     <Verify {...makeProps({
-      codeLength: 12
+      codeLength: 12,
     })}
-    />
+    />,
   );
   const el = await screen.findByLabelText('Enter {length}-digit code');
   expect(el.getAttribute('maxlength')).toBe('12');

diff --git a/client/src/components/TOTP/tests/__mocks__/lib/Injector.js b/client/src/components/TOTP/tests/__mocks__/lib/Injector.js
@@ -1,8 +1,8 @@
 /* global jest */
-
+/* eslint-disable import/prefer-default-export */
 import React from 'react';
 
-export const inject = jest.fn().mockImplementation(name => {
+export const inject = jest.fn().mockImplementation((name) => {
   // Create a fake HOC to return
   const hoc = () => <div />;
   // Set the display name to the name of the given component

diff --git a/client/src/lib/formatCode.js b/client/src/lib/formatCode.js
@@ -11,6 +11,7 @@
  * @param {string} delimiter
  * @returns {string}
  */
+/* eslint-disable import/prefer-default-export */
 const formatCode = (code, delimiter = ' ') => {
   // Can't nicely split anything less than 6 characters
   if (code.length < 6) {
@@ -19,10 +20,10 @@ const formatCode = (code, delimiter = ' ') => {
 
   // Check if it's evenly divisible into groups of 4 or 3, and return if so
   if (code.length % 4 === 0) {
-    return code.split(/(.{4})/g).filter(c => c).join(delimiter).trim();
+    return code.split(/(.{4})/g).filter((c) => c).join(delimiter).trim();
   }
   if (code.length % 3 === 0) {
-    return code.split(/(.{3})/g).filter(c => c).join(delimiter).trim();
+    return code.split(/(.{3})/g).filter((c) => c).join(delimiter).trim();
   }
 
   const groupsOfThree = 4 - (code.length % 4);