I'm creating and saving a form using Ember but when I reload the page the toggle keeping track of whether the form has been submitted or not resets to false.
I have a page where the default text is 'You have no account linked'. I then have a button that when pressed displays a form for the user to fill out information . When they click submit and save their information, the form disappears and renders some text about their account. When I reload the page however the text renders to the default 'You have no account linked', and when I click the submit form button, their information is populated in the form fields. How can I ensure that when the page is reloaded the text about the user account is displayed?
This is the controller for the page
export default Controller.extend({
isToggled: false,
emailConnected: false,
actions: {
submitImap(mailbox, toggle, email) {
this.get('ajax').request(`/api/accounts/${this.session.account.id}/mailboxes/imap`, {
method: 'POST',
data: mailbox
})
.then(() => Utils.notify("IMAP settings saved.", 'success'))
.catch(() => Utils.notify("Error saving IMAP account. Try again", 'error'));
this.send('contract', toggle);
this.send('expand', email);
},
disconnectIMAP(mailbox, property, email) {
this.get('ajax').request(`/api/accounts/${this.session.account.id}/mailboxes/imap`, {
method: 'DELETE',
data: {
user_id: mailbox.user_id
}
}).then(() => {
this.set(property, { smtp: {}});
})
.then(() => Utils.notify("IMAP removed. ", 'success'))
.catch(() => Utils.notify("Error removing IMAP account", 'error'));
this.send('contract',email );
},
expand: function(toggle) {
this.set(toggle, true)
},
contract: function(toggle) {
this.set(toggle, false)
}
}
});
This is the template handling the form submission
<h3>IMAP/SMTP</h3>
{{#if emailConnected}}
{{#if isToggled}}
<p> Edit your IMAP settings below </p>
{{else}}
<p>
You currently have IMAP account <strong>{{imapMailbox.username}}</strong>
connected for messaging.
</p>
<button {{action "disconnectIMAP" imapMailbox 'imapMailbox' 'emailConnected' }} class = 'btn btn-danger'>Disconnect</button>
{{/if}}
{{else}}
<p>
You currently do not have an account linked for messaging.
</p>
{{/if}}
{{#if isToggled}}
<form name='imap' class='modern-form full-width' {{action 'submitImap' imapMailbox 'isToggled' 'emailConnected' on="submit" }}>
<div class='row'>
<div class='col-sm-6'>
<h4>IMAP</h4>
<div class='form-group'>
<label>
Host
</label>
{{input type='text' required=true name='address' value=imapMailbox.address class='form-control'}}
</div>
<div class='form-group'>
<label>
Port
</label>
{{input type='text' required=true name='port' value=imapMailbox.port class='form-control'}}
</div>
<div class='form-check'>
{{input type='checkbox' name='ssl' checked=imapMailbox.ssl class='form-check-input'}}
<label for='ssl'>
SSL
</label>
</div>
<div class='form-check'>
{{input type='checkbox' name='starttls' checked=imapMailbox.starttls class='form-check-input'}}
<label>
TLS
</label>
</div>
<div class='form-group'>
<label>
Username
</label>
{{input type='text' required=true name='username' value=imapMailbox.username class='form-control'}}
</div>
<div class='form-group'>
<label>
Password
</label>
{{input type='password' required=true name='password' value=imapMailbox.password class='form-control'}}
</div>
</div>
<div class='col-sm-6'>
<h4>SMTP</h4>
<div class='form-group'>
<label>
Host
</label>
{{input type='text' required=true name='smtp_address' value=imapMailbox.smtp.address class='form-control'}}
</div>
<div class='form-group'>
<label>
Port
</label>
{{input type='text' required=true name='smtp_port' value=imapMailbox.smtp.port class='form-control'}}
</div>
<div class='form-check'>
{{input type='checkbox' name='smtp_ssl' checked=imapMailbox.smtp.ssl class='form-check-input'}}
<label for='ssl'>
SSL
</label>
</div>
<div class='form-check'>
{{input type='checkbox' name='smtp_starttls' checked=imapMailbox.smtp.enable_starttls_auto class='form-check-input'}}
<label>
TLS
</label>
</div>
<div class='form-group'>
<label>
Username
</label>
{{input type='text' required='true' name='smtp_username' value=imapMailbox.smtp.user_name class='form-control'}}
</div>
<div class='form-group'>
<label>
Password
</label>
{{input type='password' required='true' name='smtp_password' value=imapMailbox.smtp.password class='form-control'}}
</div>
</div>
</div>
<button type="submit" class='btn btn-success'>
Save
</button>
<button {{action 'contract' 'isToggled'}} class = 'btn btn-danger'>
Cancel
</button>
</form>
{{else}}
<button {{action 'expand' 'isToggled'}} class= 'btn btn-success'>
Connect email
</button>
{{/if}}
Right now, if I submit the form the behavior is as expected, displaying the current username of the account, but on reload the emailConnected variable resets to false and the default of 'you have no account connected' is present and when I click the form the values are populated.
If you reload the page (or) switch to a different route, the controller's property isToggled will reset to its initial state (i.e) to false in your case.
If you want to maintain the state and make use of the property isToggled at various parts of your application, you can use ember service
But in your case, you want to maintain the property state even after the page reloads. ember service doesn't maintain the state after the page reloads.
Here comes the use of browsers localStorage
So, in your case -
1) store the value of the property isToggled in browsers localStorage
import { computed } from '#ember/object';
export default Controller.extend({
isToggled: computed(function () {
// when the user visits the page for the very first time,
// isToggled value is set to false,
// from next time it gets the value from browsers localStorage.
if (localStorage.isToggled) {
return JSON.parse(localStorage.isToggled);
} else {
return false;
}
}),
...
actions: {
...
expand: function() {
localStorage.setItem('isToggled', JSON.stringify(true));
this.set('isToggled', true);
},
contract: function() {
localStorage.setItem('isToggled', JSON.stringify(false));
this.set('isToggled', false);
}
...
}
});
Now when the page is reloaded the isToggled property state doesn't change to the initial state.
You can find the isToggle browsers localStorage variable in your browsers developer tool: Application -> Local Storage tab
You could also use Ember Local Storage library to achieve this: https://github.com/funkensturm/ember-local-storage
Related
I'm having trouble with uploading images in Ember.js
I have a form to create a user :
<div class="container">
<form onsubmit={{action "createUser"}} enctype="multipart/form-data">
<div class="form-group">
<label for="firstName">First name: </label>
{{input type="text" class="form-control" id="firstName" required="true" value=firstName}}
</div>
<div class="form-group">
<label for="lastName">Last name: </label>
{{input type="text" class="form-control" id="lastName" required="true" value=lastName}}
</div>
<div class="form-group">
<label for="age">Age: </label>
{{input type="number" class="form-control" id="age" required="true" value=age}}
</div>
<div class="form-group">
<label for="job">Job: </label>
{{input type="text" class="form-control" id="job" required="true" value=job}}
</div>
<div class="form-group">
<label for="image">Picture: </label>
{{input type="file" class="form-control" id="image" value=image}}
</div>
<button type="submit" class="btn btn-info">Create</button>
</form>
I know I should encode images in base64 but I have no idea how to do that since I've never done it before.
And in the view, this is how I'm trying to get the image (I know this is not what I should do but I don't know how to do it) :
<div class="container">
<h1>{{model.firstName}} {{model.lastName}}</h1>
<p>Age: {{model.age}} years old</p>
<p>Job: {{model.job}}</p>
<img src="{{model.image}}" alt="img" id="image">
</div>
Any ideas, suggestions, help please ?
EDIT :
actions: {
createUser(event) {
event.preventDefault();
let user = this.store.createRecord('user', {
firstName: this.firstName,
lastName: this.lastName,
age: this.age,
job: this.job,
image: this.image
});
user.save().then (() => {
this.transitionToRoute('user', user.id);
});
}
}
Make use of ember-file-upload addon. The addon takes care in encoding them as a Base64 data url. In your case follow the below steps,
hbs form page:
<form onsubmit={{action 'createUser'}}>
<div class="form-group">
<label for="firstName">First name: </label>
{{input type="text" class="form-control" id="firstName" required="true" value=firstName}}
</div>
...
//other input fields
...
{{#file-upload name="avatar"
accept="image/*"
onfileadd=(action 'setAvatar')}}
// preview image before uploading
{{#if avatar}}
<img src={{avatar}}
<a id="upload-avatar">Add a photo</a>
{{else}}
<a id="upload-avatar">Add a photo</a>
{{/if}}
{{/file-upload}}
<button type="submit">Create</button>
</form>
hbs view page:
<div class="container">
<h1>{{model.firstName}} {{model.lastName}}</h1>
<p>Age: {{model.age}} years old</p>
<p>Job: {{model.job}}</p>
<img src={{model.image}} alt="img" id="image">
</div>
js:
import Controller from '#ember/controller';
export default Controller.extend({
avatarFile: null,
actions: {
createUser(event) {
event.preventDefault();
// upload file to backend
let file = this.get('avatarFile');
// make a api call to the url `/upload` (modify the url as you wish)
file.upload('/upload').then((response) => {
// save user model once the image is been uploaded successfully to the server
let user = this.store.createRecord('user', {
firstName: this.firstName,
...
// get the image_url from backend response
image: response.image_url
});
user.save().then((response) => {
// get the user_id in response
this.transitionToRoute('user', response.user_id);
});
});
},
setAvatar(file) {
this.set('avatarFile', file);
// Set the URL so we can see a preview
file.readAsDataURL().then((url) => {
this.set('avatar', url);
});
}
}
});
You can refer to the entire documentation here
Replace
{{input type="file" class="form-control" id="image" value=image}}
with
<input type="file" class="form-control" id="image" onchange={{action "uploadFile"}}/>
<br> Chosen image is <br>
<img src={{image}} />
This will trigger the uploadFile action when the image is chosen.
In your js file, add the action as ,
actions: {
uploadFile: function(event) {
var self = this;
const reader = new FileReader();
const file = event.target.files[0];
let imageData;
reader.onload = function(){
imageData = reader.result;
self.set('image', imageData);
};
if (file) {
reader.readAsDataURL(file);
}
}
}
Source : https://stackoverflow.com/a/40370830/2824131
I'm using the latest Ember (3.2).
I have made extension of text-area component:
app/components/enterable-textarea.js
export default TextArea.extend({
keyPress(event) {
if (event.keyCode === 13) {
console.info('e ', event);
}
}
});
I see the debug output in the console once I hit the 'Enter' key.
In my route template I have simple form like:
<form {{action "save" model.newNote on='submit'}}>
<div class="form-group">
<label for="tag">Tag</label>
{{input type="text" value=model.newNote.tag
placeholder="#anytag" class="form-control"}}
</div>
<div class="form-group">
<label for="note">Notepad</label>
{{enterable-textarea value=model.newNote.note
rows="6" class="form-control"}}
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Ho do I pass form action to the component or fire the 'submit' event of the form?
I need to pass whole form to the route action by pressing the 'Enter'
You pass an action as a property and then call it as a function:
export default TextArea.extend({
onEnter: () => {}, //or function() {},
keyPress(event) {
if (event.keyCode === 13) {
this.get('onEnter')(); //or even this.onEnter();
}
}
});
{{enterable-textarea value=model.newNote.note
rows="6" class="form-control" onEnter=(action "save" model.newNote)}}
Read more about actions
I have a simple contact form, with validation done using ember-cp-validations https://github.com/offirgolan/ember-cp-validations and I now need to integrate the new Google Recaptcha into that.
For the rendering of the recaptcha, I am using this code - https://gist.github.com/cravindra/5beeb0098dda657433ed - which works perfectly.
However, I don't know how to deal with the verification process to allow the form to be submitted/prevented if the challenge is correct/incorrect or not provided
Here is a truncated version of my contact-form component
import Ember from 'ember';
import Validations from './cp-validations/contact-form';
import config from '../config/environment';
export default Ember.Component.extend(Validations,{
data:{},
nameMessage:null,
init() {
this._super(...arguments);
this.set('data',{});
},
actions:{
submitForm() {
this.validate().then(({model,validations}) => {
if (validations.get('isValid')) {
// submit form
}
else {
if(model.get('validations.attrs.data.name.isInvalid')){
this.set('nameMessage',model.get('validations.attrs.data.name.messages'));
}
}
})
}
}
});
Here is the template for the component, which includes the rendering of the recpatcha using the gist above
<form {{action 'submitForm' on='submit'}}>
<div class="row">
<div class="medium-6 columns">
{{input type="text" value=data.name id="name" placeholder="Enter your name"}}
<div class="error-message">
{{nameMessage}}
</div>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
{{google-recaptcha}}
</div>
</div>
<button class="button primary" type="submit">Submit</button>
</form>
The Validations import looks like this
import { validator, buildValidations } from 'ember-cp-validations';
export default buildValidations({
'data.name': {
validators: [
validator('presence',{
presence:true,
message:'Please enter your name'
})
]
},
});
Many thanks for any help!
Register captchaComplete in your google-recaptcha component and mix the answer with your validations
UPDATE
contact-form.hbs
<form {{action 'submitForm' on='submit'}}>
<div class="row">
<div class="medium-6 columns">
{{input type="text" value=data.name id="name" placeholder="Enter your name"}}
<div class="error-message">
{{nameMessage}}
</div>
</div>
</div>
<div class="row">
<div class="medium-12 columns">
{{google-recaptcha captchaComplete=validateRecatcha}}
</div>
</div>
<button class="button primary" type="submit">Submit</button>
</form>
contact-form.js
import Ember from 'ember';
import Validations from './cp-validations/contact-form';
import config from '../config/environment';
export default Ember.Component.extend(Validations,{
data:{},
nameMessage:null,
captchaValidated: false,
init() {
this._super(...arguments);
this.set('data',{});
},
actions:{
validateRecatcha(data){
//if data denotes captcha is verified set captchaValidated to true else false
},
submitForm() {
this.validate().then(({model,validations}) => {
if (validations.get('isValid') && this.get('captchaValidated')) {
// submit form
}
else {
if(model.get('validations.attrs.data.name.isInvalid')){
this.set('nameMessage',model.get('validations.attrs.data.name.messages'));
}
}
})
}
}
});
I feel as if this is a very simple problem to fix I am just not aware of how to fix it. Currently I have an outlet that displays a template like this:
user.hbs:
<div id="user-profile">
<img {{bind-attr src="avatarURL"}} alt="User's Avatar" class="profilePic"/>
<h2>{{name}}</h2>
<span>{{email}}</span>
<p>{{bio}}</p>
<span>Created {{creationDate}}</span>
<button {{action "edit"}}>Edit</button>
{{outlet}}
</div>
The template to be rendered at the outlet is this:
user_edit.hbs:
<div id="user-edit">
<h3>Edit User</h3>
<div class="panel-body">
<div class="row">
<label class="edit-user-label">Choose user avatar</label>
{{input class="form-control" value=avatarUrl}}
</div>
<div class="row">
<label>User name</label>
{{input class="form-control" value=name}}
</div>
<div class="row">
<label class="edit-user-label">User email</label>
{{input class="form-control" value=email}}
</div>
<div class="row">
<label class="edit-user-label">User short bio</label>
{{textarea class="text-control" value=bio}}
<div>
<div class="row">
<button {{action "save"}}>SAVE</button>
<button {{action "cancel"}}>CANCEL</button>
</div>
</div>
</div>
When I first visit the user route, the outlet does not display because the button has not been clicked. The button is hooked to a controller which takes care of the action. The action just transitions to the route where the template is displayed at the outlet. It appears just as expected but when I click on a different user model, the outlet from the previous user is still there without everything in the <div class="panel-body"> </div>. So Ember hides the panel-body div on transition but not the user-edit div. If you need more information I will be happy to provide it.
Here are the controllers:
userController:
App.UserController = Ember.ObjectController.extend({
actions: {
edit: function() {
this.transitionToRoute('user.edit');
}
}
});
Here is the userEditController:
App.UserEditController = Ember.ObjectController.extend({
actions: {
save: function() {
var user = this.get('model');
user.save();
this.transitionToRoute('user', user);
},
cancel: function() {
var user = this.get('model');
this.transitionToRoute('user', user);
}
}
})
Hi why dont you use {{#link-to 'edit' model}} instead of action ???
you can pass model to link-to so you dont have to get model in controller and then transitionToRoute
Look at this
I'm just wondering what the general pattern for validating forms in EmberJS? For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the fields with errors but not really sure how to do it. Should the IndexView validate the form or should I create a view for each field that validates its self on blur? Below is what I have in my IndexView.
App.IndexView = Ember.View.extend
create: (model) ->
valid = #_validate model
if valid is true
#get('controller').send 'createUser'
else
# HANDLE THE FIELDS WITH ERRORS
_validate: (model) ->
invalid = []
validations = {
firstName: #_validateString model.get 'firstName'
lastName: #_validateString model.get 'lastName'
email: #_validateEmail model.get 'email'
password: #_validatePassword model.get 'password'
accountType: #_validateString model.get 'accountType'
}
# This will get all of the values then runs uniq to see if the
# form is valid
validForm = _.chain(validations).values().uniq().value()
if validForm.length is 1 and validForm[0]
true
else
# other wise build up an array of the fields with issues
for field, val of validations
if val is false
invalid.push field
invalid
_validateString: (str) ->
return false unless str
if str isnt '' then true else false
_validateEmail: (str) ->
pattern = /^(([^<>()[\]\\.,;:\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,}))$/
pattern.test str
_validatePassword: (str) ->
return false unless str
if str.length >= 6 then true else false
and the template
<div class="row">
<div class="span12">
<div class="signup">
<form class="form-horizontal offset3">
<div class="control-group">
<label class="control-label" for="first_name">First Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="last_name">Last Name</label>
<div class="controls">
{{ view Ember.TextField placeholder="Last Name" required="true" valueBinding='lastName' name='last_name' viewName='lastNameField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
{{ view Ember.TextField placeholder="Email" required="true" type="email" valueBinding='email' name='email' viewName='emailField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
{{ view Ember.TextField placeholder="Password" required="true" type="password" valueBinding='password' name='password' viewName='passwordField'}}
</div>
</div>
<div class="control-group">
<label class="control-label" for="">Account Type</label>
<div class="controls">
{{#view Ember.RadioButtonGroup name="accountType" required="true" valueBinding="accountType"}}
<label class="radio">
{{view RadioButton checked='false' value="landlord"}}
Landlord
</label>
<label class="radio">
{{view RadioButton checked='false' required="true" value="tenant"}}
Tenant
</label>
{{/view}}
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn btn-primary" {{action create model target='view' }} type="submit" value="Sign Up">
</div>
</div>
</form>
</div>
</div>
</div>
I'm just wondering what the general pattern for validating forms in EmberJS?
There seem to be several patterns in use. It depends quite a bit on what is being validated, with the general strategy being to keep business logic far from the view layer as possible. Here are some links that may prove useful:
validations-in-emberjs-application.html recommends performing validation at the controller level, with views are used to trigger validation when focus changes. This screencast demonstrates how this pattern can be used to validate a few simple form-fields.
Asynchronous-Form-Field-Validation-With-Ember provides a few reusable components that can be used to perform simple validations at the view layer.
ember-validations is a library that can be used to add active-record style validation capabilities to any ember-object
For my App.IndexView I have a form and when you click the submit button the target set to the view so I can do some validation. This works great up to the point where I need to do something with the fields that have errors. I would like to just add a class to the field of erro but not really sure how to do it.
since you're looking to validate a number of fields at once it might make more sense to move this validation logic into the controller. Either way, typically you would bind class attributes for a given field to a property as follows:
<div class="controls" {{bindAttr class=firstNameError:error:success}}>
{{ view Ember.TextField placeholder="First Name" required="true" valueBinding='firstName' name='first_name' viewName='firstNameField'}}
</div>
So with this in place add a firstNameError property that returns true/false depending on results of your validation. Given your implementation it would probably make sense to set this property when _validate is run, but it could also be a computed property that performs validation in real-time.
Should the IndexView validate the form or should I create a view for each field that validates its self on blur?
That really depends on what you want the user experience to be like. FWIW my vote is to go with on-blur.