ปรับ UI mobile

package-lock.json

@@ -17,6 +17,7 @@
         "thai-id-validator": "^1.1.3",
         "vue": "^3.2.13",
         "vue-router": "^4.3.0",
+        "vue-sweetalert2": "^5.0.10",
         "vuetify": "^3.0.0-beta.0",
         "vuex": "^4.0.0",
         "webfontloader": "^1.0.0"
@@ -12995,6 +12996,14 @@
         "node": ">= 10"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==",
+      "funding": {
+        "url": "https://sweetalert2.github.io/#donations"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13817,6 +13826,17 @@
       "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
       "dev": true
     },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "dependencies": {
+        "sweetalert2": "11.4.4"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
     "node_modules/vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -24924,6 +24944,11 @@
         }
       }
     },
+    "sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -25565,6 +25590,14 @@
         }
       }
     },
+    "vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "requires": {
+        "sweetalert2": "11.4.4"
+      }
+    },
     "vue-template-es2015-compiler": {
       "version": "1.9.1",
       "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "thai-id-validator": "^1.1.3",
     "vue": "^3.2.13",
     "vue-router": "^4.3.0",
+    "vue-sweetalert2": "^5.0.10",
     "vuetify": "^3.0.0-beta.0",
     "vuex": "^4.0.0",
     "webfontloader": "^1.0.0"

src/components/HeaderHome.vue

@@ -9,9 +9,14 @@
               src="../assets/logo-title.png"
               width="600"
               @click="$router.push('/')"
+              class="logo-home"
             ></v-img>
           </v-col>
-          <v-col align-self="center" align="center">
+          <v-col align-self="center" align="center" v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              ">
             <div style="width: 90%">
               สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
               <b>“เลือกกันเอง”</b>
@@ -201,6 +206,13 @@ export default {
   padding: 7px 10px;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
+  #app > div > div > main > div:nth-child(2) > div > div:nth-child(1) > div.text-normal.mb-5 > div > div > div.v-col-sm-12.v-col-md.v-col-auto > div{
+    height: 171px !important;
+  }
+  .logo-home{
+    height: 300px !important;
+    width: auto;
+  }
   .bg-curve {
     height: 450px;
     position: relative;

src/components/edit/FormSteperEdit.vue

@@ -52,7 +52,7 @@
                     <div class="text-medium-emphasis" style="font-size: 15px">
                       กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                       <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                       </span>
                     </div>
                     <v-text-field
@@ -67,7 +67,7 @@
                     <div class="text-medium-emphasis" style="font-size: 15px">
                       กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                       <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                       </span>
                     </div>
                     <v-text-field
@@ -169,7 +169,7 @@
                     variant="tonal"
                     class="float-right"
                     size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                   >
                 </div>
 
@@ -283,7 +283,7 @@
                     class="float-left"
                     size="large"
                     variant="tonal"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                   >
                   <!-- <v-spacer></v-spacer> -->
 
@@ -297,7 +297,7 @@
                     size="large"
                     variant="tonal"
                     class="float-right"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -408,7 +408,7 @@
                         variant="tonal"
                         size="large"
                         class="float-left"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                       >
                       <!-- <v-spacer></v-spacer> -->
 
@@ -418,7 +418,7 @@
                         variant="tonal"
                         class="float-right"
                         size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                       >
                     </div>
                     <!-- {{ checkOpt1 }} -->
@@ -561,7 +561,7 @@
                       class="float-left"
                       size="large"
                       variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                     >
                   </div>
                 </v-card>
@@ -585,7 +585,7 @@ import { mapGetters } from "vuex";
 
 // client.info.getAllGroups.query({}).then(console.log);
 export default {
-  components: { },
+  components: {},
   watch: {
     image(val) {
       console.log(val);
@@ -952,8 +952,16 @@ export default {
         this.$store.commit("setUsername", data.firstName);
         this.$store.commit("setImg", data.image);
         this.load = false;
-        alert("บันทึกข้อมูลสำเร็จ");
+        this.$swal
-        this.$router.push("/");
+          .fire({
+            title: "บันทึกข้อมูลสำเร็จ",
+            icon: "success",
+            timer: 3000,
+            showConfirmButton: false,
+          })
+          .then(() => {
+            this.$router.push("/");
+          });
       });
     },
 
@@ -971,17 +979,17 @@ export default {
         method: "POST",
         body: formData,
       }).then(() => {
-        client.user.confirmChangeImage.mutate().then(() => {
+        client.user.confirmChangeImage
-          this.getUserAfterEdit();
+          .mutate()
-        }).catch((error) => {
+          .then(() => {
-
+            this.getUserAfterEdit();
-          console.log('error.message',error.message);
+          })
-          alert(
+          .catch((error) => {
-              "บันทึกรูปภาพไม่สำเร็จ!"
+            this.load = false;
-            );
+            console.log("error.message", error.message);
-          this.getUserAfterEdit();
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
-          // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
+            this.getUserAfterEdit();
-          
+            // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
           });
         // alert("บันทึกข้อมูลสำเร็จ");
       });
@@ -1037,7 +1045,21 @@ export default {
           // }
         })
         .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -1051,7 +1073,21 @@ export default {
           this.$router.push("/");
         })
         .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -1068,7 +1104,21 @@ export default {
           this.$store.commit("setImg", data.image);
         })
         .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้");
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },

