fix no profile message in passwords view

src/views/Passwords.vue

@@ -9,47 +9,54 @@
 </style>
 <template>
     <div id="passwords">
-        <div class="row">
-            <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 v-if="filteredPasswords.length !== 0">
+            <div class="row">
+                <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>
-        <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 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="row mt-2">
+                <div class="col-4">
+                    <i class="fa fa-arrow-left pointer"
+                       v-on:click="pagination.current_page -= 1"
+                       v-bind:class="{'fa-none':this.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-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 class="col-4 text-right">
+                    <i class="fa fa-arrow-right pointer"
+                       v-on:click="pagination.current_page += 1"
+                       v-bind:class="{'fa-none':this.pagination.current_page === this.pagination.number_of_pages}"></i>
                 </div>
             </div>
         </div>
-        <div class="row mt-2">
-            <div class="col-4">
-                <i class="fa fa-arrow-left pointer"
-                   v-on:click="pagination.current_page -= 1"
-                   v-bind:class="{'fa-none':this.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':this.pagination.current_page === this.pagination.number_of_pages}"></i>
-            </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>