fix: user profile

app/Http/Controllers/UserController.php

@@ -218,11 +218,11 @@ class UserController extends Controller
      */
     public function changePassword(ChangePasswordRequest $request)
     {
-        if (!Hash::check($request->current_password, auth()->user()->password)) {
+        if (!Hash::check($request->old_password, auth()->user()->password)) {
             return back()->with('error', __('messages.error.store.change-password'));
         }
 
-        auth()->user()->update(['password' => bcrypt($request->password)]);
+        auth()->user()->update(['password' => bcrypt($request->new_password)]);
 
         return back()->with('success', __('messages.success.update.change-password'));
     }

public/js/resources_js_pages_user_Show_vue.js

@@ -213,6 +213,65 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js":
+/*!****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js ***!
+  \****************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      required: true
+    },
+    error: {
+      type: String,
+      "default": null
+    },
+    modelValue: null
+  },
+  emits: ['update:modelValue'],
+  setup: function setup(__props, _ref) {
+    var expose = _ref.expose;
+    expose();
+    var props = __props;
+    var isError = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.error ? true : false;
+    });
+    var forLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label.toLowerCase().replace(/\s+/g, '-');
+    });
+    var ariaDescribedbyLabel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return props.label.toLowerCase().replace(/\s+/g, '-') + '-help';
+    });
+    var __returned__ = {
+      props: props,
+      isError: isError,
+      forLabel: forLabel,
+      ariaDescribedbyLabel: ariaDescribedbyLabel,
+      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', {
+      enumerable: false,
+      value: true
+    });
+    return __returned__;
+  }
+});
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppSidebar.vue?vue&type=script&setup=true&lang=js":
 /*!***************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppSidebar.vue?vue&type=script&setup=true&lang=js ***!
@@ -473,10 +532,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
-/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
-/* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
-/* harmony import */ var _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppDropdown.vue */ "./resources/js/components/AppDropdown.vue");
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+/* harmony import */ var _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @inertiajs/inertia-vue3 */ "./node_modules/@inertiajs/inertia-vue3/dist/index.js");
+/* harmony import */ var _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/layouts/AppLayout.vue */ "./resources/js/layouts/AppLayout.vue");
+/* harmony import */ var _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/components/AppInputText.vue */ "./resources/js/components/AppInputText.vue");
+/* harmony import */ var _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/components/AppDropdown.vue */ "./resources/js/components/AppDropdown.vue");
+/* harmony import */ var _components_AppPassword_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/AppPassword.vue */ "./resources/js/components/AppPassword.vue");
+
+
 
 
 
@@ -492,7 +555,14 @@ __webpack_require__.r(__webpack_exports__);
     var expose = _ref.expose;
     expose();
     var props = __props;
-    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.useForm)({
+    var errors = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
+      return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage)().props.value.errors;
+    });
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.watch)(errors, function () {
+      form.clearErrors();
+      formChangePassword.clearErrors();
+    });
+    var form = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
       name: props.user.name,
       phone: props.user.phone,
       email: props.user.email,
@@ -505,27 +575,36 @@ __webpack_require__.r(__webpack_exports__);
       form.put(route('users.update', props.user.id));
     };
 
