From 61a57a753b6c154a9ba5e451468fcaf3b941bbc5 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Sat, 5 Dec 2015 19:21:15 -0800
Subject: [PATCH] Provide user feedback when number is invalid

While typing a number, the new contact element is faded out. When the
number becomes valid it is opaque. If the element is clicked while
invalid, it displays 'Invalid number' and waits for the input to change
again. A new conversation is only opened if the number is valid.

// FREEBIE
---
 background.html                      |  6 +++++
 js/views/conversation_search_view.js | 37 +++++++++++++++++++++++++---
 stylesheets/_index.scss              | 10 +++++---
 stylesheets/manifest.css             |  9 +++----
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/background.html b/background.html
index 7510c953..1b177c9f 100644
--- a/background.html
+++ b/background.html
@@ -132,6 +132,12 @@
       {{> avatar }}
       <div class='contact-details'> {{> contact_name_and_number }} </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='new-contact'>
+      {{> avatar }}
+      <div class='contact-details'>
+          {{> contact_name_and_number }}
+      </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='conversation-preview'>
       {{> avatar }}
       <div class='contact-details'>
diff --git a/js/views/conversation_search_view.js b/js/views/conversation_search_view.js
index a20e33c7..5226e831 100644
--- a/js/views/conversation_search_view.js
+++ b/js/views/conversation_search_view.js
@@ -5,6 +5,31 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
+    Whisper.NewContactView = Whisper.View.extend({
+        templateName: 'new-contact',
+        className: 'conversation-list-item contact',
+        events: {
+            'click': 'validate'
+        },
+        initialize: function() {
+            this.listenTo(this.model, 'change', this.render); // auto update
+        },
+        render_attributes: function() {
+            return {
+                    number: 'Click to create new contact',
+                    title: this.model.getNumber(),
+                    avatar: this.model.getAvatar(),
+            };
+        },
+        validate: function() {
+            if (this.model.isValid()) {
+                this.$el.addClass('valid');
+            } else {
+                this.$el.removeClass('valid');
+            }
+        },
+    });
+
     Whisper.ConversationSearchView = Whisper.View.extend({
         className: 'conversation-search',
         initialize: function(options) {
@@ -25,7 +50,7 @@
         },
 
         events: {
-            'select .new-contact': 'createConversation',
+            'click .new-contact': 'createConversation',
         },
 
         filterContacts: function(e) {
@@ -34,7 +59,9 @@
                 if (this.maybeNumber(query)) {
                     this.new_contact_view.model.set('id', query);
                     this.new_contact_view.render().$el.show();
+                    this.new_contact_view.validate();
                     this.hideHints();
+
                 } else {
                     this.new_contact_view.$el.hide();
                 }
@@ -55,7 +82,7 @@
                 this.new_contact_view.$el.hide();
             }
             // Creates a view to display a new contact
-            this.new_contact_view = new Whisper.ConversationListItemView({
+            this.new_contact_view = new Whisper.NewContactView({
                 el: this.$new_contact,
                 model: ConversationController.create({
                     type: 'private',
@@ -66,8 +93,7 @@
 
         createConversation: function() {
             var conversation = this.new_contact_view.model;
-            var error = conversation.validate(conversation.attributes);
-            if (!error) {
+            if (this.new_contact_view.model.isValid()) {
                 ConversationController.findOrCreatePrivateById(
                     this.new_contact_view.model.id
                 ).then(function(conversation) {
@@ -75,6 +101,9 @@
                     this.initNewContact();
                     this.resetTypeahead();
                 }.bind(this));
+            } else {
+                this.new_contact_view.$('.number').text("Invalid number");
+                this.$input.focus();
             }
         },
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index a811b9e8..a7288e19 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -147,15 +147,17 @@ input.search {
 .new-contact {
   display: none;
   cursor: pointer;
+  opacity: 0.7;
   background: $grey_l;
-  .name, .last-timestamp, .avatar { display: none; }
-  .contact-details::before {
-    content: 'Create new contact';
+  .contact-details .number {
     display: block;
     font-style: italic;
-    opacity: 0.7;
     padding-right: 8px;
   }
+
+  &.valid {
+    opacity: 1.0
+  }
 }
 
 .index {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 72449e33..c7bddb64 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -487,15 +487,14 @@ input.search {
 .new-contact {
   display: none;
   cursor: pointer;
+  opacity: 0.7;
   background: #f3f3f3; }
-  .new-contact .name, .new-contact .last-timestamp, .new-contact .avatar {
-    display: none; }
-  .new-contact .contact-details::before {
-    content: 'Create new contact';
+  .new-contact .contact-details .number {
     display: block;
     font-style: italic;
-    opacity: 0.7;
     padding-right: 8px; }
+  .new-contact.valid {
+    opacity: 1; }
 
 .index {
   max-width: 1300px;