validasi create akun dan edit akun

resources/js/components/CreateAkun.vue

@@ -7,33 +7,45 @@
 
             <form @submit.prevent="createAkun" class="space-y-3">
                 <!-- Nama -->
-                <label for="nama">Nama</label>
-                <InputField
-                    v-model="form.nama"
-                    id="nama"
-                    type="text"
-                    :required="true"
-                />
-
                 <div>
-                    <label for="password">Password</label>
+                    <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" 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 -->
-                <InputSelect
+                <div>
-                    v-model="form.role"
+                    <label for="peran" class="block text-sm font-medium">Peran</label>
-                    :options="[
+                    <InputSelect
-                        { value: 'owner', label: 'Owner' },
+                        v-model="form.role"
-                        { value: 'kasir', label: 'Kasir' },
+                        :options="[
-                    ]"
+                            { value: 'owner', label: 'Owner' },
-                    placeholder="-- Pilih Peran --"
+                            { 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) {
-                this.errorMessage =
+                if (err.response?.status === 422 && err.response.data.errors) {
-                    err.response?.data?.message || "Gagal menambah akun.";
+                    // 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,118 +1,174 @@
 <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>
+      <h2 class="text-lg font-bold mb-4">Edit Akun</h2>
 
-        <form @submit.prevent="updateAkun" class="space-y-3">
+      <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>
 
-          <div class="flex justify-end gap-2 mt-4">
+        <!-- Tombol -->
-            <button
+        <div class="flex justify-end gap-2 mt-4">
-              type="button"
+          <button
-              @click="$emit('close')"
+            type="button"
-              class="bg-gray-300 px-4 py-2 rounded"
+            @click="$emit('close')"
-            >
+            class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded"
-              Batal
+          >
-            </button>
+            Batal
-            <button
+          </button>
-              type="submit"
+          <button
-              class="bg-blue-500 text-white px-4 py-2 rounded"
+            type="submit"
-            >
+            class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
-              Ubah
+          >
-            </button>
+            Ubah
-          </div>
+          </button>
-        </form>
+        </div>
-      </div>
+      </form>
+
+      <!-- Error global -->
+      <p v-if="errorMessage" class="text-red-500 text-sm mt-3">
+        {{ errorMessage }}
+      </p>
     </div>
-  </template>
+  </div>
+</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 {
-    props: {
+  name: "EditAkun",
-      akun: {
+  props: {
-        type: Object,
+    akun: {
-        required: true,
+      type: Object,
+      required: true,
+    },
+  },
+  components: { InputField, InputSelect },
+  data() {
+    return {
+      form: {
+        nama: this.akun?.nama || "",
+        password: "",
+        role: this.akun?.role || "",
       },
-    },
+      errors: { nama: "", password: "", role: "" },
-    components: { InputField, InputSelect },
+      errorMessage: "",
-
+    };
-    data() {
+  },
-      return {
+  watch: {
-        form: {
+    akun: {
-          nama: this.akun.nama || "",
+      handler(newVal) {
-          password: "",
+        if (newVal) {
-          role: this.akun.role || "",
+          this.form = {
-        },
+            nama: newVal.nama || "",
-      };
+            password: "",
-    },
+            role: newVal.role || "",
-    watch: {
+          };
-      akun: {
+          this.errors = { nama: "", password: "", role: "" };
-        handler(newVal) {
+          this.errorMessage = "";
-          if (newVal) {
-            this.form = {
-              nama: newVal.nama || "",
-              password: "",
-              role: newVal.role || "",
-            };
-          }
-        },
-        deep: true,
-        immediate: true,
-      },
-    },
-    methods: {
-      async updateAkun() {
-        try {
-          const payload = { ...this.form };
-          if (!payload.password) delete payload.password;
-
-          await axios.put(`/api/user/${this.akun.id}`, payload, {
-            headers: {
-                Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-        });;
-
-          this.$emit("refresh");
-          this.$emit("close");
-        } catch (err) {
-          console.error("Gagal update akun:", err.response?.data || err.message);
         }
       },
+      deep: true,
+      immediate: true,
     },
-  };
+  },
-  </script>
+  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;
+
+        await axios.put(`/api/user/${this.akun.id}`, payload, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+
+        this.$emit("refresh");
+        this.$emit("close");
+      } catch (err) {
+        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>