samedi 23 mars 2019

How to ensure Ember is saving variable state on reload

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>
  

    
        <p> Edit your IMAP settings below </p>

    
        <p>
        You currently have IMAP account <strong></strong>
        connected for messaging.
      </p>
        <button    class = 'btn btn-danger'>Disconnect</button>


    

  
    <p>
      You currently do not have an account linked for messaging.
    </p>

  


  
    <form name='imap' class='modern-form full-width' >
      <div class='row'>
        <div class='col-sm-6'>
          <h4>IMAP</h4>
          <div class='form-group'>
            <label>
              Host
            </label>
            
          </div>
          <div class='form-group'>
            <label>
              Port
            </label>
            
          </div>
          <div class='form-check'>
            
            <label for='ssl'>
              SSL
            </label>
          </div>
          <div class='form-check'>
            
            <label>
              TLS
            </label>
          </div>
          <div class='form-group'>
            <label>
              Username
            </label>
            
          </div>
          <div class='form-group'>
            <label>
              Password
            </label>
            
          </div>
        </div>
        <div class='col-sm-6'>
          <h4>SMTP</h4>
          <div class='form-group'>
            <label>
              Host
            </label>
            
          </div>
          <div class='form-group'>
            <label>
              Port
            </label>
            
          </div>
          <div class='form-check'>
            
            <label for='ssl'>
              SSL
            </label>
          </div>
          <div class='form-check'>
            
            <label>
              TLS
            </label>
          </div>
          <div class='form-group'>
            <label>
              Username
            </label>
            
          </div>
          <div class='form-group'>
            <label>
              Password
            </label>
            
          </div>
        </div>
      </div>
      <button type="submit" class='btn btn-success'>
        Save
      </button>
      <button  class = 'btn btn-danger'>
        Cancel
      </button>
  </form>


  <button  class= 'btn btn-success'>
   Connect email
 </button>


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.




Aucun commentaire:

Enregistrer un commentaire