adding docs

docs/can-guides/commitment/recipes/recipes.md

@@ -16,6 +16,13 @@ simple validation on the payment form values.
 ![Credit Card App](https://user-images.githubusercontent.com/78602/27451508-d86e9bd8-5754-11e7-954b-a812e1ed63b1.png)
 
 
+## Signup and Login
+
+The [guides/recipes/signup-simple] walks through building simple signup, login forms and
+a logout button.   
+
+![Signup and Login](../../docs/can-guides/commitment/recipes/signup-simple/signup.png)
+
 ## File Navigator
 
 The [guides/recipes/file-navigator-simple] walks through building a simple navigation

docs/can-guides/commitment/recipes/signup-simple/1-setup.html

@@ -0,0 +1,40 @@
+<script type='text/stache' id='app-view'>
+  <p class="welcome-message">
+    Welcome Someone.
+    <a href="javascript://">log out</a>
+  </p>
+
+  <form>
+    <h2>Sign Up</h2>
+
+    <input placeholder='email'/>
+
+    <input type='password'
+         placeholder='password'/>
+
+    <button>Sign Up</button>
+
+    <aside>
+      Have an account?
+      <a href="javascript://">Log in</a>
+    </aside>
+  </form>
+
+  <form>
+    <h2>Log In</h2>
+
+    <input placeholder='email'/>
+
+    <input type='password'
+       placeholder='password'/>
+
+    <button>Log In</button>
+
+    <div class='error'>error message</div>
+
+    <aside>
+      Don't have an account?
+      <a href="javascript://">Sign up</a>
+    </aside>
+  </form>
+</script>

docs/can-guides/commitment/recipes/signup-simple/1-setup.js

@@ -0,0 +1,10 @@
+var AppViewModel = can.DefineMap.extend({
+
+});
+
+var viewModel = new AppViewModel({});
+
+var view = can.stache.from("app-view");
+var frag = view(viewModel);
+
+document.body.appendChild(frag);

docs/can-guides/commitment/recipes/signup-simple/2-check-login.html

@@ -0,0 +1,28 @@
+<script type='text/stache' id='app-view'>
+  {{#if sessionPromise.value}}
+
+    <p class="welcome-message">
+      Welcome {{sessionPromise.value.user.email}}.
+      <a href="javascript://">log out</a>
+    </p>
+
+  {{else}}
+
+    <form>
+      <h2>Sign Up</h2>
+
+      <input placeholder='email'/>
+
+      <input type='password'
+           placeholder='password'/>
+
+      <button>Sign Up</button>
+
+      <aside>
+        Have an account?
+        <a href="javascript://">Log in</a>
+      </aside>
+    </form>
+
+  {{/if}}
+</script>

docs/can-guides/commitment/recipes/signup-simple/2-check-login.js

@@ -0,0 +1,16 @@
+var AppViewModel = can.DefineMap.extend({
+  sessionPromise: {
+    value: function(){
+      return can.ajax({
+        url: "/api/session"
+	  });
+    }
+  }
+});
+
+var viewModel = new AppViewModel({});
+
+var view = can.stache.from("app-view");
+var frag = view(viewModel);
+
+document.body.appendChild(frag);

docs/can-guides/commitment/recipes/signup-simple/3-signup.html

@@ -0,0 +1,28 @@
+<script type='text/stache' id='app-view'>
+  {{#if sessionPromise.value}}
+
+    <p class="welcome-message">
+      Welcome {{sessionPromise.value.user.email}}.
+      <a href="javascript://">log out</a>
+    </p>
+
+  {{else}}
+
+    <form ($submit)="signUp(%event)">
+      <h2>Sign Up</h2>
+
+      <input placeholder='email' {^$value}="email"/>
+
+      <input type='password'
+           placeholder='password' {^$value}="password"/>
+
+      <button>Sign Up</button>
+
+      <aside>
+        Have an account?
+        <a href="javascript://">Log in</a>
+      </aside>
+    </form>
+
+  {{/if}}
+</script>

docs/can-guides/commitment/recipes/signup-simple/3-signup.js

@@ -0,0 +1,32 @@
+var AppViewModel = can.DefineMap.extend({
+  sessionPromise: {
+    value: function(){
+      return can.ajax({
+        url: "/api/session"
+	  });
+    }
+  },
+
+  email: "string",
+  password: "string",
+  signUp: function(event){
+    event.preventDefault();
+    this.sessionPromise = can.ajax({
+      url: "/api/users",
+      type: "post",
+      data: {
+        email: this.email,
+        password: this.password
+      }
+    }).then(function(user){
+      return {user: user};
+    });
+  }
+});
+
+var viewModel = new AppViewModel({});
+
+var view = can.stache.from("app-view");
+var frag = view(viewModel);
+
+document.body.appendChild(frag);

docs/can-guides/commitment/recipes/signup-simple/4-logout.html

@@ -0,0 +1,28 @@
+<script type='text/stache' id='app-view'>
+  {{#if sessionPromise.value}}
+
+    <p class="welcome-message">
+      Welcome {{sessionPromise.value.user.email}}.
+      <a href="javascript://" ($click)="logOut()">log out</a>
+    </p>
+
+  {{else}}
+
+    <form ($submit)="signUp(%event)">
+      <h2>Sign Up</h2>
+
+      <input placeholder='email' {^$value}="email"/>
+
+      <input type='password'
+           placeholder='password' {^$value}="password"/>
+
+      <button>Sign Up</button>
+
+      <aside>
+        Have an account?
+        <a href="javascript://">Log in</a>
+      </aside>
+    </form>
+
+  {{/if}}
+</script>

docs/can-guides/commitment/recipes/signup-simple/4-logout.js

@@ -0,0 +1,41 @@
+var AppViewModel = can.DefineMap.extend({
+  sessionPromise: {
+    value: function(){
+      return can.ajax({
+        url: "/api/session"
+	  });
+    }
+  },
+
+  email: "string",
+  password: "string",
+  signUp: function(event){
+    event.preventDefault();
+    this.sessionPromise = can.ajax({
+      url: "/api/users",
+      type: "post",
+      data: {
+        email: this.email,
+        password: this.password
+      }
+    }).then(function(user){
+      return {user: user};
+    });
+  },
+
+  logOut: function(){
+    this.sessionPromise = can.ajax({
+      url: "/api/session",
+      type: "delete"
+    }).then(function(){
+      return Promise.reject({message: "Unauthorized"});
+    });
+  }
+});
+
+var viewModel = new AppViewModel({});
+
+var view = can.stache.from("app-view");
+var frag = view(viewModel);
+
+document.body.appendChild(frag);

docs/can-guides/commitment/recipes/signup-simple/5-login.html

@@ -0,0 +1,49 @@
+<script type='text/stache' id='app-view'>
+  {{#if sessionPromise.value}}
+
+    <p class="welcome-message">
+      Welcome {{sessionPromise.value.user.email}}.
+      <a href="javascript://" ($click)="logOut()">log out</a>
+    </p>
+
+  {{else}}
+    {{#eq page "signup"}}
+
+      <form ($submit)="signUp(%event)">
+        <h2>Sign Up</h2>
+
+        <input placeholder='email' {^$value}="email"/>
+
+        <input type='password'
+             placeholder='password' {^$value}="password"/>
+
+        <button>Sign Up</button>
+
+        <aside>
+          Have an account?
+          <a href="javascript://" ($click)="gotoLogIn()">Log in</a>
+        </aside>
+      </form>
+
+    {{else}}
+
+      <form ($submit)="logIn(%event)">
+        <h2>Log In</h2>
+
+        <input placeholder='email' {^$value}="email"/>
+
+        <input type='password'
+           placeholder='password' {^$value}="password"/>
+
+        <button>Log In</button>
+
+        <aside>
+          Don't have an account?
+          <a href="javascript://" ($click)="gotoSignUp()">Sign up</a>
+        </aside>
+      </form>
+
+    {{/eq}}
+
+  {{/if}}
+</script>

docs/can-guides/commitment/recipes/signup-simple/5-login.js

@@ -0,0 +1,62 @@
+var AppViewModel = can.DefineMap.extend({
+  sessionPromise: {
+    value: function(){
+      return can.ajax({
+        url: "/api/session"
+	  });
+    }
+  },
+
+  email: "string",
+  password: "string",
+  signUp: function(event){
+    event.preventDefault();
+    this.sessionPromise = can.ajax({
+      url: "/api/users",
+      type: "post",
+      data: {
+        email: this.email,
+        password: this.password
+      }
+    }).then(function(user){
+      return {user: user};
+    });
+  },
+
+  logOut: function(){
+    this.sessionPromise = can.ajax({
+      url: "/api/session",
+      type: "delete"
+    }).then(function(){
+      return Promise.reject({message: "Unauthorized"});
+    });
+  },
+
+  page: {value: "login"},
+  gotoSignUp: function(){
+    this.page = "signup";
+  },
+  gotoLogIn: function(){
+    this.page = "login";
+  },
+  logIn: function(event){
+    event.preventDefault();
+    this.sessionPromise = can.ajax({
+      url: "/api/session",
+      type: "post",
+      data: {
+        user: {
+          email: this.email,
+          password: this.password
+        }
+      }
+    });
+  }
+});
+
+var viewModel = new AppViewModel({});
+
+var view = can.stache.from("app-view");
+var frag = view(viewModel);
+
+document.body.appendChild(frag);