Adds basic authentication to all requests. #20.

src/components/base/BaseLayout.vue

@@ -68,7 +68,7 @@ export default {
     },
     methods: {
         async logOff(){
-            await this.wpStore.userLogOff();
+            await this.wpStore.logoff();
             this.$router.go();
         }
     }

src/pages/CollectionPage.vue

@@ -38,7 +38,8 @@ import {
     IonIcon,
     IonButton,
     actionSheetController,
-    IonInfiniteScroll
+    IonInfiniteScroll,
+    IonInfiniteScrollContent
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import ItemsList from '@/components/lists/ItemsList.vue';
@@ -51,7 +52,8 @@ export default defineComponent({
         IonRefresherContent,
         IonIcon,
         IonButton,
-        IonInfiniteScroll
+        IonInfiniteScroll,
+        IonInfiniteScrollContent
     },
     props: {
         id: String,

src/pages/ItemsPage.vue

@@ -24,7 +24,8 @@ import {
     IonLoading,
     IonRefresher,
     IonRefresherContent,
-    IonInfiniteScroll
+    IonInfiniteScroll,
+    IonInfiniteScrollContent
 } from '@ionic/vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 import { ref } from 'vue';
@@ -36,7 +37,8 @@ export default {
         BaseLayout,
         IonRefresher,
         IonRefresherContent,
-        IonInfiniteScroll
+        IonInfiniteScroll,
+        IonInfiniteScrollContent
     },
     setup() {
         const isLoading = ref(false);

src/pages/LoginPage.vue

@@ -44,10 +44,10 @@
                                 </ion-label>
                                 <ion-input 
                                         :placeholder="$t('placeholder_user_password')" 
-                                        id="userPassword"
+                                        id="userToken"
                                         type="password"
-                                        name="userPassword"
+                                        name="userToken"
-                                        v-model="userPassword"
+                                        v-model="userToken"
                                         required="true"
                                         autocomplete="new-password"
                                         enterkeyhint="done">
@@ -72,6 +72,7 @@ import { useWpStore } from '../store/storeWp';
 import { arrowForwardOutline } from "ionicons/icons";
 
 import {
+    IonIcon,
     IonImg,
     IonPage,
     IonList,
@@ -87,6 +88,7 @@ import { computed } from 'vue';
 export default {
     props: ['pageTitle', 'pageDefaultBackLink'],
     components: {
+        IonIcon,
         IonImg,
         IonPage,
         IonList,
@@ -102,7 +104,7 @@ export default {
         return {
             siteUrl: '',
             userLogin: '',
-            userPassword: '',
+            userToken: '',
         }
     },
     setup(){
@@ -113,10 +115,7 @@ export default {
     },
     methods: {
         async login(){
-            await this.wpStore.userLogin(this.siteUrl);
+            await this.wpStore.login(this.siteUrl, this.userLogin, this.userToken);
-            // this.tainacanStore.siteUrl = this.siteUrl;
-            // this.tainacanStore.userLogin = this.userLogin;
-            // this.tainacanStore.userPassword = this.userPassword;
             this.$router.push('/home');
         }
     }

src/store/storeTainacan.ts

@@ -16,10 +16,7 @@ const useTainacanStore = defineStore("tainacan", {
       nextItemsByCollectionPage: 1,
       items: [],
       nextItemsPage: 1,
-      totalItems: 0,
+      totalItems: 0
-      siteUrl: "",
-      userLogin: "",
-      userPassword: "",
     };
   },
 
@@ -29,6 +26,7 @@ const useTainacanStore = defineStore("tainacan", {
         const wpStore = useWpStore();
 
         let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?`;
+        const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken);
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
@@ -36,7 +34,11 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
 
-        const response = await axios.get(endpoint);
+        const response = await axios.get(endpoint, {
+          headers: {
+            authorization: authorization
+          }
+        });
 
         this.collections = response.data;
         this.totalCollections = response.headers['x-wp-total'];
@@ -55,8 +57,13 @@ const useTainacanStore = defineStore("tainacan", {
         const wpStore = useWpStore();
 
         const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collections?perpage=4&orderby=modified`;
+        const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken);
 
-        const response = await axios.get(endpoint);
+        const response = await axios.get(endpoint, {
+          headers: {
+            authorization: authorization
+          }
+        });
 
         this.homeCollections = response.data;
         this.totalHomeCollections = response.headers['x-wp-total'];
@@ -75,6 +82,7 @@ const useTainacanStore = defineStore("tainacan", {
         const wpStore = useWpStore();
 
         let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/collection/${collectionId}/items?fetch_only=id,title,thumbnail`;
+        const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken);
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
@@ -93,7 +101,11 @@ const useTainacanStore = defineStore("tainacan", {
 
         endpoint += '&paged=' + this.nextItemsByCollectionPage;
   
-        const response = await axios.get(endpoint);
+        const response = await axios.get(endpoint, {
+          headers: {
+            authorization: authorization
+          }
+        });
 
         this.collectionItems.push(...response.data.items);
         this.totalCollectionItems = response.headers['x-wp-total'];
@@ -120,8 +132,14 @@ const useTainacanStore = defineStore("tainacan", {
         const wpStore = useWpStore();
         
         const endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail&perpage=12&orderby=modified`;
+        const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken);
+
+        const response = await axios.get(endpoint, {
+          headers: {
+            authorization: authorization
+          }
+        });
 
-        const response = await axios.get(endpoint);
         this.homeItems = response.data.items;
         this.totalHomeItems = response.headers['x-wp-total'];
 
@@ -138,6 +156,7 @@ const useTainacanStore = defineStore("tainacan", {
         const wpStore = useWpStore();
         
         let endpoint = `${wpStore.userSiteUrl}/wp-json/tainacan/v2/items?fetch_only=id,title,thumbnail`;
+        const authorization = 'Basic ' + btoa(wpStore.userLogin + ':' + wpStore.userToken);
 
         if (params && params.perPage)
           endpoint += '&perpage=' + params.perPage;
@@ -145,14 +164,19 @@ const useTainacanStore = defineStore("tainacan", {
         if (params && params.orderBy)
           endpoint += '&orderby=' + params.orderBy;
 
-        if(params.reset){
+        if (params.reset) {
           this.items = [];
           this.nextItemsPage = 1;
         }
 
         endpoint += '&paged=' + this.nextItemsPage;
 
-        const response = await axios.get(endpoint);
+        const response = await axios.get(endpoint, {
+          headers: {
+            authorization: authorization
+          }
+        });
+        
         this.items.push(...response.data.items);
         this.totalItems = response.headers['x-wp-total'];
 

src/store/storeWp.ts

@@ -8,33 +8,46 @@ const useWpStore = defineStore('wp', {
         return {
             userIsLoggedIn: false,
             userSiteUrl: '',
+            userLogin: '',
+            userToken: ''
          }
       },
 
     actions: {
-        async userLogin(userSiteUrl: string) {
+        async login(userSiteUrl: string, userLogin: string, userToken: string) {
           try {
             this.userIsLoggedIn = true;
             this.userSiteUrl = userSiteUrl;
+            this.userLogin = userLogin;
+            this.userToken = userToken;
             await store.set('userIsLoggedIn', true);
             await store.set('userSiteUrl', userSiteUrl);
+            await store.set('userLogin', userLogin);
+            await store.set('userToken', userToken);
           } catch (err) {
             this.userIsLoggedIn = false;
-            await store.set('userIsLoggedIn', false);
+            this.userSiteUrl = '';
+            this.userToken = '';
+            this.userLogin = '';
             console.error('Erro no login:', err);
             return err;
           }
         },   
-        async userLogOff() {
+        async logoff() {
           try {
             this.userIsLoggedIn = false;
-            this.userSiteUrl = null;
+            this.userSiteUrl = '';
+            this.userToken = '';
+            this.userToken = '';
             await store.set('userIsLoggedIn', false);
-            await store.set('userSiteUrl', null);
+            await store.set('userSiteUrl', '');
+            await store.set('userToken', '');
           } catch (err) {
             this.userIsLoggedIn = false;
-            await store.set('userIsLoggedIn', false);
+            this.userSiteUrl = '';
-            console.error('Erro no login:', err);
+            this.userToken = '';
+            this.userToken = '';
+            console.error('Erro no logoff:', err);
             return err;
           }
         },  
@@ -42,6 +55,8 @@ const useWpStore = defineStore('wp', {
           await store.create();
           this.userIsLoggedIn = await store.get('userIsLoggedIn');
           this.userSiteUrl = await store.get('userSiteUrl');
+          this.userLogin = await store.get('userLogin');
+          this.userToken = await store.get('userToken');
        }
     }
 })