Use Input component for all inputs except file-input

web/src/components/DateInput.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Input from './Input.vue';
 const props = defineProps(["modelValue"]);
 const emit = defineEmits(['update:modelValue']);
 
@@ -25,8 +26,7 @@ function selectAll(event: FocusEvent) {
 </script>
 
 <template>
-  <input
+  <Input
-    class="dark:bg-slate-900"
     type="date"
     ref="input"
     v-bind:value="dateToYYYYMMDD(modelValue)"

web/src/components/TransactionRow.vue

@@ -6,6 +6,7 @@ import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 import { useAccountStore } from "../stores/budget-account";
+import Input from "./Input.vue";
 
 const props = defineProps<{
     transactionid: string,
@@ -69,7 +70,7 @@ function getStatusSymbol() {
             {{ TX.GroupID ? "☀" : "" }}
             {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-            <input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
+            <Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />

web/src/dialogs/EditAccount.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue';
 import Modal from '../components/Modal.vue';
 import { useAccountStore } from '../stores/budget-account';
+import Input from '../components/Input.vue';
 
 const accountStore = useAccountStore();
 const CurrentAccount = computed(() => accountStore.CurrentAccount);
@@ -23,7 +24,7 @@ function openEditAccount(e : any) {
     <Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
         <template v-slot:placeholder>✎</template>
         <div class="mt-2 px-7 py-3">
-            <input
+            <Input
                 class="border-2"
                 type="text"
                 v-model="accountName"
@@ -32,7 +33,7 @@ function openEditAccount(e : any) {
             />
         </div>
         <div class="mt-2 px-7 py-3">
-            <input
+            <Input
                 class="border-2"
                 type="checkbox"
                 v-model="accountOnBudget"

web/src/dialogs/NewBudget.vue

@@ -2,6 +2,7 @@
 import Modal from '../components/Modal.vue';
 import { ref } from "vue";
 import { useBudgetsStore } from '../stores/budget';
+import Input from '../components/Input.vue';
 
 const budgetName = ref("");
 function saveBudget() {
@@ -12,7 +13,7 @@ function saveBudget() {
 <template>
   <Modal button-text="New Budget" @submit="saveBudget">
     <div class="mt-2 px-7 py-3">
-      <input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
+      <Input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
     </div>
   </Modal>
 </template>

web/src/pages/Account.vue

@@ -8,6 +8,7 @@ import EditAccount from "../dialogs/EditAccount.vue";
 import Button from "../components/Button.vue";
 import { useTransactionsStore } from "../stores/transactions";
 import Modal from "../components/Modal.vue";
+import Input from "../components/Input.vue";
 
 defineProps<{
     budgetid: string
@@ -73,7 +74,7 @@ function createReconcilationTransaction() {
             <Currency :value="transactions.ReconcilingBalance" />your current balance?
             <Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
             <br />No, it's:
-            <input class="text-right" type="number" v-model="TargetReconcilingBalance" />
+            <Input class="text-right" type="number" v-model="TargetReconcilingBalance" />
             Difference:
             <Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
             <Button
@@ -93,7 +94,7 @@ function createReconcilationTransaction() {
             <td>Memo</td>
             <td class="text-right">Amount</td>
             <td style="width: 80px;">
-                <input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
+                <Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
             </td>
         </tr>
         <TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />

web/src/pages/Login.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
+import Input from "../components/Input.vue";
 
 const error = ref("");
 const login = ref({ user: "", password: "" });
@@ -28,10 +29,10 @@ function formSubmit(e: MouseEvent) {
 
 <template>
     <div>
-        <input type="text" v-model="login.user"
+        <Input type="text" v-model="login.user"
             placeholder="Username"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="password" v-model="login.password"
+        <Input type="password" v-model="login.password"
             placeholder="Password"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
     </div>

web/src/pages/Register.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
+import Input from "../components/Input.vue";
 
 const error = ref("");
 const login = ref({ email: "", password: "", name: "" });
@@ -28,13 +29,13 @@ function formSubmit(e: MouseEvent) {
 
 <template>
     <div>
-        <input type="text" v-model="login.name"
+        <Input type="text" v-model="login.name"
             placeholder="Name"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="text" v-model="login.email"
+        <Input type="text" v-model="login.email"
             placeholder="Email"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <input type="password" v-model="login.password"
+        <Input type="password" v-model="login.password"
             placeholder="Password"
             class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
     </div>

web/src/pages/Settings.vue

@@ -7,6 +7,7 @@ import { useSessionStore } from "../stores/session";
 import Card from "../components/Card.vue";
 import Button from "../components/Button.vue";
 import { saveAs } from 'file-saver';
+import Input from "../components/Input.vue";
 
 const transactionsFile = ref<File | undefined>(undefined);
 const assignmentsFile = ref<File | undefined>(undefined);