Cloudinary Blog Post - Part 1

create-user.client.view.html

<div class="container">
  <div class="row">
    <div class="center-form panel">
      <div class="panel-body">
        <h2 class="text-center">Sign up</h2>
        <form method="post" ng-submit="signup()" name="signupForm">
          <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.displayName.$invalid && signupForm.displayName.$dirty }">
            <input class="form-control input-lg" type="text" name="fullName" ng-model="user.fullName" placeholder="Name" required autofocus>
            <span class="ion-person form-control-feedback"></span>
            <div class="help-block text-danger" ng-if="signupForm.fullName.$dirty" ng-messages="signupForm.fullName.$error">
              <div ng-message="required">You must enter your name.</div>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.email.$invalid && signupForm.email.$dirty }">
            <input class="form-control input-lg" type="email" id="email" name="email" ng-model="user.email" placeholder="Email" required>
            <span class="ion-at form-control-feedback"></span>
            <div class="help-block text-danger" ng-if="signupForm.email.$dirty" ng-messages="signupForm.email.$error">
              <div ng-message="required">Your email address is required.</div>
              <div ng-message="pattern">Your email address is invalid.</div>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.password.$invalid && signupForm.password.$dirty }">
            <input password-strength class="form-control input-lg" type="password" name="password" ng-model="user.password" placeholder="Password" required>
            <span class="ion-key form-control-feedback"></span>
            <div class="help-block text-danger" ng-if="signupForm.password.$dirty" ng-messages="signupForm.password.$error">
              <div ng-message="required">Password is required.</div>
            </div>
          </div>
          <div class="form-group has-feedback" ng-class="{ 'has-error' : signupForm.confirmPassword.$invalid && signupForm.confirmPassword.$dirty }">
            <input password-match="user.password" class="form-control input-lg" type="password" name="confirmPassword" ng-model="confirmPassword" placeholder="Confirm Password">
            <span class="ion-key form-control-feedback"></span>
            <div class="help-block text-danger" ng-if="signupForm.confirmPassword.$dirty" ng-messages="signupForm.confirmPassword.$error">
              <div ng-message="compareTo">Password must match.</div>
            </div>
          </div>
          <p class="text-center text-muted"><small>By clicking on Sign up, you agree to <a href="#">terms & conditions</a> and <a href="#">privacy policy</a></small></p>
          <button type="submit" ng-disabled="signupForm.$invalid" class="btn btn-lg btn-block btn-primary">Sign up</button>
          <br/>
          <p class="text-center text-muted">Already have an account? <a href="/#/login">Log in now</a></p>
        </form>
      </div>
    </div>
  </div>
</div>