Huge work

KTUSAPS/ClientApp/src/App.vue

@@ -19,6 +19,15 @@
       </span>
     </div>
   </div>
+  <div v-if="$store.getters['auth/isExpiringSoon']" class="container">
+    <div class="alert alert-warning">
+      <h4 class="alert-heading">Greitai baisis jūsų sesija</h4>
+      <span>
+        Po {{ expiresIn }} baigsis jūsų sesija.
+        <a :href="$store.getters['auth/loginUrl']">Pratęsti sesija.</a>
+      </span>
+    </div>
+  </div>
   <router-view />
 </template>
 
@@ -30,6 +39,12 @@ export default {
   components: {
     NavMenu,
   },
+  data() {
+    return {
+      expiresIn: '',
+      interval: null,
+    }
+  },
   created() {
     this.$store.dispatch('auth/initialize')
   },
@@ -43,6 +58,26 @@ export default {
       return location.protocol !== 'https:'
     },
   },
+  methods: {
+    updateExpiry() {
+      const totalSeconds = Math.floor(
+        (this.$store.getters['auth/expires'] - new Date()) / 1000
+      )
+      const seconds = totalSeconds % 60
+      const minutes = Math.floor(totalSeconds / 60)
+      if (minutes) {
+        this.expiresIn = `${minutes} min. ir ${seconds} sek.`
+      } else {
+        this.expiresIn = `${seconds} sek.`
+      }
+    },
+  },
+  mounted() {
+    this.interval = setInterval(this.updateExpiry, 1000)
+  },
+  beforeUnmount() {
+    clearInterval(this.interval)
+  },
 }
 </script>
 

KTUSAPS/ClientApp/src/components/NavMenu.vue

@@ -27,6 +27,9 @@
                 >Pagrindinis</router-link
               >
             </li>
+            <li class="nav-item">
+              <a href="/swagger" class="nav-link">Swagger UI</a>
+            </li>
           </ul>
           <div class="navbar-nav">
             <span v-if="$store.getters['auth/isValid']" class="navbar-text"

KTUSAPS/ClientApp/src/pages/Home.vue

@@ -29,7 +29,7 @@
       </table>
       <h3>Techninė duomenų reprezentacija</h3>
       <a
-        href="https://docs.microsoft.com/en-us/azure/active-directory/develop/access-tokens"
+        href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens"
         >Dokumentacija apie laukų reikšmes</a
       >
       <pre>{{ $store.state.auth.tokenData }}</pre>
@@ -92,7 +92,7 @@ export default {
     serverVerify() {
       this.verificationResult = null
       axios
-        .get('/test/authed', {
+        .get('/api/AuthMetadata/authed', {
           headers: { Authorization: `Bearer ${this.$store.state.auth.token}` },
         })
         .then(response => {

KTUSAPS/ClientApp/src/store/index.js

@@ -1,7 +1,7 @@
-import { createStore, createLogger } from "vuex";
-import auth from "./modules/auth";
+import { createStore, createLogger } from 'vuex'
+import auth from './modules/auth'
 
-const debug = process.env.NODE_ENV !== "production";
+const debug = process.env.NODE_ENV !== 'production'
 
 export default createStore({
   modules: {
@@ -9,4 +9,4 @@ export default createStore({
   },
   strict: debug,
   plugins: debug ? [createLogger()] : [],
-});
+})

KTUSAPS/ClientApp/src/store/modules/auth.js

@@ -52,7 +52,15 @@ const getters = {
   },
   userId(state, getters) {
     if (!getters.isValid) return null
-    return state.tokenData.email
+    return state.tokenData.sub
+  },
+  isExpiringSoon(state, getters) {
+    if (!getters.isValid) return false
+    return true
+  },
+  expires(state, getters) {
+    if (!getters.isValid) return 0
+    return new Date(state.tokenData.exp * 1000)
   },
   loginUrl(state, getters) {
     if (!getters.isReady) return null