Merge pull request #291 from tiki/fix/Account-form-error-is-not-reactive

Fix/account form error is not reactive

.gitattributes

@@ -0,0 +1,9 @@
+#
+# https://help.github.com/articles/dealing-with-line-endings/
+#
+# Linux start script should use lf
+/gradlew        text eol=lf
+
+# These are Windows script files and should use crlf
+*.bat           text eol=crlf
+

src/components/account/account-form.vue

@@ -73,7 +73,7 @@ watch(
       @input="update"
     />
     <div class="error">
-      <p v-if="error" class="error-message">{{ error }}</p>
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
     </div>
   </form>
 </template>
@@ -109,7 +109,6 @@ input {
 
 .error-message {
   margin: 0;
-  line-height: 0;
 }
 
 input:focus {

src/components/sheet/sheet-add-retailer.vue

@@ -2,21 +2,20 @@
   - Copyright (c) TIKI Inc.
   - MIT license. See LICENSE file in root directory.
   -->
-
 <script setup lang="ts">
 import AccountSelect from "../account/account-select.vue";
 import AccountForm from "../account/account-form.vue";
 import HeaderBack from "@/components/header/header-back.vue";
 import TextButton from "@/components/button/button-text.vue";
-import { type Account, AMAZON } from "@mytiki/capture-receipt-capacitor";
+import { type Account, ACME_MARKETS } from "@mytiki/capture-receipt-capacitor";
 import type { TikiService } from "@/service";
 import { ref, inject, computed } from "vue";
 import { ButtonTextState } from "@/components/button/button-text-state";
 
 const emit = defineEmits(["close", "back"]);
 const tiki: TikiService = inject("Tiki")!;
 
-const form = ref<Account>({ username: "", password: "", type: AMAZON });
+const form = ref<Account>({ username: "", password: "", type: ACME_MARKETS });
 const error = ref<string>();
 
 const canSubmit = computed(
@@ -32,7 +31,7 @@ const submit = async () => {
     await tiki.capture.login(form.value);
     tiki.capture.scan().catch((error) => console.error(error.toString()));
     error.value = "";
-    form.value = { username: "", password: "", type: AMAZON };
+    form.value = { username: "", password: "", type: ACME_MARKETS };
     emit("back");
   } catch (err: any) {
     error.value = err.toString();
@@ -47,7 +46,10 @@ const submit = async () => {
       @back="$emit('back')"
       @close="$emit('close')"
     />
-    <account-select v-model:account-type="form.type" />
+    <account-select
+      :account-type="form.type"
+      @update:accountType="(val) => (form.type = val)"
+    />
     <account-form
       v-model:account="form"
       :error="error"