[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,83 @@
 <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
+    <p>{{ text }}</p>
+
+    <form
       ref="form"
-      lazy-validation
       @submit.prevent="confirm"
     >
-      <p>Enter your email address to continue</p>
-      <VTextField
+      <p>{{ $tr('confirmEmailPrompt') }}</p>
+
+      <KTextbox
         v-model="emailConfirm"
         box
-        maxlength="100"
+        :maxlength="100"
         counter
-        required
-        :rules="emailRules"
-        label="Email address"
-        @input="resetValidation"
+        :label="$tr('emailLabel')"
+        :invalid="errors.emailConfirm"
+        :invalidText="$tr('emailValidationMessage')"
+        :showInvalidText="true"
+        data-test="email-input"
       />
-    </VForm>
-    <template #buttons>
-      <VBtn
+    </form>
+
+    <template #actions>
+      <KButton
         flat
         data-test="cancel"
+        type="button"
+        class="mr-2"
         @click="close"
       >
-        Cancel
-      </VBtn>
-      <VBtn
-        color="primary"
-        @click="confirm"
+        {{ $tr('cancelAction') }}
+      </KButton>
+
+      <KButton
+        data-test="confirm"
+        primary
+        type="button"
+        @click="submit"
       >
         {{ confirmText }}
-      </VBtn>
+      </KButton>
     </template>
-  </MessageDialog>
+  </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,47 +94,71 @@
         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: {
         get() {
           return this.value;
         },
-        set(value) {
-          this.$emit('input', value);
+        set(v) {
+          this.$emit('input', v);
         },
       },
-      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;
-      },
-      resetValidation() {
-        this.$refs.form.resetValidation();
+        if (typeof this.reset === 'function') {
+          this.reset();
+        } else {
+          this.emailConfirm = '';
+          if (this.errors) {
+            Object.keys(this.errors).forEach(k => (this.errors[k] = false));
+          }
+        }
+        this.$emit('input', false);
       },
+
+      // eslint-disable-next-line vue/no-unused-properties
       confirm() {
-        if (this.$refs.form.validate()) {
-          return this.confirmAction();
-        } else {
-          return Promise.resolve();
+        if (typeof this.submit === 'function') {
+          return this.submit();
+        }
+        return Promise.resolve();
+      },
+      // eslint-disable-next-line vue/no-unused-properties
+      onSubmit(formData) {
+        try {
+          const res = this.confirmAction(formData);
+          if (res && typeof res.then === 'function') {
+            return res.then(val => {
+              this.dialog = false;
+              return val;
+            });
+          }
+          this.dialog = false;
+          return Promise.resolve(res);
+        } catch (err) {
+          return Promise.reject(err);
         }
       },
     },
+
+    $trs: {
+      emailLabel: 'Email address',
+      emailValidationMessage: 'Email must match your account email',
+      cancelAction: 'Cancel',
+      confirmEmailPrompt: 'Enter your email address to continue',
+    },
   };
 
 </script>