unserver-unify/src/app/setting/signup_student.html

<div class="reg-page col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" ng-controller="SignupCtrl as ctrl">
  <div class="reg-header">
    <h2>
      {{ {eng:'Register new account',chn:'注册新用户'}|trans}}
    </h2>
    <p>
      {{'Sign up to gain access to many internship projects & jobs in Singapore!'|translate}}
    </p>
  </div>
  <div class="wizard_step">
    <div class="stage-container">
      <div class="stage col-md-4 col-sm-4" ng-class="{'tmm-current':ctrl.wizardstep==0 , 'tmm-success':ctrl.maxstep>0 }">
        <div class="stage-header fa fa-user">
        </div>
        <div class="stage-content">
          <h3 class="stage-title" translate>
            Personal Information
          </h3>
          <!--div class="stage-info">
            6 Fields
          </div-->
        </div>
      </div>
      <!--/ .stage-->
      <div class="stage col-md-4 col-sm-4" ng-class="{'tmm-current':ctrl.wizardstep==1, 'tmm-success':ctrl.maxstep>1}">
        <div class="stage-header fa fa-home">
        </div>
        <div class="stage-content">
          <h3 class="stage-title" translate>
            Additional Information
          </h3>
          <!--div class="stage-info">
            4 Fields
          </div-->
        </div>
      </div>
      <!--/ .stage-->
      <div class="stage col-md-4 col-sm-4" ng-class="{'tmm-current':ctrl.wizardstep==2}">
        <div class="stage-header fa fa-briefcase">
        </div>
        <div class="stage-content">
          <h3 class="stage-title" translate>
            Education & Career 
          </h3>
          <!--div class="stage-info">
            4 Fields
          </div-->
        </div>
      </div>
      <!--/ .stage-->
      <div class="clearfix">
      </div>
    </div>
  </div>
  <!-- Personal Starts -->
  <form class="form-horizontal" name="basicform" ng-class='{"shake":shaking}' ng-show="ctrl.wizardstep==0" role="form">
    <div class="row">
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.username.$invalid && submitted}'>
          <label class="control-label" for="username">
            <span translate="">
              User Name
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div>
            <input class="form-control margin-bottom-20" focus-me="true" name="username" ng-minlength="5" ng-model="ctrl.userCredentials.name" placeholder="{{ 'required_min_length' | translate:'{ length: 5 }' }}" required="" type="text" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.username.$invalid && submitted">
          <p class="help-block col-xs-12" translate="field_required_min_length" translate-value-field="{{ 'User Name' | translate }}" translate-values="{length: 5}">
          </p>
        </div>
      </div>
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.fullname.$invalid && submitted}'>
          <label class="control-label" for="fullname">
            <span translate="">
              Full Name
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div>
            <input class="form-control margin-bottom-20" name="fullname" ng-minlength="5" ng-model="ctrl.userCredentials.fullname" placeholder="{{ 'required_min_length' | translate:'{ length: 5 }' }}" required="" type="text" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.fullname.$invalid && submitted">
          <p class="help-block col-xs-12" translate="field_required_min_length" translate-value-field="{{ 'Full Name' | translate }}" translate-values="{length: 5}">
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.email.$invalid && submitted}'>
          <label class="control-label" for="email">
            <span translate="">
              Email
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div>
            <input class="form-control margin-bottom-20" name="email" ng-minlength="5" ng-model="ctrl.userCredentials.email" placeholder="{{ 'example@example.com' | translate:'{ length: 5 }' }}" required="" type="email" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.email.$invalid && submitted">
          <p class="help-block col-xs-12">
            <span translate="field_required_min_length" translate-value-field="{{ 'Email' | translate }}" translate-values="{length: 5}">
            </span>
            <span translate="">
              It must be a valid email address.
            </span>
          </p>
        </div>
      </div>
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.mobile.$invalid && submitted}'>
          <label class="control-label" for="mobile">
            <span translate="">
              Mobile
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div>
            <input class="form-control margin-bottom-20" name="mobile" ng-minlength="5" ng-model="ctrl.userCredentials.mobile" placeholder="{{ 'Enter your Mobile Number' | translate:'{ length: 8 }' }}" required="" type="text" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.mobile.$invalid && submitted">
          <p class="help-block col-xs-12">
            <span translate="field_required_min_length" translate-value-field="{{ 'Minimum length' | translate }}" translate-values="{length: 8}">
            </span>
            <span>
              {{ 'Enter your Mobile Number' | translate:'{ length: 8 }' }}
            </span>
          </p>
        </div>
      </div>

    </div>
    <div class="row">
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.password.$invalid && submitted}'>
          <label class="control-label" for="password">
            <span translate="">
              Password
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div  >
            <input class="form-control margin-bottom-20" name="password" ng-minlength="5" ng-model="ctrl.userCredentials.pass" placeholder="{{ 'required_min_length' | translate:'{ length: 5 }' }}" required="" type="password" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.password.$invalid && submitted">
          <p class="help-block col-xs-12" translate="field_required_min_length" translate-value-field="{{ 'Password' | translate }}" translate-values="{length: 5}">
          </p>
        </div>
      </div>
      <div class="col-md-6">
        <div ng-class='{"has-error":basicform.password2.$invalid && submitted}'>
          <label class="control-label" for="password2">
            <span translate="">
              Confirm Password
            </span>
            <span class="manditory">
              *
            </span>
          </label>
          <div  >
            <input class="form-control margin-bottom-20" match-target="ctrl.userCredentials.pass" name="password2" ng-minlength="5" ng-model="ctrl.userCredentials.re_pass" password-confirm="" placeholder="{{ 'It must be same as the password that previous enter.' | translate }}" required="" type="password" />
          </div>
        </div>
        <div class="form-group alert alert-danger" ng-show="basicform.password2.$invalid && submitted">
          <p class="help-block col-xs-12">
            <!-- <span translate="field_required_min_length" translate-value-field="{{ 'Confirm Password' | translate }}" translate-values="{length: 5}">
            </span> -->
            <span translate="">
              Please reconfirm the password that you have previously entered above.
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-12 text-right">
        <div>
          <div class="col-xs-offset-4 col-sm-offset-4 col-md-offset-3 col-lg-offset-2 ">
            <button class="btn btn-u" ng-click="ctrl.nextfrombasic(basicform)" translate="" type="button">
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <!-- Personal Ends -->
  <!-- Additional Starts -->
  <span ng-show="ctrl.wizardstep==1">
    <div class="row">
      <div class="col-md-6">
        <div>
          <label class="control-label" for="Gender">
            <span translate="">
              Gender
            </span>
          </label>
          <div  >
            <select class="form-control margin-bottom-20">
              <option>
                {{'Male'|translate}}
              </option>
              <option>
                {{'Female'|translate}}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <label class="control-label" for="age">
            <span translate="">
              Age
            </span>
          </label>
          <div  >
            <input class="form-control margin-bottom-20" name="age" ng-model="ctrl.userCredentials.age" type="number" placeholder="Enter your Age" />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div>
          <label class="control-label" for="Address">
            <span translate="">
              Address
            </span>
          </label>
          <div  >
            <input class="form-control margin-bottom-20" name="address" type="text"  placeholder="Enter your address"/>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div>
          <label class="control-label" for="city">
            <span translate="">
              City
            </span>
          </label>
          <div  >
            <input class="form-control margin-bottom-20" name="city" placeholder="{{ 'Enter your City' | translate }}" type="text" />
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 text-right no-padding">
      <div>
        <div class="col-xs-offset-4 col-sm-offset-4 col-md-offset-3 col-lg-offset-2 ">
          <button class="btn btn-warning" ng-click="ctrl.backtostep(0)" translate="" type="button">
            Back
          </button>
          <button class="btn btn-info" ng-click="ctrl.backtostep(2)" translate="" type="button">
            Next
          </button>
        </div>
      </div>
    </div>
  </span>
  <!-- Additional Ends -->
  <!-- Education & Career Starts -->
  <form class="form-horizontal reg-page margin-bottom-50" name="formcareer" ng-class='{"shake":shaking}' ng-show="ctrl.wizardstep==2" role="form">
    <form-directive form="ctrl.userProfiles" >
    </form-directive>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-5 checkbox">
        <label>
          <input ng-model="readTerm" style="margin-top:2px;" type="checkbox"/>
            {{ {eng:'I have read the',chn:'已阅读'}|trans}}
            <a class="color-green" ui-sref="index.agreement">
              {{ {eng:'Terms and Conditions',chn:' 服务条款'}|trans }}
            </a>
        </label>
      </div>
      <div class="col-md-5 checkbox">
        <label>
          <input type="checkbox" ng-model="ctrl.userCredentials.broadcastEmail" style="margin-top:2px;"> 
          {{ {eng:'Subscribe platform emails',chn:'订阅信息邮件'}|trans}} 
        </label>                        
      </div>
      <div class="col-md-4 text-right">
        <div>
          <div class="col-xs-offset-4 col-sm-offset-4 col-md-offset-3 col-lg-offset-2 ">
            <button class="btn btn-warning" ng-click="ctrl.backtostep(1)" translate="" type="button">
              Back
            </button>
            <button class="btn btn-u" ng-class="{'active': readTerm, 'disable': !readTerm}" ng-click="ctrl.register(true)" translate="" type="button">
              Register
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>