Move auth_redirect and API base URL to global variables via the mixin.

src/App.vue

@@ -1,9 +1,8 @@
 <template>
 	<div class="maximize_size">
-		<LoginCard v-if="!is_authed" :redirect="auth.redirect" />
+		<LoginCard v-if="!is_authed" />
 		<MainView
 			v-else
-			:auth_redirect="auth.redirect"
 			:preview_mode="is_preview"
 			:dev_mode="is_dev"
 		/>
@@ -24,11 +23,6 @@ export default {
 		"LoginCard": LoginCard,
 		"MainView": MainView
 	},
-	data() { return {
-		auth: {
-			redirect: process.env.NODE_ENV === `production` ? `https://oliver.akins.me/top-lists` : `http://localhost:8080`
-		}
-	} },
 	computed: {
 		is_dev() {
 			let params = new URLSearchParams(window.location.search.slice(1));

src/components/ControlBar.vue

@@ -93,17 +93,9 @@ export default {
 			type: Boolean,
 			required: true,
 		},
-		api_url: {
-			type: String,
-			required: true,
-		},
 		token: {
 			type: String,
 			required: true,
-		},
-		auth_redirect: {
-			type: String,
-			required: true,
 		}
 	},
 	components: {

src/components/LoginView.vue

@@ -16,12 +16,6 @@
 <script>
 export default {
 	name: 'LoginView',
-	props: {
-		redirect: {
-			type: String,
-			required: true,
-		}
-	},
 	data() { return {
 		alert: `We will only be able to access your top tracks and artists, nothing else. This is also only done on your browser. Our servers do not see any of the data from your account.`,
 		auth_base: `https://accounts.spotify.com/authorize`,
@@ -35,7 +29,7 @@ export default {
 			let params = [
 				`client_id=${this.client_id}`,
 				`response_type=token`,
-				`redirect_uri=${encodeURIComponent(this.redirect)}`,
+				`redirect_uri=${encodeURIComponent(this.auth_redirect)}`,
 				`scope=${encodeURIComponent(this.scopes.join(" "))}`,
 				`show_dialog=${this.show_dialog}`
 			];

src/components/MainView.vue

@@ -3,7 +3,6 @@
 		<Control
 			:dev="dev_mode"
 			:preview="preview_mode"
-			:api_url="api_base"
 			:auth_redirect="auth_redirect"
 			:token="get_token()"
 			:data_exists="data.length !== 0"
@@ -39,10 +38,6 @@ export default {
 		dev_mode: {
 			type: Boolean,
 			required: true,
-		},
-		auth_redirect: {
-			type: String,
-			required: true,
 		}
 	},
 	components: {
@@ -54,7 +49,6 @@ export default {
 		config: {},
 		data: [],
 		error: ``,
-		api_base: `https://api.spotify.com/v1`,
 	};},
 	computed: {
 		items() {
@@ -70,7 +64,7 @@ export default {
 			console.log("Handling the export");
 		},
 		get_data(config) {
-			let url = `${this.api_base}/me/top/${config.type.toLowerCase()}`;
+			let url = `${this.api_url}/me/top/${config.type.toLowerCase()}`;
 
 			let limit = config.limit || 10;
 

src/main.js

@@ -12,6 +12,10 @@ Vue.use(VueEllipseProgress, `percent`);
 
 // global mixings
 Vue.mixin({
+	data() {return {
+		api_url: `https://api.spotify.com/v1`,
+		auth_redirect: process.env.NODE_ENV === `production` ? `https://oliver.akins.me/top-lists` : `http://localhost:8080`,
+	}},
 	methods: {
 		css_var(var_name) {
 			return getComputedStyle(document.documentElement).getPropertyValue(var_name);