[Remove Vuetify from Studio] Add / remove admin privileges dialogs

contentcuration/contentcuration/frontend/administration/pages/Users/UserActionsDropdown.vue

@@ -29,14 +29,14 @@
     </KModal>
     <UserPrivilegeModal
       v-model="addAdminPrivilegeDialog"
-      header="Add admin privileges"
+      title="Add admin privileges"
       :text="`Are you sure you want to add admin privileges to user '${user.name}'?`"
       confirmText="Add privileges"
       :confirmAction="addAdminHandler"
     />
     <UserPrivilegeModal
       v-model="removeAdminPrivilegeDialog"
-      header="Remove admin privileges"
+      title="Remove admin privileges"
       :text="`Are you sure you want to remove admin privileges from user '${user.name}'?`"
       confirmText="Remove privileges"
       :confirmAction="removeAdminHandler"

contentcuration/contentcuration/frontend/administration/pages/Users/UserPrivilegeModal.vue

@@ -1,63 +1,55 @@
 <template>
 
-  <MessageDialog
-    v-model="dialog"
-    :header="header"
-    :text="text"
+  <KModal
+    v-if="dialog"
+    :title="title"
+    :submitText="confirmText"
+    :cancelText="$tr('cancelAction')"
+    data-test="user-privilege-modal"
+    @submit="submit"
+    @cancel="close"
   >
-    <VForm
-      ref="form"
-      lazy-validation
-      @submit.prevent="confirm"
-    >
-      <p>Enter your email address to continue</p>
-      <VTextField
-        v-model="emailConfirm"
-        box
-        maxlength="100"
-        counter
-        required
-        :rules="emailRules"
-        label="Email address"
-        @input="resetValidation"
-      />
-    </VForm>
-    <template #buttons>
-      <VBtn
-        flat
-        data-test="cancel"
-        @click="close"
-      >
-        Cancel
-      </VBtn>
-      <VBtn
-        color="primary"
-        @click="confirm"
-      >
-        {{ confirmText }}
-      </VBtn>
-    </template>
-  </MessageDialog>
+    <p>{{ text }}</p>
+
+    <p>{{ $tr('confirmEmailPrompt') }}</p>
+
+    <KTextbox
+      v-model="emailConfirm"
+      :maxlength="100"
+      :label="$tr('emailLabel')"
+      :invalid="errors.emailConfirm"
+      :invalidText="$tr('emailValidationMessage')"
+      :showInvalidText="true"
+      data-test="email-input"
+    />
+  </KModal>
 
 </template>
 
 
 <script>
 
   import { mapState } from 'vuex';
-  import MessageDialog from 'shared/views/MessageDialog';
+  import { generateFormMixin } from 'shared/mixins';
+
+  const formMixin = generateFormMixin({
+    emailConfirm: {
+      required: true,
+      validator: (value, vm) => {
+        return value === vm.currentEmail;
+      },
+    },
+  });
 
   export default {
     name: 'UserPrivilegeModal',
-    components: {
-      MessageDialog,
-    },
+    mixins: [formMixin],
     props: {
       value: {
         type: Boolean,
         default: false,
       },
-      header: {
+      title: {
         type: String,
         required: true,
       },
@@ -74,13 +66,9 @@
         required: true,
       },
     },
-    data() {
-      return {
-        emailConfirm: '',
-      };
-    },
     computed: {
       ...mapState({
+        // eslint-disable-next-line kolibri/vue-no-unused-vuex-properties, vue/no-unused-properties
         currentEmail: state => state.session.currentUser.email,
       }),
       dialog: {
@@ -91,30 +79,35 @@
           this.$emit('input', value);
         },
       },
-      emailRules() {
-        return [
-          v => Boolean(v) || 'Field is required',
-          v => v === this.currentEmail || 'Email does not match your account email',
-        ];
+    },
+    watch: {
+      value(val) {
+        if (val) {
+          this.reset();
+        }
       },
     },
     methods: {
       close() {
-        this.emailConfirm = '';
-        this.resetValidation();
-        this.dialog = false;
+        this.$emit('input', false);
       },
-      resetValidation() {
-        this.$refs.form.resetValidation();
-      },
-      confirm() {
-        if (this.$refs.form.validate()) {
-          return this.confirmAction();
-        } else {
-          return Promise.resolve();
-        }
+
+      // This is called from formMixin
+      // eslint-disable-next-line kolibri/vue-no-unused-methods, vue/no-unused-properties
+      onSubmit() {
+        return Promise.resolve(this.confirmAction()).then(result => {
+          this.dialog = false;
+          return result;
+        });
       },
     },
+
+    $trs: {
+      emailLabel: 'Email address',
+      emailValidationMessage: 'Email must match your account email',
+      cancelAction: 'Cancel',
+      confirmEmailPrompt: 'Enter your email address to continue',
+    },
   };
 
 </script>