From 36638fbf74cd17477369bc57f421d1851cfabe9a Mon Sep 17 00:00:00 2001
From: Simon Giesel <simongiesel@gmail.com>
Date: Mon, 17 Jul 2023 20:21:59 +0200
Subject: [PATCH] feat(webapp): add banker login

---
 server/pb_schema.json                         | 237 ++++++++++--------
 .../components/atoms/AtomCurrencyInput.vue    |  15 ++
 webapp/src/components/atoms/AtomInput.vue     |   7 +
 .../molecules/MoleculeBankerAuthDialog.vue    |  63 +++++
 .../molecules/MoleculeInputModal.vue          |   8 +-
 .../molecules/MoleculeNavigationDrawer.vue    |  20 +-
 webapp/src/components/views/ViewBank.vue      |  33 ++-
 webapp/src/services/auth.service.ts           |  18 ++
 webapp/src/services/company.service.ts        |   2 +-
 webapp/src/types/pocketbase.types.ts          |   6 +
 10 files changed, 291 insertions(+), 118 deletions(-)
 create mode 100644 webapp/src/components/molecules/MoleculeBankerAuthDialog.vue

diff --git a/server/pb_schema.json b/server/pb_schema.json
index b76175b..73aa877 100644
--- a/server/pb_schema.json
+++ b/server/pb_schema.json
@@ -1,111 +1,4 @@
 [
-  {
-    "id": "w85pgrtrmovf916",
-    "name": "transactions",
-    "type": "base",
-    "system": false,
-    "schema": [
-      {
-        "id": "5aeh5giq",
-        "name": "account",
-        "type": "relation",
-        "system": false,
-        "required": true,
-        "options": {
-          "collectionId": "74ftooxenpeq14b",
-          "cascadeDelete": false,
-          "minSelect": null,
-          "maxSelect": 1,
-          "displayFields": [
-            "firstName",
-            "lastName"
-          ]
-        }
-      },
-      {
-        "id": "2bzqyeuk",
-        "name": "label",
-        "type": "text",
-        "system": false,
-        "required": true,
-        "options": {
-          "min": null,
-          "max": null,
-          "pattern": ""
-        }
-      },
-      {
-        "id": "zsx9i8w7",
-        "name": "amount",
-        "type": "number",
-        "system": false,
-        "required": false,
-        "options": {
-          "min": null,
-          "max": null
-        }
-      }
-    ],
-    "indexes": [],
-    "listRule": "",
-    "viewRule": "",
-    "createRule": "",
-    "updateRule": null,
-    "deleteRule": null,
-    "options": {}
-  },
-  {
-    "id": "5msnfxat1sc2c1r",
-    "name": "companyTransactions",
-    "type": "base",
-    "system": false,
-    "schema": [
-      {
-        "id": "7rnyupog",
-        "name": "account",
-        "type": "relation",
-        "system": false,
-        "required": true,
-        "options": {
-          "collectionId": "s854d2w72fvyl54",
-          "cascadeDelete": false,
-          "minSelect": null,
-          "maxSelect": 1,
-          "displayFields": []
-        }
-      },
-      {
-        "id": "ruby9fp9",
-        "name": "label",
-        "type": "text",
-        "system": false,
-        "required": true,
-        "options": {
-          "min": null,
-          "max": null,
-          "pattern": ""
-        }
-      },
-      {
-        "id": "4hiu46ib",
-        "name": "amount",
-        "type": "number",
-        "system": false,
-        "required": false,
-        "options": {
-          "min": null,
-          "max": null
-        }
-      }
-    ],
-    "indexes": [],
-    "listRule": "",
-    "viewRule": "",
-    "createRule": "",
-    "updateRule": null,
-    "deleteRule": null,
-    "options": {}
-  },
   {
     "id": "s854d2w72fvyl54",
     "name": "companies",
@@ -431,5 +324,135 @@
     "updateRule": "(@request.data.id = null && @request.data.accountNumber = null && @request.data.firstName = null && @request.data.lastName = null && @request.data.grade = null && @request.data.created = null && @request.data.updated = null && @request.data.company = null && @request.data.shift = null && @request.data.wage = null) || (@request.data.id = null && @request.data.accountNumber = null && @request.data.firstName = null && @request.data.lastName = null && @request.data.created = null && @request.data.updated = null && @request.data.company = null && @request.auth.id = company.id)",
     "deleteRule": null,
     "options": {}
+  },
+  {
+    "id": "w1au07idupp27qv",
+    "name": "bankers",
+    "type": "auth",
+    "system": false,
+    "schema": [],
+    "indexes": [],
+    "listRule": null,
+    "viewRule": null,
+    "createRule": null,
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {
+      "allowEmailAuth": true,
+      "allowOAuth2Auth": true,
+      "allowUsernameAuth": true,
+      "exceptEmailDomains": null,
+      "manageRule": null,
+      "minPasswordLength": 8,
+      "onlyEmailDomains": null,
+      "requireEmail": false
+    }
+  },
+  {
+    "id": "w85pgrtrmovf916",
+    "name": "transactions",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "id": "5aeh5giq",
+        "name": "account",
+        "type": "relation",
+        "system": false,
+        "required": true,
+        "options": {
+          "collectionId": "74ftooxenpeq14b",
+          "cascadeDelete": false,
+          "minSelect": null,
+          "maxSelect": 1,
+          "displayFields": [
+            "firstName",
+            "lastName"
+          ]
+        }
+      },
+      {
+        "id": "2bzqyeuk",
+        "name": "label",
+        "type": "text",
+        "system": false,
+        "required": true,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "id": "zsx9i8w7",
+        "name": "amount",
+        "type": "number",
+        "system": false,
+        "required": false,
+        "options": {
+          "min": null,
+          "max": null
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "viewRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "createRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
+  },
+  {
+    "id": "5msnfxat1sc2c1r",
+    "name": "companyTransactions",
+    "type": "base",
+    "system": false,
+    "schema": [
+      {
+        "id": "7rnyupog",
+        "name": "account",
+        "type": "relation",
+        "system": false,
+        "required": true,
+        "options": {
+          "collectionId": "s854d2w72fvyl54",
+          "cascadeDelete": false,
+          "minSelect": null,
+          "maxSelect": 1,
+          "displayFields": []
+        }
+      },
+      {
+        "id": "ruby9fp9",
+        "name": "label",
+        "type": "text",
+        "system": false,
+        "required": true,
+        "options": {
+          "min": null,
+          "max": null,
+          "pattern": ""
+        }
+      },
+      {
+        "id": "4hiu46ib",
+        "name": "amount",
+        "type": "number",
+        "system": false,
+        "required": false,
+        "options": {
+          "min": null,
+          "max": null
+        }
+      }
+    ],
+    "indexes": [],
+    "listRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "viewRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "createRule": "@request.auth.id != \"\" && @collection.bankers.id ?= @request.auth.id",
+    "updateRule": null,
+    "deleteRule": null,
+    "options": {}
   }
 ]
\ No newline at end of file
diff --git a/webapp/src/components/atoms/AtomCurrencyInput.vue b/webapp/src/components/atoms/AtomCurrencyInput.vue
index b5ab8df..ceb2ed6 100644
--- a/webapp/src/components/atoms/AtomCurrencyInput.vue
+++ b/webapp/src/components/atoms/AtomCurrencyInput.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="relative">
     <input
+      ref="input"
       :value="value"
       type="number"
       class="input w-full border-primary text-right"
@@ -26,6 +27,10 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
+
+const input = ref<InstanceType<typeof HTMLInputElement>>();
+
 const props = withDefaults(defineProps<{
   suffixMargin?: boolean,
   perHour?: boolean,
@@ -53,9 +58,19 @@ function onKeyDown(event: KeyboardEvent) {
   }
 }
 
+function reset() {
+  if(input.value) {
+    input.value.value = '';
+  }
+}
+
 const emit = defineEmits<{
   change: [value: number],
 }>();
+
+defineExpose({
+  reset,
+});
 </script>
 
 <style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/webapp/src/components/atoms/AtomInput.vue b/webapp/src/components/atoms/AtomInput.vue
index e7d050a..ea0252c 100644
--- a/webapp/src/components/atoms/AtomInput.vue
+++ b/webapp/src/components/atoms/AtomInput.vue
@@ -5,6 +5,9 @@
     :required="required"
     :placeholder="placeholder"
     class="input w-full border-primary"
+    :class="{
+      '!border-error': error,
+    }"
   />
 </template>
 
@@ -22,6 +25,10 @@ defineProps({
     type: String,
     default: '',
   },
+  error: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /* global defineModel */
diff --git a/webapp/src/components/molecules/MoleculeBankerAuthDialog.vue b/webapp/src/components/molecules/MoleculeBankerAuthDialog.vue
new file mode 100644
index 0000000..a2da834
--- /dev/null
+++ b/webapp/src/components/molecules/MoleculeBankerAuthDialog.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="hero min-h-full">
+    <form
+      class="hero-content mx-auto flex-col text-center"
+      @submit.prevent="handleAuth"
+    >
+      <AtomInput
+        v-model="username"
+        placeholder="Nutzername"
+        type="text"
+        :error="error"
+        required
+      />
+      <AtomInput
+        v-model="password"
+        placeholder="Passwort"
+        type="password"
+        :error="error"
+        required
+      />
+      <div
+        v-if="error"
+        class="alert alert-error flex w-[211px] items-center gap-2"
+      >
+        <XCircleIcon class="h-12 w-12" />
+        <span class="text-base font-normal">Nutzername oder Passwort falsch.</span>
+      </div>
+      <button class="btn-primary btn gap-2 self-end">
+        <ArrowRightOnRectangleIcon class="h-6 w-6" />
+        Login
+      </button>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { AuthService } from '../../services/auth.service';
+import { ArrowRightOnRectangleIcon, XCircleIcon } from '@heroicons/vue/24/outline';
+import AtomInput from '../atoms/AtomInput.vue';
+
+const username = ref('');
+const password = ref('');
+const error = ref(false);
+
+async function handleAuth() {
+  try {
+    await AuthService.loginAsBanker(username.value, password.value);
+  } catch (e) {
+    error.value = true;
+    console.error(e);
+  }
+}
+
+watch([username, password], () => {
+  error.value = false;
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/webapp/src/components/molecules/MoleculeInputModal.vue b/webapp/src/components/molecules/MoleculeInputModal.vue
index a36913e..caef746 100644
--- a/webapp/src/components/molecules/MoleculeInputModal.vue
+++ b/webapp/src/components/molecules/MoleculeInputModal.vue
@@ -8,8 +8,9 @@
     <div class="flex place-items-center justify-between">
       <span>{{ inputLabel }}</span>
       <AtomCurrencyInput
-        v-model="amount"
+        ref="input"
         class="w-4/12"
+        @change="amount = $event"
         @keyup.esc="modal?.close()"
       />
     </div>
@@ -40,6 +41,7 @@ import AtomCurrencyInput from '../atoms/AtomCurrencyInput.vue';
 import AtomModal from '../atoms/AtomModal.vue';
 
 const modal = ref<InstanceType<typeof AtomModal>>();
+const input= ref<InstanceType<typeof AtomCurrencyInput>>();
 const amount = ref();
 
 defineProps({
@@ -64,7 +66,9 @@ defineProps({
 const emit = defineEmits(['submit']);
 
 function handleClose() {
-  amount.value = '';
+  if(input.value) {
+    input.value.reset();
+  }
 }
 
 function handleSubmit() {
diff --git a/webapp/src/components/molecules/MoleculeNavigationDrawer.vue b/webapp/src/components/molecules/MoleculeNavigationDrawer.vue
index 6517d5b..ce84a55 100644
--- a/webapp/src/components/molecules/MoleculeNavigationDrawer.vue
+++ b/webapp/src/components/molecules/MoleculeNavigationDrawer.vue
@@ -61,6 +61,21 @@
           </li>
           <li class="menu-title !p-0" />
         </template>
+        <template v-if="isBanker">
+          <li class="pointer-events-none rounded-md bg-info text-warning-content">
+            <span>
+              Angemeldet als Banker
+              <BuildingLibraryIcon class="h-6 w-6" />
+            </span>
+          </li>
+          <li>
+            <span @click="AuthService.logout()">
+              <ArrowRightOnRectangleIcon class="h-6 w-6" />
+              Abmelden
+            </span>
+          </li>
+          <li class="menu-title !p-0" />
+        </template>
         <li
           v-for="navigationEntry of navigationEntries"
           :class="getNavigationEntryClass(navigationEntry)"
@@ -96,11 +111,12 @@ import { useRouter } from 'vue-router';
 import { INavigationEntry } from '../../interfaces/navigation-entry.interface';
 import { AuthService } from '../../services/auth.service';
 import { isDark, toggleDark } from '../../utils/darkMode';
-import { ArrowRightOnRectangleIcon, Bars3Icon, ExclamationTriangleIcon, MoonIcon, SunIcon } from '@heroicons/vue/24/outline';
+import { ArrowRightOnRectangleIcon, Bars3Icon, BuildingLibraryIcon, ExclamationTriangleIcon, MoonIcon, SunIcon } from '@heroicons/vue/24/outline';
 import AtomLogo from '../atoms/AtomLogo.vue';
 import AtomSwap from '../atoms/AtomSwap.vue';
 
 const isAdmin = ref(false);
+const isBanker = ref(false);
 const hideNavigation = ref(false);
 const router = useRouter();
 const drawerCheckbox = ref();
@@ -125,10 +141,12 @@ function getNavigationEntryClass(navigationEntry: INavigationEntry) {
 }
 
 useEventBus<boolean>('isAdmin').on(state => (isAdmin.value = state));
+useEventBus<boolean>('isBanker').on(state => (isBanker.value = state));
 useEventBus<boolean>('hideNavigation').on(state => (hideNavigation.value = state));
 
 onMounted(() => {
   isAdmin.value = AuthService.isAdmin();
+  isBanker.value = AuthService.isBanker();
 });
 
 router.afterEach(() => {
diff --git a/webapp/src/components/views/ViewBank.vue b/webapp/src/components/views/ViewBank.vue
index 3af324f..f059821 100644
--- a/webapp/src/components/views/ViewBank.vue
+++ b/webapp/src/components/views/ViewBank.vue
@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <MoleculeBankerAuthDialog
+    v-if="!isBanker && !AuthService.isAdmin()"
+  />
+  <div v-else>
     <div
       v-if="account || company"
       class="hero-content flex-col pt-0 text-center lg:p-6"
@@ -94,26 +97,29 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { onKeyStroke, promiseTimeout } from '@vueuse/core';
+import { onKeyStroke, promiseTimeout, useEventBus } from '@vueuse/core';
 import { RecordSubscription, UnsubscribeFunc } from 'pocketbase';
 import { AccountsResponse, CompaniesResponse, SettingsResponse, TransactionsResponse } from '../../types/pocketbase.types';
 import { AccountService } from '../../services/account.service';
 import { AccountType, BankService, TransactionType } from '../../services/bank.service';
+import { AuthService } from '../../services/auth.service';
 import { CompanyService } from '../../services/company.service';
 import { CurrencyService } from '../../services/currency.service';
+import { SettingsService } from '../../services/settings.service';
 import { ChevronDownIcon, ChevronUpIcon, XCircleIcon } from '@heroicons/vue/24/outline';
 import AtomHeroText from '../atoms/AtomHeroText.vue';
 import MoleculeInputModal from '../molecules/MoleculeInputModal.vue';
 import MoleculeTransactionTable from '../molecules/MoleculeTransactionTable.vue';
-import { SettingsService } from '../../services/settings.service';
 import AtomLogo from '../atoms/AtomLogo.vue';
+import MoleculeBankerAuthDialog from '../molecules/MoleculeBankerAuthDialog.vue';
 
 const router = useRouter();
 const subscription = ref<UnsubscribeFunc>();
 const companySubscription = ref<UnsubscribeFunc>();
 
+const isBanker = ref(false);
 const account = ref<AccountsResponse|null>();
 const company = ref<CompaniesResponse|null>();
 const transactions = ref<TransactionsResponse[]>();
@@ -132,6 +138,7 @@ if(router.currentRoute.value.query.accountNumber) {
 }
 
 onKeyStroke(['e', 'a'], (e) => {
+  if(!isBanker.value) { return; }
   e.preventDefault();
   if(depositModal.value?.isOpen() || withdrawModal.value?.isOpen()) {
     return;
@@ -147,6 +154,7 @@ onKeyStroke(['e', 'a'], (e) => {
 });
 
 onKeyStroke(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'], (e) => {
+  if(!isBanker.value) { return; }
   if(depositModal.value?.isOpen() || withdrawModal.value?.isOpen()) {
     return;
   }
@@ -243,15 +251,26 @@ function handleRealtimeUpdates(transactionSubscription: RecordSubscription<Trans
 }
 
 onMounted(async () => {
-  subscription.value = await BankService.subscribeToTransactionChanges(handleRealtimeUpdates);
-  companySubscription.value = await BankService.subscribeToCompanyTransactionChanges(handleRealtimeUpdates);
-  settings.value = await SettingsService.getSettings();
+  isBanker.value = AuthService.isBanker();
 });
 
+useEventBus<boolean>('isBanker').on(state => (isBanker.value = state));
+
 onUnmounted(() => {
   subscription.value?.();
   companySubscription.value?.();
 });
+
+watch(isBanker, async (newValue) => {
+  if(newValue) {
+    subscription.value = await BankService.subscribeToTransactionChanges(handleRealtimeUpdates);
+    companySubscription.value = await BankService.subscribeToCompanyTransactionChanges(handleRealtimeUpdates);
+    settings.value = await SettingsService.getSettings();
+  } else {
+    subscription.value?.();
+    companySubscription.value?.();
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/webapp/src/services/auth.service.ts b/webapp/src/services/auth.service.ts
index 2b51505..20d1e59 100644
--- a/webapp/src/services/auth.service.ts
+++ b/webapp/src/services/auth.service.ts
@@ -1,6 +1,7 @@
 import { Admin } from 'pocketbase';
 import { PocketbaseService } from './pocketbase.service';
 import { useEventBus } from '@vueuse/core';
+import { BankersResponse, Collections } from '../types/pocketbase.types';
 
 const API = PocketbaseService.getApi();
 
@@ -29,5 +30,22 @@ export class AuthService {
   public static logout(): void {
     API.authStore.clear();
     useEventBus<boolean>('isAdmin').emit(false);
+    useEventBus<boolean>('isBanker').emit(false);
   }
+  public static async loginAsBanker(username: string, password: string): Promise<BankersResponse> {
+    const response = await API.collection(Collections.Bankers).authWithPassword<BankersResponse>(username, password);
+    if(response) {
+      useEventBus<boolean>('isBanker').emit(true);
+      return response.record;
+    }
+    throw new Error('Invalid credentials');
+  }
+  public static isBanker(): boolean {
+    if(API.authStore.model && API.authStore.model?.collectionName == Collections.Bankers) {
+      useEventBus<boolean>('isBanker').emit(true);
+      return true;
+    }
+    return false;
+  }
+
 }
\ No newline at end of file
diff --git a/webapp/src/services/company.service.ts b/webapp/src/services/company.service.ts
index e4c46eb..5986840 100644
--- a/webapp/src/services/company.service.ts
+++ b/webapp/src/services/company.service.ts
@@ -30,7 +30,7 @@ export class CompanyService {
   }
   public static isAuthenticated(): boolean {
     if(API.authStore.isValid && API.authStore.model) {
-      return Boolean(API.authStore.model.collectionId);
+      return API.authStore.model.collectionName == Collections.Companies;
     }
     this.logout();
     return false;
diff --git a/webapp/src/types/pocketbase.types.ts b/webapp/src/types/pocketbase.types.ts
index 59c0584..9a6bacf 100644
--- a/webapp/src/types/pocketbase.types.ts
+++ b/webapp/src/types/pocketbase.types.ts
@@ -5,6 +5,7 @@
 export enum Collections {
 	Accounts = "accounts",
 	AccountsList = "accountsList",
+	Bankers = "bankers",
 	Companies = "companies",
 	CompanyTransactions = "companyTransactions",
 	Settings = "settings",
@@ -54,6 +55,8 @@ export type AccountsListRecord<Tbalance = unknown, Tname = unknown> = {
 	balance?: null | Tbalance
 }
 
+export type BankersRecord = never
+
 export type CompaniesRecord = {
 	accountNumber?: string
 	name: string
@@ -84,6 +87,7 @@ export type TransactionsRecord = {
 // Response types include system fields and match responses from the PocketBase API
 export type AccountsResponse<Texpand = unknown> = Required<AccountsRecord> & BaseSystemFields<Texpand>
 export type AccountsListResponse<Tbalance = unknown, Tname = unknown, Texpand = unknown> = Required<AccountsListRecord<Tbalance, Tname>> & BaseSystemFields<Texpand>
+export type BankersResponse<Texpand = unknown> = Required<BankersRecord> & AuthSystemFields<Texpand>
 export type CompaniesResponse<Texpand = unknown> = Required<CompaniesRecord> & AuthSystemFields<Texpand>
 export type CompanyTransactionsResponse<Texpand = unknown> = Required<CompanyTransactionsRecord> & BaseSystemFields<Texpand>
 export type SettingsResponse<Texpand = unknown> = Required<SettingsRecord> & BaseSystemFields<Texpand>
@@ -94,6 +98,7 @@ export type TransactionsResponse<Texpand = unknown> = Required<TransactionsRecor
 export type CollectionRecords = {
 	accounts: AccountsRecord
 	accountsList: AccountsListRecord
+	bankers: BankersRecord
 	companies: CompaniesRecord
 	companyTransactions: CompanyTransactionsRecord
 	settings: SettingsRecord
@@ -103,6 +108,7 @@ export type CollectionRecords = {
 export type CollectionResponses = {
 	accounts: AccountsResponse
 	accountsList: AccountsListResponse
+	bankers: BankersResponse
 	companies: CompaniesResponse
 	companyTransactions: CompanyTransactionsResponse
 	settings: SettingsResponse