Add demo with bot doing login and transaction

package.json

@@ -56,6 +56,8 @@
     "vue3-otp-input": "^0.4.1"
   },
   "devDependencies": {
+    "chromedriver": "^123.0.0",
+    "selenium-webdriver": "^4.18.1",
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@playwright/test": "^1.31.1",

selenium/banking/login-password.js

@@ -0,0 +1,49 @@
+import { Builder, By, Browser, until } from "selenium-webdriver";
+
+const email = "[email protected]";
+const password = "mlkjmlkj";
+
+async function example() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to URL
+    await driver.get("http://localhost:4000");
+
+    // Find the element with ID 'login-button' and click it
+    await driver.findElement(By.id("email")).click();
+
+    // Add more actions here
+  } finally {
+    // Close the browser after finishing
+    await driver.quit();
+  }
+}
+
+async function loginAction() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to the login page
+    await driver.get("http://localhost:4000/login");
+
+    // Find the email input by ID and enter the email address
+    const emailInput = await driver.wait(
+      until.elementLocated(By.id("email")),
+      5000
+    );
+
+    await emailInput.sendKeys(email);
+
+    // Find the password input by ID and enter the password
+    await driver.findElement(By.id("password")).sendKeys(password);
+
+    // Find the submit button by ID and click it
+    await driver.findElement(By.id("passwordLoginSubmit")).click();
+  } catch (error) {
+    console.error(`An error occurred: ${error}`);
+  } finally {
+    // Uncomment the next line if you want the browser to close automatically
+    // await driver.quit();
+  }
+}
+
+loginAction();

selenium/banking/transaction.js

@@ -0,0 +1,64 @@
+import { Builder, By, Browser, until } from "selenium-webdriver";
+
+const email = "[email protected]";
+const password = "mlkjmlkj";
+
+async function loginAction() {
+  let driver = await new Builder().forBrowser(Browser.CHROME).build();
+  try {
+    // Navigate to the login page
+    await driver.get("http://localhost:4000/login");
+
+    // Find the email input by ID and enter the email address
+    const emailInput = await driver.wait(
+      until.elementLocated(By.id("email")),
+      5000
+    );
+
+    await emailInput.sendKeys(email);
+
+    // Find the password input by ID and enter the password
+    await driver.findElement(By.id("password")).sendKeys(password);
+
+    // Find the submit button by ID and click it
+    await driver.findElement(By.id("passwordLoginSubmit")).click();
+
+    // Wait
+    const transferButton = await driver.wait(
+      until.elementLocated(By.id("bankTransfer")),
+      5000
+    );
+    transferButton.click();
+
+    await driver.sleep(1000); // Pause for 1000 milliseconds (1 second)
+    await driver.findElement(By.css("#accountSelection > input")).click();
+
+    await driver.sleep(1200);
+    await driver.findElement(By.css("#\\34 0021194485 .uppercase")).click();
+
+    await driver.sleep(800);
+    await driver.findElement(By.css("#selectBeneficiary > input")).click();
+
+    await driver.sleep(1200);
+    await driver.findElement(By.id("Aeklys")).click();
+
+    await driver.sleep(900);
+    await driver.findElement(By.id("transferAmount")).click();
+
+    await driver.sleep(500);
+    await driver.findElement(By.id("transferAmount")).sendKeys("400");
+
+    await driver.sleep(1200);
+    await driver.findElement(By.id("validateForm")).click();
+
+    await driver.sleep(2000);
+    await driver.findElement(By.id("validateTransfer")).click();
+  } catch (error) {
+    console.error(`An error occurred: ${error}`);
+  } finally {
+    // Uncomment the next line if you want the browser to close automatically
+    // await driver.quit();
+  }
+}
+
+loginAction();

