raven-client/ayanova/src/views/home-password.vue

<template>
  <v-container>
    <v-row v-if="formState.ready">
      <v-col>
        <v-form ref="form">
          <v-row>
            <v-col cols="12" mt-1 mb-2>
              <v-alert
                ref="errorbox"
                v-show="formState.errorBoxMessage"
                color="error"
                icon="fa-exclamation-circle "
                transition="scale-transition"
                class="multi-line"
                outlined
                >{{ formState.errorBoxMessage }}</v-alert
              >
            </v-col>
            <!-- {{ formState }} -->
            <v-col cols="12">
              <v-text-field
                name="username"
                id="username"
                v-model="obj.loginName"
                :readonly="formState.readOnly"
                prepend-icon="fa-user"
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                spellcheck="false"
                v-focus
                :label="lt('UserLogin')"
                :rules="[form().required(this, 'loginName')]"
                :error-messages="form().serverErrors(this, 'loginName')"
                ref="loginName"
                @input="fieldValueChanged('loginName')"
              ></v-text-field>
            </v-col>

            <v-col cols="12">
              <v-text-field
                name="password"
                id="password"
                v-model="obj.oldPassword"
                :readonly="formState.readOnly"
                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
                prepend-icon="fa-key"
                :label="lt('OldPassword')"
                :type="reveal ? 'text' : 'password'"
                :rules="[form().required(this, 'oldPassword')]"
                :error-messages="form().serverErrors(this, 'oldPassword')"
                ref="oldPassword"
                @input="fieldValueChanged('oldPassword')"
                @click:append-outer="reveal = !reveal"
              ></v-text-field>
            </v-col>

            <v-col cols="12">
              <v-text-field
                v-model="obj.newPassword"
                :readonly="formState.readOnly"
                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
                prepend-icon="fa-key"
                :label="lt('NewPassword')"
                :type="reveal ? 'text' : 'password'"
                :rules="[form().required(this, 'newPassword')]"
                :error-messages="form().serverErrors(this, 'newPassword')"
                ref="newPassword"
                @input="fieldValueChanged('newPassword')"
                @click:append-outer="reveal = !reveal"
              ></v-text-field>
            </v-col>

            <v-col cols="12">
              <v-text-field
                v-model="obj.confirmPassword"
                :readonly="formState.readOnly"
                :append-outer-icon="reveal ? 'fa-eye' : 'fa-eye-slash'"
                prepend-icon="fa-key"
                :label="lt('ConfirmPassword')"
                :type="reveal ? 'text' : 'password'"
                :rules="[
                  form().required(this, 'confirmPassword'),
                  form().confirmMatch(this, 'newPassword', 'confirmPassword')
                ]"
                :error-messages="form().serverErrors(this, 'confirmPassword')"
                ref="confirmPassword"
                @input="fieldValueChanged('confirmPassword')"
                @click:append-outer="reveal = !reveal"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  Xeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////

const FORM_KEY = "home-password";
const API_BASE_URL = "Auth/ChangePassword";

export default {
  created() {
    var vm = this;
    initForm(vm)
      .then(() => {
        vm.rights = window.$gz.role.fullRightsObject();
        generateMenu(vm);
        vm.formState.ready = true;
        window.$gz.form.setFormState({
          vm: vm,
          dirty: false,
          valid: true,
          loading: false,
          readOnly: false
        });
        window.$gz.eventBus.$on("menu-click", clickHandler);
      })
      .catch(err => {
        vm.formState.ready = true;
        window.$gz.errorHandler.handleFormError(err, vm);
      });
  },
  beforeRouteLeave(to, from, next) {
    if (this.formState.dirty) {
      window.$gz.dialog.confirmLeaveUnsaved().then(dialogResult => {
        if (dialogResult == true) {
          next();
        } else {
          next(false);
        }
      });
    } else {
      next();
    }
  },
  beforeDestroy() {
    window.$gz.eventBus.$off("menu-click", clickHandler);
  },
  components: {},
  data() {
    return {
      obj: {
        loginName: null,
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      },
      reveal: true,
      formState: {
        ready: false,
        dirty: false,
        valid: true,
        readOnly: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      },
      rights: window.$gz.role.fullRightsObject()
    };
  },
  //WATCHERS
  watch: {
    formState: {
      handler: function(val) {
        //,oldval is available here too if necessary
        if (this.formState.loading) {
          return;
        }

        //enable / disable save button
        var canSave = val.dirty && val.valid && !val.readOnly;
        if (canSave) {
          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
        } else {
          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
        }
      },
      deep: true
    }
  },
  computed: {
    canSave: function() {
      return this.formState.valid && this.formState.dirty;
    }
  },
  methods: {
    lt(ltKey) {
      return window.$gz.translation.get(ltKey);
    },
    translation() {
      return window.$gz.translation;
    },
    form() {
      return window.$gz.form;
    },
    fieldValueChanged(ref) {
      if (!this.formState.loading && !this.formState.readOnly) {
        window.$gz.form.fieldValueChanged(this, ref);
      }
    },

    submit() {
      var vm = this;
      if (vm.canSave) {
        vm.formState.loading = true;

        //always submit from this form for the current logged in user id
        var url = API_BASE_URL;

        //clear any errors vm might be around from previous submit
        window.$gz.form.deleteAllErrorBoxErrors(vm);
        window.$gz.api
          .upsert(url, vm.obj)
          .then(res => {
            vm.formState.loading = false;
            if (res.error != undefined) {
              vm.formState.serverError = res.error;
              window.$gz.form.setErrorBoxErrors(vm);
            } else {
              //Only a post, no data returned
              window.$gz.form.setFormState({
                vm: vm,
                dirty: false
              });
            }
          })
          .catch(function handleSubmitError(error) {
            vm.formState.loading = false;
            window.$gz.errorHandler.handleFormError(error, vm);
          });
      }
    }
  }
};

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  var m = window.$gz.menu.parseMenuItem(menuItem);
  if (m.owner == FORM_KEY && !m.disabled) {
    switch (m.key) {
      case "save":
        m.vm.submit();
        break;

      default:
        window.$gz.eventBus.$emit(
          "notify-warning",
          FORM_KEY + "::context click: [" + m.key + "]"
        );
    }
  }
}

//////////////////////
//
//
function generateMenu(vm) {
  var menuOptions = {
    isMain: true,
    icon: "key",
    title: window.$gz.translation.get("SetLoginPassword"),
    helpUrl: "form-home-password",
    menuItems: []
  };

  if (vm.rights.change) {
    menuOptions.menuItems.push({
      title: window.$gz.translation.get("Save"),
      icon: "save",
      surface: true,
      key: FORM_KEY + ":save",
      vm: vm
    });
  }

  window.$gz.eventBus.$emit("menu-change", menuOptions);
}

/////////////////////////////////
//
//
function initForm(vm) {
  return new Promise(function(resolve, reject) {
    (async function() {
      try {
        await fetchTranslatedText(vm);
      } catch (err) {
        reject(err);
      }
      resolve();
    })();
  });
}

//////////////////////////////////////////////////////////
//
// Ensures UI translated text is available
//
function fetchTranslatedText(vm) {
  return window.$gz.translation.fetch([
    "UserLogin",
    "OldPassword",
    "NewPassword",
    "ConfirmPassword"
  ]);
}
</script>