From 8de8f3739e3c6ddc4c35eb53dd729fd59d59b200 Mon Sep 17 00:00:00 2001
From: fazo96 <fazius2009@gmail.com>
Date: Tue, 27 May 2014 12:46:51 +0200
Subject: [PATCH] added login safety and animation

---
 app.coffee | 24 +++++++++++++++++-------
 index.html | 20 ++++++++++++++------
 style.css  |  9 +++++++++
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/app.coffee b/app.coffee
index 0a1f207..6c69c1e 100644
--- a/app.coffee
+++ b/app.coffee
@@ -1,22 +1,31 @@
 notes = new Meteor.Collection "notes"
 
+# Server
 if Meteor.isServer
   Accounts.config {
-    sendVerificationEmail: true
+    sendVerificationEmail: false
     loginExpirationInDays: 1
   }
 
   Meteor.publish "my-notes", ->
     notes.find( { userId: @userId } ) unless not @userId
 
-if Meteor.isClient
+  # Authentication
+  Accounts.validateNewUser (user) ->
+    if user.email and Meteor.check(user.email,String) is yes and user.email.contains '@' is yes and user.email.endsWith '.' is no and user.email.endsWith '@' is no
+      return yes
+    else throw new Meteor.Error 403, "Invalid Email"
+    if user.password and Meteor.check(user.password,String) is yes and user.password.length > 7
+      return yes
+    else throw new Meteor.Error 403, "Password invalid"
 
-  Meteor.subscribe "my-notes"
+# Client
+if Meteor.isClient
+  Deps.autorun -> Meteor.subscribe "my-notes" unless not Meteor.userId()
 
   # User Interface
   Template.userInfo.events {
-    'click #logout': (e,template) ->
-      Meteor.logout()
+    'click #logout': (e,template) -> Meteor.logout()
     'keypress #newNote': (e,template) ->
       if e.keyCode is 13
         notes.insert {
@@ -79,7 +88,8 @@ if Meteor.isClient
   pressLogin = (template) ->
     mail = template.find('#mail').value; pass = template.find('#pass').value
     Meteor.loginWithPassword mail, pass, (err) ->
-      errCallback err; if Meteor.userId() then clearNotifications()
+      errCallback err
+  Template.auth.working = -> Meteor.loggingIn()
   Template.auth.events {
     'keypress .login': (e,template) ->
       if e.keyCode is 13 then pressLogin template
@@ -95,7 +105,7 @@ if Meteor.isClient
           Accounts.createUser {
             email: mail,
             password: pass
-          }, (e) -> errCallback e; if Meteor.userId() then clearNotifications()
+          }, (e) -> errCallback e
         catch err
           notify { msg: err }
   }
diff --git a/index.html b/index.html
index 3b19334..91fa4cd 100644
--- a/index.html
+++ b/index.html
@@ -35,12 +35,20 @@
   <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>
+    {{#if working}}
+      <div align="center" class="spinning-cog">
+        <i class="fa fa-cog fa-spin fa-3x"></i>
+      </div>
+    {{else}}
+      <input type="text" id="mail" class="form-control login" placeholder="Email">
+      <input type="password" id="pass" class="form-control login" placeholder="Password">
+      <br>
+    {{/if}}
     <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>
+    {{#unless working}}
+      <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>
+    {{/unless}}
   </div>
 </template>
 
@@ -73,7 +81,7 @@
 
 <template name="notifications">
 {{#each notification}}
-  <div class="alert alert-{{type}}">
+  <div class="alert alert-{{type}} notification">
     <p align="center">{{msg}}</p>
     <button type="button" class="close close-notification">&times;</button>
   </div>
diff --git a/style.css b/style.css
index 66d8097..7292162 100644
--- a/style.css
+++ b/style.css
@@ -19,6 +19,15 @@ input {
 
 /* Custom Classes */
 
+.notification {
+  max-width: 80%;
+}
+
+.spinning-cog {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
 .edit-note {
   float: left;
   margin-right: 10px;