-    var formChangePassword = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.useForm)({
+    var formChangePassword = (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm)({
       old_password: '',
       new_password: '',
       new_password_confirmation: ''
     });
 
     var changePassword = function changePassword() {
-      formChangePassword.post(route('users.change-password', props.user.id));
+      formChangePassword.post(route('users.change-password', props.user.id), {
+        onSuccess: function onSuccess() {
+          return formChangePassword.reset();
+        }
+      });
     };
 
     var __returned__ = {
       props: props,
+      errors: errors,
       form: form,
       submit: submit,
       formChangePassword: formChangePassword,
       changePassword: changePassword,
-      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.Head,
-      useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_0__.useForm,
-      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
-      AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
-      AppDropdown: _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_3__["default"]
+      computed: vue__WEBPACK_IMPORTED_MODULE_0__.computed,
+      watch: vue__WEBPACK_IMPORTED_MODULE_0__.watch,
+      Head: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.Head,
+      useForm: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.useForm,
+      usePage: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage,
+      AppLayout: _layouts_AppLayout_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
+      AppInputText: _components_AppInputText_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
+      AppDropdown: _components_AppDropdown_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
+      AppPassword: _components_AppPassword_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
     };
     Object.defineProperty(__returned__, '__isScriptSetup', {
       enumerable: false,
@@ -787,6 +866,57 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
 /***/ }),
 
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1":
+/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1 ***!
+  \*********************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.esm-bundler.js");
+
+var _hoisted_1 = {
+  "class": "field"
+};
+var _hoisted_2 = ["for"];
+var _hoisted_3 = ["id"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Password = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Password");
+
+  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
+    "for": $setup.forLabel
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.label), 9
+  /* TEXT, PROPS */
+  , _hoisted_2), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Password, {
+    "class": "w-full",
+    "input-class": "w-full",
+    id: $setup.forLabel,
+    placeholder: $props.placeholder,
+    "aria-describedby": $setup.ariaDescribedbyLabel,
+    toggleMask: true,
+    value: $props.modelValue,
+    "model-value": $props.modelValue,
+    onInput: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('update:modelValue', $event.target.value);
+    })
+  }, null, 8
+  /* PROPS */
+  , ["id", "placeholder", "aria-describedby", "value", "model-value"]), $props.error ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("small", {
+    key: 0,
+    id: $setup.ariaDescribedbyLabel,
+    "class": (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)({
+      'p-error': $setup.isError
+    })
+  }, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($props.error), 11
+  /* TEXT, CLASS, PROPS */
+  , _hoisted_3)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
+}
+
+/***/ }),
+
 /***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppSidebar.vue?vue&type=template&id=22a4e926":
 /*!********************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppSidebar.vue?vue&type=template&id=22a4e926 ***!
@@ -1194,45 +1324,15 @@ var _hoisted_10 = {
   "class": "grid"
 };
 var _hoisted_11 = {
-  "class": "col-12 md:col-6"
+  "class": "col-12"
 };
 var _hoisted_12 = {
-  "class": "field"
-};
-
-var _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
-  "for": "old_password"
-}, "Password Lama", -1
-/* HOISTED */
-);
-
-var _hoisted_14 = {
-  "class": "col-12 md:col-6"
-};
-var _hoisted_15 = {
-  "class": "field"
-};
-
-var _hoisted_16 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
-  "for": "new_password"
-}, "Password Baru", -1
-/* HOISTED */
-);
-
-var _hoisted_17 = {
-  "class": "col-12 md:col-6"
+  "class": "col-12"
 };
-var _hoisted_18 = {
-  "class": "field"
+var _hoisted_13 = {
+  "class": "col-12"
 };
-
-var _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("label", {
-  "for": "new_password_confirmation"
-}, "Konfirmasi Password", -1
-/* HOISTED */
-);
-
-var _hoisted_20 = {
+var _hoisted_14 = {
   "class": "col-12 flex justify-content-end"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -1240,8 +1340,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   var _component_TabPanel = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("TabPanel");
 
-  var _component_Password = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Password");
-
   var _component_TabView = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("TabView");
 
   var _component_Card = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)("Card");
@@ -1321,27 +1419,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 header: "Ubah Password"
               }, {
                 "default": (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(function () {
-                  return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [_hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Password, {
-                    id: "old_password",
+                  return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_10, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPassword"], {
                     label: "Password Lama",
                     placeholder: "password lama",
-                    "class": "w-full",
-                    inputClass: "w-full",
-                    toggleMask: true,
-                    error: $setup.form.errors.old_password,
+                    error: $setup.formChangePassword.errors.old_password,
                     modelValue: $setup.formChangePassword.old_password,
                     "onUpdate:modelValue": _cache[4] || (_cache[4] = function ($event) {
                       return $setup.formChangePassword.old_password = $event;
                     })
                   }, null, 8
                   /* PROPS */
-                  , ["error", "modelValue"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_15, [_hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Password, {
-                    id: "new_password",
+                  , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_12, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPassword"], {
                     label: "Password Baru",
                     placeholder: "password baru",
-                    "class": "w-full",
-                    inputClass: "w-full",
-                    toggleMask: true,
                     error: $setup.formChangePassword.errors.new_password,
                     modelValue: $setup.formChangePassword.new_password,
                     "onUpdate:modelValue": _cache[5] || (_cache[5] = function ($event) {
@@ -1349,20 +1439,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     })
                   }, null, 8
                   /* PROPS */
-                  , ["error", "modelValue"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_17, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_18, [_hoisted_19, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Password, {
-                    id: "new_password_confirmation",
+                  , ["error", "modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)($setup["AppPassword"], {
                     label: "Konfirmasi Password",
                     placeholder: "konfirmasi password",
-                    "class": "w-full",
-                    inputClass: "w-full",
-                    toggleMask: true,
                     modelValue: $setup.formChangePassword.new_password_confirmation,
                     "onUpdate:modelValue": _cache[6] || (_cache[6] = function ($event) {
                       return $setup.formChangePassword.new_password_confirmation = $event;
                     })
                   }, null, 8
                   /* PROPS */
-                  , ["modelValue"])])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_20, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
+                  , ["modelValue"])]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_Button, {
                     label: "Simpan",
                     icon: "pi pi-check",
                     "class": "p-button-text",
@@ -1656,6 +1742,33 @@ const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_bamslaundry_node_
 if (false) {}
 
 
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
+
+/***/ }),
+
+/***/ "./resources/js/components/AppPassword.vue":
+/*!*************************************************!*\
+  !*** ./resources/js/components/AppPassword.vue ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _AppPassword_vue_vue_type_template_id_4cb194c1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AppPassword.vue?vue&type=template&id=4cb194c1 */ "./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1");
+/* harmony import */ var _AppPassword_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AppPassword.vue?vue&type=script&setup=true&lang=js */ "./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js");
+/* harmony import */ var _home_dijitalcode_Projects_bamslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./node_modules/vue-loader/dist/exportHelper.js */ "./node_modules/vue-loader/dist/exportHelper.js");
+
+
+
+
+;
+const __exports__ = /*#__PURE__*/(0,_home_dijitalcode_Projects_bamslaundry_node_modules_vue_loader_dist_exportHelper_js__WEBPACK_IMPORTED_MODULE_2__["default"])(_AppPassword_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_1__["default"], [['render',_AppPassword_vue_vue_type_template_id_4cb194c1__WEBPACK_IMPORTED_MODULE_0__.render],['__file',"resources/js/components/AppPassword.vue"]])
+/* hot reload */
+if (false) {}
+
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__exports__);
 
 /***/ }),
