update edit / login / responsive

src/views/LoginForm.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <v-img
+      class="mx-auto"
+      :aspect-ratio="1"
+      src="@/assets/logo-title.png"
+      width="250"
+    ></v-img>
+    <v-card
+      class="mx-auto pa-12 pb-8"
+      elevation="8"
+      max-width="600"
+      rounded="lg"
+    >
+      <v-form fast-fail @submit.prevent v-model="form1">
+        <div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
+
+        <v-text-field
+          density="compact"
+          placeholder="เลขประจำตัว 13 หลัก"
+          prepend-inner-icon="mdi-card-account-details"
+          variant="outlined"
+          color="#4c884c"
+          v-model="payload.cid"
+          :rules="rules.id"
+        ></v-text-field>
+        <!--   
+        <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
+          Password
+  
+          <a
+            class="text-caption text-decoration-none text-blue"
+            href="#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Forgot login password?</a>
+        </div> -->
+
+        <v-text-field
+          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+          :type="visible ? 'text' : 'password'"
+          density="compact"
+          placeholder="เบอร์โทรศัพท์"
+          prepend-inner-icon="mdi-lock-outline"
+          variant="outlined"
+          @click:append-inner="visible = !visible"
+          v-model="payload.phone"
+          :rules="rules.tel"
+          color="#4c884c"
+        ></v-text-field>
+
+        <!-- <v-card
+          class="mb-12"
+          color="surface-variant"
+          variant="tonal"
+        >
+          <v-card-text class="text-medium-emphasis text-caption">
+            Warning: 
+          </v-card-text>
+        </v-card> -->
+
+        <v-btn
+          class="mb-8"
+          size="large"
+          variant="tonal"
+          block
+          @click="login"
+          color="#4c884c"
+          :disabled="!form1"
+        >
+          Log In
+        </v-btn>
+      </v-form>
+    </v-card>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+export default {
+  data: () => ({
+    form1: false,
+    visible: false,
+    payload: { cid: "", phone: "" },
+    rules: {
+      tel: [
+        (v) =>
+          // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
+          /^([0-9]{10})$/.test(v) || "Invalid phone number",
+      ],
+      id: [
+        (v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
+      ],
+    },
+  }),
+  methods: {
+    getUser() {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          localStorage.setItem("username", data.firstName);
+          this.$store.commit("setUsername", data.firstName);
+          //   this.$emitter.emit("loginUser", data.firstName );
+
+          this.$router.push("/");
+
+          //   location.reload();
+          // this.$store.dispatch('setLocalStorageValue',data.firstName)
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    login() {
+      client.user.login
+        .mutate(this.payload)
+        .then((data) => {
+          console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          //   this.uploadImage();
+          this.getUser();
+
+          // this.provinceItems = data;
+        })
+        .catch((error) => {
+          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+  },
+};
+</script>