仅当点击“忘记密码”链接时如何使用 PATCH 方法

Question

我试图仅在单击忘记密码链接后才显示更改密码的表单。 我在调用 API 以更新用户密码时遇到问题。 以下是我用来创建 api、触发事件和处理 UI 和应用程序的文件。 请让我知道是否有人可以在这方面给我指点。

<!--------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
        }
    })
}

事件.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

您已经在 HTML 模板中使用类forgot-password定义了忘记密码链接

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

...但在 app.js 中，您将事件绑定到click-forgot-password

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

类名应该在 HTML 类属性和 jQuery 选择器中匹配（无论您使用什么名称）。