Added support for family account in the frontend

public/index.html

@@ -579,6 +579,9 @@ <h2 class="page_heading">Settings</h2>
 								<img id="settings_picture" src="" alt="Profile Picture" class="circle" />
 								<p>You are logged in as <strong id="settings_username"></strong></p>
 								<button id="settings_btn_logout" @click="logout">Logout</button>
+								<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
+									<option v-for="(account, i) in accounts" :value="i.toString()">account.BLOG_NAME</option>
+								</select>
 							</div>
 
 							<div class="settings-group">

src/js/app.js

@@ -59,7 +59,14 @@ socket.on('logging_in', function () {
 
 socket.on('init_autologin', function () {
 	let arl = localStorage.getItem('arl')
-	if (arl) socket.emit('login', arl)
+	let accountNum = localStorage.getItem('accountNum')
+	if (arl){
+		if (accountNum != 0){
+			socket.emit('login', arl, true, accountNum)
+		}else{
+			socket.emit('login', arl)
+		}
+	}
 })
 
 socket.on('logged_in', function (data) {

src/js/modules/components/settings-tab.js

@@ -12,7 +12,9 @@ const SettingsTab = new Vue({
 		lastUser: '',
 		spotifyUser: '',
 		slimDownloads: false,
-		previewVolume: window.vol
+		previewVolume: window.vol,
+		accountNum: 0,
+		accounts: []
 	}),
 	computed: {
 		changeSlimDownloads: {
@@ -67,9 +69,24 @@ const SettingsTab = new Vue({
 		login() {
 			let arl = this.$refs.loginInput.value
 			if (arl != '' && arl != localStorage.getItem('arl')) {
-				socket.emit('login', arl, true)
+				socket.emit('login', arl, true, this.accountNum)
 			}
 		},
+		changeAccount(){
+			socket.emit('changeAccount', this.accountNum)
+		},
+		accountChanged(user, accountNum){
+			$('#settings_username').text(user.name)
+			$('#settings_picture').attr(
+				'src',
+				`https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
+			)
+			this.accountNum = accountNum
+			localStorage.setItem('accountNum', this.accountNum)
+		},
+		initAccounts(accounts){
+			this.accounts = accounts;
+		},
 		logout() {
 			socket.emit('logout')
 		},
@@ -91,6 +108,9 @@ const SettingsTab = new Vue({
 		if (localStorage.getItem('arl')) {
 			this.$refs.loginInput.value = localStorage.getItem('arl')
 		}
+		if (localStorage.getItem('accountNum')) {
+			this.accountNum = localStorage.getItem('accountNum')
+		}
 
 		let spotifyUser = localStorage.getItem('spotifyUser')
 
@@ -112,6 +132,8 @@ const SettingsTab = new Vue({
 
 		socket.on('init_settings', this.initSettings)
 		socket.on('updateSettings', this.updateSettings)
+		socket.on('accountChanged', this.accountChanged)
+		socket.on('familyAccounts', this.initAccounts)
 	}
 }).$mount('#settings_tab')