Implemented arl login, settings loading and fixed toast display

src/app.js

@@ -49,9 +49,9 @@ async function startApp() {
 			let result
 
 			if (accountNum !== 0) {
-				result = await fetchData('login', { arl, force: true, child: accountNum || 0 })
+				result = await fetchData('login-arl', { arl, force: true, child: accountNum || 0 }, 'POST')
 			} else {
-				result = await fetchData('login', { arl })
+				result = await fetchData('login-arl', { arl }, 'POST')
 			}
 
 			loggedIn(result)

src/components/pages/Settings.vue

@@ -959,7 +959,7 @@ export default {
 			let newArl = this.$refs.loginInput.value.trim()
 
 			if (newArl && newArl !== this.arl) {
-				const res = await fetchData('login', { arl: newArl, force: true, child: this.accountNum })
+				const res = await fetchData('login-arl', { arl: newArl, force: true, child: this.accountNum }, 'POST')
 				this.loggedInViaDeezer(res.arl)
 			}
 		},

src/data/settings.js

@@ -1,4 +1,4 @@
-import { socket } from '@/utils/socket'
+import { fetchData } from '@/utils/api'
 
 let settingsData = {}
 let defaultSettingsData = {}
@@ -6,24 +6,16 @@ let spotifyCredentials = {}
 
 let cached = false
 
-export function getSettingsData() {
-	if (cached) {
-		return { settingsData, defaultSettingsData, spotifyCredentials }
-	} else {
-		socket.emit('get_settings_data')
-
-		return new Promise((resolve, reject) => {
-			socket.on('init_settings', (settings, credentials, defaults) => {
-				settingsData = settings
-				defaultSettingsData = defaults
-				spotifyCredentials = credentials
+export async function getSettingsData() {
+	if (!cached) {
+		let data = await fetchData('getSettings')
+		let { settings, defaultSettings, spotifySettings } = data
 		// cached = true
-
-				socket.off('init_settings')
-				resolve({ settingsData, defaultSettingsData, spotifyCredentials })
-			})
-		})
+		settingsData = settings
+		defaultSettingsData = defaultSettings
+		spotifyCredentials = spotifySettings || {}
 	}
+	return { settingsData, defaultSettingsData, spotifyCredentials }
 }
 
 /**

src/utils/api.js

@@ -1,11 +1,11 @@
-export function fetchData(key, data = {}) {
+export function fetchData(key, data = {}, method = 'GET') {
 	const url = new URL(`${window.location.origin}/api/${key}`)
 
 	Object.keys(data).forEach(key => {
 		url.searchParams.append(key, data[key])
 	})
 
-	return fetch(url.href)
+	return fetch(url.href, {method})
 		.then(response => response.json())
 		.catch(() => {})
 }

src/utils/toasts.js

@@ -22,23 +22,31 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
 				const messages = toast.querySelectorAll('.toast-message')
 
 				messages.forEach(message => {
-					message.innerHTML = msg
+					message.innerText = msg
 				})
 			})
 		}
 
 		if (icon) {
+			let iconNode = document.createElement('span')
+			iconNode.classList.add('toast-icon')
+
 			if (icon == 'loading') {
-				icon = `<div class="circle-loader"></div>`
+				let loader = document.createElement('div')
+				loader.classList.add('circle-loader')
+				iconNode.appendChild(loader)
 			} else {
-				icon = `<i class="material-icons">${icon}</i>`
+				let materialIcon = document.createElement('i')
+				materialIcon.classList.add('material-icons')
+				materialIcon.appendChild(document.createTextNode(icon))
+				iconNode.appendChild(materialIcon)
 			}
 
 			toastElement.forEach(toast => {
 				const icons = toast.querySelectorAll('.toast-icon')
 
 				icons.forEach(toastIcon => {
-					toastIcon.innerHTML = icon
+					toastIcon.parentNode.replaceChild(iconNode, toastIcon)
 				})
 			})
 		}
@@ -54,17 +62,31 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
 			}, 3000)
 		}
 	} else {
+		let iconNode = document.createElement('span')
+		iconNode.classList.add('toast-icon')
 		if (icon == null) {
-			icon = ''
+			iconNode.appendChild(document.createTextNode(''))
 		} else if (icon == 'loading') {
-			icon = `<div class="circle-loader"></div>`
+			let loader = document.createElement('div')
+			loader.classList.add('circle-loader')
+			iconNode.appendChild(loader)
 		} else {
-			icon = `<i class="material-icons">${icon}</i>`
+			let materialIcon = document.createElement('i')
+			materialIcon.classList.add('material-icons')
+			materialIcon.appendChild(document.createTextNode(icon))
+			iconNode.appendChild(materialIcon)
 		}
+		let messageNode = document.createElement('span')
+		messageNode.classList.add('toast-message')
+		messageNode.appendChild(document.createTextNode(msg))
+
+		let toastNode = document.createElement('toast')
+		toastNode.appendChild(iconNode)
+		toastNode.appendChild(messageNode)
 
 		let toastObj = Toastify({
 			...sharedOptions,
-			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
+			node: toastNode,
 			duration: dismiss ? 3000 : 0,
 			className: dismiss ? 'dismissable' : '',
 			onClick: function() {