implemented notifications

app.coffee

@@ -22,53 +22,67 @@ if Meteor.isServer
     notes.find( { userId: @userId } ) unless not @userId
 
 if Meteor.isClient
+
   Meteor.subscribe "my-notes"
+
   # Notes template
-  Template.notes.notes = ->
-    notes.find().fetch()
+  Template.notes.notes = -> notes.find().fetch()
   Template.notes.events {
-    'click .delete': -> notes.remove @_id
-    'click .edit': ->
-      Template.edit.note = this; console.log Template.edit.note
-      UI.render Template.edit
+    'click .close-note': -> notes.remove @_id
+    'click .edit': -> Session.set 'note', this
   }
 
-  # Note Editor TODO: Make Reactive
-  Template.edit.show = ->
-    console.log Template.edit.note isnt undefined
-    Template.edit.note isnt undefined
-  Template.edit.note = undefined
-  Template.edit.events {
-    'click .close': -> Template.edit.note = undefined
+  # Note Editor
+  Template.editor.show = -> Session.get 'note'
+  Template.editor.events {
+    'click .close': -> Session.set 'note', undefined
     'click .save': -> null
   }
 
-  # Auth
-  Template.auth.alerts = []
-  Template.auth.errCallback = (err) ->
-    Template.auth.alert { msg: err.reason }
-
-  # TODO: make reactive
-  Template.auth.alert = (add,remove) ->
-    if add then Template.auth.alerts.push add
-    if remove
-      Template.auth.alerts.splice Template.auth.alerts.indexOf(remove), 1
-    Template.auth.alerts
-
+  # Notifications
+  alerts = []
+  alertDep = new Deps.Dependency
+  errCallback = (err) -> notify { msg: err.reason }
+  # Show a notification
+  notify = (data) ->
+    alerts.push {
+      title: data.title
+      msg: data.msg
+      id: data.id or alerts.length
+      type: data.type or "danger"
+    }; alertDep.changed()
+  # Clear all notifications
+  clearNotifications = -> alerts.clear(); alertDep.changed()
+  # Get all the notifications
+  Template.notifications.notification = -> alertDep.depend(); alerts
+  Template.notifications.events {
+    'click .close-notification': (e,template) ->
+      alerts.splice alerts.indexOf(this), 1
+      alertDep.changed()
+  }
+  pressLogin = (template) ->
+    mail = template.find('#mail').value; pass = template.find('#pass').value
+    Meteor.loginWithPassword mail, pass, (err) ->
+      errCallback err; if Meteor.userId() then clearNotifications()
+  # Login and Register
   Template.auth.events {
-    'click .delete': (e,template) -> Template.auth.alert null, this
     'keypress .login': (e,template) ->
-      mail = template.find('#mail').value; pass = template.find('#pass').value
-      if e.keyCode is 13 # Login
-        Meteor.loginWithPassword mail, pass, Template.auth.errCallback
+      if e.keyCode is 13 then pressLogin template
     # Login
-    'click #login': (e,template) ->
-      mail = template.find('#mail').value; pass = template.find('#pass').value
-      Meteor.loginWithPassword mail, pass, Template.auth.errCallback
+    'click #login': (e,template) -> pressLogin template
     # Register
     'click #register': (e,template) ->
       mail = template.find('#mail').value; pass = template.find('#pass').value
-      Accounts.createUser { email: mail, password: pass }, Template.auth.errCallback
+      if not mail or mail.contains '@' is no or mail.endsWith '.' is yes or mail.endsWith '@' is yes
+        notify { msg: "Invalid Email" }
+      else
+        try
+          Accounts.createUser {
+            email: mail,
+            password: pass
+          }, (e) -> errCallback e; if Meteor.userId() then clearNotifications()
+        catch err
+          notify { msg: err }
   }
   # User Logged In
   Template.userInfo.events {

index.html

@@ -10,10 +10,11 @@
       </h1>
     </div>
     <div class="center-block" id="quicknotes">
-      {{> edit}} {{> notes}} {{#if currentUser}}
-      <div align="center"> {{> userInfo}} </div>
+      {{#if currentUser}}
+        {{> editor}} {{> notes}} {{> userInfo}}
+      {{else}}
+        {{> auth}}
       {{/if}}
-      {{#unless currentUser}} <div align="center">{{> auth}}</div>{{/unless}}
     </div>
   </div>
 </body>
@@ -22,45 +23,43 @@
   <ul class="list-group">
     {{#each notes}}
     <li class="note list-group-item">
-      <button type="button" class="edit close"><i class="fa fa-pencil-square-o"></i></button>
+      <button type="button" class="edit-note close"><i class="fa fa-pencil-square-o"></i></button>
       {{content}}
-      <button type="button" class="delete close">&times;</button>
+      <button type="button" class="close-note close">&times;</button>
     </li>
     {{/each}}
   </ul>
 </template>
 
 <template name="auth">
-  <p align="center">
-    Register a new Account or login
-  </p>
-  {{#each alerts}}
-    <div class="alert alert-warning">
-      {{msg}}
-      <button type="button" class="delete close">&times;</button>
-    </div>
-  {{/each}}
-  <input type="text" id="mail" class="form-control login" placeholder="Email">
-  <input type="password" id="pass" class="form-control login" placeholder="Password">
-  <br>
-  <p>Password must be at least 8 characters. Email must be a valid email</p>
-  <button type="button" id="register" class="btn-login btn btn-info">Register</button>
-  <button type="button" id="login" class="btn-login btn btn-info">Login</button>
+  <div align="center">
+    <p>Register a new Account or login</p>
+    {{> notifications }}
+    <input type="text" id="mail" class="form-control login" placeholder="Email">
+    <input type="password" id="pass" class="form-control login" placeholder="Password">
+    <br>
+    <p>Password must be at least 8 characters. Email must be a valid email</p>
+    <button type="button" id="register" class="btn-auth btn btn-info">Register</button>
+    <button type="button" id="login" class="btn-auth btn btn-info">Login</button>
+  </div>
 </template>
 
 <template name="userInfo">
-  <input type="text" id="newNote" class="form-control" placeholder="Add new note">
-  <p>Logged in as {{in}}</p>
-  <button type="button" id="logout" class="btn btn-danger">Logout</button>
+  <div align="center">
+    <input type="text" id="newNote" class="form-control" placeholder="Add new note">
+    <p>Logged in as {{in}}</p>
+    <button type="button" id="logout" class="btn btn-danger">Logout</button>
+  </div>
 </template>
 
-<template name="edit">
+<template name="editor">
+  {{> notifications }}
   {{#if note}}
   <div class="panel panel-info">
     <div class="panel-heading">
       <h3 class="panel-title">
         <input type="text" class="form-control title" placeholder="Title">
-        <button type="button" class="close">&times;</button>
+        <button type="button" class="close close-editor">&times;</button>
       </h3>
     </div>
     <div class="panel-body">
@@ -69,3 +68,12 @@
   </div>
   {{/if}}
 </template>
+
+<template name="notifications">
+{{#each notification}}
+  <div class="alert alert-{{type}}">
+    <p align="center">{{msg}}</p>
+    <button type="button" class="close close-notification">&times;</button>
+  </div>
+{{/each}}
+</template>

style.css

@@ -1,36 +1,51 @@
-.page-header {
-  text-align: center;
-}
-
+/* Generics */
 input {
   text-align:center;
 }
 
+.page-header {
+  text-align: center;
+}
+
 .container {
   max-width: 700px;
 }
 
-#quicknotes {
-  max-width: 500px;
-}
-
-.delete {
-  margin-top: -2px;
-}
-
 .close {
-  margin-right: 5px;
+  clear:both;
 }
 
-.edit {
-  clear: right;
+/* Custom Classes */
+
+.edit-note {
   float: left;
+  margin-right: 10px;
+}
+
+.btn-auth {
+  width: 100px;
+}
+
+.close-note {
+  float: right;
+  margin-top: -24px;
+}
+
+.close-notification{
+  float: right;
+  margin-top: -22px;
 }
 
 .area {
   resize: none;
 }
 
+/* IDs */
+
+#quicknotes {
+  max-width: 500px;
+}
+
 #newNote {
   max-width: 250px;
   margin-bottom: 10px;
@@ -39,7 +54,3 @@ input {
 #mail {
   margin-bottom: 10px;
 }
-
-.btn-login {
-  width: 100px;
-}