harbor/views/account-settings.htm

<div class="container-fluid container-fluid-custom" element-height ng-controller="AccountSettingController as vm">
  <modal-dialog modal-title="// vm.modalTitle //" modal-message="// vm.modalMessage //" confirm-only="vm.confirmOnly" action="vm.action()"></modal-dialog>
  <div class="container container-custom">
    <div class="row extend-height">
	    <div class="section">
		    <h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'account_setting' | tr //</h1>
        <div class="col-md-12 col-md-offset-2 main-content">
          <form name="form" class="css-form form-horizontal" novalidate>              
            <div class="form-group">
              <label for="username" class="col-sm-3 control-label">// 'username' | tr //:</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="username" ng-model="user.username" name="uUsername" ng-disabled="true">                 
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="col-sm-3 control-label">// 'email' | tr //:</label>
              <div class="col-sm-7">
                <input type="email" class="form-control" id="email" ng-model="user.email" name="uEmail"  required>
                <div class="error-message" ng-messages="form.uEmail.$touched && form.uEmail.$error">
                  <span ng-message="required">// 'email_is_required' | tr //</span>
                  <span ng-message="email">// 'email_content_illegal' | tr //</span>
                </div>
              </div>
              <div class="col-sm-2">
                <span class="asterisk">*</span>
              </div>
            </div>
            <div class="form-group">
              <label for="fullName" class="col-sm-3 control-label">// 'full_name' | tr //:</label>
              <div class="col-sm-7"> 
                <input type="text" class="form-control" id="fullName" ng-model="user.realname" name="uFullName" required maxlength="20" invalid-chars>
                <div class="error-message" ng-messages="form.uFullName.$touched && form.uFullName.$error">
                  <span ng-message="required">// 'full_name_is_required' | tr //</span>
                  <span ng-message="invalidChars">// 'full_name_contains_illegal_chars' | tr //</span>
                  <span ng-message="maxlength">// 'full_name_is_too_long' | tr //</span>
                </div>
              </div>
              <div class="col-sm-2">
                <span class="asterisk">*</span>
              </div>
            </div>
            <div class="form-group">
              <label for="comments" class="col-sm-3 control-label">// 'comments' | tr //:</label>
              <div class="col-sm-7">
                <input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" maxlength="20">
                <div class="error-message" ng-messages="form.uComments.$touched && form.uComments.$error">
                  <span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
                </div>
              </div>
            </div>          
            <div class="form-group">
              <label for="toggleChangePassword" class="col-sm-3 control-label"><a id="toggleChangePassword" href="/change_password" >// 'change_password' | tr //</a></label>
            </div>
            
            <div class="form-group">
              <div class="col-md-offset-7 col-md-10">
                <input type="submit" class="btn btn-primary" ng-click="form.$valid && vm.updateUser(user)" value="// 'save' | tr //">                    
                <input type="button" class="btn btn-default" ng-click="vm.cancel(form)" value="// 'cancel' | tr //">
              </div>
            </div>  
            <div class="error-message">
              <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>