Permalink
Browse files

Add sign in state with pane to show how to do a login form

  • Loading branch information...
1 parent 835a07a commit 98c4fb130a6c7cc1cec78349340fb9e4b73253b7 Colin Campbell committed Jun 15, 2011
View
@@ -13,14 +13,25 @@ Contact.statechart = SC.Statechart.create({
autoInitStatechart: NO,
rootState: SC.State.design({
- initialSubstate: 'ready',
+ initialSubstate: 'signIn',
signIn: SC.State.plugin('Contact.SignInState'),
ready: SC.State.plugin('Contact.ReadyState')
})
});
+Contact.signInPane = SC.Pane.create({
+ layout: {centerX: 0, centerY: 0, height: 100, width: 150},
+ childViews: ['form'],
+ classNames: ['sign-in'],
+ defaultResponder: 'Contact.statechart',
+
+ form: SC.TemplateView.design({
+ templateName: 'sign_in_form'
+ })
+});
+
Contact.pane = SC.Pane.create({
layout: {centerX: 0, centerY: 0, height: 400, width: 800},
childViews: ['sidebar', 'contentView'],
@@ -0,0 +1,22 @@
+/*globals Contact */
+
+/**
+ @class
+ @extends SC.Object
+*/
+Contact.signInController = SC.Object.create(
+/** @scope Contact.signInController.prototype */ {
+
+ /**
+ @type String
+ @default null
+ */
+ email: null,
+
+ /**
+ @type String
+ @default null
+ */
+ password: null
+
+});
@@ -14,11 +14,27 @@ h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
-.sc-view.app {
+.sc-button {
+ background-color: #9c3;
+ border: 1px solid #8ac11d;
+ color: #fff;
+ padding: 3px 10px;
+ text-align: center;
+}
+
+.sc-view.app, .sc-view.sign-in {
background-color: #fff;
border: 1px solid #bbb;
}
+.sc-view.sign-in {
+ padding: 20px;
+
+ input {
+ margin-bottom: 15px;
+ }
+}
+
.sc-view.sidebar {
border-right: 1px solid #bbb;
@@ -56,11 +72,7 @@ h1, h2, h3, h4, h5, h6 {
float: right;
.sc-button {
- background-color: #9c3;
- border: 1px solid #8ac11d;
- color: #fff;
@include inline-block;
- padding: 3px 10px;
}
}
}
@@ -0,0 +1,10 @@
+{{#view SC.TextField valueBinding="Contact.signInController.email"}}
+ <input type="text" name="email" placeholder="Email" />
+{{/view}}
+{{#view SC.TextField valueBinding="Contact.signInController.password"}}
+ <input type="password" name="password" placeholder="Password" />
+{{/view}}
+
+{{#view SC.Button action="signIn"}}
+ <div class="button">Sign In</div>
+{{/view}}
@@ -1,3 +1,51 @@
/*globals Contact */
-Contact.SignInState = SC.State.extend();
+Contact.SignInState = SC.State.extend({
+
+ initialSubstate: 'form',
+
+ enterState: function() {
+ Contact.signInPane.append();
+ },
+
+ exitState: function() {
+ Contact.signInPane.remove();
+ },
+
+ form: SC.State.design({
+ signIn: function() {
+ var email = Contact.signInController.get('email'),
+ password = Contact.signInController.get('password');
+
+ if (SC.empty(email)) {
+ alert("COMMON.BRO, enter an email");
+ } else if (SC.empty(password)) {
+ alert("COMMON.BRO, enter an password");
+ } else {
+ this.gotoState('signInRequest', {email: email, password: password});
+ }
+ }
+ }),
+
+ signInRequest: SC.State.design({
+ enterState: function(context) {
+ var email = context ? context.email : null,
+ password = context ? context.password : null,
+ statechart = this.get('statechart');
+
+ // here is where you'd authenticate the user
+ // we're just going to fire off an action
+ // after we wait some time to simulate a request
+ console.log("Checking log in for %@ with password: %@".fmt(context.email, context.password));
+
+ this.invokeLater(function() {
+ statechart.sendAction('signInSuccessful');
+ }, 250);
+ },
+
+ signInSuccessful: function() {
+ this.gotoState('ready');
+ }
+ })
+
+});
@@ -1,7 +1,5 @@
/*globals Contact */
-sc_require('views/person_list_item');
-
Contact.PeopleList = SC.TemplateCollectionView.extend({
classNames: ['people-list'],

0 comments on commit 98c4fb1

Please sign in to comment.