JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>


<div class="modal hide" id="login">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 ng-show="newUser">log in</h3>
  </div>
  <form ng-controller="userController" novalidate class="form-horizontal" name="login" ng-submit="login()">
    <div class="modal-body">
      <div class="control-group">
        <label class="control-label">email:</label>
        <div class="controls">
          <input required type="email" ng-model="email" placeholder="email" />
        </div>
      </div>
      <div class="control-group{{pwError && ' error' || ''}}">
        <label class="control-label">password:</label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input required type="password" ng-model="pw" placeholder="password" />
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary" data-dismiss="modal">
        <i class="icon-ok icon-white"></i>&nbsp;&nbsp;log in
      </button>
    </div>
  </form>
</div>

JavaScript

var app = angular.module( 'myapp', [] );

app.controller( 'userController', function($scope){
    $scope.email = '';
    $scope.password = '';
    $scope.password_confirmation = '';
    $scope.pwError = false;
    $scope.incomplete = false;

    //match passwords
    $scope.$watch('password', function() {
        if ($scope.password !== $scope.password_confirmation) {
          $scope.pwError = true;
        }
        else {
          $scope.pwError = false;
        }
        $scope.incompleteTest();
      });

    $scope.$watch('password_confirmation', function() {
      if ($scope.password !== $scope.password_confirmation) {
        $scope.pwError = true;
      }
      else {
        $scope.pwError = false;
      }
      $scope.incompleteTest();
    });
    $scope.incompleteTest = function() {
      if ($scope.newUser) {
        if (!$scope.username.length ||
            !$scope.pw1.length ||
            !$scope.pw2.length         ) {
        
          $scope.incomplete = true;
        }
        else {
          $scope.incomplete = false;
        }
      }
      else {
        $scope.incomplete = false;
      }
    };

    //SIGNUP
    $scope.signup = function(){
    }

    //LOGIN
    $scope.login = function(){
    }


});