@@ -1838,6 +1951,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppMessage_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppMessage.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppMessage.vue?vue&type=script&setup=true&lang=js");
  
 
+/***/ }),
+
+/***/ "./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js ***!
+  \************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppPassword_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__["default"])
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppPassword_vue_vue_type_script_setup_true_lang_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppPassword.vue?vue&type=script&setup=true&lang=js */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=script&setup=true&lang=js");
+ 
+
 /***/ }),
 
 /***/ "./resources/js/components/AppSidebar.vue?vue&type=script&setup=true&lang=js":
@@ -1973,6 +2101,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppMessage_vue_vue_type_template_id_07159051__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppMessage.vue?vue&type=template&id=07159051 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppMessage.vue?vue&type=template&id=07159051");
 
 
+/***/ }),
+
+/***/ "./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1":
+/*!*******************************************************************************!*\
+  !*** ./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1 ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppPassword_vue_vue_type_template_id_4cb194c1__WEBPACK_IMPORTED_MODULE_0__.render)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_use_0_node_modules_vue_loader_dist_templateLoader_js_ruleSet_1_rules_2_node_modules_vue_loader_dist_index_js_ruleSet_0_use_0_AppPassword_vue_vue_type_template_id_4cb194c1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!../../../node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./AppPassword.vue?vue&type=template&id=4cb194c1 */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/AppPassword.vue?vue&type=template&id=4cb194c1");
+
+
 /***/ }),
 
 /***/ "./resources/js/components/AppSidebar.vue?vue&type=template&id=22a4e926":

public/js/vue.js

