piazzaoptical.com/jsapp/AccountApplicationBox.js

import _AccountApplication from "./_AccountApplication.js";

var AccountApplicationBox = function(){
  return {
    view: function(vnode){
        return m('.account-application.form-horizontal', [
              m('h1.text-center', 'Account Application Form'),
              m('h3', 'Account Information'),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', [
                      'Username',
                      m('small', '(use your email address)')
                      ])
                    ]),
                  m('col-9', [
                      m('input[type=text]', {
                        onchange: function(e){ _AccountApplication.username = e.target.value; },
                        value: _AccountApplication.username
                        })
                      ])
                  ]),
              m('h3', 'Personal Information'),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Salutation')
                    ]),
                  m('.col-9', [
                      _AccountApplication.salutations.map(function(s){
                        return [
                          m('label.form-radio.form-inline', [
                            m('input[type=radio][name=salutation]', {
                              onchange: function(e){ _AccountApplication.salutation = e.target.value; },
                              value: s.value
                              }),
                            m('i.form-icon',''),
                            s.text
                            ])
                          ];
                        })
                      ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'First Name')
                    ]),
                  m('.col-9', [
                    m('input[type=text][placeholder=First Name]', {
                      onchange: function(e){ _AccountApplication.firstname = e.target.value; },
                      value: _AccountApplication.firstname
                      })
                    ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Last Name')
                    ]),
                  m('.col-9', [
                      m('input[type=text][placeholder=Last Name]', {
                        onchange: function(e){ _AccountApplication.lastname = e.target.value; },
                        value: _AccountApplication.lastname
                        })
                      ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Position in Company')
                    ]),
                  m('.col-9', _AccountApplication.positions.map(function(s){
                        return [
                          m('label.form-radio.form-inline', [
                            m('input[type=radio][name=position]', {
                              onchange: function(e){ _AccountApplication.position = e.target.value; },
                              value: s.value
                              }),
                            m('i.form-icon',''),
                            s.text
                            ])
                          ];
                        })
                      )
                  ]),
              m('h3', 'Business Information'),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Name of Business')
                    ]),
                  m('.col-9', [
                      m('input[type=text][placeholder=Name of Business (your shop/clinic/practice name)]', {
                        onchange: function(e){ _AccountApplication.store = e.target.value; },
                        value: _AccountApplication.store
                        })
                      ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', [
                      'Address',
                      m('small', '(full address including city and country)')
                      ])
                    ]),
                  m('.col-9', [
                    m('input[type=text][placeholder=Address (full address including city and country)]', {
                      onchange: function(e){ _AccountApplication.address = e.target.value; },
                      value: _AccountApplication.address
                      })
                    ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Type of Business')
                    ]),
                  m('.col-9', [
                      _AccountApplication.practice_types.map(function(s){
                        return [
                          m('label.form-radio.form-inline', [
                            m('input[type=radio][name=practice_type].practice-type', {
                              onchange: function(e){ _AccountApplication.practice_type = e.target.value; },
                              value: s.value
                              }),
                            m('i.form-icon', ''),
                            s.text
                            ])
                          ];
                        })
                      ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Phone (Office)')
                    ]),
                  m('.col-9', [
                    m('input[type=text][placeholder=Phone (Office)]', {
                      onchange: function(e){ _AccountApplication.phone_office = e.target.value; },
                      value: _AccountApplication.phone_office
                      })
                    ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Phone (Cell/WhatsApp)')
                    ]),
                  m('.col-9', [
                    m('input[type=text][placeholder=Phone (Cell/WhatsApp)]', {
                      onchange: function(e){ _AccountApplication.phone_cell = e.target.value; },
                      value: _AccountApplication.phone_cell
                      })
                    ])
                  ]),
              m('.form-group', [
                  m('.col-3', [
                    m('label.form-label', 'Email Address')
                    ]),
                  m('.col-9', [
                    m('input[type=text][placeholder=Email Address].email', {
                      onchange: function(e){ _AccountApplication.email = e.target.value; },
                      value: _AccountApplication.email
                      })
                    ])
                  ]),
              m('button.btn.btn-primary.application-submit-button', {onclick: function(e){
                e.preventDefault(); // this is require since the button is in a form
                _AccountApplication.submit();
                }}, "Submit")
              ]);
      }
    };
  };

export default AccountApplicationBox;