feat: make frontend use database settings

3 files changed, 40 insertions, 62 deletions

diff --git a/nuxt.config.js b/nuxt.config.js
index 561be15..c3b992c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,57 +1,46 @@
 import dotenv from 'dotenv/config';
 import autoprefixer from 'autoprefixer';
-import jetpack from 'fs-jetpack';
 
-const clientConfig = {
-	development: process.env.NODE_ENV !== 'production',
-	version: process.env.npm_package_version,
-	URL: process.env.DOMAIN,
-	baseURL: `${process.env.DOMAIN}${process.env.ROUTE_PREFIX}`,
-	serviceName: process.env.SERVICE_NAME,
-	maxFileSize: parseInt(process.env.MAX_SIZE, 10),
-	chunkSize: parseInt(process.env.CHUNK_SIZE, 10),
-	publicMode: process.env.PUBLIC_MODE === 'true',
-	userAccounts: process.env.USER_ACCOUNTS === 'true'
-};
+const Util = require('./src/api/utils/Util');
 
 export default {
 	ssr: true,
 	srcDir: 'src/site/',
 	head: {
-		title: process.env.SERVICE_NAME,
-		titleTemplate: `%s | ${process.env.SERVICE_NAME}`,
+		title: Util.config.serviceName,
+		titleTemplate: `%s | ${Util.config.serviceName}`,
 		// TODO: Add the directory with pictures for favicon and stuff
 		meta: [
 			{ charset: 'utf-8' },
 			{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
-			{ hid: 'theme-color', name: 'theme-color', content: `${process.env.META_THEME_COLOR}` },
-			{ hid: 'description', name: 'description', content: `${process.env.META_DESCRIPTION}` },
-			{ hid: 'keywords', name: 'keywords', content: `${process.env.META_KEYWORDS}` },
+			{ hid: 'theme-color', name: 'theme-color', content: `${Util.config.metaThemeColor}` },
+			{ hid: 'description', name: 'description', content: `${Util.config.metaDescription}` },
+			{ hid: 'keywords', name: 'keywords', content: `${Util.config.metaKeywords}` },
 			{
 				hid: 'apple-mobile-web-app-title',
 				name: 'apple-mobile-web-app-title',
-				content: `${process.env.SERVICE_NAME}`
+				content: `${Util.config.serviceName}`
 			},
-			{ hid: 'application-name', name: 'application-name', content: `${process.env.SERVICE_NAME}` },
+			{ hid: 'application-name', name: 'application-name', content: `${Util.config.serviceName}` },
 			{ hid: 'twitter:card', name: 'twitter:card', content: 'summary' },
-			{ hid: 'twitter:site', name: 'twitter:site', content: `${process.env.META_TWITTER_HANDLE}` },
-			{ hid: 'twitter:creator', name: 'twitter:creator', content: `${process.env.META_TWITTER_HANDLE}` },
-			{ hid: 'twitter:title', name: 'twitter:title', content: `${process.env.SERVICE_NAME}` },
-			{ hid: 'twitter:description', name: 'twitter:description', content: `${process.env.META_DESCRIPTION}` },
-			{ hid: 'twitter:image', name: 'twitter:image', content: `${process.env.DOMAIN}/logo.png` },
-			{ hid: 'og:url', property: 'og:url', content: `${process.env.DOMAIN}` },
+			{ hid: 'twitter:site', name: 'twitter:site', content: `${Util.config.metaTwitterHandle}` },
+			{ hid: 'twitter:creator', name: 'twitter:creator', content: `${Util.config.metaTwitterHandle}` },
+			{ hid: 'twitter:title', name: 'twitter:title', content: `${Util.config.serviceName}` },
+			{ hid: 'twitter:description', name: 'twitter:description', content: `${Util.config.metaDescription}` },
+			{ hid: 'twitter:image', name: 'twitter:image', content: `/logo.png` },
+			{ hid: 'og:url', property: 'og:url', content: `/` },
 			{ hid: 'og:type', property: 'og:type', content: 'website' },
-			{ hid: 'og:title', property: 'og:title', content: `${process.env.SERVICE_NAME}` },
-			{ hid: 'og:description', property: 'og:description', content: `${process.env.META_DESCRIPTION}` },
-			{ hid: 'og:image', property: 'og:image', content: `${process.env.DOMAIN}/logo.png` },
-			{ hid: 'og:image:secure_url', property: 'og:image:secure_url', content: `${process.env.DOMAIN}/logo.png` },
-			{ hid: 'og:site_name', property: 'og:site_name', content: `${process.env.SERVICE_NAME}` }
+			{ hid: 'og:title', property: 'og:title', content: `${Util.config.serviceName}` },
+			{ hid: 'og:description', property: 'og:description', content: `${Util.config.metaDescription}` },
+			{ hid: 'og:image', property: 'og:image', content: `/logo.png` },
+			{ hid: 'og:image:secure_url', property: 'og:image:secure_url', content: `/logo.png` },
+			{ hid: 'og:site_name', property: 'og:site_name', content: `${Util.config.serviceName}` }
 		],
 		link: [
 			{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Nunito:300,400,600,700' },
 
 			// This one is a pain in the ass to make it customizable, so you should edit it manually
-			{ type: 'application/json+oembed', href: `${process.env.DOMAIN}/oembed.json` }
+			{ type: 'application/json+oembed', href: `/oembed.json` }
 		]
 	},
 	plugins: [
@@ -70,8 +59,17 @@ export default {
 		linkActiveClass: 'is-active',
 		linkExactActiveClass: 'is-active'
 	},
+	env: {
+		development: process.env.NODE_ENV !== 'production',
+		version: process.env.npm_package_version,
+		serviceName: Util.config.serviceName,
+		maxFileSize: Util.config.maxSize,
+		chunkSize: Util.config.chunkSize,
+		publicMode: Util.config.publicMode,
+		userAccounts: Util.config.userAccounts
+	},
 	axios: {
-		baseURL: `${process.env.DOMAIN}${process.env.ROUTE_PREFIX}`
+		baseURL: `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:5000'}/api`
 	},
 	build: {
 		extractCSS: process.env.NODE_ENV === 'production',
@@ -80,11 +78,8 @@ export default {
 				autoprefixer
 			}
 		},
-		extend(config, { isClient, isDev }) {
+		extend(config, { isDev }) {
 			// Extend only webpack config for client-bundle
-			if (isClient) {
-				jetpack.write('dist/config.json', clientConfig);
-			}
 			if (isDev) {
 				config.devtool = 'source-map';
 			}
diff --git a/src/site/store/admin.js b/src/site/store/admin.js
index 4f814b5..51213b7 100644
--- a/src/site/store/admin.js
+++ b/src/site/store/admin.js
@@ -11,7 +11,6 @@ export const state = () => ({
 		files: []
 	},
 	file: {},
-	settings: {},
 	statistics: {},
 	settingsSchema: {
 		type: null,
@@ -20,12 +19,6 @@ export const state = () => ({
 });
 
 export const actions = {
-	async fetchSettings({ commit }) {
-		const response = await this.$axios.$get('service/config');
-		commit('setSettings', response);
-
-		return response;
-	},
 	async fetchStatistics({ commit }, category) {
 		const url = category ? `service/statistics/${category}` : 'service/statistics';
 		const response = await this.$axios.$get(url);
@@ -105,9 +98,6 @@ export const actions = {
 };
 
 export const mutations = {
-	setSettings(state, { config }) {
-		state.settings = config;
-	},
 	setStatistics(state, { statistics, category }) {
 		if (category) {
 			state.statistics[category] = statistics[category];
diff --git a/src/site/store/config.js b/src/site/store/config.js
index c17632d..623e324 100644
--- a/src/site/store/config.js
+++ b/src/site/store/config.js
@@ -1,18 +1,11 @@
 export const state = () => ({
-	development: true,
-	version: '4.0.0',
-	URL: 'http://localhost:8080',
-	baseURL: 'http://localhost:8080/api',
-	serviceName: '',
-	maxFileSize: 100,
-	chunkSize: 90,
-	maxLinksPerAlbum: 5,
-	publicMode: false,
-	userAccounts: false
+	development: process.env.development,
+	version: process.env.version,
+	URL: process.env.development ? 'http://localhost:5000' : '/',
+	baseURL: `${process.env.development ? 'http://localhost:5000' : ''}/api`,
+	serviceName: process.env.serviceName,
+	maxFileSize: process.env.maxFilesize,
+	chunkSize: process.env.chunkSize,
+	publicMode: process.env.publicMode,
+	userAccounts: process.env.userAccounts
 });
-
-export const mutations = {
-	set(state, config) {
-		Object.assign(state, config);
-	}
-};