I am upgrading from Ember Classic to Ember Octane 3.17.0.
Question:
How do I access model data in a component?
Context:
I am attempting to allow for reset password functionality. This sends a URL string to the user's e-mail. When they click on the link, I am able to query the string and load the userId and token into the model. However, I cannot access that model data in the component. In Classic, I achieved this with the didReceiveAttrs
method, which is now deprecated. The documentation suggests using getters, but I am not clear on how that is done.
See the code below.
Note: I have not placed this in Ember Twiddle because I do not know how; that is another learning curve; and I tried looking for a walk-through but could not find one. If anyone wants to load this into Ember Twiddle then they have the code necessary to do so.
Template Component HBS:
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<h3>Reset Password</h3>
<form class="m-t" role="form" >
<div class="error-alert"></div>
<Input @type="hidden" @value= />
<Input @type="hidden" @value= />
<div class="form-group">
<Input @type="password" class="form-control" placeholder="New Password" @value= required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Confirm Password" @value= required="true" />
</div>
<div>
<button type="submit" class="btn btn-primary block full-width m-b">Reset Password</button>
</div>
</form>
</div>
</div>
Template HBS:
<Clients::ResetPasswordForm @resetPasswordModel= @resetPassword= @errors= />
Route:
import Route from '@ember/routing/route';
import AbcUnAuthenticatedRouteMixin from '../../mixins/abc-unauthenticated-route-mixin';
export default class ResetPasswordRoute extends Route.extend(AbcUnAuthenticatedRouteMixin) {
model(params) {
return {
userId: params.strUserId, // The strUserId found in the query parameters of the reset password URL.
newPassword: '',
confirmPassowrd: '',
token: params.strToken, // The strToken found in the query parameters of the reset password URL.
};
}
}
Component JS:
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ResetPasswordForm extends Component {
@tracked userId;
@tracked newPassword;
@tracked confirmPassword;
@tracked token;
@action
resetPassword(ev) {
ev.preventDefault();
this.args.resetPassword({
userId: this.userId,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword,
token: this.token
});
}
}
Controller JS:
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class ResetPassword extends Controller {
@service ajax;
queryParams = ['strUserId', 'strToken'];
strUserId = null;
strToken = null;
@action
resetPassword(attrs) {
if(attrs.newPassword == undefined || attrs.newPassword == null || attrs.newPassword == '' ||
attrs.confirmPassword == undefined || attrs.confirmPassword == null || attrs.confirmPassword == '' ||
attrs.newPassword != attrs.confirmPassword)
{
this.set('errors', [{
detail: "The new password and confirm password must be the same and their values and cannot be blank. Reset password was not successful.",
status: 1005,
title: 'Reset Password Failed'
}]);
this.set('model', attrs);
}
else {
this.ajax.request(this.store.adapterFor('application').get('host') + "/clients/reset-password", {
method: 'POST',
data: JSON.stringify({
data: {
attributes: {
"userid" : attrs.userId,
"new-password" : attrs.newPassword,
"confirm-password" : attrs.confirmPassword,
"token" : attrs.token
},
type: 'reset-passwords'
}
}),
headers: {
'Content-Type': 'application/vnd.api+json',
'Accept': 'application/vnd.api+json'
}
})
.then(() => {
// Transistion to the reset-password-success route.
this.transitionToRoute('clients.reset-password-success');
})
.catch((ex) => {
this.set('errors', ex.payload.errors);
});
}
}
}
Aucun commentaire:
Enregistrer un commentaire