diff --git a/ClientApp/@types/alltypes.d.ts b/ClientApp/@types/alltypes.d.ts new file mode 100644 index 0000000..e8c3016 --- /dev/null +++ b/ClientApp/@types/alltypes.d.ts @@ -0,0 +1 @@ +declare module 'EventEmitter'; \ No newline at end of file diff --git a/ClientApp/assets/loading.svg b/ClientApp/assets/loading.svg new file mode 100644 index 0000000..74311d8 --- /dev/null +++ b/ClientApp/assets/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ClientApp/auth/AuthService.ts b/ClientApp/auth/AuthService.ts new file mode 100644 index 0000000..1a66579 --- /dev/null +++ b/ClientApp/auth/AuthService.ts @@ -0,0 +1,78 @@ +import auth0, { WebAuth } from 'auth0-js' +import router from '../router/' +import EventEmitter from 'EventEmitter' + +export default class AuthService { + authenticated = this.isAuthenticated() + authNotifier = new EventEmitter() + auth0: WebAuth + constructor(hostname:string, port:string, protocol:string) { + this.login = this.login.bind(this); + this.setSession = this.setSession.bind(this) + this.logout = this.logout.bind(this) + this.isAuthenticated = this.isAuthenticated.bind(this) + var stringBuild = protocol + "//" + hostname; + if (port !== "") + stringBuild += ':' + port + stringBuild += '/callback' + this.auth0 = new auth0.WebAuth({ + domain: 'dotnextrussia.eu.auth0.com', + clientID: 'g7saZcm47evyY3kWWP26ZxifDpxycl9h', + redirectUri: stringBuild, + audience: 'http://medhelp20171124063439.azurewebsites.net/', + responseType: 'token id_token', + scope: 'openid profile read:templates' + }); + } + + + + + login() { + this.auth0.authorize(); + } + + handleAuthentication () { + this.auth0.parseHash((err, authResult) => { + if (authResult && authResult.accessToken && authResult.idToken) { + this.setSession(authResult) + router.replace('home') + } else if (err) { + router.replace('home') + console.log(err) + alert(`Error: ${err.error}. Check the console for further details.`) + } + location.reload() + }) + } + + setSession (authResult : any) { + // Set the time that the access token will expire at + let expiresAt = JSON.stringify( + authResult.expiresIn * 1000 + new Date().getTime() + ) + localStorage.setItem('access_token', authResult.accessToken) + localStorage.setItem('id_token', authResult.idToken) + localStorage.setItem('expires_at', expiresAt) + this.authNotifier.emit('authChange', { authenticated: true }) + } + + logout () { + // Clear access token and ID token from local storage + localStorage.removeItem('access_token') + localStorage.removeItem('id_token') + localStorage.removeItem('expires_at') + //this.userProfile = null + this.authNotifier.emit('authChange', false) + // navigate to the home route + router.replace('home') + location.reload() + } + + isAuthenticated () { + // Check whether the current time is past the + // access token's expiry time + let expiresAt = JSON.parse(localStorage.getItem('expires_at') || '{}') + return new Date().getTime() < expiresAt + } +} \ No newline at end of file diff --git a/ClientApp/boot.ts b/ClientApp/boot.ts index b95bd38..7b2549a 100644 --- a/ClientApp/boot.ts +++ b/ClientApp/boot.ts @@ -2,16 +2,13 @@ import './css/site.css'; import 'bootstrap'; import Vue from 'vue'; import VueRouter from 'vue-router'; +import router from './router' +import App from './components/app/app' Vue.use(VueRouter); -const routes = [ - { path: '/', component: require('./components/home/home.vue.html') }, - { path: '/counter', component: require('./components/counter/counter.vue.html') }, - { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') } -]; new Vue({ el: '#app-root', - router: new VueRouter({ mode: 'history', routes: routes }), + router: router, render: h => h(require('./components/app/app.vue.html')) }); diff --git a/ClientApp/components/app/app.ts b/ClientApp/components/app/app.ts index f580f76..84a1bbf 100644 --- a/ClientApp/components/app/app.ts +++ b/ClientApp/components/app/app.ts @@ -1,10 +1,29 @@ import Vue from 'vue'; import { Component } from 'vue-property-decorator'; +import AuthService from '../../auth/AuthService'; -@Component({ + + +const auth = new AuthService(window.location.hostname, window.location.port, window.location.protocol) + +var { login, logout, authenticated, authNotifier } = auth + +export default Vue.extend({ + name: 'app', components: { MenuComponent: require('../navmenu/navmenu.vue.html') + }, + data() { + authNotifier.on('authChange', (authState:any) => { + authenticated = authState.authenticated + }) + return { + auth, + authenticated + } + }, + methods: { + login, + logout } -}) -export default class AppComponent extends Vue { -} +}) \ No newline at end of file diff --git a/ClientApp/components/app/app.vue.html b/ClientApp/components/app/app.vue.html index 6a108b8..5dde051 100644 --- a/ClientApp/components/app/app.vue.html +++ b/ClientApp/components/app/app.vue.html @@ -3,12 +3,18 @@
+
- + +
+ + diff --git a/ClientApp/components/callback/callback.ts b/ClientApp/components/callback/callback.ts new file mode 100644 index 0000000..8665e28 --- /dev/null +++ b/ClientApp/components/callback/callback.ts @@ -0,0 +1,11 @@ +import Vue from "vue"; + +export default Vue.extend({ + name: 'callback', + props: ['auth'], + data () { + // alert(JSON.stringify(this.auth)) + this.auth.handleAuthentication() + return {} + } + }) \ No newline at end of file diff --git a/ClientApp/components/callback/callback.vue.html b/ClientApp/components/callback/callback.vue.html new file mode 100644 index 0000000..7638a41 --- /dev/null +++ b/ClientApp/components/callback/callback.vue.html @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/ClientApp/components/fetchdata/fetchdata.ts b/ClientApp/components/fetchdata/fetchdata.ts index c6108f9..36e0bdc 100644 --- a/ClientApp/components/fetchdata/fetchdata.ts +++ b/ClientApp/components/fetchdata/fetchdata.ts @@ -1,5 +1,7 @@ import Vue from 'vue'; import { Component } from 'vue-property-decorator'; +import axios from 'axios'; + interface WeatherForecast { dateFormatted: string; @@ -11,12 +13,25 @@ interface WeatherForecast { @Component export default class FetchDataComponent extends Vue { forecasts: WeatherForecast[] = []; - + HTTP = axios.create({ + baseURL: 'api/SampleData/WeatherForecasts', + + }) mounted() { - fetch('https://github.com/api/SampleData/WeatherForecasts') - .then(response => response.json() as Promise) - .then(data => { - this.forecasts = data; - }); + axios.get("api/SampleData/WeatherForecasts", + { + headers: { + Authorization: 'Bearer ' + localStorage.getItem('access_token') + } + }) + .then(response => { + this.forecasts = response.data + }) + .catch(e => { + alert(e) + }) + + // fetch('https://github.com/api/SampleData/WeatherForecasts') + } } diff --git a/ClientApp/components/home/home.ts b/ClientApp/components/home/home.ts new file mode 100644 index 0000000..b0fab4b --- /dev/null +++ b/ClientApp/components/home/home.ts @@ -0,0 +1,5 @@ +import Vue from 'vue'; +export default Vue.extend({ + name: 'home', + props: ['auth', 'authenticated'] + }) \ No newline at end of file diff --git a/ClientApp/components/home/home.vue.html b/ClientApp/components/home/home.vue.html index d418e70..8c3c655 100644 --- a/ClientApp/components/home/home.vue.html +++ b/ClientApp/components/home/home.vue.html @@ -1,19 +1,29 @@ \ No newline at end of file + + + + + +