Legal info

KTUSA PS/ClientApp/package.json

@@ -9,8 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0-0",
-    "balm-ui": "^8.44.0",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^5.1.1",
     "cookies-js": "^1.2.3",
     "core-js": "^3.7.0",
     "jwt-decode": "^3.1.2",
@@ -26,7 +25,9 @@
     "@vue/compiler-sfc": "^3.0.2",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^7.1.0"
+    "eslint-plugin-vue": "^7.1.0",
+    "sass": "^1.33.0",
+    "sass-loader": "^10.2.0"
   },
   "eslintConfig": {
     "root": true,

KTUSA PS/ClientApp/src/App.vue

@@ -18,12 +18,4 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

KTUSA PS/ClientApp/src/assets/_custom.scss

@@ -0,0 +1 @@
+

KTUSA PS/ClientApp/src/assets/main.scss

@@ -0,0 +1,2 @@
+@import "custom";
+@import "~bootstrap/scss/bootstrap";

KTUSA PS/ClientApp/src/main.js

@@ -1,8 +1,8 @@
-import "bootstrap/dist/css/bootstrap.css";
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import "./assets/main.scss";
 
 const app = createApp(App);
 

KTUSA PS/ClientApp/src/pages/Home.vue

@@ -1,12 +1,97 @@
 <template>
-  <h1>Hello there</h1>
-  <!-- {{ $store.state.auth.tokenData }} -->
-  {{ $store.getters["auth/isValid"] }}
-  <br />
-  Your name is: {{ $store.getters["auth/name"] }}<br />
-  Your email is: {{ $store.getters["auth/email"] }}<br />
+  <div class="container">
+    <h1>KTU SA Problemų sprendimo sistema</h1>
+    
+    <template v-if="$store.getters['auth/isValid']">
+      <div class="alert alert-success">
+        <h4 class="alert-heading">Tu esi prisijungęs</h4>
+        <p>Kliento aplikacija turi tavo saugos raktą. aplikacija žino, kad tavo el. paštas yra: <b>{{ $store.getters["auth/email"] }}</b></p>
+      </div>
+      <h2>Visi laukai gaunami iš Azure Active Directory</h2>
+      <table class="table">
+        <thead>
+          <tr>
+            <th scope="col">Pavadinimas</th>
+            <th scope="col">Reikšmė</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(value, key) in authDataTable" :key="key">
+            <td>{{ key }}</td>
+            <td>{{ value }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>Techninė duomenų reprezentacija</h3>
+      <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/access-tokens">Dokumentacija apie laukų reikšmes</a>
+      <pre>{{ $store.state.auth.tokenData }}</pre>
+      <h3>Saugos raktas.</h3>
+      <pre>{{ $store.state.auth.token }}</pre>
+      <h3>Serverio tokeno patikrinimas</h3>
+      <button type="button" class="btn btn-primary" @click="serverVerify">Patikrinti</button>
+      <h5>Verifikacijos atsakas:</h5>
+      <pre>
+        {{ verificationResult }}
+      </pre>
+    </template>
+    <div v-else class="alert alert-danger" role="alert">
+      <h4 class="alert-heading">Tu neprisijungęs</h4>
+      <p>Prašom paspausti prisijungimo mygtuką navigacijos juostoje.</p>
+    </div>      
+  </div>
+  
+  
 </template>
 
 <script>
-export default {};
+import axios from "axios";
+
+const names = {
+  "aud": "AppId (Audience)",
+  "iss": "Išdavėjas",
+  "iat": "Išdavimo momentas",
+  "nbf": "Negalioja anksčiau nei",
+  "exp": "Galiojimo pabaiga",
+  "email": "El. paštas",
+  "nonce": "Aplikacijos sugeneruota nepasikartojanti reikšmė",
+  "sub": "Subjektas (Vartotojo Id)",
+  "tid": "Tenanto Identifikatorius",
+  "ver": "OAuth versija"
+}
+
+function lookupName(key) {
+  if(names[key])
+    return names[key];
+  return key;
+}
+
+export default {
+  
+  data() {
+    return {
+      verificationResult: null
+    }
+  },
+  computed: {
+    authDataTable() {
+      return Object.fromEntries(Object.entries(this.$store.state.auth.tokenData).map(([key, value]) => [lookupName(key), value]))
+    }
+  },
+  methods: {
+    serverVerify() {
+      this.verificationResult = null
+      axios
+        .get("/test/authed", {
+          headers: { Authorization: `Bearer ${this.$store.state.auth.token}` },
+        })
+        .then((response) => {
+          this.verificationResult = response.data;
+        })
+        .catch(function (error) {
+          alert(error);
+        });
+
+    }
+  }
+};
 </script>

KTUSA PS/ClientApp/src/store/modules/auth.js

@@ -25,14 +25,14 @@ const getters = {
     if (now > exp) return false;
     return true;
   },
-  name(state, getters) {
-    if (!getters.isValid) return null;
-    return state.tokenData.name;
-  },
   email(state, getters) {
     if (!getters.isValid) return null;
     return state.tokenData.email;
   },
+  userId(state, getters) {
+    if (!getters.isValid) return null;
+    return state.tokenData.email;
+  },
 };
 
 // actions