diff --git a/src/views/AccessControl/LocalUserManagement/ModalUser.vue b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
index 59e5706..d84fb6d 100644
--- a/src/views/AccessControl/LocalUserManagement/ModalUser.vue
+++ b/src/views/AccessControl/LocalUserManagement/ModalUser.vue
@@ -1,5 +1,9 @@
 <template>
-  <b-modal id="modal-user" ref="modal" @ok="onOk" @hidden="resetForm">
+  <b-modal
+    id="modal-user"
+    @ok="$emit('ok', { newUser, form })"
+    @hidden="$emit('hidden')"
+  >
     <template v-slot:modal-title>
       <template v-if="newUser">
         Add user
@@ -8,116 +12,27 @@
         Edit user
       </template>
     </template>
-    <b-form novalidate @submit="handleSubmit">
-      <b-container>
-        <b-row>
-          <b-col>
-            <b-form-group label="Account status">
-              <b-form-radio
-                v-model="form.status"
-                name="user-status"
-                :value="true"
-                @input="$v.form.status.$touch()"
-              >
-                Enabled
-              </b-form-radio>
-              <b-form-radio
-                v-model="form.status"
-                name="user-status"
-                :value="false"
-                @input="$v.form.status.$touch()"
-              >
-                Disabled
-              </b-form-radio>
-            </b-form-group>
-            <b-form-group label-for="Username">
-              <b-form-text id="username-help-block">
-                Cannot start with a number
-                <br />
-                No special characters except underscore
-              </b-form-text>
-              <b-form-input
-                v-model="form.username"
-                type="text"
-                aria-describedby="username-help-block"
-                :state="getValidationState('username')"
-                :disabled="!newUser && originalUsername === 'root'"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.username.required">
-                  Field required
-                </template>
-                <template v-else-if="!$v.form.username.maxLength">
-                  Length must be between 1 – 16 characters
-                </template>
-                <template v-else-if="!$v.form.username.pattern">
-                  Invalid format
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-            <b-form-group label-for="Privilege">
-              <b-form-select
-                v-model="form.privilege"
-                required
-                :options="privilegeTypes"
-                :state="getValidationState('privilege')"
-                @input="$v.form.privilege.$touch()"
-              >
-              </b-form-select>
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.privilege.required">
-                  Field required
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-          <b-col>
-            <b-form-group label-for="User password">
-              <b-form-text id="password-help-block" text-variant="black">
-                <!-- TODO: Should be dynamic values -->
-                Password must between 8 – 20 characters
-              </b-form-text>
-              <b-form-input
-                v-model="form.password"
-                type="password"
-                aria-describedby="password-help-block"
-                :state="getValidationState('password')"
-                @input="$v.form.password.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.password.required">
-                  Field required
-                </template>
-                <template
-                  v-if="
-                    !$v.form.password.minLength || !$v.form.password.maxLength
-                  "
-                >
-                  Length must be between 8 – 20 characters
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-            <b-form-group label-for="Confirm user password">
-              <b-form-input
-                v-model="form.passwordConfirmation"
-                type="password"
-                :state="getValidationState('passwordConfirmation')"
-                @input="$v.form.passwordConfirmation.$touch()"
-              />
-              <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.passwordConfirmation.required">
-                  Field required
-                </template>
-                <template
-                  v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
-                >
-                  Passwords do not match
-                </template>
-              </b-form-invalid-feedback>
-            </b-form-group>
-          </b-col>
-        </b-row>
-      </b-container>
+    <b-form>
+      <b-form-group label="Account status">
+        <b-form-radio v-model="form.status" name="user-status" value="true"
+          >Enabled</b-form-radio
+        >
+        <b-form-radio v-model="form.status" name="user-status" value="false"
+          >Disabled</b-form-radio
+        >
+      </b-form-group>
+      <b-form-group label="Username">
+        <b-form-input v-model="form.username" type="text" />
+      </b-form-group>
+      <b-form-group label="Privilege">
+        <b-form-select
+          v-model="form.privilege"
+          :options="privilegeTypes"
+        ></b-form-select>
+      </b-form-group>
+      <b-form-group label="Password">
+        <b-form-input v-model="form.password" type="password" />
+      </b-form-group>
     </b-form>
     <template v-slot:modal-ok>
       <template v-if="newUser">
