christopherhill/jsbin.UyUxifaw.css

## jsbin.UyUxifaw.css
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

form, input, button {
  border: none;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial;
  font-size: 12px;
}

h2 {
  font-size: 14px;
}


h2, button {
  color: #e8e8e8;
}

button {
  cursor: pointer;
}

.dialog {
  width: 500px;
  padding: 12px 0 12px;
}

.dialog-label {
  margin-bottom: 16px
}

.login-form {
  color: #e8e8e8;
  width: 300px;
  margin: 0px auto;
}

.full-width {
  clear: both;
  float: none;
  margin-bottom: 20px;
}

input.full-width {
  width: 276px;
  padding: 4px 12px 4px 12px;
}

button.full-width {
  width: 300px;
}

.rounded {
  border-radius: 2px;
}

input.medium-height {
  height: 30px
}

button.medium-height {
  height: 38px;
}

.dark {
  background: #232323;
}

.red {
  background: #db4a39;
}

## jsbin.UyUxifaw.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Apple Login Example</title>
</head>
<body>

  <div class="container">

  </div>

  <div class="dialog dark">
    <form class="login-form">
      <h2 class="dialog-label">User Login</h2>
      <input class="full-width medium-height rounded" type="text" placeholder="Apple ID">
      <input class="full-width medium-height rounded" type="password" placeholder="Password">
      <button class="full-width medium-height rounded red" >Login to your account</button>
    </form>
  </div>

</body>
</html>

## jsbin.UyUxifaw.js
var Login = function(elem) {

  var self = this;

  self.dialogElem = $(elem);
  self.formElem = $(elem).find("form");

  loginElem     = self.formElem.find("input");
  submitButton  = self.formElem.find("button:first");
  passwordElem  = self.formElem.find("input:second");

  self.url = "api.yoursite.com/login";

  self.validate = function() {
    if (loginElem.length && passwordElem.length)
    {
      return true;
    } else {
      return false;
    }
  };

  self.authenticate = function() {
    if (self.validate()) {
      var promise = self.sendLogin();
      promise.success(function(data) {
        console.log('login succeded');
      }).error(function(e,r,t) {
        console.log('login failed');
      });
    } else {
      alert('validation error');
    }
  };

  self.sendLogin = function() {
    return $.ajax({
      url: self.url,
      data: self.formElem.serialize(),
      dataType: "json"
    });
  };

  self.submitButton.on("submit", function() {
    self.authenticate();
  });

};

$(document).ready(function() {
  myLogin = new Login(".dialog");
});
	h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	}

	form, input, button {
	border: none;
	margin: 0;
	padding: 0;
	}

	body {
	font-family: Arial;
	font-size: 12px;
	}

	h2 {
	font-size: 14px;
	}


	h2, button {
	color: #e8e8e8;
	}

	button {
	cursor: pointer;
	}

	.dialog {
	width: 500px;
	padding: 12px 0 12px;
	}

	.dialog-label {
	margin-bottom: 16px
	}

	.login-form {
	color: #e8e8e8;
	width: 300px;
	margin: 0px auto;
	}

	.full-width {
	clear: both;
	float: none;
	margin-bottom: 20px;
	}

	input.full-width {
	width: 276px;
	padding: 4px 12px 4px 12px;
	}

	button.full-width {
	width: 300px;
	}

	.rounded {
	border-radius: 2px;
	}

	input.medium-height {
	height: 30px
	}

	button.medium-height {
	height: 38px;
	}

	.dark {
	background: #232323;
	}

	.red {
	background: #db4a39;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>Apple Login Example</title>
	</head>
	<body>

	<div class="container">

	</div>

	<div class="dialog dark">
	<form class="login-form">
	<h2 class="dialog-label">User Login</h2>
	<input class="full-width medium-height rounded" type="text" placeholder="Apple ID">
	<input class="full-width medium-height rounded" type="password" placeholder="Password">
	<button class="full-width medium-height rounded red" >Login to your account</button>
	</form>
	</div>

	</body>
	</html>
	var Login = function(elem) {

	var self = this;

	self.dialogElem = $(elem);
	self.formElem = $(elem).find("form");

	loginElem = self.formElem.find("input");
	submitButton = self.formElem.find("button:first");
	passwordElem = self.formElem.find("input:second");

	self.url = "api.yoursite.com/login";

	self.validate = function() {
	if (loginElem.length && passwordElem.length)
	{
	return true;
	} else {
	return false;
	}
	};

	self.authenticate = function() {
	if (self.validate()) {
	var promise = self.sendLogin();
	promise.success(function(data) {
	console.log('login succeded');
	}).error(function(e,r,t) {
	console.log('login failed');
	});
	} else {
	alert('validation error');
	}
	};

	self.sendLogin = function() {
	return $.ajax({
	url: self.url,
	data: self.formElem.serialize(),
	dataType: "json"
	});
	};

	self.submitButton.on("submit", function() {
	self.authenticate();
	});

	};

	$(document).ready(function() {
	myLogin = new Login(".dialog");
	});