Load config.json at runtime

This commit is contained in:
N-Pex 2021-09-25 09:29:05 +02:00
parent 01c0eb503f
commit 589c52f4cd
11 changed files with 71 additions and 39 deletions

2
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "keanuapp-weblite",
"version": "0.1.15",
"version": "0.1.16",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View file

@ -47,6 +47,7 @@
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"copy-webpack-plugin": "^5.1.2",
"eslint": "^7.0",
"eslint-plugin-vue": "^7.0",
"sass": "^1.19.0",

View file

@ -33,8 +33,6 @@
</template>
<script>
import config from "./assets/config";
export default {
name: "App",
data() {
@ -76,10 +74,10 @@ export default {
return this.$store.state.auth.user;
},
appName() {
return config.appName;
return this.$config.appName;
},
title() {
var title = this.$t(config.appName);
var title = this.$t(this.appName);
if (this.$matrix.notificationCount > 0) {
title += " [" + this.$matrix.notificationCount + "]";
}
@ -113,8 +111,11 @@ export default {
},
immediate: true,
},
title(title) {
document.title = title;
title: {
handler(title) {
document.title = title;
},
immediate: true,
},
},
};

View file

@ -235,7 +235,7 @@
</v-col>
<v-col
v-if="config.useShortCodeStickers"
v-if="$config.useShortCodeStickers"
class="input-area-button text-center flex-grow-0 flex-shrink-1"
>
<v-btn
@ -473,7 +473,6 @@ import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
import stickers from "../plugins/stickers";
import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
import BottomSheet from "./BottomSheet.vue";
import config from "../assets/config";
import ImageResize from "image-resize";
const sizeOf = require("image-size");
const dataUriToBuffer = require("data-uri-to-buffer");
@ -555,7 +554,6 @@ export default {
data() {
return {
config: config,
events: [],
currentInput: "",
typingMembers: [],

View file

@ -59,7 +59,11 @@
}
"
></v-text-field>
<v-checkbox class="mt-0" v-model="sharedComputer" :label="$t('join.shared_computer')" />
<v-checkbox
class="mt-0"
v-model="sharedComputer"
:label="$t('join.shared_computer')"
/>
<v-btn
:disabled="!isValid || loading"
color="black"
@ -78,13 +82,12 @@
<script>
import User from "../models/user";
import util from "../plugins/utils";
import config from "../assets/config";
export default {
name: "Login",
data() {
return {
user: new User(config.defaultServer, "", ""),
user: new User(this.$config.defaultServer, "", ""),
isValid: true,
loading: false,
message: "",

View file

@ -79,7 +79,6 @@
<script>
import profileInfoMixin from "./profileInfoMixin";
import ActionRow from "./ActionRow.vue";
import config from "../assets/config";
export default {
name: "ProfileInfoPopup",
@ -102,10 +101,10 @@ export default {
},
computed: {
product() {
return config.product;
return this.$config.product;
},
productLink() {
return config.productLink;
return this.$config.productLink;
},
},
watch: {

View file

@ -5,6 +5,7 @@ import store from './store'
import router from './router'
import matrix from './services/matrix.service'
import navigation from './services/navigation.service'
import config from './services/config.service'
import cleaninsights from './services/cleaninsights.service'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
@ -25,6 +26,7 @@ Vue.config.productionTip = false
Vue.use(VueResize);
Vue.use(VEmojiPicker);
Vue.use(matrix, { store: store, i18n: i18n });
Vue.use(config); // Use this before cleaninsights below, it depends on config!
Vue.use(cleaninsights);
Vue.use(VueClipboard);
@ -87,12 +89,12 @@ Vue.directive('longTap', {
};
const touchStart = function (e) {
el.longTapHandled = false;
el.longTapStartX = touchX(e);
el.longTapStartY = touchY(e);
el.longTapTimer = setTimeout(touchTimerElapsed, el.longTapTimeout);
el.classList.add("waiting-for-long-tap");
e.preventDefault();
el.longTapHandled = false;
el.longTapStartX = touchX(e);
el.longTapStartY = touchY(e);
el.longTapTimer = setTimeout(touchTimerElapsed, el.longTapTimeout);
el.classList.add("waiting-for-long-tap");
e.preventDefault();
};
const touchCancel = function () {
@ -156,6 +158,7 @@ new Vue({
router,
i18n,
matrix,
config,
cleaninsights,
render: h => h(App)
}).$mount('#app');

View file

@ -1,12 +1,11 @@
import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';
import config from "../assets/config";
export default {
install(Vue) {
class RequestUi extends ConsentRequestUi {
showForCampaign(campaignId, campaign, complete) {
const period = campaign.nextTotalMeasurementPeriod
const period = campaign.nextTotalMeasurementPeriod
if (!period) {
return ''
}
@ -27,13 +26,16 @@ export default {
}
},
created() {
const analytics = config.analytics || {};
if (analytics.enabled && analytics.config) {
this.ci = new CleanInsights(analytics.config);
this.$config.promise.then(function (config) {
const analytics = config.analytics || {};
if (analytics.enabled && analytics.config) {
this.ci = new CleanInsights(analytics.config);
// Get name of first campaign in the config.
this.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
}
// Get name of first campaign in the config.
this.campaignId = Object.keys(analytics.config.campaigns || { invalid: {} })[0];
}
});
},
methods: {
event(category, action) {

View file

@ -0,0 +1,18 @@
export default {
install(Vue) {
var config = Vue.observable(require('@/assets/config.json'));
const getRuntimeConfig = async () => {
const runtimeConfig = await fetch('./config.json');
return await runtimeConfig.json()
}
config.promise = getRuntimeConfig();
config.promise.then(function (json) {
// Reactively use all the config values
for (const key of Object.keys(json)) {
Vue.set(config, key, json[key]);
}
});
Vue.prototype.$config = config;
}
}

View file

@ -3,7 +3,6 @@ import sdk from "matrix-js-sdk";
import { TimelineWindow, EventTimeline } from "matrix-js-sdk";
import util from "../plugins/utils";
import User from "../models/user";
import config from "../assets/config";
const LocalStorageCryptoStore = require("matrix-js-sdk/lib/crypto/store/localStorage-crypto-store")
.LocalStorageCryptoStore;
@ -120,7 +119,7 @@ export default {
promiseLogin = tempMatrixClient
.register(user, pass, null, {
type: "m.login.dummy",
initial_device_display_name: config.appName
initial_device_display_name: this.$config.appName
})
.then((response) => {
console.log("Response", response);
@ -132,7 +131,7 @@ export default {
return u;
})
} else {
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: this.$config.appName };
if (user.device_id) {
data.device_id = user.device_id;
}
@ -297,7 +296,7 @@ export default {
if (this.ready) {
return Promise.resolve(this.currentUser);
}
return this.$store.dispatch("login", this.currentUser || new User(config.defaultServer, "", "", true));
return this.$store.dispatch("login", this.currentUser || new User(this.$config.defaultServer, "", "", true));
},
addMatrixClientListeners(client) {
@ -736,7 +735,7 @@ export default {
return this.matrixClient;
})
} else {
const tempMatrixClient = sdk.createClient(config.defaultServer);
const tempMatrixClient = sdk.createClient(this.$config.defaultServer);
var tempUserString = this.$store.state.tempuser;
var tempUser = null;
if (tempUserString) {
@ -753,7 +752,7 @@ export default {
clientPromise = tempMatrixClient
.register(user, pass, null, {
type: "m.login.dummy",
initial_device_display_name: config.appName
initial_device_display_name: this.$config.appName
})
.then((response) => {
console.log("Response", response);
@ -766,7 +765,7 @@ export default {
// Get an access token
clientPromise = clientPromise.then(user => {
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: config.appName };
var data = { user: User.localPart(user.user_id), password: user.password, type: "m.login.password", initial_device_display_name: this.$config.appName };
if (user.device_id) {
data.device_id = user.device_id;
}
@ -779,7 +778,7 @@ export default {
// Only used to get public room info from.
clientPromise = clientPromise.then(user => {
var opts = {
baseUrl: config.defaultServer,
baseUrl: this.$config.defaultServer,
userId: user.user_id,
accessToken: user.access_token,
timelineSupport: false,

View file

@ -1,3 +1,5 @@
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
"transpileDependencies": [
"vuetify"
@ -16,7 +18,13 @@ module.exports = {
},
configureWebpack: {
devtool: 'source-map'
devtool: 'source-map',
plugins: [
new CopyWebpackPlugin([{
from: "./src/assets/config.json",
to: "./",
}])
]
},
devServer: {