แก้ไข UI / UX ทำ function search ใหม่ ตามบรีฟพี่อาร์ม

src/views/LoginForm.vue

@@ -1,30 +1,36 @@
 <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"
+    <div
+      n
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
     >
-      <v-form fast-fail @submit.prevent v-model="form1">
-        <div class="text-subtitle-1 text-medium-emphasis">ID card number</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>
-        <!--   
+          <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
   
@@ -37,20 +43,20 @@
             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-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
+          <!-- <v-card
           class="mb-12"
           color="surface-variant"
           variant="tonal"
@@ -60,24 +66,65 @@
           </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
+            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" 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="/">
+          <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-form>
-    </v-card>
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal btn-w ma-6"
+          height="85"
+          to="/search"
+        >
+          <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"]),
+  },
   data: () => ({
     form1: false,
     visible: false,
@@ -99,7 +146,9 @@ export default {
         .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.$emitter.emit("loginUser", data.firstName );
 
           this.$router.push("/");