validasi create akun dan edit akun

resources/js/components/CreateAkun.vue

@@ -7,25 +7,34 @@
 
             <form @submit.prevent="createAkun" class="space-y-3">
                 <!-- Nama -->
-                <label for="nama">Nama</label>
+                <div>
+                    <label for="nama" class="block text-sm font-medium">Nama</label>
                     <InputField
                         v-model="form.nama"
                         id="nama"
                         type="text"
                         :required="true"
+                        @input="clearError('nama')"
                     />
+                    <p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
+                </div>
 
+                <!-- Password -->
                 <div>
-                    <label for="password">Password</label>
+                    <label for="password" class="block text-sm font-medium">Password</label>
                     <InputField
                         v-model="form.password"
                         id="password"
                         type="password"
                         :required="true"
+                        @input="clearError('password')"
                     />
+                    <p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
                 </div>
 
-                <label for="peran">Peran</label>
+                <!-- Role -->
+                <div>
+                    <label for="peran" class="block text-sm font-medium">Peran</label>
                     <InputSelect
                         v-model="form.role"
                         :options="[
@@ -33,7 +42,10 @@
                             { value: 'kasir', label: 'Kasir' },
                         ]"
                         placeholder="-- Pilih Peran --"
+                        @change="clearError('role')"
                     />
+                    <p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
+                </div>
 
                 <!-- Tombol -->
                 <div class="flex justify-end gap-2 mt-4">
@@ -53,7 +65,7 @@
                 </div>
             </form>
 
-            <!-- Error -->
+            <!-- Error global -->
             <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
                 {{ errorMessage }}
             </p>
