Add basic user handling (login/register)

package.json

@@ -17,6 +17,7 @@
     "@capacitor/ios": "2.4.7",
     "@mdi/font": "^5.0.45",
     "axios": "^0.21.1",
+    "jsonwebtoken": "^8.5.1",
     "core-js": "^3.10.1",
     "dayjs": "^1.10.4",
     "material-design-icons-iconfont": "^6.1.0",
@@ -41,6 +42,7 @@
     "@vue/cli-service": "~4.5.12",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "@types/jsonwebtoken": "^8.5.1",
     "@vue/test-utils": "1.1.4",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",

src/App.vue

@@ -53,6 +53,18 @@
             <v-list-item-title>Shopping List</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+
+        <v-list-item
+          link
+          to="/settings"
+        >
+          <v-list-item-action>
+            <v-icon>mdi-wrench</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title>Settings</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
 

src/Stores/SettingsHandler.ts

@@ -0,0 +1,83 @@
+/* eslint-disable no-console */
+import LocalStore from '@/Stores/LocalStore';
+import WebStore from '@/Stores/WebStore';
+import { Storable } from '@/types/Storable';
+import { Capacitor } from '@capacitor/core';
+import { Settings } from '../types/Settings';
+import { SettingsLocalStore, SettingsWebStore } from './SettingsStore';
+
+const plattformIsNative = Capacitor?.isNative;
+
+export default class SettingsHandler<Type extends Storable> {
+  private localStore: SettingsLocalStore;
+
+  private webStore: SettingsWebStore;
+
+  private currentSettings: Settings;
+
+  constructor(options: {
+    localStore: SettingsLocalStore,
+    webStore: SettingsWebStore,
+    currentSettings: Settings,
+
+  }) {
+    this.localStore = options.localStore;
+    this.webStore = options.webStore;
+    this.currentSettings = {
+      serverAddress: 'string',
+      userId: 'string',
+      id: 'string',
+      isDeleted: false,
+      lastUpdated: new Date(),
+    };
+    this.sync();
+  }
+
+  async add(item: Settings) {
+    let itemFromServer;
+    try {
+      itemFromServer = await this.webStore.saveOne(item);
+      this.currentSettings = item;
+    } catch (error) {
+      throw new Error(error);
+    }
+
+    if (plattformIsNative) {
+      if (!itemFromServer) {
+        this.currentSettings = item;
+      }
+      await this.localStore.persist(this.currentSettings);
+    }
+  }
+
+  public get(): Settings {
+    return this.currentSettings;
+  }
+
+  public async update(id: string, item: Settings) {
+    let updatedItemFromServer;
+    try {
+      updatedItemFromServer = await this.webStore.update(id, item);
+      this.currentSettings = updatedItemFromServer;
+    } catch (error) {
+      console.log(error);
+    }
+
+    if (plattformIsNative) {
+      if (!updatedItemFromServer) {
+        this.currentSettings = item;
+      }
+      await this.localStore.persist(this.currentSettings);
+    }
+  }
+
+  private async sync(): Promise<void> {
+    const webSettings = await this.webStore.get();
+    const localSettings = await this.localStore.read();
+
+    if (localSettings.lastUpdated > webSettings.lastUpdated) {
+      return await this.webStore.update(localSettings.id, localSettings);
+    }
+    return await this.localStore.persist(webSettings);
+  }
+}

src/Stores/SettingsStore.ts

@@ -0,0 +1,83 @@
+import { Filesystem, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
+import { AxiosInstance } from 'axios';
+import { Settings } from '../types/Settings';
+
+export class SettingsWebStore {
+  private baseUrl: string
+
+  private apiClient: AxiosInstance
+
+  constructor(readonly baseUrlIn: string, readonly apiClientIn: AxiosInstance) {
+    this.baseUrl = baseUrlIn;
+    this.apiClient = apiClientIn;
+  }
+
+  public async saveOne(data: Settings) {
+    const response = await this.apiClient.post(this.baseUrl, data);
+    return response.data;
+  }
+
+  public async save(data: Settings) {
+    await this.apiClient.post(this.baseUrl, data);
+  }
+
+  public async update(id: string, data: Settings) {
+    const response = await this.apiClient.put(`${this.baseUrl}/${id}`, data);
+    return response.data;
+  }
+
+  public async get(): Promise<Settings> {
+    const response = await this.apiClient.get(this.baseUrl);
+    return response.data;
+  }
+
+  public async delete(id: string): Promise<Settings> {
+    const response = await this.apiClient.delete(id);
+    return response.data;
+  }
+}
+
+export class SettingsLocalStore {
+  private fileName: string
+
+  constructor(fileNameIn: string) {
+    this.fileName = fileNameIn;
+  }
+
+  public async read(): Promise<Settings> {
+    const data = await this.readFile();
+    return data;
+  }
+
+  public async persist(data: Settings): Promise<void> {
+    return await this.writeFile(data);
+  }
+
+  private async readFile() {
+    try {
+      const file = await Filesystem.readFile({
+        path: this.fileName,
+        directory: FilesystemDirectory.Documents,
+        encoding: FilesystemEncoding.UTF8,
+      });
+
+      return JSON.parse(file.data);
+    } catch (error) {
+      const fileDoesNotExistErrorMessage = 'File does not exist';
+
+      if (error.message === fileDoesNotExistErrorMessage) {
+        await this.writeFile();
+      }
+      return [];
+    }
+  }
+
+  private async writeFile(data?: Settings): Promise<any> {
+    return await Filesystem.writeFile({
+      path: this.fileName,
+      data: (data !== undefined) ? JSON.stringify(data) : '',
+      directory: FilesystemDirectory.Documents,
+      encoding: FilesystemEncoding.UTF8,
+    });
+  }
+}

src/Stores/StoreHandler.ts

@@ -32,7 +32,7 @@ export default class StoreHandler<Type extends Storable> {
       itemFromServer = await this.webStore.saveOne(itemCopy);
       this.items.push(itemFromServer);
     } catch (error) {
-      console.log(error);
+      throw new Error(error);
     }
 
     if (plattformIsNative) {
@@ -61,7 +61,7 @@ export default class StoreHandler<Type extends Storable> {
       updatedItemFromServer = await this.webStore.updateOne(id, item);
       this.items.push(updatedItemFromServer);
     } catch (error) {
-      console.log(error);
+      throw new Error(error);
     }
 
     if (plattformIsNative) {
@@ -88,7 +88,7 @@ export default class StoreHandler<Type extends Storable> {
     try {
       itemToDelete = await this.webStore.delete(id);
     } catch (error) {
-      console.log(error);
+      throw new Error(error);
     }
 
     this.items.push(itemToDelete);

src/components/HelloWorld.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a
+        href="https://cli.vuejs.org"
+        target="_blank"
+        rel="noopener"
+      >vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+          target="_blank"
+          rel="noopener"
+        >typescript</a>
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >Core Docs</a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >Forum</a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >Community Chat</a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+          rel="noopener"
+        >Twitter</a>
+      </li>
+      <li>
+        <a
+          href="https://news.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a
+          href="https://router.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >vue-router</a>
+      </li>
+      <li>
+        <a
+          href="https://vuex.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+        >vue-devtools</a>
+      </li>
+      <li>
+        <a
+          href="https://vue-loader.vuejs.org"
+          target="_blank"
+          rel="noopener"
+        >vue-loader</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+        >awesome-vue</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>