App.vue 4.24 KB
Newer Older
1
2
<template>
  <div id="app">
3
    <app-header v-bind:modules="modules" v-bind:user="user"></app-header>
4
    <router-view/>
5
6
7
8
9
    <app-footer></app-footer>
  </div>
</template>

<script>
10
11
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
12
import oidc from 'oidc-client'
13
14
15
16
17
18
19
20
21
22
23
import header from './components/Header.vue'
import footer from './components/Footer.vue'

export default {
  name: 'app',
  components: {
    'app-header': header,
    'app-footer': footer
  },
  data () {
    return {
24
25
26
27
28
29
      modules_logged_out: [
        { slug: 'home', title: 'Home' },
        { slug: 'credits', title: 'Credits' },
        { slug: 'debug', title: 'Debug' }
      ],
      modules_logged_in: [
30
        { slug: 'home', title: 'Home' },
31
        { slug: 'shows', title: 'Sendungen verwalten' },
32
33
        { slug: 'files', title: 'Dateien und Playlists' },
        { slug: 'settings', title: 'Settings' },
34
35
        { slug: 'credits', title: 'Credits' },
        { slug: 'debug', title: 'Debug' }
36
      ],
37
38
39
40
      user: {
        name: '',
        email: '',
        access_token: '',
41
        expires_at: 0,
42
43
44
45
46
47
        logged_in: false
      },
      userOIDC: null,
      mgr: new oidc.UserManager({
        userStore: new oidc.WebStorageStateStore(),
        authority: process.env.API_STEERING_OIDC_URI,
48
49
        // the client id has to be a string, therefore we add the + ''
        client_id: process.env.OIDC_CLIENT_ID,
50
        redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI,
51
52
        silent_redirect_uri: 'http://localhost:8080/static/oidc_callback_silentRenew.html',
        popup_redirect_uri: 'http://localhost:8080/static/oidc_callback_popupRenew.html',
53
54
55
        response_type: 'id_token token',
        scope: 'openid profile email',
        post_logout_redirect_uri: process.env.API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT,
56
57
        loadUserInfo: true,
        automaticSilentRenew: true
58
      })
59
    }
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
  },
  computed: {
    modules: function () {
      if (this.user.logged_in === true) return this.modules_logged_in
      else return this.modules_logged_out
    }
  },
  methods: {
    signIn () {
      this.mgr.signinRedirect().catch(function (err) {
        console.log(err)
      })
    },
    signOut () {
      let self = this
      this.mgr.signoutRedirect().then(function (resp) {
        self.user.logged_in = false
        console.log('signed out', resp)
      }).catch(function (err) {
        console.log(err)
      })
    },
    getUser () {
      let self = this
      this.mgr.getUser().then(function (u) {
        if (u == null) {
          self.user.logged_in = false
          self.user.name = ''
          self.user.email = ''
          self.user.access_token = ''
        } else {
          self.userOIDC = u
          self.user.logged_in = true
          self.user.name = u.profile.nickname
          self.user.email = u.profile.email
          self.user.access_token = u.access_token
96
97
98
          console.log(new Date(u.expires_at * 1000).toString())
          console.log(new Date(u.expires_at * 1000).toUTCString())
          console.log(u.access_token)
99
100
101
102
103
104
105
        }
      }).catch(function (err) {
        console.log(err)
      })
    }
  },
  mounted () {
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
    // TODO: remove oidc logging after thorough testing
    oidc.Log.logger = console
    let self = this
    this.mgr.events.addSilentRenewError(function () {
      // TODO: set accessTokenExpiringNotificationTime when this.mgr is created and insert this value here too
      alert('Your OpenID access token could not be renewed automatically. You will be logged out in 60 seconds.')
    })
    this.mgr.events.addAccessTokenExpiring(function () {
      console.log('token will soon expire')
      console.log(self)
      /* Use the following code instead of silent renewal if you want to use popups
      console.log('starting signinPopup')
      self.mgr.signinPopup(function (user) {
        console.log('signinPopup result for user:')
        console.log(user)
      }).catch(function (err) {
        console.log(err)
      })
      */
    })
    this.mgr.events.addAccessTokenExpired(function () {
      console.log('expired!')
    })
129
    this.getUser()
130
    this.mgr.startSilentRenew()
131
132
133
134
135
136
  }
}
</script>

<style>
#app {
137
  color: #2e3436;
138
}
139
/*
140
141
142
143
144
#app .content-width {
  margin: auto;
  width: 920px;
  max-width: 920px;
}
145
*/
146
</style>