Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit 98c4fb130a6c7cc1cec78349340fb9e4b73253b7 1 parent 835a07a
Colin Campbell authored
View
13 apps/contact/contact.js
@@ -13,7 +13,7 @@ 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')
@@ -21,6 +21,17 @@ Contact.statechart = SC.Statechart.create({
});
+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'],
View
22 apps/contact/controllers/sign_in.js
@@ -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
+
+});
View
22 apps/contact/resources/stylesheets/contact.css
@@ -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;
}
}
}
View
10 apps/contact/resources/templates/sign_in_form.handlebars
@@ -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}}
View
50 apps/contact/states/sign_in.js
@@ -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');
+ }
+ })
+
+});
View
2  apps/contact/views/people_list.js
@@ -1,7 +1,5 @@
/*globals Contact */
-sc_require('views/person_list_item');
-
Contact.PeopleList = SC.TemplateCollectionView.extend({
classNames: ['people-list'],
Please sign in to comment.
Something went wrong with that request. Please try again.