From b455aea762a835b1e926afea4b286a842c1b1b13 Mon Sep 17 00:00:00 2001
From: Guillaume Vincent <guillaume@oslab.fr>
Date: Sat, 11 Mar 2017 09:44:52 +0100
Subject: [PATCH] Ambiguous message when no profile is found using the search
 engine

fix https://github.com/lesspass/lesspass/issues/166
---
 src/views/Passwords.vue | 82 +++++++++++++++++++++++++++----------------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/views/Passwords.vue b/src/views/Passwords.vue
index 7dc1666..825f8f1 100644
--- a/src/views/Passwords.vue
+++ b/src/views/Passwords.vue
@@ -9,57 +9,67 @@
 </style>
 <template>
     <div id="passwords">
-        <div v-if="filteredPasswords.length !== 0">
+        <div v-if="passwords.length === 0">
             <div class="row">
                 <div class="col">
+                    You don't have any password profile saved in your database.
+                    <router-link :to="{ name: 'home'}">Would you like to create one?</router-link>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            <div class="row pb-2">
+                <div class="col">
                     <div class="inner-addon left-addon">
                         <i class="fa fa-search"></i>
                         <input class="form-control" name="search" placeholder="Search" v-model="searchQuery">
                     </div>
                 </div>
             </div>
-            <div id="passwordsList">
-                <div class="row py-2" v-for="password in filteredPasswords">
-                    <div class="col-6">
-                        <router-link :to="{ name: 'password', params: { id: password.id }}">
-                            {{password.site}}
-                        </router-link>
-                        <br>
-                        {{password.login}}
-                    </div>
-                    <div class="col-6">
-                        <delete-button class="float-right mt-2"
-                                       confirmText="Are you sure you want to delete this password profile?"
-                                       confirmButton="Sure"
-                                       cancelButton="Oups no!"
-                                       v-on:remove="deletePassword(password)">
-                        </delete-button>
+            <div v-if="filteredPasswords.length === 0">
+                <div class="row">
+                    <div class="col">
+                        Oops! There are no matches for "{{searchQuery}}". Please try broadening your search.
                     </div>
                 </div>
             </div>
-            <div class="row mt-2" v-if="pagination.number_of_pages > 1">
-                <div class="col-4">
-                    <i class="fa fa-arrow-left pointer"
-                       v-on:click="pagination.current_page -= 1"
-                       v-bind:class="{'fa-none':pagination.current_page === 1}"></i>
-                </div>
-                <div class="col-4 text-center">
-                    {{pagination.current_page}} / {{Math.ceil(passwords.length/pagination.per_page)}}
+            <div v-else>
+                <div id="passwordsList">
+                    <div class="row py-2" v-for="password in filteredPasswords">
+                        <div class="col-6">
+                            <router-link :to="{ name: 'password', params: { id: password.id }}">
+                                {{password.site}}
+                            </router-link>
+                            <br>
+                            {{password.login}}
+                        </div>
+                        <div class="col-6">
+                            <delete-button class="float-right mt-2"
+                                           confirmText="Are you sure you want to delete this password profile?"
+                                           confirmButton="Sure"
+                                           cancelButton="Oups no!"
+                                           v-on:remove="deletePassword(password)">
+                            </delete-button>
+                        </div>
+                    </div>
                 </div>
-                <div class="col-4 text-right">
-                    <i class="fa fa-arrow-right pointer"
-                       v-on:click="pagination.current_page += 1"
-                       v-bind:class="{'fa-none':pagination.current_page === pagination.number_of_pages}"></i>
+                <div class="row mt-2" v-if="pagination.number_of_pages > 1">
+                    <div class="col-4">
+                        <i class="fa fa-arrow-left pointer"
+                           v-on:click="pagination.current_page -= 1"
+                           v-bind:class="{'fa-none':pagination.current_page === 1}"></i>
+                    </div>
+                    <div class="col-4 text-center">
+                        {{pagination.current_page}} / {{Math.ceil(passwords.length/pagination.per_page)}}
+                    </div>
+                    <div class="col-4 text-right">
+                        <i class="fa fa-arrow-right pointer"
+                           v-on:click="pagination.current_page += 1"
+                           v-bind:class="{'fa-none':pagination.current_page === pagination.number_of_pages}"></i>
+                    </div>
                 </div>
             </div>
         </div>
-        <div v-else>
-            You don't have any <span class="hint--bottom hint--medium"
-                                     aria-label="A profile is the set of information needed to regenerate a password. No password is saved in a profile.">profile</span>
-            saved in your database.
-            <br>
-            <router-link :to="{ name: 'home'}">Would you like to create one?</router-link>
-        </div>
     </div>
 </template>
 <script type="text/ecmascript-6">