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

Posted 2023-02-25

【中文标题】仅在单击“忘记密码”链接时如何使用 PATCH 方法

【英文标题】：How to use PATCH method only when `forgot password` link is clicked

【发布时间】：2021-12-02 16:31:12

【问题描述】：

我试图仅在单击忘记密码链接后显示更改密码的表单。我在调用 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
        
    )

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)
  

【问题讨论】：

“有问题”不是对您的问题的有用描述。请对正在发生的事情以及您希望发生的事情给出清晰、具体、准确和明确的描述。另请参阅 How to Ask 以及如何创建 minimal reproducible example。谢谢。

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

@Deppa;你检查我的答案了吗？ ***.com/a/69568520/494744

【参考方案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 选择器中匹配（无论您使用什么名称）。