@@ -57778,7 +57778,7 @@ module.exports = JSON.parse('{"name":"axios","version":"0.21.4","description":"P
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_Access_vue":"a18ed856923fae52","resources_js_pages_auth_ForgotPassword_vue":"c9f401672b6f2423","resources_js_pages_auth_Login_vue":"cb0cb153b976d2c1","resources_js_pages_auth_ResetPassword_vue":"1078df5cebf2e3c6","resources_js_pages_auth_VerifyEmail_vue":"2c5cb3cdec6b103a","resources_js_pages_customer_Create_vue":"43d285d678ba8793","resources_js_pages_customer_Edit_vue":"01d10f0dd19b734c","resources_js_pages_customer_Index_vue":"0ca5a813eacb510a","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"92526f49d3e0a66d","resources_js_pages_expense_Create_vue":"18c4b47fcb9e103a","resources_js_pages_expense_Index_vue":"d195311d84b82d44","resources_js_pages_expense_Show_vue":"4801bedc7912088f","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_laundry_Create_vue":"aae1027a621900d5","resources_js_pages_laundry_Edit_vue":"160898ea138ee162","resources_js_pages_laundry_Index_vue":"29e5e4317fa0862d","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"d74f6004bddcfdc6","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"48bdc532cf3f8c62","resources_js_pages_outlet_Edit_vue":"32338ffd7c28e656","resources_js_pages_outlet_Index_vue":"e1f9a19ae0ffa3df","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"4e737e98d38eca28","resources_js_pages_product_Edit_vue":"ddac8c4ce1363cc3","resources_js_pages_product_Index_vue":"ff1e209ae8b6ebbd","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"bc8669735a72a0ec","resources_js_pages_transaction_Index_vue":"6da809da30371f6f","resources_js_pages_transaction_Report_vue":"eeca91c15c146171","resources_js_pages_transaction_Show_vue":"2087aac76bbbf7f1","resources_js_pages_transaction_TableHeader_js":"ba35ab28bb4ac891","resources_js_pages_user_Create_vue":"1f5759b89d51290b","resources_js_pages_user_Edit_vue":"8e9cac16a201e333","resources_js_pages_user_Index_vue":"e798523892e8e90c","resources_js_pages_user_Show_vue":"ec4048350fb26f43","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
+/******/ 			return "js/" + chunkId + ".js?id=" + {"resources_js_pages_Access_vue":"a18ed856923fae52","resources_js_pages_auth_ForgotPassword_vue":"c9f401672b6f2423","resources_js_pages_auth_Login_vue":"cb0cb153b976d2c1","resources_js_pages_auth_ResetPassword_vue":"1078df5cebf2e3c6","resources_js_pages_auth_VerifyEmail_vue":"2c5cb3cdec6b103a","resources_js_pages_customer_Create_vue":"43d285d678ba8793","resources_js_pages_customer_Edit_vue":"01d10f0dd19b734c","resources_js_pages_customer_Index_vue":"0ca5a813eacb510a","resources_js_pages_customer_TableHeader_js":"71be5afdca048a9c","resources_js_pages_discount_Index_vue":"92526f49d3e0a66d","resources_js_pages_expense_Create_vue":"18c4b47fcb9e103a","resources_js_pages_expense_Index_vue":"d195311d84b82d44","resources_js_pages_expense_Show_vue":"4801bedc7912088f","resources_js_pages_expense_TableHeader_js":"72e3dee74175b1c0","resources_js_pages_laundry_Create_vue":"aae1027a621900d5","resources_js_pages_laundry_Edit_vue":"160898ea138ee162","resources_js_pages_laundry_Index_vue":"29e5e4317fa0862d","resources_js_pages_laundry_TableHeader_js":"494e577855bbcaf6","resources_js_pages_mutation_Report_vue":"d74f6004bddcfdc6","resources_js_pages_mutation_TableHeader_js":"82c2999bd7d098a1","resources_js_pages_outlet_Create_vue":"48bdc532cf3f8c62","resources_js_pages_outlet_Edit_vue":"32338ffd7c28e656","resources_js_pages_outlet_Index_vue":"e1f9a19ae0ffa3df","resources_js_pages_outlet_TableHeader_js":"498bf7e64bc0d0c4","resources_js_pages_product_Create_vue":"4e737e98d38eca28","resources_js_pages_product_Edit_vue":"ddac8c4ce1363cc3","resources_js_pages_product_Index_vue":"ff1e209ae8b6ebbd","resources_js_pages_product_TableHeader_js":"b8eaaa9de25a2322","resources_js_pages_transaction_Create_vue":"bc8669735a72a0ec","resources_js_pages_transaction_Index_vue":"6da809da30371f6f","resources_js_pages_transaction_Report_vue":"eeca91c15c146171","resources_js_pages_transaction_Show_vue":"2087aac76bbbf7f1","resources_js_pages_transaction_TableHeader_js":"ba35ab28bb4ac891","resources_js_pages_user_Create_vue":"1f5759b89d51290b","resources_js_pages_user_Edit_vue":"8e9cac16a201e333","resources_js_pages_user_Index_vue":"e798523892e8e90c","resources_js_pages_user_Show_vue":"e674f453c14893b2","resources_js_pages_user_TableHeader_js":"5653ecbcd70fd235"}[chunkId] + "";
 /******/ 		};
 /******/ 	})();
 /******/ 	

