fix(#494): Adding dynamfit sample file env variable

app/src/components/portal/Account.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="">
+    <div>
+      <div class="md-card-header contactus_radios md-card-header-flex">
+        <div class="md-card-header-text">
+          <div class="md-body-1">Here is a summary of your account details</div>
+        </div>
+      </div>
+      <md-divider class="u_margin-top-small"></md-divider>
+    </div>
+
+    <div class="article_citations">
+      <div>
+        <div class="md-layout md-gutter viz-u-mgbottom-big">
+          <div class="md-layout-item md-size-50 md-gutter">
+            <h4 class="u--color-grey-sec md-button-content">surname</h4>
+            <p>{{ user.surName }}</p>
+          </div>
+
+          <div class="md-layout-item md-size-50 md-gutter">
+            <h4 class="u--color-grey-sec md-button-content">given name</h4>
+            <p>{{ user.givenName }}</p>
+          </div>
+        </div>
+
+        <div class="md-layout md-gutter viz-u-mgbottom-big">
+          <div class="md-layout-item md-size-50 md-gutter">
+            <h4 class="u--color-grey-sec md-button-content">Status</h4>
+            <p>{{ isAdmin ? 'Admin' : 'Member' }}</p>
+          </div>
+
+          <div class="md-layout-item md-size-50 md-gutter">
+            <h4 class="u--color-grey-sec md-button-content">
+              Token Expiration
+            </h4>
+            <p>{{ hours }}</p>
+          </div>
+        </div>
+
+        <div class="">
+          <h4 class="u--color-grey-sec md-button-content">token</h4>
+          <div
+            style="word-wrap: break-word"
+            class="md-card-header chart_editor__right-view"
+          >
+            {{ token }}
+          </div>
+          <div
+            class="md-card-actions md-alignment-right chart_editor__right-view"
+          >
+            <button
+              @click.prevent="copyContent"
+              class="md-button btn btn--primary btn--noradius"
+            >
+              <span class="md-caption u--bg">Copy token</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  name: 'Account',
+  data() {
+    return {
+      hours: 0
+    };
+  },
+  computed: {
+    ...mapGetters({
+      token: 'auth/token',
+      user: 'auth/user',
+      isAdmin: 'auth/isAdmin'
+    })
+  },
+  methods: {
+    async copyContent() {
+      try {
+        await navigator.clipboard.writeText(this.token);
+        this.$store.commit('setSnackbar', {
+          message: 'Token copied successfully',
+          duration: 4000
+        });
+      } catch (error) {
+        this.$store.commit('setSnackbar', {
+          message: 'Something went wrong',
+          action: () => this.copyContent()
+        });
+      }
+    },
+    countDown() {
+      const tokenExpiration = localStorage.getItem('tokenExpiration');
+      if (!tokenExpiration) {
+        this.hours = 'Token already expired';
+        return;
+      }
+
+      const expiresIn =
+        new Date(+tokenExpiration).getTime() - new Date().getTime();
+      if (expiresIn <= 0) {
+        this.hours = 'Token already expired';
+        return;
+      }
+
+      this.hours = `Expires in ${
+        Math.round((expiresIn / (60 * 60 * 1000)) * 100) / 100
+      } hours`;
+    }
+  },
+  created() {
+    this.$store.commit('setAppHeaderInfo', {
+      icon: '',
+      name: 'Account Information'
+    });
+    this.countDown();
+  }
+};
+</script>

