@incdevco/framework/angular/modules/user/templates/settings.html

node.js lambda framework

<md-dialog aria-label="Settings">
  <form name="settings" 
    ng-submit="crtl.save($event)">
    <md-toolbar>
      <div class="md-toolbar-tools" layout="row">
        <span class="md-headline" flex>User Settings</span>
      </div>
    </md-toolbar>
  	<md-dialog-content layout="column" layout-padding>
      <div layout="row">
        <md-input-container flex>
          <label for="name">Full Name</label>
          <input type="text" name="name" 
            ng-model="crtl.user.name"
            ng-required="true" />
          <ng-messages for="settings.name.$error" role="alert">
            <ng-message when="required">Your full name is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-input-container flex>
          <label for="name_pronunciation">Pronunciation</label>
          <input type="text" name="name_pronunciation" 
            placeholder="Spell your name how it sounds, no matter how wierd."
            ng-model="crtl.user.name_pronunciation"
            ng-required="false" />
          <div class="hint">You can use any special characters.</div>
          <ng-messages for="settings.name_pronunciation.$error" role="alert">
            <ng-message when="required">The pronuncation of your name is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-button class="md-icon-button"
          ng-click="more=!more">
          <md-icon class="material-icons"
            ng-hide="more">expand_more</md-icon>
          <md-icon class="material-icons"
            ng-show="more">expand_less</md-icon>
        </md-button>
      </div>
      <div layout="column" 
        layout-gt-md="row"
        ng-show="more">
        <md-input-container>
          <label for="name_prefix">Preferred Prefix</label>
          <input type="text" name="name_prefix" 
            ng-model="crtl.user.name_prefix"
            ng-required="false" />
          <ng-messages for="settings.name_prefix.$error" role="alert">
            <ng-message when="required">Your preferred prefix is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-input-container>
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" 
            ng-model="crtl.user.first_name"
            ng-required="false" />
          <ng-messages for="settings.first_name.$error" role="alert">
            <ng-message when="required">Your first name is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-input-container>
          <label for="last_name">Last Name</label>
          <input type="text" name="last_name" 
            ng-model="crtl.user.last_name"
            ng-required="false" />
          <ng-messages for="settings.last_name.$error" role="alert">
            <ng-message when="required">Your last name is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-input-container>
          <label for="name_suffix">Name Suffix</label>
          <input type="text" name="name_suffix" 
            ng-model="crtl.user.name_suffix"
            ng-required="false" />
          <ng-messages for="settings.name_suffix.$error" role="alert">
            <ng-message when="required">Your name suffix is required.</ng-message>
          </ng-messages>
        </md-input-container>
      </div>
      <div layout="column" layout-gt-md="row">
        <div layout="column" layout-padding>
          <md-input-container class="md-icon-float">
            <label for="email_address">Email Address</label>
            <md-icon class="material-icons">email</md-icon>
            <input type="email" name="email_address" 
              ng-model="crtl.user.email_address"
              ng-required="true" />
            <div class="hint">We will use this email address to contact you for issues related to this user account.</div>
            <ng-messages for="settings.email_address.$error" role="alert">
              <ng-message when="email">This is not a valid email address.</ng-message>
              <ng-message when="required">Your email address is required.</ng-message>
            </ng-messages>
          </md-input-container>
          <md-checkbox 
            ng-model="crtl.user.settings.email_address.promotional_allowed"
            ng-show="crtl.user.email_address">
            May use this email address to contact you for promotional purposes?
          </md-checkbox>
        </div>
        <div layout="column" layout-padding>
          <md-input-container class="md-icon-float">
            <label for="phone_number">Phone Number</label>
            <md-icon class="material-icons">phone</md-icon>
            <input type="tel" name="phone_number" 
              ng-model="crtl.user.phone_number"
              ng-required="false" />
            <div class="hint">We will use this phone number to contact you for issues related to this user account.</div>
            <ng-messages for="settings.phone_number.$error" role="alert">
              <ng-message when="required">Your phone number is required.</ng-message>
            </ng-messages>
          </md-input-container>
          <md-checkbox 
            ng-model="crtl.user.settings.phone_number.prefer_text"
            ng-show="crtl.user.phone_number">
            Would you prefer to receive text messages?
          </md-checkbox>
          <md-checkbox 
            ng-model="crtl.user.settings.phone_number.promotional_allowed"
            ng-show="crtl.user.phone_number">
            May use this phone number to contact you for promotional purposes?
          </md-checkbox>
        </div>
      </div>
      <md-divider></md-divider>
      <div layout="column">
        <md-input-container flex>
          <label for="address_street">Street Address</label>
          <input type="text" name="address_street" 
            ng-model="crtl.user.address.street"
            ng-required="false" />
          <div class="hint">We will use this address to contact you for issues related to this user account.</div>
          <ng-messages for="settings.address_street.$error" role="alert">
            <ng-message when="required">Your street address is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <md-input-container flex
          ng-show="crtl.user.address.street">
          <label for="address_unit">Unit</label>
          <input type="text" name="address_unit" 
            ng-model="crtl.user.address_unit"
            ng-required="false" />
          <ng-messages for="settings.address_unit.$error" role="alert">
            <ng-message when="required">Your unit is required.</ng-message>
          </ng-messages>
        </md-input-container>
        <div layout="column" layout-gt-md="row"
          ng-show="crtl.user.address.street">
          <md-input-container>
            <label for="address_city">City</label>
            <input type="text" name="address_city" 
              ng-model="crtl.user.address.city"
              ng-required="false" />
            <ng-messages for="settings.address_city.$error" role="alert">
              <ng-message when="required">Your city is required.</ng-message>
            </ng-messages>
          </md-input-container>
          <md-input-container>
            <label for="address_state_region">State / Region</label>
            <input type="text" name="address_state_region" 
              ng-model="crtl.user.address.state_region"
              ng-required="false" />
            <ng-messages for="settings.address_state_region.$error" role="alert">
              <ng-message when="required">Your state or region is required.</ng-message>
            </ng-messages>
          </md-input-container>
          <md-input-container>
            <label for="postal_code">Postal Code</label>
            <input type="text" name="postal_code" 
              ng-model="crtl.user.address.postal_code"
              ng-required="false" />
            <ng-messages for="settings.postal_code.$error" role="alert">
              <ng-message when="required">Your postal code is required.</ng-message>
            </ng-messages>
          </md-input-container>
          <md-input-container>
            <label for="address_country">Country</label>
            <input type="tel" name="address_country" 
              ng-model="crtl.user.address_country"
              ng-required="false" />
            <ng-messages for="settings.address_country.$error" role="alert">
              <ng-message when="required">Your country is required.</ng-message>
            </ng-messages>
          </md-input-container>
        </div>
        <md-switch 
          ng-model="crtl.user.settings.address.promotional_allowed"
          ng-show="crtl.user.address.street">
          May use this address to contact you for promotional purposes?
        </md-switch>
      </div>
    </md-dialog-content>
  	<md-dialog-actions>
      <md-button class="md-raised md-warn"
        ng-click="crtl.cancel($event)">
        Cancel
      </md-button>
      <md-button class="md-raised md-primary" type="submit"
        ng-disabled="settings.$invalid || settings.$pristine">
        Save
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>