resources/js/components/AppPassword.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: true,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+  modelValue: null,
+})
+
+defineEmits(['update:modelValue'])
+
+const isError = computed(() => (props.error ? true : false))
+
+const forLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-'))
+
+const ariaDescribedbyLabel = computed(() => props.label.toLowerCase().replace(/\s+/g, '-') + '-help')
+</script>
+
+<template>
+  <div class="field">
+    <label :for="forLabel">{{ label }}</label>
+
+    <Password
+      class="w-full"
+      input-class="w-full"
+      :id="forLabel"
+      :placeholder="placeholder"
+      :aria-describedby="ariaDescribedbyLabel"
+      :toggleMask="true"
+      :value="modelValue"
+      :model-value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+
+    <small v-if="error" :id="ariaDescribedbyLabel" :class="{ 'p-error': isError }">
+      {{ error }}
+    </small>
+  </div>
+</template>

resources/js/pages/user/Show.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { Head, useForm } from '@inertiajs/inertia-vue3'
+import { computed, watch } from 'vue'
+import { Head, useForm, usePage } from '@inertiajs/inertia-vue3'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppInputText from '@/components/AppInputText.vue'
 import AppDropdown from '@/components/AppDropdown.vue'
+import AppPassword from '@/components/AppPassword.vue'
 
 const props = defineProps({
   user: Object,
@@ -11,6 +13,13 @@ const props = defineProps({
   genders: Array,
 })
 
+const errors = computed(() => usePage().props.value.errors)
+
+watch(errors, () => {
+  form.clearErrors()
+  formChangePassword.clearErrors()
+})
+
 const form = useForm({
   name: props.user.name,
   phone: props.user.phone,
@@ -31,7 +40,9 @@ const formChangePassword = useForm({
 })
 
 const changePassword = () => {
-  formChangePassword.post(route('users.change-password', props.user.id))
+  formChangePassword.post(route('users.change-password', props.user.id), {
+    onSuccess: () => formChangePassword.reset(),
+  })
 }
 </script>
 
@@ -88,51 +99,30 @@ const changePassword = () => {
               </TabPanel>
               <TabPanel header="Ubah Password">
                 <div class="grid">
-                  <div class="col-12 md:col-6">
-                    <div class="field">
-                      <label for="old_password">Password Lama</label>
-                      <Password
-                        id="old_password"
-                        label="Password Lama"
-                        placeholder="password lama"
-                        class="w-full"
-                        inputClass="w-full"
-                        :toggleMask="true"
-                        :error="form.errors.old_password"
-                        v-model="formChangePassword.old_password"
-                      />
-                    </div>
+                  <div class="col-12">
+                    <AppPassword
+                      label="Password Lama"
+                      placeholder="password lama"
+                      :error="formChangePassword.errors.old_password"
+                      v-model="formChangePassword.old_password"
+                    />
                   </div>
 
-                  <div class="col-12 md:col-6">
-                    <div class="field">
-                      <label for="new_password">Password Baru</label>
-                      <Password
-                        id="new_password"
-                        label="Password Baru"
-                        placeholder="password baru"
-                        class="w-full"
-                        inputClass="w-full"
-                        :toggleMask="true"
-                        :error="formChangePassword.errors.new_password"
-                        v-model="formChangePassword.new_password"
-                      />
-                    </div>
+                  <div class="col-12">
+                    <AppPassword
+                      label="Password Baru"
+                      placeholder="password baru"
+                      :error="formChangePassword.errors.new_password"
+                      v-model="formChangePassword.new_password"
+                    />
                   </div>
 
-                  <div class="col-12 md:col-6">
-                    <div class="field">
-                      <label for="new_password_confirmation">Konfirmasi Password</label>
-                      <Password
-                        id="new_password_confirmation"
-                        label="Konfirmasi Password"
-                        placeholder="konfirmasi password"
-                        class="w-full"
-                        inputClass="w-full"
-                        :toggleMask="true"
-                        v-model="formChangePassword.new_password_confirmation"
-                      />
-                    </div>
+                  <div class="col-12">
+                    <AppPassword
+                      label="Konfirmasi Password"
+                      placeholder="konfirmasi password"
+                      v-model="formChangePassword.new_password_confirmation"
+                    />
                   </div>
 
                   <div class="col-12 flex justify-content-end">