src/components/form/FormSteper.vue

@@ -53,7 +53,7 @@
                     <div class="text-medium-emphasis" style="font-size: 15px">
                       กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                       <span class="ml-2 text-red-accent-4">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                       </span>
                     </div>
                     <v-text-field
@@ -69,7 +69,7 @@
                     <div class="text-medium-emphasis" style="font-size: 15px">
                       กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                       <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                       </span>
                     </div>
                     <v-text-field
@@ -169,7 +169,7 @@
                     variant="tonal"
                     class="float-right"
                     size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -281,7 +281,7 @@
                     variant="tonal"
                     class="float-left"
                     size="large"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                   >
 
                   <v-btn
@@ -294,7 +294,7 @@
                     variant="tonal"
                     class="float-right"
                     size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -386,7 +386,7 @@
                         class="float-left"
                         size="large"
                         variant="tonal"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                       >
                       <!-- <v-spacer></v-spacer> -->
 
@@ -396,7 +396,7 @@
                         variant="tonal"
                         class="float-right"
                         size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                       >
                     </div>
                     <!-- {{ checkOpt1 }} -->
@@ -541,7 +541,7 @@
                       class="float-left"
                       size="large"
                       variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                     >
                   </div>
                 </v-card>
@@ -955,15 +955,26 @@ export default {
           if (this.file) {
             this.uploadImage();
           } else {
-            alert(
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
-              "บันทึกรูปภาพไม่สำเร็จ!"
-            );
             this.getUser();
-           
           }
         })
         .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -974,10 +985,33 @@ export default {
           this.load = false;
           this.$store.commit("setCheckLogin", false);
           localStorage.setItem("token", data.token);
-          this.$router.push("/");
+          this.$swal
+            .fire({
+              title: "บันทึกข้อมูลสำเร็จ",
+              icon: "success",
+              timer: 3000,
+              showConfirmButton: false,
+            })
+            .then(() => {
+              this.$router.push("/");
+            });
         })
         .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จสำเร็จ",
+              text: error,
+              icon: "error",
+            });
+          }
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -990,9 +1024,10 @@ export default {
           localStorage.setItem("img", data.image);
           this.$store.commit("setUsername", data.firstName);
           this.$store.commit("setImg", data.image);
-          alert(
+
-            "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+          // alert(
-          );
+          //   "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+          // );
 
           this.login({ cid: data.cid, phone: data.phone });
         })

src/config.js

@@ -1,3 +1,4 @@
 export const CONFIG = {
+  //  api_url: "http://178.128.18.156:3000",
   api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
 };

src/main.js

@@ -4,6 +4,10 @@ import store from "./store";
 import vuetify from "./plugins/vuetify";
 import { loadFonts } from "./plugins/webfontloader";
 import router from './router' 
+
+import VueSweetalert2 from 'vue-sweetalert2';
+import 'sweetalert2/dist/sweetalert2.min.css';
+
 loadFonts();
 
-createApp(App).use(store).use(vuetify).use(router).mount("#app");
+createApp(App).use(store).use(vuetify).use(VueSweetalert2).use(router).mount("#app");

src/views/RegisterForm.vue

@@ -3,14 +3,14 @@
     <FormMain v-if="
         getUsername == '' || getUsername == null || getUsername == undefined
       "/>
-      <div
+      <!-- <div
       v-if="
-        getUsername"
+        getUsername&&getCheckLogin"
       class="text-sub text-center py-10"
     >
       <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
       ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
-    </div>
+    </div> -->
   </div>
 </template>
 <script>