From 2e0383269352f94692f6f0b7bf0f04622b44dbda Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Tue, 12 Oct 2021 15:13:13 -0400 Subject: [PATCH 01/15] Adds listener logic for password confirmation I tried adding in the package as a module, but the function called in the erb file could not be found. Troubleshooting led me to see it being packed in the application.js file correctly via webpack... Im leaving the file in for now for testing purposes on a later commit --- app/javascript/packs/application.js | 1 + app/javascript/src/password_confirmation.js | 22 ++++++++++++++ app/views/users/edit.html.erb | 33 +++++++++++++++++++-- 3 files changed, 54 insertions(+), 2 deletions(-) create mode 100644 app/javascript/src/password_confirmation.js diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 6e40051a57..4d02b2d73f 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -31,6 +31,7 @@ require('src/dashboard') require('src/sidebar') require('src/readMore') require('src/tooltip') +require('src/password_confirmation') // Uncomment to copy all static images under ../images to the output folder and // reference them with the image_pack_tag or asset_pack_path helpers in views. diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js new file mode 100644 index 0000000000..8c23d14dc1 --- /dev/null +++ b/app/javascript/src/password_confirmation.js @@ -0,0 +1,22 @@ +function addConfirmationEventListeners() { + const password = document.getElementsByClassName("password-new") + const confirmation = document.getElementsByClassName("password-confirmation") + + if(confirmation.length === 0 || password.length === 0){ + console.error("Unable to find password confirmation field", { confirmation }) + }else{ + document.addEventListener("keyUp", function(){ + checkConfirmationEqual(password, confirmation) + }) + } +} + +function checkConfirmationEqual(password, confirmation){ + const passwordText = password[0].value + const confirmationText = confirmation[0].value + if (passwordText === confirmationText){ + console.log("EQUAL") + }else{ + console.log("UNEQUAL") + } +} diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index c5e4877fd3..2172b06e9a 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -49,11 +49,11 @@
<%= f.label :password, "New Password" %>
- <%= f.password_field :password, autocomplete: "off", class: "form-control", minlength: 6 %> + <%= f.password_field :password, autocomplete: "off", class: "form-control password-new", minlength: 6 %>
<%= f.label :password_confirmation, "New Password Confirmation" %>
- <%= f.password_field :password_confirmation, class: "form-control", minlength: 6 %> + <%= f.password_field :password_confirmation, class: "form-control password-confirmation", minlength: 6 %>
<%= f.submit "Update Password", class: "btn btn-danger" %> @@ -62,3 +62,32 @@
+ + From ad554d292130161ba9e022b683bd94376db625a3 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Tue, 12 Oct 2021 16:04:40 -0400 Subject: [PATCH 02/15] Disables submit when passwords don't match --- app/javascript/src/password_confirmation.js | 24 ++++++++++++++++---- app/views/users/edit.html.erb | 25 ++++++++++++++++----- 2 files changed, 40 insertions(+), 9 deletions(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 8c23d14dc1..4f6b894f12 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -1,11 +1,27 @@ +const button = document.getElementsByClassName("submit-password")[0] + +function disableBtn (el) { + el.disabled = true + el.classList.add('disabled') + el.setAttribute('aria-disabled', true) +} + +function enableBtn (el) { + el.disabled = false + el.classList.remove('disabled') + el.removeAttribute('aria-disabled') +} + function addConfirmationEventListeners() { const password = document.getElementsByClassName("password-new") const confirmation = document.getElementsByClassName("password-confirmation") + disableBtn(button) + if(confirmation.length === 0 || password.length === 0){ console.error("Unable to find password confirmation field", { confirmation }) }else{ - document.addEventListener("keyUp", function(){ + confirmation[0].addEventListener("keyup", function(){ checkConfirmationEqual(password, confirmation) }) } @@ -15,8 +31,8 @@ function checkConfirmationEqual(password, confirmation){ const passwordText = password[0].value const confirmationText = confirmation[0].value if (passwordText === confirmationText){ - console.log("EQUAL") + enableBtn(button) }else{ - console.log("UNEQUAL") + disableBtn(button) } -} +} \ No newline at end of file diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index 2172b06e9a..cad8619dff 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -56,7 +56,7 @@ <%= f.password_field :password_confirmation, class: "form-control password-confirmation", minlength: 6 %>
- <%= f.submit "Update Password", class: "btn btn-danger" %> + <%= f.submit "Update Password", class: "btn btn-danger submit-password" %>
<% end %> @@ -64,14 +64,30 @@ From d9e6f60a3269734270f4a664cc855bf3b004da26 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Tue, 12 Oct 2021 16:58:29 -0400 Subject: [PATCH 04/15] Adds error message for password confirmation --- app/javascript/src/casa_case.js | 5 +++ app/javascript/src/password_confirmation.js | 41 ++++++++++----------- 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/app/javascript/src/casa_case.js b/app/javascript/src/casa_case.js index 8bdc6186cf..a9420f0696 100644 --- a/app/javascript/src/casa_case.js +++ b/app/javascript/src/casa_case.js @@ -130,3 +130,8 @@ $('document').ready(() => { $('#btnGenerateReport').on('click', handleGenerateReport) }) + +export { + enableBtn, + disableBtn +} diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 6addb32495..b6992c6f0f 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -1,27 +1,24 @@ -function disableBtn (el) { - el.disabled = true - el.classList.add('disabled') - el.setAttribute('aria-disabled', true) -} +import Swal from 'sweetalert2' -function enableBtn (el) { - el.disabled = false - el.classList.remove('disabled') - el.removeAttribute('aria-disabled') -} +import { disableBtn, enableBtn } from './casa_case' $('document').ready(() => { - $('.password-confirmation').on('blur', () => { - const button = document.getElementsByClassName("submit-password")[0] - const password = document.getElementsByClassName("password-new") - const confirmation = document.getElementsByClassName("password-confirmation") - const passwordText = password[0].value - const confirmationText = confirmation[0].value + $('.password-confirmation').on('blur', () => { + const button = document.getElementsByClassName('submit-password')[0] + const password = document.getElementsByClassName('password-new') + const confirmation = document.getElementsByClassName('password-confirmation') + const passwordText = password[0].value + const confirmationText = confirmation[0].value - if (passwordText === confirmationText){ - enableBtn(button) - }else{ - disableBtn(button) - } - }) + if (passwordText === confirmationText) { + enableBtn(button) + } else { + Swal.fire({ + icon: 'error', + title: 'Password Error', + text: 'The password and the confirmation password do not match' + }) + disableBtn(button) + } + }) }) From 22e2fd5fc636e4cf8794b3773a174f2ac4b80bde Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 09:36:48 -0400 Subject: [PATCH 05/15] Cleans up code This will make it easier to test the functionality --- app/javascript/src/password_confirmation.js | 56 ++++++++++++++++----- 1 file changed, 43 insertions(+), 13 deletions(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index b6992c6f0f..c58e70ac43 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -1,24 +1,54 @@ +/* eslint-env jquery */ + import Swal from 'sweetalert2' import { disableBtn, enableBtn } from './casa_case' -$('document').ready(() => { - $('.password-confirmation').on('blur', () => { - const button = document.getElementsByClassName('submit-password')[0] - const password = document.getElementsByClassName('password-new') - const confirmation = document.getElementsByClassName('password-confirmation') - const passwordText = password[0].value - const confirmationText = confirmation[0].value - - if (passwordText === confirmationText) { - enableBtn(button) - } else { +const SUBMIT_BUTTON_CLASS = 'submit-password' +const PASSWORD_FIELD_CLASS = 'password-new' +const CONFIRMATION_FIELD_CLASS = 'password-confirmation' + +// Checks if the password is equivalent to confirmation and has at least 1 character. If not, +// it will disable the button +// @param {HTMLElement} button - submit button for the form field +// @param {HTMLElement} password - text input form field +// @param {HTMLElement} confirmation - text input form field +// @param {boolean} enablePopup - display popup when field is not in focus +function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePopup = false) { + const passwordText = password[0].value + const confirmationText = confirmation[0].value + if (passwordText === confirmationText && passwordText > 0) { + enableBtn(button) + } else { + if (enablePopup) { Swal.fire({ icon: 'error', title: 'Password Error', text: 'The password and the confirmation password do not match' }) - disableBtn(button) } - }) + disableBtn(button) + } +} + +$('document').ready(() => { + if ($(`.${SUBMIT_BUTTON_CLASS}`)) { + const button = $(`.${SUBMIT_BUTTON_CLASS}`)[0] + const password = $(`.${PASSWORD_FIELD_CLASS}`) + const confirmation = $(`.${CONFIRMATION_FIELD_CLASS}`) + + disableBtn(button) + + $(`.${PASSWORD_FIELD_CLASS}`).on('blur', () => { + checkPasswordsAndDisplayPopup(button, password, confirmation) + }) + + $(`.${CONFIRMATION_FIELD_CLASS}`).on('blur', () => { + checkPasswordsAndDisplayPopup(button, password, confirmation, true) + }) + } }) + +export { + checkPasswordsAndDisplayPopup +} From a9d9b650da4413c44dfb1f1b67bfaf74a0bd9f8f Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 14:20:00 -0400 Subject: [PATCH 06/15] Adds tests for password module --- .../__tests__/password_confirmation.test.js | 62 +++++++++++++++++++ app/javascript/src/password_confirmation.js | 8 +-- 2 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 app/javascript/__tests__/password_confirmation.test.js diff --git a/app/javascript/__tests__/password_confirmation.test.js b/app/javascript/__tests__/password_confirmation.test.js new file mode 100644 index 0000000000..13b001506f --- /dev/null +++ b/app/javascript/__tests__/password_confirmation.test.js @@ -0,0 +1,62 @@ +/* eslint-env jest */ +import { checkPasswordsAndDisplayPopup } from '../src/password_confirmation' + +require('jest') + +let submitButton, passwordField, confirmationField + +beforeEach(() => { + document.body.innerHTML = ` +
+
+
+ +
+
+
+ +
+ +
+ ` + submitButton = document.getElementsByClassName('submit-password')[0] + passwordField = document.getElementsByClassName('password-new')[0] + confirmationField = document.getElementsByClassName('password-confirmation')[0] + + submitButton.disabled = true + submitButton.classList.add('disabled') + submitButton.setAttribute('aria-disabled', true) +}) + +describe('ensure the password field matches the confirmation field on the client side', () => { + function isDisabled (el) { + return el.disabled && el.classList.contains('disabled') && el.hasAttribute('aria-disabled') + } + + test('password fields match', () => { + passwordField.value = '123456' + confirmationField.value = '123456' + checkPasswordsAndDisplayPopup(submitButton, passwordField, confirmationField) + expect(isDisabled(submitButton)).toBe(false) + expect(document.getElementsByClassName('swal2-container').length).toBe(0) + }) + + test("password fields don't match", () => { + passwordField.value = '123456' + confirmationField.value = 'bad' + checkPasswordsAndDisplayPopup(submitButton, passwordField, confirmationField, true) + expect(document.getElementsByClassName('swal2-container').length).toBe(1) + }) + + test("password fields don't match and pop-up suppressed", () => { + passwordField.value = '123456' + confirmationField.value = 'bad' + checkPasswordsAndDisplayPopup(submitButton, passwordField, confirmationField) + expect(document.getElementsByClassName('swal2-container').length).toBe(0) + }) + + test('password fields match but are empty', () => { + expect(isDisabled(submitButton)).toBe(true) + expect(document.getElementsByClassName('swal2-container').length).toBe(0) + }) +}) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index c58e70ac43..bf8c5e79bb 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -15,8 +15,8 @@ const CONFIRMATION_FIELD_CLASS = 'password-confirmation' // @param {HTMLElement} confirmation - text input form field // @param {boolean} enablePopup - display popup when field is not in focus function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePopup = false) { - const passwordText = password[0].value - const confirmationText = confirmation[0].value + const passwordText = password.value + const confirmationText = confirmation.value if (passwordText === confirmationText && passwordText > 0) { enableBtn(button) } else { @@ -34,8 +34,8 @@ function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePo $('document').ready(() => { if ($(`.${SUBMIT_BUTTON_CLASS}`)) { const button = $(`.${SUBMIT_BUTTON_CLASS}`)[0] - const password = $(`.${PASSWORD_FIELD_CLASS}`) - const confirmation = $(`.${CONFIRMATION_FIELD_CLASS}`) + const password = $(`.${PASSWORD_FIELD_CLASS}`)[0] + const confirmation = $(`.${CONFIRMATION_FIELD_CLASS}`)[0] disableBtn(button) From f5ff49e861f08e3b52bc99df10b3916afc2d6542 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 15:34:24 -0400 Subject: [PATCH 07/15] Fix js type bug Js was casting a string to a number to compare with 0 resulting in the button not being disabled for string inputs that dont map to a number --- app/javascript/src/password_confirmation.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index bf8c5e79bb..98eaf514db 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -17,7 +17,8 @@ const CONFIRMATION_FIELD_CLASS = 'password-confirmation' function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePopup = false) { const passwordText = password.value const confirmationText = confirmation.value - if (passwordText === confirmationText && passwordText > 0) { + console.log({passwordText, confirmationText}) + if (passwordText === confirmationText && passwordText.length > 0) { enableBtn(button) } else { if (enablePopup) { From ebeb567055c63ed6075f7b4de2eca2f108d84ccf Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 15:35:26 -0400 Subject: [PATCH 08/15] Adds password confirmation classes to the devise passwords erb file --- app/views/devise/passwords/edit.html.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb index 845b6c09a5..435bb8918b 100644 --- a/app/views/devise/passwords/edit.html.erb +++ b/app/views/devise/passwords/edit.html.erb @@ -21,7 +21,7 @@ class: "form-control", required: true %> <%= f.password_field :password, autofocus: true, autocomplete: "new-password", - class: "form-control", + class: "form-control password-new", required: true, minlength: 6 %> @@ -30,13 +30,13 @@ class: "form-control", required: true %> <%= f.label :password_confirmation, "Confirm new password" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", - class: "form-control", + class: "form-control password-confirmation", required: true, minlength: 6 %>
- <%= f.submit "Change my password", class: "btn btn-primary" %> + <%= f.submit "Change my password", class: "btn btn-primary submit-password" %>
<% end %> From f2b37f4edc1de5c12ca45f51916a4c00f28e10bd Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 15:45:57 -0400 Subject: [PATCH 09/15] Removes console log statement --- app/javascript/src/password_confirmation.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 98eaf514db..583df914aa 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -17,7 +17,6 @@ const CONFIRMATION_FIELD_CLASS = 'password-confirmation' function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePopup = false) { const passwordText = password.value const confirmationText = confirmation.value - console.log({passwordText, confirmationText}) if (passwordText === confirmationText && passwordText.length > 0) { enableBtn(button) } else { From ce59efed1c6666b357903aa059d14b26606d8ce1 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 15:58:46 -0400 Subject: [PATCH 10/15] Adds comments to password_confirmation --- app/javascript/src/password_confirmation.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 583df914aa..af49d7e4ae 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -9,7 +9,7 @@ const PASSWORD_FIELD_CLASS = 'password-new' const CONFIRMATION_FIELD_CLASS = 'password-confirmation' // Checks if the password is equivalent to confirmation and has at least 1 character. If not, -// it will disable the button +// it will disable the button. // @param {HTMLElement} button - submit button for the form field // @param {HTMLElement} password - text input form field // @param {HTMLElement} confirmation - text input form field @@ -31,6 +31,8 @@ function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePo } } +// Expects the class name constants above are applied to the correct fields. See +// `app/views/users/edit.html.erb` for usage $('document').ready(() => { if ($(`.${SUBMIT_BUTTON_CLASS}`)) { const button = $(`.${SUBMIT_BUTTON_CLASS}`)[0] From bed87ea2bfc0c11be1aa53b30ca6d1ca53713224 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 16:09:10 -0400 Subject: [PATCH 11/15] Improves user experience The popup was being displayed when there were no password inputs which did not match up with the error message I added in --- app/javascript/src/password_confirmation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index af49d7e4ae..f33466853d 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -19,6 +19,8 @@ function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePo const confirmationText = confirmation.value if (passwordText === confirmationText && passwordText.length > 0) { enableBtn(button) + } else if(passwordText === confirmationText && passwordText.length === 0){ + disableBtn(button) } else { if (enablePopup) { Swal.fire({ From b28b688c460e0e2f0a95a0b932e7ce0b71fba101 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 16:10:25 -0400 Subject: [PATCH 12/15] Linting --- app/javascript/src/password_confirmation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index f33466853d..84203d2793 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -19,7 +19,7 @@ function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePo const confirmationText = confirmation.value if (passwordText === confirmationText && passwordText.length > 0) { enableBtn(button) - } else if(passwordText === confirmationText && passwordText.length === 0){ + } else if (passwordText === confirmationText && passwordText.length === 0) { disableBtn(button) } else { if (enablePopup) { From adc77a4ff266bc358d1af13f64db8fefc4ac1912 Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 18:43:37 -0400 Subject: [PATCH 13/15] Fixes codeclimate CI failure Im unsure how to run that locally so this is more of a guess and check --- app/javascript/src/password_confirmation.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 84203d2793..38fdea8421 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -8,6 +8,10 @@ const SUBMIT_BUTTON_CLASS = 'submit-password' const PASSWORD_FIELD_CLASS = 'password-new' const CONFIRMATION_FIELD_CLASS = 'password-confirmation' +function disableButtonWhenEmptyString (str, button) { + str.length === 0 ? disableBtn(button) : enableBtn(button) +} + // Checks if the password is equivalent to confirmation and has at least 1 character. If not, // it will disable the button. // @param {HTMLElement} button - submit button for the form field @@ -17,10 +21,9 @@ const CONFIRMATION_FIELD_CLASS = 'password-confirmation' function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePopup = false) { const passwordText = password.value const confirmationText = confirmation.value - if (passwordText === confirmationText && passwordText.length > 0) { - enableBtn(button) - } else if (passwordText === confirmationText && passwordText.length === 0) { - disableBtn(button) + + if (passwordText === confirmationText) { + disableButtonWhenEmptyString(passwordText, button) } else { if (enablePopup) { Swal.fire({ From 3228d88674c7e5370638ea55f15e4a1f51c9c8ae Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Wed, 13 Oct 2021 19:19:28 -0400 Subject: [PATCH 14/15] Fixes cypress error I _think_ this should fix it but Im unsure... the before actions make it seem like the password is reset on each volunteer login but that just doesnt seem right... --- cypress/integration/volunteer/edit_profile.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/integration/volunteer/edit_profile.spec.js b/cypress/integration/volunteer/edit_profile.spec.js index 8edd233f5e..9bbafa48cb 100644 --- a/cypress/integration/volunteer/edit_profile.spec.js +++ b/cypress/integration/volunteer/edit_profile.spec.js @@ -9,7 +9,9 @@ context("Logging into cypress as a volunteer", () => { cy.contains("Change Password").click(); cy.contains("Current Password").should("exist"); cy.contains("New Password").should("exist"); + cy.get(".password-new").type("123456") cy.contains("New Password Confirmation").should("exist"); + cy.get(".password-confirmation").type("123456") cy.contains("Update Profile").click(); cy.contains("Profile was successfully updated.").should("exist"); }); From 3cbd191f7f514d72bbcc747cc7347817e43996bb Mon Sep 17 00:00:00 2001 From: Andrew Kloecker Date: Thu, 14 Oct 2021 09:07:10 -0400 Subject: [PATCH 15/15] Fixes failing cypres test The password_confirmation file was called on every page, resulting in some bad behavior. Basically I misunderstood how jquery worked --- app/javascript/src/password_confirmation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/src/password_confirmation.js b/app/javascript/src/password_confirmation.js index 38fdea8421..3a66f671a6 100644 --- a/app/javascript/src/password_confirmation.js +++ b/app/javascript/src/password_confirmation.js @@ -39,7 +39,7 @@ function checkPasswordsAndDisplayPopup (button, password, confirmation, enablePo // Expects the class name constants above are applied to the correct fields. See // `app/views/users/edit.html.erb` for usage $('document').ready(() => { - if ($(`.${SUBMIT_BUTTON_CLASS}`)) { + if ($(`.${SUBMIT_BUTTON_CLASS}`).length > 0) { const button = $(`.${SUBMIT_BUTTON_CLASS}`)[0] const password = $(`.${PASSWORD_FIELD_CLASS}`)[0] const confirmation = $(`.${CONFIRMATION_FIELD_CLASS}`)[0]