app/src/components/portal/UserSideBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="md-app-side-drawer u_display-flex u--layout-flex-column">
+    <!-- fix style="min-height: 80vh" -->
+    <div
+      v-if="sideDrawerVisiblity"
+      style="min-height: 80vh"
+      class="md-app-internal-drawer u--layout-flex u--layout-flex-column u--layout-flex-justify-sb metamine_footer-ref-header"
+    >
+      <md-list md-expand-single="true" class="utility-transparentbg">
+        <button
+          v-if="sideDrawerVisiblity"
+          class="utility-gridborder return-btn return-btn-text u--margin-leftsm"
+          style="place-self: end"
+          @click="toggleSideDrawerVisibility"
+        >
+          <md-icon class="return-btn-text metamine_intro-header u_margin-none"
+            >keyboard_arrow_left</md-icon
+          >
+          <md-tooltip md-direction="right">Close Menu</md-tooltip>
+        </button>
+        <router-link :to="'/portal/user'" v-slot="{ navigate, href }" custom>
+          <md-list-item @click="navigate" :href="href">
+            <i class="md-icon md-icon-font u--default-size md-theme-default"
+              >manage_accounts</i
+            >
+            <span class="md-list-item-text utility-navfont">Account</span>
+          </md-list-item>
+        </router-link>
+        <md-divider></md-divider>
+
+        <md-list-item md-expand>
+          <md-icon class="utility-navfonticon">bar_chart</md-icon>
+          <span class="md-list-item-text utility-navfont">Chart</span>
+          <md-list slot="md-expand">
+            <router-link
+              to="/portal/user/favorite-chart"
+              v-slot="{ navigate, href }"
+              custom
+            >
+              <md-list-item :href="href" @click="navigate" class="md-inset"
+                >Favorite Chart</md-list-item
+              >
+            </router-link>
+          </md-list>
+        </md-list-item>
+        <md-divider></md-divider>
+
+        <md-list-item md-expand>
+          <md-icon class="utility-navfonticon">account_tree</md-icon>
+          <span class="md-list-item-text utility-navfont">My Curations</span>
+          <md-list slot="md-expand">
+            <router-link
+              :to="'/portal/user/approved-curation'"
+              v-slot="{ navigate, href }"
+              custom
+            >
+              <md-list-item :href="href" @click="navigate" class="md-inset"
+                >Approved Curation</md-list-item
+              >
+            </router-link>
+            <router-link
+              to="/portal/user/curated-xml"
+              v-slot="{ navigate, href }"
+              custom
+            >
+              <md-list-item :href="href" @click="navigate" class="md-inset"
+                >Curated XML</md-list-item
+              >
+            </router-link>
+          </md-list>
+        </md-list-item>
+
+        <md-divider></md-divider>
+      </md-list>
+    </div>
+
+    <button
+      v-if="!sideDrawerVisiblity"
+      class="utility-gridborder return-btn metamine_footer-ref-header"
+      @click="toggleSideDrawerVisibility"
+    >
+      <md-icon class="return-btn-text metamine_intro-header u_margin-none"
+        >keyboard_arrow_right</md-icon
+      >
+      <md-tooltip md-direction="right">Open Menu</md-tooltip>
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'UserSideBar',
+  data() {
+    return {
+      sideDrawerVisiblity: true
+    };
+  },
+  methods: {
+    toggleSideDrawerVisibility() {
+      this.sideDrawerVisiblity = !this.sideDrawerVisiblity;
+    }
+  },
+  computed: {
+    ...mapGetters({
+      isAuth: 'auth/isAuthenticated',
+      isAdmin: 'auth/isAdmin',
+      name: 'auth/displayName'
+    })
+  }
+};
+</script>

app/src/mixins/deployVersion.js

@@ -0,0 +1,57 @@
+import { watch } from 'vue';
+import { mapMutations, mapGetters, mapActions, mapState } from 'vuex';
+
+export default {
+  data() {
+    return {
+      errorMsg: 'Deployment Failed'
+    };
+  },
+  computed: {
+    ...mapGetters({
+      dialogBoxActive: 'dialogBox',
+      token: 'auth/token',
+      isAdmin: 'auth/isAdmin'
+    }),
+    isProduction() {
+      // The expectation of version toggling is only enabled for production and not lower environment.
+      return new URL(window.location.origin)?.host === 'materialsmine.org';
+    },
+    ...mapState('portal', [
+      'isSuccess',
+      'isError',
+      'isLoading',
+      'currentVersion',
+      'loadingMessage',
+      'dockerVersions'
+    ])
+  },
+
+  methods: {
+    ...mapMutations({
+      toggleDialogBox: 'setDialogBox',
+      setCurrentVersion: 'setCurrentVersion',
+      resetDeploymentStatus: 'portal/resetDeploymentStatus'
+    }),
+    ...mapActions({
+      fetchVersions: 'portal/fetchVersions',
+      deploy: 'portal/deploy'
+    }),
+
+    // this closes the dialog box and resets the deployment status
+    closeDialogBox() {
+      this.toggleDialogBox();
+      this.resetDeploymentStatus();
+    },
+    setVersion(e) {
+      this.$store.commit('portal/setCurrentVersion', e.target.value);
+    }
+  },
+  watch: {
+    dialogBoxActive() {
+      if (this.dialogBoxActive === false) {
+        this.resetDeploymentStatus();
+      }
+    }
+  }
+};