Adding warning if we already imported the contacts at least once

importer/index.html

@@ -52,10 +52,8 @@ <h2></h2>
       </div>
       <button id='importButton'>Import contacts</button>
       <p>Copy all the contacts retrieved from Google to your phone</p>
+      <p id="message" class="hide">You already imported your contacts in a previous session. Importing them again will add the new ones and duplicate the rest of the contacts in your phone.</p>
     </article>
-    <!--article id='importWithPhone' class='hide'>
-      <button id='importWithPhoneButton'>Import contacts with phone</button>
-    </article-->
 
     <form id="import_progress" role="dialog" data-type="confirm" class='hide'>
       <section>

importer/js/google/import.js

@@ -29,6 +29,9 @@ google.ui = function ui() {
     var importButton = document.querySelector('#import button');
     importButton.disabled = num == 0 ? 'disabled' : false;
 
+    if (localStorage['alreadyImported'] == 1) {
+      document.getElementById('message').classList.remove('hide');
+    }
     document.getElementById('import').classList.remove('hide');
   };
 
@@ -40,6 +43,7 @@ google.ui = function ui() {
   };
 
   var finishImporting = function hideImporting() {
+    localStorage['alreadyImported'] = 1;
     document.getElementById('import_progress').classList.add('hide');
     document.getElementById('importer-finish').classList.remove('hide');
   };

importer/style/style.css

@@ -74,3 +74,14 @@ section[role="region"] > article p strong {
   line-height: 27px;
 }
 
+#import {
+  position: relative;
+}
+
+#message {
+  position: absolute; 
+  bottom: 0;
+  left: 0;
+  padding: 1.5rem;
+  color: rgb(51, 51, 51);
+}