App.vue 4.68 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
        logged_in: false
      },
      userOIDC: null,
45
      oidcmgr: new oidc.UserManager({
46
47
        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
        loadUserInfo: true,
57
58
        // automaticSilentRenew: true
        automaticSilentRenew: false
59
      })
60
    }
61
62
63
64
65
66
67
68
69
  },
  computed: {
    modules: function () {
      if (this.user.logged_in === true) return this.modules_logged_in
      else return this.modules_logged_out
    }
  },
  methods: {
    signIn () {
70
      this.oidcmgr.signinRedirect().catch(function (err) {
71
72
73
74
75
        console.log(err)
      })
    },
    signOut () {
      let self = this
76
      this.oidcmgr.signoutRedirect().then(function (resp) {
77
78
79
80
81
82
        self.user.logged_in = false
        console.log('signed out', resp)
      }).catch(function (err) {
        console.log(err)
      })
    },
83
    getOIDCUser () {
84
      let self = this
85
86
      this.oidcmgr.getUser().then(function (user) {
        if (user == null) {
87
88
89
90
91
          self.user.logged_in = false
          self.user.name = ''
          self.user.email = ''
          self.user.access_token = ''
        } else {
92
          self.setUserProperties(user)
93
94
95
96
        }
      }).catch(function (err) {
        console.log(err)
      })
97
98
99
100
101
102
103
104
105
106
    },
    setUserProperties (user) {
      this.userOIDC = user
      this.user.logged_in = true
      this.user.name = user.profile.nickname
      this.user.email = user.profile.email
      this.user.access_token = user.access_token
      console.log(new Date(user.expires_at * 1000).toString())
      console.log(new Date(user.expires_at * 1000).toUTCString())
      console.log(user.access_token)
107
108
109
    }
  },
  mounted () {
110
111
112
    // TODO: remove oidc logging after thorough testing
    oidc.Log.logger = console
    let self = this
113
114
    this.oidcmgr.events.addSilentRenewError(function () {
      // TODO: set accessTokenExpiringNotificationTime when this.oidcmgr is created and insert this value here too
115
116
      alert('Your OpenID access token could not be renewed automatically. You will be logged out in 60 seconds.')
    })
117
    this.oidcmgr.events.addAccessTokenExpiring(function () {
118
119
120
      console.log('token will soon expire')
      /* Use the following code instead of silent renewal if you want to use popups
      console.log('starting signinPopup')
121
      self.oidcmgr.signinPopup(function (user) {
122
123
124
125
126
127
        console.log('signinPopup result for user:')
        console.log(user)
      }).catch(function (err) {
        console.log(err)
      })
      */
128
129
130
131
132
133
134
135
136
      console.log('starting signinSilent')
      self.oidcmgr.signinSilent().then(function (user) {
        console.log('signinPopup result for user:')
        console.log(self.user.access_token)
        self.user.access_token = user.access_token
        console.log(self.user.access_token)
      }).catch(function (err) {
        console.log(err)
      })
137
    })
138
    this.oidcmgr.events.addAccessTokenExpired(function () {
139
140
      console.log('expired!')
    })
141
    this.getOIDCUser()
142
143
144
145
146
147
  }
}
</script>

<style>
#app {
148
  color: #2e3436;
149
}
150
/*
151
152
153
154
155
#app .content-width {
  margin: auto;
  width: 920px;
  max-width: 920px;
}
156
*/
157
</style>