How to use PATCH method only when `forgot password` link is clicked

Question

I am trying to show the form for changing password only after clicking forgot password link. I am having issues calling API for updating the user password. Here are the files that I am using to create api, trigger events and handle the UI and the app. Please let me know if anyone can give me pointers on this.

<!--------Sign up------>
<section id="before-sign-in">
  <form class="border form" id="sign-up">
    <fieldset class="fieldset">
      <legend>Sign Up</legend>
      <input name="credentials[email]" type="email" placeholder="Email" required>
      <input name="credentials[password]" type="password" placeholder="Password" required>
      <input name="credentials[password_confirmation]" type="password" placeholder="Password Confirmation" required>
      <button class="btn btn-success">Sign Up</button>
    </fieldset>
  </form>

<!----------Sign In ----------->
  <form class="border form" id="sign-in">
    <fieldset class="fieldset">
      <legend>Sign In</legend>
      <input name="credentials[email]" type="email" placeholder="Email" required>
      <input name="credentials[password]" type="password" placeholder="Password" required>
      <button class="btn btn-primary"> Sign In </button>
      <p> 
      <a class="forgot-password" href>Forgot password?</a>
      </p>
    </fieldset>
  </form>
</section>

<!----ChangePassword ------>
<section class="click-forgot-password">
  <form class="changepassword" id="change-password">
    <fieldset>
      <legend>Change Password</legend>
      <input name="passwords[old]" type="password" placeholder="Old Password" required>
      <input name="passwords[new]" type="password" placeholder="New Password" required>
      <button class="btn btn-success">Change Password</button>
    </fieldset>
  </form>
</section>

/* app.js */

$(() => {
  // Whenever our #sign-up form is submitted, call the `onSignUp` function
  $('#sign-up').on('submit', authEvents.onSignUp)
  $('#sign-in').on('submit', authEvents.onSignIn)
  $('#sign-out').on('click', authEvents.onSignOut)
  $('.click-forgot-password').on('click', authEvents.onChangePassword)
})

api.js

/* POST request for signing up  */
const signUp =  (formData) => {
       return $.ajax({
        url:`${config.apiUrl}/sign-up`,
        method: 'POST',
        data: formData
    })
}
/* POST request for signing in */
const signIn =  (formData) => {
    //make a request to POST  /sign-up
    return $.ajax({
        url:`${config.apiUrl}/sign-in`,
        method: 'POST',
        data: formData
    })
}
/* DELETE request for signing out  */
const signOut = () => {
    return $.ajax({
        url:`${config.apiUrl}/sign-out`,
        method: 'DELETE',
        headers: {
            Authorization: 'Bearer '+ store.user.token
        }
    })
}

/* Change Password*/

//formData will be our our password object w/ old and new passwords
const changePassword = function (formData){
    return $.ajax({
        url:`${config.apiUrl}/change-password`,
        method: 'PATCH',
        data: formData,
        headers: {
            Authorization: 'Bearer '+store.user.token
        }
    })
}

events.js

const api = require('./api')
// require out ui functions to update the page
const ui = require('./ui')

const onSignUp = (event) => {
    event.preventDefault() 
    const form = event.target
    const formData = getFromFields(form)
    api.signUp(formData)
        .then(ui.signUpSuccess)
        .catch(ui.signUpFailure)
}


const onSignIn = (event) =>{
    event.preventDefault()
    const form = event.target
    const formData = getFormFields(form)
    api.signIn(formData)
        .then(ui.signInSuccess)
        .catch(ui.signInFailure)
}
//no need to pass event parameter and we are not passing any data like `sign-up` or `sign in`
const onSignOut = function () {
    api.signOut()
   .then(ui.onSignOutSuccess)
   .catch(ui.onSignOutFailure)
 // export our event handler functions, so we can use them
 // in app.js
 }
 const onChangePassword = function (event) {
    event.preventDefault()
    const form = event.target
    const formData = getFormFields(form)
  
    // make a PATCH /change-password request, pass it the old and new passwords
    api.changePassword(formData)
      .then(ui.changePasswordSuccess)
      .catch(ui.changePasswordFailure)
  }

ui.js

const store = require('../store')

 /* Sign in Sucess*/
const signUpSuccess = (responseData) => {
     $('#games-display').text('Signed up successfully!')
    // remove existing classes, then add a green text-success class from bootstrap
    $('#games-display').removeClass()
    $('#games-display').addClass('text-success')
    // clear (reset) all of the forms
    $('form').trigger('reset')
    console.log('responseData is', responseData)
    $('#sign-up').hide()
  }
  /* Sign up Failed*/
  const signUpFailure = ()=> {
    // message for failure
    $('#error-message').text('Sign up failed').fadeOut(5000)
  }
 /* Sign in Sucess*/
  const signInSuccess = (responseData) => {
    store.user = responseData.user
      // message for successful sign in
    $('#games-display').text('Signed in successfully!')
    $('#games-display').removeClass()
    $('#games-display').addClass('text-success').fadeOut(6000)
    $('form').trigger('reset')

    // After we sign in, hide the section with the id `before-sign-in`
   $('.form2').show()
     
    console.log('responseData is', responseData)
    $('#sign-up').hide()
    $('#sign-in').hide()
    $('#change-password').hide()
    $('.changepassword').trigger('click')
    $('.username-display').text("Signed in user: " + store.user.email)
  }
  /* Sign in Failed*/

  const signInFailure = (error) => {
    // message for failure
    $('#error-message').text('Sign in failed')
    // remove existing classes, then add a red text-danger class from bootstrap
    $('#error-message').removeClass()
    $('#error-message').addClass('text-danger').fadeOut(5000)
  
    // print the error
    console.error('error is', error)
  }
  
  /* Change password success and error handling functions */
  const changePasswordSuccess = function (responseData) {
      $('.changepassword').show()
    
    // tell the user it was successful
    $('#games-display').text('Changed password successfully!')
  
    // remove existing classes, then add a green text-success class from bootstrap
    $('#games-display').removeClass()
    $('#games-display').addClass('text-success')
  
    // clear (reset) all of the forms
    $('form').trigger('reset')
    console.log('responseData is', responseData)
  }

  const changePasswordFailure = function (error) {
    // tell the user it was failure
    $('#error-message').text('Changing passwords failed!')
  
    // remove existing classes, then add a red text-danger class from bootstrap
    $('#error-message').removeClass()
    $('#error-message').addClass('text-danger')
  
    // print the error
    console.error('error is', error)
  }

Answer 1

You have define the forgot password link with the class forgot-password at the HTML template

<a class="forgot-password" href>Forgot password?</a>

...but in app.js you're binding the event to the class click-forgot-password

$('.click-forgot-password').on('click', authEvents.onChangePassword)

The class names should match in the HTML class attribute and the jQuery selector (no matter what name you use).