update edit / login / responsive

src/views/CheckDetail.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="bg-yellow-page mt-5">
+    <v-container>
+      <div class="text-title text-center mt-10">
+        ตวรจเช็คคุณสมบัติ-ลักษณะต้องห้าม ของผู้ที่จะสมัคร สว.<br />
+        <!-- <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon> -->
+      </div>
+      <div class="text-center mb-10">
+        <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
+      </div>
+
+      <br />
+      <v-row>
+        <v-col cols="12" md="">
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/Group 195.png"
+            height="100%"
+            class="img-checkdetail"
+          ></v-img>
+        </v-col>
+        <v-col class="text-sub2 bline" cols="12" md="">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-check-circle-outline" color="#4C884C"></v-icon>
+            คุณสมบัติของสมาชิกวุฒิสภา
+          </div>
+          <div class="text-sub">
+            สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+            โดยมีคุณสมบัติดังนี้
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 196.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+
+            มีสัญชาติไทยโดยการเกิด
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 197.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img
+            >มีอายุไม่ต่ำกว่า 40 ปีในวันสมัครรับเลือก
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 198.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            มีความรู้ ความเชี่ยวชาญ และประสบการณ์ หรือทำงานในด้าน
+            ที่สมัครไม่น้อยกว่าสิบปี ยกเว้น ผู้สมัครในกลุ่มสตรี ผู้สูงอายุ
+            คนพิการ
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 199.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            ผู้สมัครต้องมีลักษณะอย่างใดอย่างหนึ่ง ดังต่อไปนี้ด้วย<br />(ก)
+            เป็นบุคคลซึ่งเกิดในอำเภอที่สมัครรับเลือก <br />(ข)
+            มีชื่ออยู่ในทะเบียนบ้านในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลา
+            ติดต่อกันไม่น้อยกว่า สองปีนับถึงวันสมัครรับเลือก <br />(ค)
+            ทำงานอยู่ในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลาติดต่อกัน
+            ไม่น้อยกว่าสองปี นับถึงวันสมัครรับเลือก <br />(ง)
+            เคยทำงานหรือเคยมีชื่ออยู่ในทะเบียนบ้านอยู่ในอำเภอที่สมัคร รับเลือก
+            แล้วแต่กรณี เป็นเวลาติดต่อกันไม่น้อยกว่าสองปี <br />(จ)
+            เคยศึกษาในสถานศึกษาที่ตั้งอยู่ในอำเภอที่สมัครรับเลือกเป็น
+            เวลาติดต่อกันไม่น้อยกว่า สองปีการศึกษา
+          </div>
+        </v-col>
+      </v-row>
+      <v-row class="my-10">
+        <v-col cols="12" md="" class="border-blue text-sub2 bline pa-5">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-close-circle-outline" color="#DD3131"></v-icon>
+            ลักษณะต้องห้ามของสมาชิกวุฒิสภา
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ติดยาเสพติดให้โทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุคคลล้มละลายหรือเคยเป็นบุคคลล้มละลายทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นเจ้าของหรือผู้ถือหุ้นในกิจการหนังสือพิมพ์หรือสื่อมวลชนใด ๆ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นภิกษุ สามเณร นักพรต หรือนักบวช
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกต้ังไม่ว่าคดีนั้นจะถึงที่สุดแล้วหรือไม่
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            วิกลจริตหรือจิตฟั่นเฟือนไม่สมประกอบ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ระหว่างถูกระงับการใช้สิทธิสมัครรับเลือกตั้งเป็นการชั่วคราวหรือ
+            ถูกเพิกถอนสิทธิสมัครรับเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ต้องคำพิพากษาให้จำคุกและถูกคุมขังอยู่โดยหมายของศาล
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยได้รับโทษจำคุกโดยได้พ้นโทษมายังไม่ถึงสิบปีนับถึงวันเลือกในระดับ
+            อำเภอ เว้นแต่ ในความผิดอันได้กระทำโดยประมาทหรือความผิดลหุโทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยถูกสั่งให้พ้นจากราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจเพราะ
+            ทุจริตต่อหน้าที่ หรือถือว่ากระทำการทุจริตหรือประพฤติมิชอบใน วงราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาหรือคำสั่งของศาลอันถึงที่สุดให้ทรัพย์สินตกเป็น
+            ของแผ่นดินเพราะร่ำรวยผิดปกติ หรือเคยต้องคำพิพากษาอันถึงที่สุด
+            ให้ลงโทษจำคุกเพราะกระทำความผิดตามกฎหมายว่าด้วยการป้องกัน
+            และปราบปรามการทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำการอันเป็นการทุจริตในการเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยเป็นสมาชิกวุฒิสภาตามรัฐธรรมนูญนี้
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำความผิดต่อตำแหน่งหน้าที่
+            ราชการหรือ ต่อตำแหน่งหน้าที่ในการยุติธรรม หรือกระทำความผิด
+            ตามกฎหมายว่าด้วยความผิดของพนักงานในองค์การ หรือหน่วยงาน ของรัฐ
+            หรือความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริตตามประมวล กฎหมายอาญา
+            ความผิดตามกฎหมายว่าด้วยการกู้ยืมเงินที่เป็น การฉ้อโกงประชาชน
+            กฎหมายว่าด้วยยาเสพติด ในความผิดฐานเป็นผู้ผลิต นำเข้า ส่งออก
+            หรือผู้ค้า กฎหมายว่าด้วยการพนันในความผิดฐานเป็นเจ้ามือ หรือเจ้าสำนัก
+            กฎหมายว่าด้วยการป้องกันและปราบปรามการค้ามนุษย์
+            หรือกฎหมายว่าด้วยการป้องกัน และปราบปรามการฟอกเงินในความผิด
+            ฐานฟอกเงิน
+          </div>
+        </v-col>
+        <v-col class="text-sub2 bline pa-5" cols="12" md="">
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างต้องห้ามมิให้ดำรงตำแหน่งทางการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นพนักงานหรือลูกจ้างของหน่วยราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
+            หรือเป็นเจ้าหน้าที่อื่นของรัฐ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นตุลาการศาลรัฐธรรมนูญ หรือผู้ดำรงตำแหน่งในองค์กรอิสระ
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลรัฐธรรมนูญวินิจฉัยว่ามีการเสนอ การแปรญัตติ
+            หรือ การกระทำด้วยประการใด ๆ ที่มีผลให้สมาชิก สภาผู้แทนราษฎร
+            สมาชิกวุฒิสภา หรือกรรมาธิการ มีส่วนไม่ว่า
+            โดยทางตรงหรือทางอ้อมในการใช้งบประมาณรายจ่าย
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลฎีกาหรือศาลฎีกาแผนกคดีอาญา
+            ของผู้ดำรงตำแหน่งทางการเมืองมีคำพิพากษาว่าเป็นผู้มี
+            พฤติการณ์ร่ำรวยผิดปกติ หรือกระทำความผิดฐานทุจริตต่อหน้าที่
+            หรือจงใจปฏิบัติหน้าที่หรือใช้อำนาจขัดต่อบทบัญญัติแห่ง
+            รัฐธรรมนูญหรือกฎหมาย หรือฝ่าฝืนหรือไม่ปฏิบัติ ตามมาตรฐาน
+            ทางจริยธรรมอย่างร้ายแรง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นข้าราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาผู้แทนราษฎร เว้นแต่ ได้พ้นจากการ
+            เป็นสมาชิกสภาผู้แทนราษฎร มาแล้วไม่น้อยกว่าห้าปีนับถึง
+            วันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นสมาชิกพรรคการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นผู้ดำรงตำแหน่งใดในพรรคการเมือง เว้นแต่
+            ได้พ้นจากการดำรงตำแหน่งในพรรคการเมืองมาแล้วไม่น้อยกว่า
+            ห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นรัฐมนตรี เว้นแต่ ได้พ้นจากการเป็นรัฐมนตรีมา
+            แล้วไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาท้องถิ่นหรอืผู้บริหารท้องถิ่น เว้นแต่
+            ได้พ้นจากการเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่นมาแล้ว
+            ไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตาแหน่งสมาชิกสภา ผู้แทนราษฎร
+            สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
+            หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
+            เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.bline div {
+  margin: 15px 0px;
+}
+.bg-yellow-page {
+  background: #f7d278;
+}
+.border-blue {
+  border-right: 5px solid #1b76ba;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .border-blue {
+    border-right: 0px solid #1b76ba;
+  }
+  .img-checkdetail {
+    /* height: 250px !important; */
+  }
+}
+</style>

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>

src/views/ProfileUser.vue

@@ -0,0 +1,13 @@
+<template lang="">
+    <div>
+      <FormMain />
+    </div>
+  </template>
+  <script>
+  import FormMain from "../components/edit/FormMainEdit.vue";
+  export default {
+    components: { FormMain },
+  };
+  </script>
+  <style lang=""></style>
+