I'm new to ember.js and I find it pretty confusing to figure out which is a good way for authentication (version 2.x) since most of the examples on the web seem to be outdated. Also the documentation often doesn't come with easy to understand beginner examples.
Right now I'm following this tutorial. The initializer works apparently, I can also trigger the action login but then it gets stuck on the controller.get bit. The console spits out a TypeError: controller.get(...) is undefinedTypeError: controller.get(...) is undefined.
app/components/login-form
...
actions: {
login: function() {
var controller = this;
controller.get("session").login().then(function(admin) {
// Persist your users details.
}, function() {
// User rejected authentication request
});
}
}
...
app/templates/components/login-form
<form {{action 'login' on='submit'}}>
<div class="form-group">
<label for="email">Login</label>
{{input value=email placeholder='Enter Login' class='form-control'}}
</div>
<div class="form-group">
<label for="password">Password</label>
{{input value=password placeholder='Enter Password' class='form-control' type='password'}}
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
app/templates/admin.hbs
<div class="page-header">
<h1>Login</h1>
</div>
{{login-form}}
I hope somebody can point me into the right direction to get this working. I'd also appreciate any general advice where to find good examples or explanations concerning the ember 2.x way of authentication.
Edit: I need to have this working with Firebase.
http://ember-simple-auth.com/
looks like your best bet. They have a good video on setting it up too.
For connection to firebase you could create backend to authenticated with and have that check firebase. I'm using express and jwt in node.js to communicate with my mongoDB database.
Related
Since I can use wire:click to submit a livewire component properties, why bother to use <form>?
Using the document ContactForm as a example.
class ContactForm extends Component
{
public $name;
public $email;
protected $rules = [
'name' => 'required|min:6',
'email' => 'required|email',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function saveContact()
{
$validatedData = $this->validate();
Contact::create($validatedData);
}
}
In the beginning, when I wrote a livewire form component, it look like this:(using <form> and #csrf)
<form wire:submit.prevent="saveContact">
#csrf
<input type="text" wire:model="name">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email">
#error('email') <span class="error">{{ $message }}</span> #enderror
<button type="submit">Save Contact</button>
</form>
But now, I write a form like this:(without <form> and without #csrf)
<div>
<input type="text" wire:model="name">
#error('name') <span class="error">{{ $message }}</span> #enderror
<input type="text" wire:model="email">
#error('email') <span class="error">{{ $message }}</span> #enderror
<button type="button" wire:click="saveContact">Save Contact</button>
</div>
The document says that Livewire use a "checksum" to validate each request and response.
It also say that Livewire re-apply every authentication/authorization middleware.
All my member-restricted forms require users to login before fill and submit forms. So those forms are under protection of middleware('auth') and livewire request/response checksum.
But without using <form> and #csrf, especially without #csrf, does it still makes my form more vulnerable? Thank you!
The security documentation for Livewire outlines how it's internal security is handled. This describes the usage of the "checksum", which ensures that the data between each request is not tampered with.
However it does not mention CSRF explicitly. None the less, since each subsequent Livewire request is a POST request to the /livewire/message endpoint, it must be protected with a CSRF token.
If we check the source-code, you'll see that it does indeed pass in the CSRF token. And since Livewire uses normal Laravel routes, it will by default validate the token in the backend - ensuring all requests are protected.
This means that when using any Livewire action such as wire:click or wire:submit, you don't have to worry about CSRF, as its handled by the framework.
Recently i update my existing ember ember project to 2.10.0 version after update i try to run the project but it shows some compile error
uncaught Error: Compile Error: bs-form-element is not a helper
I include this in login page on my project like this
<div class="panel-body">
{{#bs-form formLayout="vertical" model=this action="loginAction" class="form-signin"}}
<fieldset>
{{bs-form-element controlType="text" placeholder="Bank ID" property="userid" value=userid elementId="userid" required="required" autofocus="autofocus" style="text-align:left" maxlength="7"}}
{{bs-form-element controlType="password" placeholder="Password" property="password" value=password elementId="password" required="required" style="text-align:left" maxlength="10"}}
<!--div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div-->
{{bs-button defaultText="Login" class="btn btn-lg btn-primary btn-block" buttonType="submit" }}
</fieldset>
{{/bs-form}}
</div>
I am not sure whether this is plugin related issue or something could some one please help to sort this issue
Ember throws this error if there is no component or helper with the given name found in your project or your dependent addon's.
Check your package.json and the version of ember-bootstrap. I think your app used pre 1.0, because bs-form-element is old api.
Maybe the addon was updated accidentally to >= 1.0, while updating ember.
Another possible oversight to check for, specific to ember-bootstrap and black/white lists, is accidentally including or excluding the needed component from the black/white lists. For example, if you're using a whitelist, make sure the needed component is referenced in it:
// ember-cli-build.js
'ember-bootstrap': {
'whitelist': [
'bs-form'
],
}
I'm having trouble trying to get ember and sails playing nice together when it comes to relationships with belongsTo/hasMany.
I have a simple form:
<form {{action 'addMessage' on='submit'}}>
<div class="form-group">
<label for='name'>Title</label>
{{input value=title class="form-control" required="required"}}
</div>
<div class="form-group">
<label for='location'>User</label>
{{input value=user class="form-control" required="required" value=1}}</div>
<p>
<button class="btn btn-primary btn-block" type="submit">Create Message</button>
</p>
And a controller with the action
actions: {
addMessage: function() {
var newMessage = this.store.createRecord('message', {
title: this.get('title'),
user: this.get('user')
});
newMessage.save().then(function() {
}, function(error) {
console.warn('Save Failed.', error);
});
},
I'm just passing a string, and a value which matches a user id. When I look at what's being passed the title is fine, but the user id is null.
I'm using sails ember blueprints so it should work, but think I might be doing something wrong.
I've uploaded the sample code here if someone can take a look https://github.com/jimmyjamieson/ember-sails-example
On your user input is says value=1 which I think is changing what the controller is writing that property as.
so instead of
{{input value=user class="form-control" required="required" value=1}}
try
{{input value=user class="form-control" required="required"}}
Ok, fixed. I've added a repo for others to look at. It works with ember and ember-data 2.0 https://github.com/jimmyjamieson/ember-sails-relationships-hasmany-belongsto-example
I have this rather simple form which has a email and a password input field. For my webpage Google Chrome's autofill/save password has activated. Now whenever I load my webpage, Chrome autofills the email and password field (which is nice).
Problem is EmberJS doesn't seem to "see" these auto filled values. If I use this.get('userName') for example in the controller, ember returns me blank values.
In order to have ember "see" these autofilled values, I have to click on each {{input}} or tab through them and then ember begins to see it.
It's a very simple form really:
<div>
<form class="form-signin form-vertical" id="login-form" {{action "login" on="submit"}}>
<h3 class="form-signin-heading text-center sf-primary-color">Please Login</h3>
{{input class="form-control" name="email" placeholder="Email address" value=userName type="text" tabindex=1}}
{{input class="form-control" name="password" placeholder="Password" value=password type="password" tabindex=2}}
{{#if errorMessage}}
<div class="alert alert-danger text-center sf-fade-in">{{errorMessage}}</div>
{{/if}}
<div class="well">
You may login with <kbd>demo</kbd>/<kbd>demo</kbd>.
</div>
{{input type="submit" value="Log In" tabindex=3}}
</form>
</div>
I have created a fiddle as well. The problem is not reproducible in the fiddle, because no matter how many times I've run it. The browser does not offer to save the password.
It does sound like Ember's data binding is not detecting a browser autofilled {{input}}
As an aside, I had to use the trick outlined here in order to get these input fields to offer auto complete.
EDIT: I defined an observer like below and it is not fired when the site is first loaded and auto fill has done it's job.
userNameChanged: function() {
console.log('User Name Changed');
}.observes('userName'),
Version Info follows:
DEBUG: ------------------------------- ember.js:3461
DEBUG: Ember : 1.4.0 ember.js:3461
DEBUG: Ember Data : 1.0.0-beta.4 ember.js:3461
DEBUG: Handlebars : 1.3.0 ember.js:3461
DEBUG: jQuery : 1.10.2 ember.js:3461
DEBUG: -------------------------------
This is what I'm using ATM.
Ember.TextField.reopen({
triggerEvents: function () {
Ember.run.next(this, function () {
this.$().trigger("change");
});
}.on("didInsertElement")
});
Modification of the solution found in the linked github issue thread.
(Updated according to #briangonzalez's suggestion)
Not perfect but functional solution:
Ember.TextField.reopen({
fetchAutofilledValue: function() {
var $textField = this.$();
setTimeout( function(){
$textField.trigger("change")
}, 250);
}.on('didInsertElement')
});
I don't have an answer, but I do have the same problem, and I found this Github issue:
https://github.com/emberjs/ember.js/issues/2968
Also, this is a nice summary about which events are dispatched by different browsers on autofill:
http://avernet.blogspot.in/2010/11/autocomplete-and-javascript-change.html
There are bunch of answer on how to jQuery upload. That's not what I want. I want to simply bind the "file" input so that it's send with my object when I submit the form.
App.Document = DS.Model.extend({
document_name: DS.attr(),
document_file: DS.attr()
});
<form role="form" {{action save on="submit"}}>
<div class="thumbnail" {{action 'start'}}>
<img {{bindAttr src=src}} class="preview"/>
<img class="shadow hide"/>
<canvas class="hide"></canvas>
</div>
{{input type="file" valueBinding="document_file" name="document_file" }}
{{input type="text" valueBinding="document_name" name="document_name"}}
<div>
<button class="btn btn-primary" {{action 'save'}}>Save</button>
</div>
</form>
I haven't found a single tutorial on simple upload. It can't be too hard to send a file right?
It is actually pretty simple to do it althougt it is not functionality out of the box. See my question here with working example: Ember.js value binding with HTML5 file upload
Ember Data doesn't support it out of the box, you'll need to override the adapter and implement your own version of the createRecord/updateRecord which modifies the ajax call. It's probably easier to just use jquery.