From 07119fff94fae757f6243301c3ac234a3f33696a Mon Sep 17 00:00:00 2001 From: tuliomir Date: Wed, 27 Nov 2024 20:26:48 -0300 Subject: [PATCH] feat: pin/passwd validation --- cypress/e2e/00-welcome.cy.js | 51 ++++++++++++++++++++++++---- cypress/e2e/welcome.cy.js | 29 ---------------- src/components/PinPasswordWrapper.js | 6 ++-- 3 files changed, 48 insertions(+), 38 deletions(-) delete mode 100644 cypress/e2e/welcome.cy.js diff --git a/cypress/e2e/00-welcome.cy.js b/cypress/e2e/00-welcome.cy.js index 74c160f29..d7e549841 100644 --- a/cypress/e2e/00-welcome.cy.js +++ b/cypress/e2e/00-welcome.cy.js @@ -68,7 +68,7 @@ describe('welcome and wallet type selection', () => { describe('create a new wallet and back it up', () => { const passwd = 'Abc1234%'; - const pin = '999999'; + const pin = '123456'; beforeEach(() => { setTermsAccepted(); @@ -101,8 +101,27 @@ describe('create a new wallet and back it up', () => { cy.contains('Your words have been created!'); cy.findByText('Do it later').click(); - // TODO: Test invalid passwords - // Fill the password field + // Fill the password field with short password + cy.contains('Please, choose a password') + cy.get('input[placeholder="Password"]').type('abc'); + cy.get('input[placeholder="Confirm Password"]').type('abc'); + cy.findByText('Next').click(); + cy.get('#passwordWrapperForm').then( + ($form) => expect($form[0].checkValidity()).to.be.false, + ) + + // Fill the password field with non-matching values + cy.get('input[placeholder="Password"]').clear(); + cy.get('input[placeholder="Confirm Password"]').clear(); + cy.get('input[placeholder="Password"]').type(passwd); + cy.get('input[placeholder="Confirm Password"]').type(passwd.split('').reverse().join('')); + cy.findByText('Next').click(); + cy.contains('Both fields must be equal'); + cy.contains('Please, choose a password') + + // Fill the password field properly + cy.get('input[placeholder="Password"]').clear(); + cy.get('input[placeholder="Confirm Password"]').clear(); cy.get('input[placeholder="Password"]').type(passwd); cy.get('input[placeholder="Confirm Password"]').type(passwd); cy.findByText('Next').click(); @@ -110,14 +129,34 @@ describe('create a new wallet and back it up', () => { // Password was successful cy.contains('The PIN is a 6-digit password'); - // TODO: Test invalid PINs - // Fill the PIN field + // Fill the PIN field with invalid characters + cy.get('input[placeholder="PIN"]').type('abc'); + cy.get('input[placeholder="Confirm PIN"]').type('abc'); + cy.findByText('Next').click(); + cy.get('#passwordWrapperForm').then( + ($form) => expect($form[0].checkValidity()).to.be.false, + ) + + // Fill the PIN field with non-matching values + cy.get('input[placeholder="PIN"]').clear(); + cy.get('input[placeholder="Confirm PIN"]').clear(); + cy.get('input[placeholder="PIN"]').type(pin); + cy.get('input[placeholder="Confirm PIN"]').type(pin.split('').reverse().join('')); + cy.findByText('Next').click(); + cy.contains('Both fields must be equal'); + cy.contains('The PIN is a 6-digit password'); // This should be immediate + + // Fill the PIN field properly + cy.get('input[placeholder="PIN"]').clear(); + cy.get('input[placeholder="Confirm PIN"]').clear(); cy.get('input[placeholder="PIN"]').type(pin); cy.get('input[placeholder="Confirm PIN"]').type(pin); cy.findByText('Next').click(); // PIN was successful - cy.contains('Loading transactions'); + cy.contains('Loading transactions'); // For a few seconds this screen will be shown + + // After a possibly large amount of time, the fullnode will have answered the empty tx history for the new wallet cy.contains('Total: 0.00 HTR', { timeout: 20000 }); cy.contains(`You haven't done the backup`); }) diff --git a/cypress/e2e/welcome.cy.js b/cypress/e2e/welcome.cy.js deleted file mode 100644 index f59af862b..000000000 --- a/cypress/e2e/welcome.cy.js +++ /dev/null @@ -1,29 +0,0 @@ - -describe('rendering the page', () => { - it('should render the welcome page', () => { - cy.visit('/'); - cy.findByText(/Welcome to Hathor Wallet/i) - .should("have.length", 1); - }); - - it('should only allow clicking the button after accepting terms', () => { - cy.visit('/'); - - // Click - const buttonLabel = 'Get started' - cy.findByText(buttonLabel).click(); - - // Recipe from: https://glebbahmutov.com/cypress-examples/8.7.0/recipes/form-validation.html - cy.get('form').then( - ($form) => expect($form[0].checkValidity()).to.be.false, - ) - - // Agree and click again - cy.get('#confirmAgree').click(); - cy.findByText(buttonLabel).click(); - - // Should be on wallet selection screen - cy.contains('software'); - cy.contains('hardware'); - }) -}) diff --git a/src/components/PinPasswordWrapper.js b/src/components/PinPasswordWrapper.js index a6e6d8d4d..f8c524eb1 100644 --- a/src/components/PinPasswordWrapper.js +++ b/src/components/PinPasswordWrapper.js @@ -10,7 +10,7 @@ import { t } from 'ttag' /** - * Component to choose a password + * Component to choose a password * Shows two password fields with required pattern and validations * * @memberof Components @@ -28,7 +28,7 @@ class PinPasswordWrapper extends React.Component { } /** - * Called when user finish filling the inputs + * Called when user finish filling the inputs * Validates the form and call the success message */ next = () => { @@ -51,7 +51,7 @@ class PinPasswordWrapper extends React.Component { return (
{this.props.message} -
+ {this.props.handleChange(e.target.value)}}/>