frontend/src/components/Footer.vue

<template>
  <div class="footer">
    <b-modal v-model="feedbackModal">
      <form>
        <div class="modal-card" style="width: auto">
          <header class="modal-card-head">
            <p class="modal-card-title">{{ $t("feedback.title") }}</p>
            <button
                type="button"
                class="delete"
                @click="feedbackModal = false"
            />
          </header>
          <section class="modal-card-body">
            <p>This feedback will be used to make Kaverti better.</p>
            <b-field :label="$t('feedback.email')">
              <b-input
                  :placeholder="$store.state.user.email"
                  v-model="feedback.email"
                  required
              >
              </b-input>
            </b-field>
            <b-field :label="$t('feedback.route')">
              <b-input
                  :placeholder="$t('feedback.route')"
                  v-model="feedback.route"
                  required
              >
              </b-input>
            </b-field>
            <b-field :label="$t('feedback.rating')">
              <b-rate
                  icon-pack="fas"
                  v-model="feedback.stars"
                  custom-text="Route rating"
              ></b-rate>
            </b-field>
            <b-field :label="$t('feedback.text')">
              <b-input
                  placeholder="Can you elaborate?"
                  v-model="feedback.text"
                  maxlength="512"
                  type="textarea"
                  required
              >
              </b-input>
            </b-field>
          </section>
          <footer class="modal-card-foot">
            <b-button
                @click="doFeedback()"
                :loading="feedback.loading"
                :label="$t('feedback.submit')"
                type="is-info"
            ></b-button>
            <b-button
                :label="$t('close')"
                @click="feedbackModal = false"
                tpe="is-danger"
            ></b-button>
          </footer>
        </div>
      </form>
    </b-modal>
    <b-modal v-model="langModal">
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title">{{ $t("languages.title") }}</p>
          <b-button
              type="is-info"
              class="delete"
              @click="langModal = false"
          ></b-button>
        </header>
        <section class="modal-card-body buttons">
          <b-button v-if="$i18n.locale !== 'en'" @click="en" class="is-large">{{
              $t("languages.en")
            }}</b-button>
          <b-button
              v-if="$i18n.locale === 'en'"
              @click="en"
              class="is-large is-info disabled"
              disabled
          >{{ $t("languages.en") }}</b-button
          >
          <b-button
              v-if="$i18n.locale === 'wind'"
              @click="en"
              class="is-large is-info disabled"
              disabled
          >{{ $t("languages.wind") }}</b-button
          >
          <b-button
              v-if="$i18n.locale === 'debug'"
              @click="en"
              class="is-large is-info disabled"
              disabled
          >{{ $t("languages.debug") }}</b-button
          >
        </section>
      </div>
    </b-modal>
    <h1>&copy; 2021 Kaverti</h1>
    <p>Version: {{$store.state.client.clientVersion}}</p>
    <p>Build Date: {{$store.state.client.buildDate}}</p>
    <p v-if="$store.state.client.development">!! DEVELOPMENT MODE !! {{$store.state.client.domain}}</p>
    <div class="buttons">
      <b-button type="is-info" @click="langModal = true">{{ $t("languages.title") }}</b-button>
      <b-button type="is-info" @click="feedbackModal = true">Provide Feedback</b-button>
    </div>
  </div>
</template>
<script>
import AjaxErrorHandler from ".././assets/js/errorHandler";
export default {
  name: "locale-changer",
  data() {
    return {
      feedbackModal: false,
      langs: ["en", "debug", "wind"],
      currentLang: this.$i18n.locale,
      langModal: false,
      feedback: {
        route: this.$route.path,
        stars: 0,
        text: "",
        email: this.$store.state.user.email,
        loading: false,
      },
    };
  },
  methods: {
    doFeedback() {
      this.feedback.loading = true;
      this.axios
          .post(
              process.env.VUE_APP_API_ENDPOINT +
              process.env.VUE_APP_API_VERSION +
              "/" +
              "feedback",
              {
                text: this.feedback.text,
                stars: this.feedback.stars,
                email: this.feedback.email,
                route: this.feedback.route,
              }
          )
          .then(() => {
            this.axios.get(
                process.env.VUE_APP_API_ENDPOINT +
                process.env.VUE_APP_API_VERSION +
                "/" +
                "userinfo"
            );
            this.feedbackModal = false;
            this.$buefy.snackbar.open({
              message: this.$t("errors.feedbackThanks"),
              type: "is-info",
            });
            this.feedback.loading = false;
          })
          .catch((e) => {
            AjaxErrorHandler(this.$store)(e);
            this.feedback.loading = false;
          });
    },
    en() {
      this.$i18n.locale = "en";
      this.setLang();
    },
    debug() {
      this.$i18n.locale = "debug";
      this.setLang();
    },
    wind() {
      this.$i18n.locale = "wind";
      this.setLang();
    },
    setLang() {
      localStorage.setItem("lang", this.$i18n.locale);
      this.axios
          .put(
              process.env.VUE_APP_API_ENDPOINT +
              process.env.VUE_APP_API_VERSION +
              "/" +
              "users/preferences",
              {
                lang: this.$i18n.locale,
              }
          )
          .then(() => {
            this.axios
                .get(
                    process.env.VUE_APP_API_ENDPOINT +
                    process.env.VUE_APP_API_VERSION +
                    "/" +
                    "userinfo"
                )
                .then((res) => {
                  this.$store.commit("setUsername", res.data.username);
                  this.$store.commit("setEmail", res.data.email);
                  this.$store.commit("setEmailVerified", res.data.emailVerified);
                  this.$store.commit("setAdmin", res.data.admin);
                  this.$store.commit("setDevMode", res.data.developerMode);
                  this.$store.commit("setTheme", res.data.theme);
                  this.$store.commit("setLang", res.data.lang);
                });
          })
          .catch((e) => {
            AjaxErrorHandler(this.$store)(e);
          });
    },
  },
  mounted() {
    if (localStorage.getItem("lang")) {
      this.$i18n.locale = localStorage.getItem("lang");
    } else if (this.$store.state.user.lang) {
      this.$i18n.locale = this.$store.state.user.lang;
    } else {
      this.$i18n.locale = "en";
    }
    this.$nextTick(() => {
      this.feedback = {
        route: this.$route.path,
        stars: 0,
        text: "",
        email: this.$store.state.user.email,
      };
    });
  },
  watch: {
    $route() {
      this.feedback = {
        route: this.$route.path,
        stars: 0,
        text: "",
        email: this.$store.state.user.email,
      };
    },
    currentLang() {
      this.setLang();
      console.log("change");
    },
  },
};
</script>