diff --git a/frontend/src/app/package.json b/frontend/src/app/package.json
index e455897..ef51559 100644
--- a/frontend/src/app/package.json
+++ b/frontend/src/app/package.json
@@ -15,6 +15,7 @@
"core-js": "^3.6.5",
"jquery": "^3.6.0",
"mapbox-gl": "^2.3.0",
+ "osm-auth": "^2.0.0",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-analytics": "^5.22.1",
@@ -30,6 +31,7 @@
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "^4.5.13",
"babel-eslint": "^10.1.0",
+ "dotenv-webpack": "^8.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.32.0",
diff --git a/frontend/src/app/public/land.html b/frontend/src/app/public/land.html
new file mode 100644
index 0000000..38b8b7f
--- /dev/null
+++ b/frontend/src/app/public/land.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/app/src/App.vue b/frontend/src/app/src/App.vue
index e006101..35e52ec 100644
--- a/frontend/src/app/src/App.vue
+++ b/frontend/src/app/src/App.vue
@@ -18,10 +18,22 @@
>
-
-
+
+ Login with OSM
+
+
+ Logout
+
@@ -59,6 +71,16 @@ import About from "./components/About";
import ProvisionInstance from "./components/ProvisionInstance";
import SytemNotWorking from "./components/NotWorking.vue";
import Tour from "./components/Tour";
+import { osmAuth } from "osm-auth";
+
+const redirectPath = window.location.origin + window.location.pathname;
+const auth = osmAuth({
+ client_id: process.env.CLIENT_ID,
+ client_secret: process.env.CLIENT_SECRET,
+ redirect_uri: redirectPath + "land.html",
+ scope: "read_prefs",
+ auto: true, // show a login form if the user is not authenticated and you try to do a call
+});
export default {
name: "App",
@@ -73,9 +95,11 @@ export default {
data: () => ({
aboutDialog: false,
systemNotWorking: false,
+ userAuthenticated: auth && auth.authenticated() ? true : false,
}),
created() {
this.$gtag.pageview("/");
+ if (auth && auth.authenticated()) this.loginWithOSM();
},
methods: {
closeAboutDialog() {
@@ -92,6 +116,15 @@ export default {
darkMode() {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
},
+ loginWithOSM() {
+ auth.xhr({ method: "GET", path: "/api/0.6/user/details" }, () => {
+ this.userAuthenticated = true;
+ });
+ },
+ logoutFromOSM() {
+ auth.logout();
+ this.userAuthenticated = false;
+ },
toggleTour() {
this.$gtag.event("click", {
event_category: "Viewed tour",
diff --git a/frontend/src/app/vue.config.js b/frontend/src/app/vue.config.js
index 7169597..8e3e58d 100644
--- a/frontend/src/app/vue.config.js
+++ b/frontend/src/app/vue.config.js
@@ -1,8 +1,16 @@
+const Dotenv = require('dotenv-webpack');
+
+
module.exports = {
transpileDependencies: [
'vuetify'
],
devServer: {
disableHostCheck: true
+ },
+ configureWebpack: {
+ plugins: [
+ new Dotenv()
+ ]
}
}