@@ -131,15 +46,6 @@
 </template>
 
 <script>
-import {
-  required,
-  maxLength,
-  minLength,
-  sameAs,
-  helpers,
-  requiredIf
-} from 'vuelidate/lib/validators';
-
 export default {
   props: {
     user: {
@@ -149,122 +55,25 @@
   },
   data() {
     return {
-      privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess'],
-      originalUsername: '',
-      form: {
-        status: true,
-        username: '',
-        privilege: '',
-        password: '',
-        passwordConfirmation: ''
-      }
+      privilegeTypes: ['Administrator', 'Operator', 'ReadOnly', 'NoAccess']
     };
   },
   computed: {
     newUser() {
       return this.user ? false : true;
-    }
-  },
-  watch: {
-    user: function(value) {
-      if (value === null) return;
-      this.originalUsername = value.username;
-      this.form.username = value.username;
-      this.form.status = value.Enabled;
-      this.form.privilege = value.privilege;
-    }
-  },
-  validations: {
-    form: {
-      status: {
-        required
-      },
-      username: {
-        required,
-        maxLength: maxLength(16),
-        pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/)
-      },
-      privilege: {
-        required
-      },
-      password: {
-        required: requiredIf(function() {
-          return this.requirePassword();
-        }),
-        minLength: minLength(8),
-        maxLength: maxLength(20)
-      },
-      passwordConfirmation: {
-        required: requiredIf(function() {
-          return this.requirePassword();
-        }),
-        sameAsPassword: sameAs('password')
-      }
-    }
-  },
-  methods: {
-    handleSubmit() {
-      let userData = {};
-
-      if (this.newUser) {
-        this.$v.$touch();
-        if (this.$v.$invalid) return;
-        userData.username = this.form.username;
-        userData.status = this.form.status;
-        userData.privilege = this.form.privilege;
-        userData.password = this.form.password;
-      } else {
-        if (this.$v.$invalid) return;
-        userData.originalUsername = this.originalUsername;
-        if (this.$v.form.status.$dirty) {
-          userData.status = this.form.status;
-        }
-        if (this.$v.form.username.$dirty) {
-          userData.username = this.form.username;
-        }
-        if (this.$v.form.privilege.$dirty) {
-          userData.privilege = this.form.privilege;
-        }
-        if (this.$v.form.password.$dirty) {
-          userData.password = this.form.password;
-        }
-        if (Object.entries(userData).length === 1) {
-          this.closeModal();
-          return;
-        }
-      }
-
-      this.$emit('ok', { isNewUser: this.newUser, userData });
-      this.closeModal();
     },
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
-      });
-    },
-    resetForm() {
-      this.form.originalUsername = '';
-      this.form.status = true;
-      this.form.username = '';
-      this.form.privilege = '';
-      this.form.password = '';
-      this.form.passwordConfirmation = '';
-      this.$v.$reset();
-    },
-    getValidationState(name) {
-      const { $dirty, $error } = this.$v.form[name];
-      return $dirty ? !$error : null;
-    },
-    requirePassword() {
-      if (this.newUser) return true;
-      if (this.$v.form.password.$dirty) return true;
-      if (this.$v.form.passwordConfirmation.$dirty) return true;
-      return false;
-    },
-    onOk(bvModalEvt) {
-      // prevent modal close
-      bvModalEvt.preventDefault();
-      this.handleSubmit();
+    form() {
+      return {
+        originalUsername: this.newUser ? null : this.user.username,
+        status: this.newUser
+          ? true
+          : this.user.status === 'Enabled'
+          ? true
+          : false,
+        username: this.newUser ? '' : this.user.username,
+        privilege: this.newUser ? '' : this.user.privilege,
+        password: ''
+      };
     }
   }
 };