feat(webapp): protect data view with pin

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
     "lint": "eslint -c .eslintrc.js src/",
     "preview": "vite preview"

src/App.vue

@@ -25,7 +25,6 @@ const navigationEntries: INavigationEntry[] = [
     name: 'Stammdaten',
     icon: UserIcon,
     to: '/data',
-    disabled: true,
   },
   {
     name: 'Einstempeln',

src/components/services/data.service.ts

@@ -16,23 +16,26 @@ const database = new Databases(sdk, DATABASE_ID);
 export const DataService = {
   async getAllData(): Promise<IAccountData[]> {
     const accounts = (await AccountService.getAllAccounts()) as IAccountData[];
-    let offset = 0,
+    accounts.forEach(account => {
-      personalInformationDocuments: Models.DocumentList<IPersonalInformation & Models.Document>;
+      account.name = `${account.firstName} ${account.lastName}`;
-    do {
+    });
-      personalInformationDocuments = await database.listDocuments<IPersonalInformation & Models.Document>(
+    // let offset = 0,
-        PERSONAL_INFORMATION_COLLECTION_ID, [], 100, offset);
+    //   personalInformationDocuments: Models.DocumentList<IPersonalInformation & Models.Document>;
-      personalInformationDocuments.documents.forEach(personalInformation => {
+    // do {
-        const account = accounts.find(account => account.accountNumber === personalInformation.accountNumber);
+    //   personalInformationDocuments = await database.listDocuments<IPersonalInformation & Models.Document>(
-        if(account) {
+    //     PERSONAL_INFORMATION_COLLECTION_ID, [], 100, offset);
-          account.name = `${account.firstName} ${account.lastName}`;
+    //   personalInformationDocuments.documents.forEach(personalInformation => {
-          account.birthday = personalInformation.birthday;
+    //     const account = accounts.find(account => account.accountNumber === personalInformation.accountNumber);
-          account.address = personalInformation.address;
+    //     if(account) {
-          account.contact = personalInformation.contact;
+    //       account.name = `${account.firstName} ${account.lastName}`;
-        }
+    //       account.birthday = personalInformation.birthday;
-      },
+    //       account.address = personalInformation.address;
-      );
+    //       account.contact = personalInformation.contact;
-      offset += 100;
+    //     }
-    } while(personalInformationDocuments.total > offset);
+    //   },
+    //   );
+    //   offset += 100;
+    // } while(personalInformationDocuments.total > offset);
     return accounts;
   },
   async addAccount(account: ICreateAccount): Promise<IAccountData> {

src/components/views/DataView.vue

@@ -1,5 +1,20 @@
 <template>
-  <div class="lg:p-6">
+  <div
+    v-show="!pinCorrect"
+    class="hero min-h-full"
+  >
+    <div class="hero-content flex-col text-center">
+      <AtomInput
+        placeholder="Bitte PIN eingeben"
+        type="password"
+        @input="inputEvent"
+      />
+    </div>
+  </div>
+  <div
+    v-show="pinCorrect"
+    class="lg:p-6"
+  >
     <MoleculeDataTable
       v-if="data"
       :table-headers="tableHeaders"
@@ -33,7 +48,10 @@ import { PlusIcon } from '@heroicons/vue/outline';
 import MoleculeAddAccountModal from '../molecules/MoleculeAddAccountModal.vue';
 import MoleculeContactModal from '../molecules/MoleculeContactModal.vue';
 import MoleculeDataTable, { TableHeaderType } from '../molecules/MoleculeDataTable.vue';
+import AtomInput from '../atoms/AtomInput.vue';
 
+const ACCESS_PIN_KEY = '1337';
+const pinCorrect = ref(false);
 const data = ref<IAccountData[]>([]);
 const contactName = ref('');
 const contact = ref<string[]>([]);
@@ -50,31 +68,31 @@ const tableHeaders = [
     key: 'name',
     type: TableHeaderType.STRING,
   },
-  {
+  // {
-    title: 'Geburtsdatum',
+  //   title: 'Geburtsdatum',
-    key: 'birthday',
+  //   key: 'birthday',
-    type: TableHeaderType.STRING,
+  //   type: TableHeaderType.STRING,
-  },
+  // },
   {
     title: 'Kontostand',
     key: 'balance',
     type: TableHeaderType.CURRENCY,
   },
-  {
+  // {
-    title: 'Adresse',
+  //   title: 'Adresse',
-    key: 'address',
+  //   key: 'address',
-    type: TableHeaderType.STRING,
+  //   type: TableHeaderType.STRING,
-  },
+  // },
   {
     title: 'Letzter Login',
     key: 'lastCheckIn',
     type: TableHeaderType.DATETIME,
   },
-  {
+  // {
-    title: 'Kontakt',
+  //   title: 'Kontakt',
-    key: '',
+  //   key: '',
-    type: TableHeaderType.BUTTON_CONTACT,
+  //   type: TableHeaderType.BUTTON_CONTACT,
-  },
+  // },
   {
     title: 'Trans.',
     key: '',
@@ -94,6 +112,12 @@ function openContactModal(data: { name: string, contact: string[] }) {
 function addAccount(account: IAccountData) {
   data.value.push(account);
 }
+
+function inputEvent(event: Event) {
+  if((event.target as HTMLInputElement).value == ACCESS_PIN_KEY) {
+    pinCorrect.value = true;
+  }
+}
 </script>
 
 <style lang="scss" scoped>