sorvor-front/src/views/LoginForm.vue

<template>
  <div>
    <div
      n
      v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "
    >
      <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>
    <div v-if="getUsername&&getCheckPage" class="text-normal text-center py-10">
      <v-icon
        icon="mdi-alert-circle-outline"
        size="35"
        color="#4c884c"
      ></v-icon>
      คุณเข้าสู่ระบบอยู่แล้ว

      <div class="mt-10">
        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
          <span class="text-normal"> กลับหน้าหลัก</span>

          <v-img
            :aspect-ratio="1"
            src="../assets/logo.png"
            width="85"
            style="position: absolute; bottom: -40px; left: -30px"
          ></v-img>
        </v-btn>
        <v-btn
          elevated
          color="#DD6C31"
          class="text-normal  ma-6"
          height="85"
          to="/search"
          width="300"
        >
          <v-img
            :aspect-ratio="1"
            src="../assets/search.png"
            width="90"
            style="position: absolute; bottom: -45px; right: 0px"
          ></v-img>
          <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
        </v-btn>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { client } from "@/utils/trpc";
export default {
  computed: {
    ...mapGetters(["getUsername", "getImg","getCheckPage"]),
  },
  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);
          localStorage.setItem("img", data.image);
          this.$store.commit("setUsername", data.firstName);
          this.$store.commit("setImg", data.image);
          this.$router.push("/");
        })
        .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>