community-app/app/views/administration/createuser.html

<div class="content-container">
    <ul class="breadcrumb">
        <li><a href="#/users">{{'label.anchor.users' | translate}}</a></li>
        <li class="active">{{'label.anchor.createuser' | translate}}</li>
    </ul>
	<form name="createuserform" novalidate="" class="card form-horizontal well" ng-controller="CreateUserController"
	      rc-submit="submit()">
	    <api-validate></api-validate>
	    <fieldset>
	        <legend>{{'label.heading.createuser' | translate}}</legend>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="username">{{'label.input.username' | translate}}<span
	                    class="required">*</span></label>

	            <div class="col-sm-3">
	                <input type="text" minlength="5" id="username" name="username" ng-model="formData.username" class="form-control" required late-Validate/>
	            </div>
	            <div class="col-sm-3">
					<span ng-show="createuserform.username.$invalid">
						<small class="error required">
							{{'label.usernameminfivechars' | translate}}
						</small>
					</span>
	                <form-validate valattributeform="createuserform" valattribute="username"/>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="firstname">{{'label.input.firstname' | translate}}<span
	                    class="required">*</span></label>

	            <div class="col-sm-3">
	                <input type="text" id="firstname" name="firstname" ng-model="formData.firstname" class="form-control" required
	                       ng-pattern="/(^[A-z])[A-z.'-]*/" late-Validate/>
	            </div>
	            <div class="col-sm-3">
                  <span ng-show="createuserform.firstname.$invalid && createuserform.firstname.$dirty">
                    <small class="error required" ng-show="createuserform.firstname.$error.pattern">
                        {{'validation.msg.client.name.cannot.start.specialchar.ornumber' | translate}}
                    </small>
                  </span>
	                <form-validate valattributeform="createuserform" valattribute="firstname"/>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2" for="lastname">{{'label.input.lastname' | translate}}<span
	                    class="required">*</span></label>

	            <div class="col-sm-3">
	                <input type="text" id="lastname" name="lastname" ng-model="formData.lastname" class="form-control" required
                  ng-pattern="/(^[A-z])[A-z.'-]*/" late-Validate/>
	            </div>
	            <div class="col-sm-3">
                  <span ng-show="createuserform.lastname.$invalid && createuserform.lastname.$dirty">
                      <small class="error required" ng-show="createuserform.lastname.$error.pattern">
                          {{'validation.msg.client.name.cannot.start.specialchar.ornumber' | translate}}
                      </small>
                  </span>
	                <form-validate valattributeform="createuserform" valattribute="lastname"/>
	            </div>
	        </div>
	        <div data-ng-switch on="formData.sendPasswordToEmail">
	            <div data-ng-switch-when="true">
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="email">{{'label.input.email' | translate}}<span
	                            class="required">*</span></label>

	                    <div class="col-sm-3">
	                        <input type="email" id="email" name="email" class="form-control" ng-model="formData.email" required late-Validate/>
	                    </div>
	                    <div class="col-sm-3">
	                        <form-validate valattributeform="createuserform" valattribute="email"/>
	                    </div>
	                </div>
	            </div>
	            <div data-ng-switch-when="false">
	                <div class="form-group" data-ng-show="!formData.sendPasswordToEmail">
	                    <label class="control-label col-sm-2" for="email1">{{'label.input.email' | translate}}</label>

	                    <div class="col-sm-3">
	                        <input type="email" id="email1" name="email1" class="form-control" ng-model="formData.email"/>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.autogeneratepassword' | translate}}</label>

	            <div class="col-sm-3">
	                <label class="checkbox">
	                    <input type="checkbox" ng-model="formData.sendPasswordToEmail">
	                </label>
	            </div>

				<label class="control-label col-sm-3">{{'label.input.overridepasswordexpiry' | translate}}
                    <i class="fa fa-question-circle"
                       uib-tooltip="{{'label.tooltip.overridepasswordexpiry' | translate}}"
                       tooltip-append-to-body="true">
                    </i>
                </label>
				<div class="col-sm-3">
				<label class="checkbox">
						<input type="checkbox" ng-model="formData.passwordNeverExpires">
					</label>
				</div>

	        </div>
	        <div data-ng-switch on="formData.sendPasswordToEmail">
	            <div data-ng-switch-when="false">
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="password">{{'label.input.password' | translate}}<span
	                            class="required">*</span></label>

	                    <div class="col-sm-3">
	                        <input type="password" minlength="6" id="password" name="password" ng-model="formData.password" class="form-control" required
								   late-Validate>
	                    </div>
	                    <div class="col-sm-3">
							<span ng-show="createuserform.password.$invalid">
								<small class="error required">
									{{'label.passwordminsixchars' | translate}}
								</small>
							</span>
							<form-validate valattributeform="createuserform" valattribute="password"/>
	                    </div>
	                </div>
	                <div class="form-group">
	                    <label class="control-label col-sm-2" for="repeatPassword">{{'label.input.repeatpassword' | translate}}<span
	                            class="required">*</span></label>

	                    <div class="col-sm-3">
	                        <input type="password" id="repeatPassword" name="repeatPassword" class="form-control"
	                               ng-model="formData.repeatPassword" required late-Validate>
	                    </div>
	                    <div class="col-sm-3">
	                        <form-validate valattributeform="createuserform" valattribute="repeatPassword"/>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.office' | translate}}<span class="required">*</span></label>

	            <div class="col-sm-3">
	                <select chosen="offices" id="officeId" ng-model="formData.officeId" class="form-control" name="officeId" data-ng-change="getOfficeStaff()"
	                        ng-options="office.id as office.name for office in offices" value="{{office.id}}" required>
	                    <option value="">--{{'label.menu.selectoffice' | translate}}--</option>
	                </select>
	            </div>
                <form-validate valattributeform="createuserform" valattribute="officeId"/>
	        </div>
	        <div class="form-group">
	            <label class="control-label col-sm-2">{{'label.input.staff' | translate}}</label>

	            <div class="col-sm-3">
	                <select chosen="staffs" id="staffId" ng-model="formData.staffId"  class="form-control"
	                        ng-options="staff.id as staff.displayName for staff in staffs" value="{{staff.id}}">
	                    <option value="">--{{'label.menu.selectstaff' | translate}}--</option>
	                </select>
	            </div>
	        </div>
			<div class="form-group">
				<div class="col-sm-3 col-md-3 col-md-offset-1">
					<label class="control-label col-sm-9">{{ 'label.input.availableroles' | translate }}</label>
					<select id="availableroles" ng-model="available" name="availableroles" class="form-control multiselectmin" multiple>
						<option ng-repeat="availablerole in availableRoles" value="{{availablerole.id}}">
							{{availablerole.name}}
						</option>
					</select>
				</div>
				<div class="col-sm-1 col-md-1 paddedtop25px">
					<button type="button" class="btn btn-primary" data-ng-click="addRole()"><i
							class="fa fa-angle-double-right"></i></button>
					<br/>
					<button type="button" class="btn btn-primary" data-ng-click="removeRole()"><i
							class="fa fa-angle-double-left"></i></button>
				</div>
				<div class="col-sm-3 col-md-3">
					<label class="control-label col-sm-9">{{ 'label.input.selectedroles' | translate}}<span
	                    class="required">*</span></label>
					<select id="roles" name="roles" ng-model="selected" class="form-control multiselectmin" multiple>
						<option ng-repeat="availablerole in selectedRoles" value="{{availablerole.id}}" required late-validate>
							{{availablerole.name}}
						</option>
					</select>
                    <form-validate valattributeform="createuserform" valattribute="roles"/>
				</div>
			</div>

	        <div class="col-md-offset-3">
	            <a id="cancel" href="#/users" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
	            <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_USER'>{{'label.button.save' | translate}}</button>
	        </div>
	    </fieldset>
	</form>
</div>