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

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

export default {
21
  name: 'App',
22
23
24
25
26
27
  components: {
    'app-header': header,
    'app-footer': footer
  },
  data () {
    return {
28
29
30
31
32
      modules_logged_out: [
        { slug: 'home', title: 'Home' },
        { slug: 'credits', title: 'Credits' },
      ],
      modules_logged_in: [
33
34
35
36
37
38
39
40
41
42
43
44
45
46
        { slug: 'home', title: 'Home' },
        { slug: 'shows', title: 'Shows' },
        { slug: 'files', title: 'Files & Playlists' },
        { slug: 'settings', title: 'Settings' },
        { slug: 'credits', title: 'Credits' },
      ],
      modules_logged_in_superuser : [
        { slug: 'home', title: 'Home' },
        { slug: 'shows', title: 'Shows' },
        { slug: 'files', title: 'Files & Playlists' },
        { slug: 'emissions', title: 'Emissions' },
        { slug: 'settings', title: 'Settings' },
        { slug: 'credits', title: 'Credits' },
        { slug: 'debug', title: 'Debug' }
47
      ],
48
49
50
51
      user: {
        name: '',
        email: '',
        access_token: '',
52
        expires_at: 0,
53
54
        logged_in: false,
        steeringUser: null
55
56
      },
      userOIDC: null,
57
      oidcmgr: new oidc.UserManager({
58
        userStore: new oidc.WebStorageStateStore(),
59
        authority: process.env.VUE_APP_API_STEERING_OIDC_URI,
60
        // the client id has to be a string, therefore we add the + ''
61
62
        client_id: process.env.VUE_APP_OIDC_CLIENT_ID,
        redirect_uri: process.env.VUE_APP_API_STEERING_OIDC_REDIRECT_URI,
63
64
        silent_redirect_uri: 'http://localhost:8080/oidc_callback_silentRenew.html',
        popup_redirect_uri: 'http://localhost:8080/oidc_callback_popupRenew.html',
65
        accessTokenExpiringNotificationTime: process.env.VUE_APP_API_STEERING_OIDC_EXPIRE_NOTIFICATION,
66
67
        response_type: 'id_token token',
        scope: 'openid profile email',
68
        post_logout_redirect_uri: process.env.VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT,
69
        loadUserInfo: true
70
      })
71
    }
72
73
74
  },
  computed: {
    modules: function () {
75
76
77
78
79
80
81
82
83
      if (this.user.logged_in === true) {
        if (this.user.steeringUser && this.user.steeringUser.is_superuser) {
          return this.modules_logged_in_superuser
        } else {
          return this.modules_logged_in
        }
      } else {
        return this.modules_logged_out
      }
84
85
    }
  },
86
87
88
89
90
  mounted () {
    // TODO: remove oidc logging after thorough testing
    oidc.Log.logger = console
    let self = this
    this.oidcmgr.events.addAccessTokenExpiring(function () {
91
      console.log('Debug info: starting silent access_token renewal')
92
93
      self.oidcmgr.signinSilent().then(function (user) {
        self.user.access_token = user.access_token
94
        console.log(self.user.access_token)
95
      }).catch(function (err) {
96
        console.log(err)
97
98
99
100
101
        alert('Your OpenID access token could not be renewed automatically.\n' +
          'You will be logged out in ' + process.env.VUE_APP_API_STEERING_OIDC_EXPIRE_NOTIFICATION + ' seconds.')
      })
    })
    this.oidcmgr.events.addAccessTokenExpired(function () {
102
103
104
105
106
107
      // at this point where the app is just mounted, we cannot use the
      // vue logger, because this.$log does not yet exist. therefore we log
      // to the console, but only if the environment is set tu debug log level
      if (process.env.VUE_APP_LOGLEVEL === 'debug') {
        console.log("Debug info: OIDC token has expired. Logging out.")
      }
108
109
110
111
      self.signOut()
    })
    this.getOIDCUser()
  },
112
113
  methods: {
    signIn () {
114
      this.oidcmgr.signinRedirect().catch(err => {
115
116
        alert('Error: something went wrong when signing in. See console for details.')
        this.$log.error(err)
117
118
119
      })
    },
    signOut () {
120
121
      this.oidcmgr.signoutRedirect().then(resp => {
        this.user.logged_in = false
122
        this.$log.debug('signed out', resp)
123
      }).catch(err => {
124
125
        this.$log.error(err)
        alert('Error: something went wrong when logging out. See console for details.')
126
      })
127
      console.log('3')
128
    },
129
    getSteeringUser () {
130
      axios.get(process.env.VUE_APP_API_STEERING + 'users/', {
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.user.access_token }
      }).then(response => {
        if (response.data.length === 0) {
          alert('No user profile data provided by steering backend!')
        } else if (response.data.length === 1) {
          this.user.steeringUser = response.data[0]
        } else {
          // in case we are a superuser, we get all users returned
          // so we have to iterate through the user list to find out own profile
          for (var u in response.data) {
            if (response.data[u].username === this.user.name) {
              this.user.steeringUser = response.data[u]
              break
            }
          }
        }
      }).catch(error => {
149
150
151
        this.$log.error(error.response.status + ' ' + error.response.statusText)
        this.$log.error(error.response)
        alert('Error: could not fetch user object from the steering backend. See console for details.')
152
153
      })
    },
154
    getOIDCUser () {
155
      let self = this
156
157
      this.oidcmgr.getUser().then(function (user) {
        if (user == null) {
158
159
160
161
162
          self.user.logged_in = false
          self.user.name = ''
          self.user.email = ''
          self.user.access_token = ''
        } else {
163
164
          // TODO: check user.expires_at
          // if token already expired try to get a new one or mark the user as logged out
165
          self.setUserProperties(user)
166
          self.getSteeringUser()
167
168
        }
      }).catch(function (err) {
169
170
        this.$log.error(err)
        alert('Error: could not fetch OIDC user object. See console for details.')
171
      })
172
173
174
175
176
177
178
    },
    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
179
      // TODO: remove debug info after thorough testing
180
181
182
      this.$log.debug(new Date(user.expires_at * 1000).toString())
      this.$log.debug(new Date(user.expires_at * 1000).toUTCString())
      this.$log.debug(user.access_token)
183
    }
184
185
186
187
188
189
  }
}
</script>

<style>
#app {
190
  color: #2e3436;
191
}
192
/*
193
194
195
196
197
#app .content-width {
  margin: auto;
  width: 920px;
  max-width: 920px;
}
198
*/
199
</style>