@@ -72,25 +84,65 @@ export default {
     data() {
         return {
             form: { nama: "", password: "", role: "" },
+            errors: { nama: "", password: "", role: "" },
             errorMessage: "",
         };
     },
     methods: {
+        clearError(field) {
+            this.errors[field] = "";
+            this.errorMessage = "";
+        },
+        validateForm() {
+            let valid = true;
+            this.errors = { nama: "", password: "", role: "" };
+
+            if (!this.form.nama) {
+                this.errors.nama = "Nama wajib diisi";
+                valid = false;
+            }
+            if (!this.form.password) {
+                this.errors.password = "Password wajib diisi";
+                valid = false;
+            } else if (this.form.password.length < 6) {
+                this.errors.password = "Password minimal 6 karakter";
+                valid = false;
+            }
+            if (!this.form.role) {
+                this.errors.role = "Role wajib dipilih";
+                valid = false;
+            } else if (!["owner", "kasir"].includes(this.form.role)) {
+                this.errors.role = "Role harus owner atau kasir";
+                valid = false;
+            }
+
+            return valid;
+        },
         async createAkun() {
+            if (!this.validateForm()) return;
+
             try {
-                await axios.post("api/user", this.form, {
+                await axios.post("/api/user", this.form, {
                     headers: {
-                        Authorization: `Bearer ${localStorage.getItem(
+                        Authorization: `Bearer ${localStorage.getItem("token")}`,
-                            "token"
-                        )}`,
                     },
                 });
+
+                // reset form
                 this.form = { nama: "", password: "", role: "" };
                 this.$emit("refresh");
                 this.$emit("close");
             } catch (err) {
+                if (err.response?.status === 422 && err.response.data.errors) {
+                    // tampilkan error validasi backend
+                    const backendErrors = err.response.data.errors;
+                    Object.keys(backendErrors).forEach((key) => {
+                        this.errors[key] = backendErrors[key][0];
+                    });
+                } else {
                     this.errorMessage =
                         err.response?.data?.message || "Gagal menambah akun.";
+                }
                 console.error("Gagal tambah akun:", err);
             }
         },

resources/js/components/EditAkun.vue

@@ -1,68 +1,84 @@
 <template>
-    <div class="fixed inset-0 flex items-center justify-center bg-black/65">
+  <div class="fixed inset-0 flex items-center justify-center bg-black/65 z-50">
-      <div class="bg-white rounded-lg p-6 w-96">
+    <div class="bg-white rounded-lg p-6 w-96 shadow-lg">
       <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
 
       <form @submit.prevent="updateAkun" class="space-y-3">
-            <label for="nama">Nama</label>
+        <!-- Nama -->
+        <div>
+          <label for="nama" class="block text-sm font-medium">Nama</label>
           <InputField
             v-model="form.nama"
-            label="nama"
+            id="nama"
             type="text"
             :required="true"
-            class="mb-3"
+            @input="clearError('nama')"
           />
-
+          <p v-if="errors.nama" class="text-red-500 text-sm">{{ errors.nama }}</p>
-          <div>
-          <label for="password">Password</label>
-          <InputField
-            v-model="form.password"
-            label="password"
-            type="password"
-            :required="false"
-            class="mb-1"
-          />
-          <p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
         </div>
 
-            <label for="peran">Peran</label>
+        <!-- Password -->
+        <div>
+          <label for="password" class="block text-sm font-medium">Password</label>
+          <InputField
+            v-model="form.password"
+            id="password"
+            type="password"
+            :required="false"
+            @input="clearError('password')"
+          />
+          <p class="text-sm">Kosongkan jika tidak ingin ubah password</p>
+          <p v-if="errors.password" class="text-red-500 text-sm">{{ errors.password }}</p>
+        </div>
+
+        <!-- Role -->
+        <div>
+          <label for="role" class="block text-sm font-medium">Peran</label>
           <InputSelect
             v-model="form.role"
-            label="peran"
             :options="[
               { value: 'owner', label: 'Owner' },
               { value: 'kasir', label: 'Kasir' }
             ]"
-            :required="true"
+            placeholder="-- Pilih Peran --"
-            class="mb-3"
+            @change="clearError('role')"
           />
+          <p v-if="errors.role" class="text-red-500 text-sm">{{ errors.role }}</p>
+        </div>
 
+        <!-- Tombol -->
         <div class="flex justify-end gap-2 mt-4">
           <button
             type="button"
             @click="$emit('close')"
-              class="bg-gray-300 px-4 py-2 rounded"
+            class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
           >
             Batal
           </button>
           <button
             type="submit"
-              class="bg-blue-500 text-white px-4 py-2 rounded"
+            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
           >
             Ubah
           </button>
         </div>
       </form>
+
+      <!-- Error global -->
+      <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
+        {{ errorMessage }}
+      </p>
     </div>
   </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  import axios from "axios";
+import axios from "axios";
-  import InputField from "@/components/InputField.vue";
+import InputField from "@/components/InputField.vue";
-  import InputSelect from "@/components/InputSelect.vue";
+import InputSelect from "@/components/InputSelect.vue";
 
-  export default {
+export default {
+  name: "EditAkun",
   props: {
     akun: {
       type: Object,
@@ -70,14 +86,15 @@
     },
   },
   components: { InputField, InputSelect },
-
   data() {
     return {
       form: {
-          nama: this.akun.nama || "",
+        nama: this.akun?.nama || "",
         password: "",
-          role: this.akun.role || "",
+        role: this.akun?.role || "",
       },
+      errors: { nama: "", password: "", role: "" },
+      errorMessage: "",
     };
   },
   watch: {
@@ -89,6 +106,8 @@
             password: "",
             role: newVal.role || "",
           };
+          this.errors = { nama: "", password: "", role: "" };
+          this.errorMessage = "";
         }
       },
       deep: true,
@@ -96,7 +115,35 @@
     },
   },
   methods: {
+    clearError(field) {
+      this.errors[field] = "";
+      this.errorMessage = "";
+    },
+    validateForm() {
+      let valid = true;
+      this.errors = { nama: "", password: "", role: "" };
+
+      if (!this.form.nama) {
+        this.errors.nama = "Nama wajib diisi";
+        valid = false;
+      }
+      if (this.form.password && this.form.password.length < 6) {
+        this.errors.password = "Password minimal 6 karakter";
+        valid = false;
+      }
+      if (!this.form.role) {
+        this.errors.role = "Role wajib dipilih";
+        valid = false;
+      } else if (!["owner", "kasir"].includes(this.form.role)) {
+        this.errors.role = "Role harus owner atau kasir";
+        valid = false;
+      }
+
+      return valid;
+    },
     async updateAkun() {
+      if (!this.validateForm()) return;
+
       try {
         const payload = { ...this.form };
         if (!payload.password) delete payload.password;
@@ -105,14 +152,23 @@
           headers: {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
           },
-        });;
+        });
 
         this.$emit("refresh");
         this.$emit("close");
       } catch (err) {
-          console.error("Gagal update akun:", err.response?.data || err.message);
+        if (err.response?.status === 422 && err.response.data.errors) {
+          const backendErrors = err.response.data.errors;
+          Object.keys(backendErrors).forEach((key) => {
+            this.errors[key] = backendErrors[key][0];
+          });
+        } else {
+          this.errorMessage =
+            err.response?.data?.message || "Gagal update akun.";
+        }
+        console.error("Gagal update akun:", err);
       }
     },
   },
-  };
+};
-  </script>
+</script>