separate notifications and errors. Fixes #8

client/client.coffee

@@ -6,29 +6,28 @@ user = -> Meteor.user()
 UI.registerHelper "loggingIn", -> Meteor.loggingIn()
 
 # User Interface
-Template.userInfo.events {
+Template.userInfo.events
   'click #logout': (e,template) -> Meteor.logout()
-}
+
 Template.userInfo.in = -> Meteor.user().emails[0].address
 
 # Notes template
-Template.notes.truncateNoteDesc = (s) ->
+Template.notes.truncateNoteDesc = (s) -> s
-  if s.length > 52 then s.slice(0,48)+"..." else s
+  #if s.length > 52 then s.slice(0,48)+"..." else s
 Template.notes.notes = ->
   d = notes.find().fetch()
 Template.notes.events
   'click .close-note': ->
-    if Session.get('note')._id is @_id
+    if Session.get('note') and Session.get('note')._id is @_id
       Session.set 'note', undefined
     notes.remove @_id
   'click .edit-note': -> Session.set 'note', this
   'keypress #newNote': (e,template) ->
     if e.keyCode is 13 and template.find('#newNote').value isnt ""
-      notes.insert {
+      notes.insert
         title: template.find('#newNote').value
         content: ""
         userId: Meteor.userId()
-      }
       template.find('#newNote').value = ""
 
 # Note Editor
@@ -47,15 +46,14 @@ Template.editor.events
 # Notifications
 alerts = []
 alertDep = new Deps.Dependency
-errCallback = (err) -> notify { msg: err.reason }
+errCallback = (err) -> showError msg: err.reason
 # Show a notification
 notify = (data) ->
-  alerts.push {
+  alerts.push
     title: data.title
     msg: data.msg
-    id: data.id or alerts.length
     type: data.type or "danger"
-  }; alertDep.changed()
+  alertDep.changed()
 # Clear all notifications
 clearNotifications = -> alerts.clear(); alertDep.changed()
 # Get all the notifications
@@ -65,6 +63,15 @@ Template.notifications.events
     alerts.splice alerts.indexOf(this), 1
     alertDep.changed()
 
+# "Error" visualization template
+errorDep = new Deps.Dependency; shownError = undefined
+showError = (err) ->
+  shownError = err; shownError.type = err.type or "danger"
+  errorDep.changed()
+clearError = -> shownError = undefined; errorDep.changed()
+Template.error.error = -> errorDep.depend(); shownError
+Template.error.events 'click .close': -> clearError()
+
 # "Loading" template
 Template.loading.status = -> Meteor.status()
 
@@ -80,11 +87,11 @@ Template.auth.events
   'click #register': (e,template) ->
     mail = template.find('#mail').value; pass = template.find('#pass').value
     if not mail
-      notify { msg: "Please enter an Email" }
+      showError msg: "Please enter an Email"
     else if not pass
-      notify { msg: "Please enter a password" }
+      showError msg: "Please enter a password"
     else  if pass.length < 8
-      notify { msg: "Password too short" }
+      showError msg: "Password too short"
     else # Sending actual registration request
       try
         Accounts.createUser {
@@ -92,4 +99,4 @@ Template.auth.events
           password: pass
         }, (e) -> errCallback e
       catch err
-        notify { msg: err }
+        showError msg: err

client/index.html

@@ -39,7 +39,7 @@
 <template name="auth">
   <div align="center">
     <p>Register a new Account or login</p>
-    {{> notifications }}
+    {{> error}}
     {{#if loggingIn}}
       {{> loading}}
     {{else}}
@@ -64,7 +64,7 @@
 </template>
 
 <template name="editor">
-  <div align="center">{{> notifications }}</div>
+  <div align="center">{{> error }}</div>
   {{#if note}}
   <div class="panel panel-info">
     <div class="panel-heading">
@@ -91,6 +91,15 @@
 {{/each}}
 </template>
 
+<template name="error">
+{{#if error}}
+  <div class="alert alert-{{error.type}} error">
+    <p align="center">{{error.msg}}</p>
+    <button type="button" class="close close-error">&times;</button>
+  </div>
+{{/if}}
+</template>
+
 <template name="ribbon">
 <div class="github-fork-ribbon-wrapper right">
   <div class="github-fork-ribbon">

client/style.css

@@ -21,8 +21,7 @@ input {
 .subtitle { color: #999; }
 
 /* Custom Classes */
-
+.notification, .error {
-.notification {
   max-width: 80%;
 }
 
@@ -56,7 +55,7 @@ input {
   margin-top: -24px;
 }
 
-.close-notification{
+.close-notification, .close-error {
   float: right;
   margin-top: -22px;
 }