我试图显示更改密码的形式，只有在点击忘记密码链接后。我有问题调用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)
}
您已经在HTML模板
中使用类forgot-password定义了忘记密码链接<a class="forgot-password" href>Forgot password?</a>
…但在app.js中，你将事件绑定到类click-forgot-password
$('.click-forgot-password').on('click', authEvents.onChangePassword)
类名应该在HTML class属性和jQuery选择器中匹配(不管你使用什么名字)。