src/components/bank/AccountSelection.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import SelectAccountSummary from './SelectAccountSummary.vue'
-import type { Account } from '@/helpers/account'
+import { ref } from "vue";
+import SelectAccountSummary from "./SelectAccountSummary.vue";
+import type { Account } from "@/helpers/account";
 
 const props = defineProps<{
-  accounts: Account[]
-}>()
+  accounts: Account[];
+}>();
 
-const emits = defineEmits(['accountSelected'])
-const open = ref(false)
-const selectedAccount = ref<Account | null>(null)
+const emits = defineEmits(["accountSelected"]);
+const open = ref(false);
+const selectedAccount = ref<Account | null>(null);
 function selectAccount(account: Account) {
-  selectedAccount.value = account
-  open.value = false
-  emits('accountSelected', account)
+  selectedAccount.value = account;
+  open.value = false;
+  emits("accountSelected", account);
 }
 </script>
 
@@ -23,15 +23,22 @@ function selectAccount(account: Account) {
   >
     <input type="checkbox" v-model="open" />
     <div class="collapse-title font-medium">
-      <div v-if="selectedAccount === null">{{ $t('bank.transfer.selectSendingAccount') }}</div>
+      <div v-if="selectedAccount === null">
+        {{ $t("bank.transfer.selectSendingAccount") }}
+      </div>
       <div v-else>
-        <select-account-summary class="hover:cursor-pointer px-4 py-2" :account="selectedAccount" />
+        <select-account-summary
+          :id="selectedAccount.number"
+          class="hover:cursor-pointer px-4 py-2"
+          :account="selectedAccount"
+        />
       </div>
     </div>
     <div class="collapse-content px-0">
       <hr />
       <div v-for="account in props.accounts" v-bind:key="account.number">
         <select-account-summary
+          :id="account.number"
           @click="selectAccount(account)"
           class="hover:bg-base-200/50 hover:cursor-pointer px-4 py-2"
           :account="account"

src/components/bank/BankAccountSummary.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { CurrencyEuroIcon, EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
+import {
+  CurrencyEuroIcon,
+  EllipsisVerticalIcon,
+} from "@heroicons/vue/24/outline";
 
 const props = defineProps<{
-  accountName: string
-  accountNumber: string
-  accountBalance: number
-}>()
+  accountName: string;
+  accountNumber: string;
+  accountBalance: number;
+}>();
 </script>
 <template>
   <div class="flex justify-between">
@@ -18,7 +21,7 @@ const props = defineProps<{
     </div>
     <div class="flex items-center">
       <div class="text-primary font-bold">
-        {{ $n(props.accountBalance, 'currency') }}
+        {{ $n(props.accountBalance, "currency") }}
       </div>
       <ellipsis-vertical-icon class="h-6 w-6" />
     </div>

src/components/bank/BankActionButton.vue

@@ -4,32 +4,32 @@ import {
   CreditCardIcon,
   PencilSquareIcon,
   ArrowsRightLeftIcon,
-} from '@heroicons/vue/24/outline'
-import { computed } from 'vue'
+} from "@heroicons/vue/24/outline";
+import { computed } from "vue";
 
 const props = defineProps<{
-  text: string
-  icon: 'Transfer' | 'Card' | 'Iban' | 'Document'
-}>()
+  text: string;
+  icon: "Transfer" | "Card" | "Iban" | "Document";
+}>();
 
 const componentToLoad = computed(() => {
   switch (props.icon) {
-    case 'Transfer':
-      return ArrowsRightLeftIcon
+    case "Transfer":
+      return ArrowsRightLeftIcon;
 
-    case 'Card':
-      return CreditCardIcon
+    case "Card":
+      return CreditCardIcon;
 
-    case 'Iban':
-      return PencilSquareIcon
+    case "Iban":
+      return PencilSquareIcon;
 
-    case 'Document':
-      return DocumentTextIcon
+    case "Document":
+      return DocumentTextIcon;
 
     default:
-      return CreditCardIcon
+      return CreditCardIcon;
   }
-})
+});
 </script>
 
 <template>