<template>
  <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>
        <span>
          Kliento aplikacija turi tavo saugos raktą. Aplikacija žino, kad tavo
          el. paštas yra: <b>{{ $store.getters['auth/email'] }}</b>
        </span>
      </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>
              <pre>{{ value }}</pre>
            </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>
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>
