diff --git a/client/src/components/TOTP/Register.js b/client/src/components/TOTP/Register.js index b186dca..41f7801 100644 --- a/client/src/components/TOTP/Register.js +++ b/client/src/components/TOTP/Register.js @@ -127,8 +127,9 @@ class Register extends Component {

{ i18n._t( 'TOTPRegister.INTRO', - 'Verification codes are created by an app on your phone. ' - ) }{ this.renderSupportLink() }

+ 'Verification codes are created by an app on your phone. ', + ) }{ this.renderSupportLink() } +

@@ -142,8 +143,9 @@ class Register extends Component {

{i18n._t( 'TOTPRegister.MANUAL', - 'Enter manually the following code into authentication app:' - )}

+ 'Enter manually the following code into authentication app:', + )} +

{ formattedCode }

@@ -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 index 6ea1c3e..0d8b309 100644 --- 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 {

{ i18n._t( 'TOTPVerify.VERIFY', - 'Use verification code from your authenticator app. ' - ) }{ this.renderSupportLink() }

+ 'Use verification code from your authenticator app. ', + ) }{ this.renderSupportLink() } +

diff --git a/client/src/components/TOTP/tests/Register-test.js b/client/src/components/TOTP/tests/Register-test.js index b3486d9..5c29162 100644 --- 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,7 +26,7 @@ function makeProps(obj = {}) { {moreOptionsControl}
), - ...obj + ...obj, }; } @@ -34,9 +34,9 @@ test('Register handleBack() calls the onBack prop', async () => { const onBack = jest.fn(); render( + />, ); const back = await screen.findByText('Back'); fireEvent.click(back); @@ -48,7 +48,7 @@ test('Register renderErrorScreen renders the providded errors', async () => { + />, ); 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( + />, ); 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( - + , ); 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( - + , ); 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( - + , ); await screen.findByText('How to use authenticator apps.'); expect(container.querySelectorAll('.mfa-totp__scan-left svg')).toHaveLength(1); @@ -102,9 +102,9 @@ 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(); @@ -112,7 +112,7 @@ test('Register renderSupportLink() renders nothing when no support link is defin test('Register renderSupportLink() renders a support link for the provided method on both screens', async () => { render( - + , ); 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 index 010f500..e515a17 100644 --- 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( - + , ); 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( - + , ); 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( + />, ); 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( + />, ); 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( + />, ); const input = await screen.findByLabelText('Enter {length}-digit code'); fireEvent.change(input, { target: { value: '123456' } }); @@ -95,9 +95,9 @@ 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(); @@ -105,7 +105,7 @@ test('Verify renderSupportLink() renders nothing when no support link is defined test('Verify renderSupportLink() renders a support link for the provided method on both screens', async () => { render( - + , ); await screen.findByLabelText('Enter {length}-digit code'); expect(screen.queryByText('How to use authenticator apps.')).not.toBeNull(); @@ -113,7 +113,7 @@ test('Verify renderSupportLink() renders a support link for the provided method test('Verify renderVerifyForm() renders an input for the code', async () => { render( - + , ); const el = await screen.findByLabelText('Enter {length}-digit code'); expect(el.classList).toContain('mfa-totp__code'); @@ -122,9 +122,9 @@ test('Verify renderVerifyForm() renders an input for the code', async () => { test('Verify renderVerifyForm() identifies errors when passed', async () => { render( + />, ); const el = await screen.findByText('Something went wrong'); expect(el).not.toBeNull(); @@ -132,7 +132,7 @@ test('Verify renderVerifyForm() identifies errors when passed', async () => { test('Verify renders the method thumbnail', async () => { render( - + , ); const el = await screen.findByAltText('TOTP'); expect(el.classList).toContain('mfa-totp__validate-img'); @@ -140,7 +140,7 @@ test('Verify renders the method thumbnail', async () => { test('Verify renderVerifyForm() defaults to a 6 character code length', async () => { render( - + , ); 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( + />, ); 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 index 3c9393b..218e7ed 100644 --- 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 = () =>
; // 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 index cbc73e0..abb0bcd 100644 --- 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);