I am having trouble following SimpLabs' starting guide for ember-simple-auth.
Following the guides on the home page, word for word, does not work.
When I test my login form, the "authenticate" action goes up to the controller and errors.
Stack:
TypeError: Cannot read property 'authenticate' of undefined
at http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61403:48
at invokeResolver (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23342:9)
at new Promise (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23328:9)
at __exports__.default.Ember.ObjectProxy.extend.authenticate (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61402:16)
at __exports__.default.Ember.Mixin.create.actions.authenticate (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61176:62)
at apply (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21143:27)
at superFunction [as _super] (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:17841:15)
at __exports__.default.Ember.Mixin.create.actions.authenticate (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61234:23)
at apply (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21141:32)
at superWrapper (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:20721:15)
Code
app/routes/application.js
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin);
app/controller/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(LoginControllerMixin, {
authenticator: 'authenticator:custom'
});
app/templates/login.hbs
<form {{action authenticate on='submit'}}>
<div>
<label for="identification">
<span class="sr-only">Login:</span>
<div class="input-group">
<span class="input-group-addon"><span class=" glyphicon glyphicon-user"></span></span>
{{input type="text" value=identification id="identification" class="form-control" placeholder="Login"}}
</div>
</label>
</div>
<div>
<label for="password">
<span class="sr-only">Password:</span>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
{{input type="password" value=password id="password" class="form-control" placeholder="Password"}}
</div>
</label>
</div>
<button type="submit" class="btn btn-block action-sm">Login</button>
</form>
Is there an extra step that the website forgot to mention? I feel like I have checked and rechecked everything...
Related
I have two models in Ember where one is a collection and the other is book. Collection model has a "hasMany" relationship with "book" and "book" "belongsTo" "collection". So what i want to do is have a form with both models in and store them at the same time.
Collection Model
// collection Model
export default DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string'),
books: DS.hasMany('book', { async: true })
});
The book model
//book Model
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
collection: DS.belongsTo('collection', {async: true})
});
The form
//Collection View
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=collection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=collection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=book.title1}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=book.description1}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=book.title2}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=book.description2}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection'}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The controller:
actions:{
addCollection: function(){
var name = this.get('collection.name');
var city = this.get('collection.city');
var title1 = this.get('book.title1');
var description1 = this.get('book.description1');
var title2 = this.get('book.title2');
var description2 = this.get('book.description2');
var newCollection = this.store.createRecord('collection', {
name: name,
city: city,
});
},
As you can see I'm trying to obtain 2 sets of books for this collection, but I'm having trouble on finding the correct procedure to store items to these models. I guess I may have to store the collection model first and then push the individual books to the collection. Is this correct? How would I go about it?
If the book is a record already you can simply push it onto the new collection. You don't don't need to assign anything to variables since your template is already bound to the record.
As an improvement I'd suggest creating the collection before the add as well. Either within your model, or on controller initiation.
So the action could be as simple as this.
actions:{
addCollection: function(){
// newCollection and Book need to be records
this.get("newCollection").pushObject(this.get('book'));
},
}
Note: the createRecord will not persist until you call .save() but you do not need to call .save() to create a relationship.
Forgive me for not noticing the multiple new books, here is a more pertinent example.
// template.hbs
<div class="row">
<div class="col-sm-12">
<div class='panel panel-default'>
<div class='panel-body'>
<form>
<fieldset>
<legend>
Collection
</legend>
<div class="row">
<div class="col-sm-6">
<label for="name" class="col-sm-2">Name</label>
<div class="col-sm-10">
{{input id="name" type="text" class="form-control" value=model.newCollection.name}}
</div>
</div>
<div class="col-sm-6">
<label for="city" class="col-sm-2">city</label>
<div class="col-sm-10">
{{input id="city" type="text" class="form-control" value=model.newCollection.city}}
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>
books
</legend>
<div class="row">
<div class="col-sm-6">
<label for="title1" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title1" type="text" class="form-control" value=model.book1.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description1" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description1" type="text" class="form-control" value=model.book1.description}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="title2" class="col-sm-2">title</label>
<div class="col-sm-10">
{{input id="title2" type="text" class="form-control" value=model.book2.title}}
</div>
</div>
<div class="col-sm-6">
<label for="description2" class="col-sm-2">description</label>
<div class="col-sm-10">
{{input id="description2" type="text" class="form-control" value=model.book2.description}}
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-sm-12">
<button {{action 'addCollection' model}} class="btn btn-primary">New Collection</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
// route.js
model () {
return Ember.RSVP.hash({
newCollection: this.get('store').createRecord('collection'),
book1: this.get('store').createRecord('book'),
book2: this.get('store').createRecord('book')
})
}
// controller.js
actions:{
addCollection(model) {
model.newCollection.pushObject(model.book1);
model.newCollection.pushObject(model.book2);
},
}
Notice I've used the model to create the records before hand and it's being passed into the action. You still may need to save for these changes to persist.
I'm trying to user the pattern attribute for email in Angular 4.3.0 but the field.errors.pattern returns true even when the email is correct.
I'm working on an existing code and this pattern was used in this.I'm also not able to understand the RegEx.
Below is the HTML form
<form #loginform="ngForm" class="form-horizontal b bg-white padding_default r-2x box-shadow" novalidate role="form">
<div class="text-danger wrapper text-center" *ngIf="authError">
</div>
<div class="animated fadeIn">
<div class=" m-b-md no-border ">
<input id="username" type="email" class="form-control input-lg b text-md" name="username" placeholder="Email" [(ngModel)]="loginData.email"
autofocus required #username="ngModel" pattern="emailPattern">
<div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
<div *ngIf="username.errors.required">
Name is required.
</div>
<div *ngIf="username.errors.pattern">
Name is invalid
</div>
</div>
<!--<div class="sxo_validate_msg text-danger text-sm" *ngIf="username.touched && isValidEmail">
<span>Invalid email address.</span>
</div>-->
</div>
<div class=" m-b-md no-border">
<input id="password" type="password" class="form-control input-lg b b-light text-md" name="password" [(ngModel)]="loginData.password"
placeholder="Password" required #password="ngModel">
<div class="text-danger sxo_validate_msg text-sm" *ngIf="password.dirty && password.invalid">
<span *ngIf="password.required">Password is required.</span>
</div>
</div>
<div class="m-b-md m-t-md">
<label class="i-checks text-sm">
<input name="rememberme" id="login-remember" type="checkbox" [(ngModel)]="loginData.rememberMe"><i></i> Remember me
</label>
</div>
<div class="controls m-t-md">
<div class="m-b-lg" *ngIf="showCaptche">
<re-captcha [site_key]="model.key" (captchaResponse)="setResponse($event)"></re-captcha>
<!--<div vc-recaptcha
theme="'light'"
key="model.key"
on-create="setWidgetId(widgetId)"
on-success="setResponse(response)"
on-expire="cbExpiration()"></div>-->
</div>
<input class="btn btn-lg btn-dark btn-block" value="Login" (click)="login()" [disabled]="!loginform.form.valid" />
<div [hidden]="!message" class="alert alert-danger sxo_validate_msg p-t-xs p-b-xs">
{{message}}
</div>
</div>
</div>
</form>
Below is the pattern
emailPattern:any = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
I have encounter the same problem too and I don't know why regex seems not working in my Angular 4 project. I start using Validators in Angular's FormGroup and the email validation works like a charm in my project.
Here's my snippet of code for my Edit Profile Page (edit-profile.component.html):
<form [formGroup]="editProfileForm" class="form-horizontal" (ngSubmit)="EditProfile()" >
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address </label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" formControlName="email" [(ngModel)]="user.email" required autofocus >
</div>
</div>
<span class="help-block">
<strong>{{ errors.email }}</strong>
</span>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn btn-primary" [disabled]="editProfileForm.pristine">
Update
</button>
</div>
</div>
</form>
and in the edit-profile.component.ts file:
import { NgForm, FormGroup, FormBuilder, FormArray, FormControl, Validators } from '#angular/forms';
private errors = {
email: '',
};
public editProfileForm: FormGroup;
constructor(
private fb: FormBuilder,
) {
this.createForm();
}
createForm() {
// constructor + form Validator
this.editProfileForm = this.fb.group({
email: ['', Validators.compose([Validators.required, Validators.email])],
});
}
EditProfile() {
if (this.editProfileForm.invalid) {
if (this.editProfileForm.controls['email'].hasError('required')) {
this.errors.email = 'E-mail name cannot be empty';
} else if (this.editProfileForm.controls['email'].hasError('email')) {
this.errors.email = 'E-mail is not valid';
}
} else {
// submit the form
}
}
Hope this helps!
Angular 4 has a built-in email validation tag that can be added within the input. E.g.:
<input type="email" id="contactemail" email>
This will be valid for a series of numbers and letters then an # then
another series of letters. It will not account for the dot after the #
-- for that you can use the "pattern" tag within the input and your standard regex.
Or if you want to go with pattern try this
<input type="text" name="email" pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$" required email/>
To understand/learn RegExp : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/RegExp
The following should work:
emailPattern:any = new RegExp(/^(([^<>()\[\]\\.,;:\s#']+(\.[^<>()\[\]\\.,;:\s#']+)*)|('.+'))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
I'm new to ember and trying to build a very simple app as a learning exercise in 2.4. I have a list of tasks that appear on the index page. And I've attached actions to each one to delete. And have one form row on the bottom of the page with an action to saveTask.
I have one index controller.
No defined index routes.
One model for tasks at app/models/task.js
My function to saveTask is working. But I can't get the deleteTask to work. I know I'm not passing the object I want to delete correctly. The error returned is that Uncaught TypeError: undefined is not a function index.js:26
deleteTask.
Can someone explain the correct syntax to me?
app/templates/index.hbs
{{#each model as |task| }}
<div class="form-horizontal form-group row">
<div class="col-xs-4 col-md-3">
{{input type="text" value=task.taskname class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.startdate class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.enddate class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.duration class="form-control"}}
</div>
<div class="col-xs-3 col-md-2">
{{input type="text" value=task.banding class="form-control"}}
</div>
<div class="col-xs-2 col-md-1">
<button type="button" class="btn btn-default btn-sm" aria-label="Remove task" {{action 'deleteTask' task}}>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
</div>
{{/each}}
and the controller
app/controllers/index.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
deleteTask(task) {
this.destroyRecord();
this.transitionTo('index');
}
}
});
You call destroyRecord in deleteTask on this not on the task, which is actually the record. I think that's all.
You should be able to see in developer tools the line in code which throws. I bet it's this.destroyRecord();.
I am implementing crud operation in my Ember project. I passed an object to the component and tried to use the same object for save, update action.
In route I created model as follows,
routes.js
model() {
return Ember.RSVP.hash({
employeeList : this.store.findAll("employee"),
employee : Ember.Object.create(),
});
}
component: employee-form.js
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">First Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.firstName placeholder="First Name"}}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lname">Last Name:</label>
<div class="col-sm-8">
{{input type="text" value=model.lastName placeholder="Last Name" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email">Email:</label>
<div class="col-sm-8">
{{input type="text" value=model.email placeholder="Email" }}
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="department">Department: </label>
<div class="col-sm-8">
{{input type="text" value=model.department placeholder="Department" }}
</div>
</div>
</form>
I am passing object to component as follows,
Template.hbs
{{employee-form model=model.employee}}
I need to clear the attributes data in object for using it for different operation. I tried to replace the model object with a new ember object and it worked. But I don't think it is a nice way to do, as it is creating new object always.
this.set("model", Ember.Object.create());
Can anyone help me with best approach to clear ember object attributes values.
Use rollbackAttributes()
RollbackAttributes -
If the model hasDirtyAttributes this function will discard any unsaved changes. If the model isNew it will be removed from the store.
model.rollbackAttributes();
Hi I'm trying to create a select list as part of a login form. The form submits and passes the two input text values but doesn't see the select list.
<form id="form-login" {{action 'authenticate' on='submit'}}>
<fieldset>
{{input id='identification' value=identification placeholder='Username'}}
{{input id='password' value=password placeholder='Password' type='password'}}
<select id="language" name="language">
<option value="ENG">English</option>
<option value="">Not English</option>
</select>
</fieldset>
{{#if errorMessage}}
<div>
<strong>Login failed:</strong> {{errorMessage}}
</div>
{{/if}}
<button type="submit" class="btn btn-default">Login</button>
</form>
I tried these steps but it says they're deprecated and don't work? http://emberjs.com/api/classes/Ember.Select.html
{{view "select" content=languages value=selectedLanguage}}
That's the only page on their documentation I could find?
Thanks!
The selected value needs to be set on the context. Right now the value isn't being set at all.
controller
import Ember from 'ember';
export default Ember.Controller.extend({
language: 'English',
languages: ['English', 'Non English'],
actions: {
authenticate() {
// Set values from form and submit to server...
}
}
});
template
<form id="form-login" {{action 'authenticate' on='submit'}}>
<fieldset>
{{input id='identification' value=identification placeholder='Username'}}
{{input id='password' value=password placeholder='Password' type='password'}}
<select onchange={{action (mut language) value="target.value"}} id="language" name="language">
{{#each languages as |languageChoice|}}
<option value={{languageChoice}} selected={{eq language languageChoice}}>{{languageChoice}}</option>
{{/each}}
</select>
</fieldset>
{{#if errorMessage}}
<div>
<strong>Login failed:</strong> {{errorMessage}}
</div>
{{/if}}
<button type="submit" class="btn btn-default">Login</button>
</form>
Here's a post with a good explanation of everything that's going on.