wip: login data in store

src/app.js

@@ -10,7 +10,6 @@ import i18n from '@/plugins/i18n'
 import router from '@/router'
 import store from '@/store'
 
-import $ from 'jquery'
 import { socket } from '@/utils/socket'
 import { toast } from '@/utils/toasts'
 import { init as initTabs } from '@js/tabs.js'
@@ -48,24 +47,24 @@ window.addEventListener('pywebviewready', initClient)
 /* ===== Global shortcuts ===== */
 
 document.addEventListener('keyup', keyEvent => {
-	if (keyEvent.key == "Backspace" && keyEvent.ctrlKey){
+	if (keyEvent.key == 'Backspace' && keyEvent.ctrlKey) {
 		let searchbar = document.querySelector('#searchbar')
-		searchbar.value = ""
+		searchbar.value = ''
 		searchbar.focus()
 	}
 })
 
 document.addEventListener('paste', pasteEvent => {
-	pasteText = pasteEvent.clipboardData.getData('Text')
-	if (pasteEvent.target.localName != "input"){
-		if (isValidURL(pasteText)){
-			if (main_selected === 'analyzer_tab') {
+	let pasteText = pasteEvent.clipboardData.getData('Text')
+	if (pasteEvent.target.localName != 'input') {
+		if (isValidURL(pasteText)) {
+			if (window.main_selected === 'analyzer_tab') {
 				EventBus.$emit('linkAnalyzerTab:reset')
 				socket.emit('analyzeLink', pasteText)
 			} else {
 				Downloads.sendAddToQueue(pasteText)
 			}
-		}else{
+		} else {
 			let searchbar = document.querySelector('#searchbar')
 			searchbar.select()
 			searchbar.setSelectionRange(0, 99999)
@@ -98,72 +97,36 @@ socket.on('init_autologin', function() {
 })
 
 socket.on('logged_in', function(data) {
-	switch (data.status) {
+	const { status, user } = data
+	console.log('on logged')
+
+	switch (status) {
 		case 1:
 		case 3:
+			// Login ok
 			toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast')
 
-			// Idea: set this whole object in the localStorage to read it in the future
-			// Other idea would be using vuex
-
-			if (data.arl) {
-				localStorage.setItem('arl', data.arl)
-				// $('#login_input_arl').val(data.arl)
-			}
-
-			// ? What's this?
-			$('#open_login_prompt').hide()
-
-			if (data.user) {
-				$('#settings_username').text(data.user.name)
-				$('#settings_picture').attr(
-					'src',
-					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
-				)
-				$('#logged_in_info').removeClass('hide')
-				// document.getElementById('logged_in_info').classList.remove('hide')
-			}
-			// $('#home_not_logged_in').addClass('hide')
-			document.getElementById('home_not_logged_in').classList.add('hide')
+			store.dispatch('login', data)
 			break
 		case 2:
+			// Already logged in
 			toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
 
-			if (data.user) {
-				$('#settings_username').text(data.user.name)
-				$('#settings_picture').attr(
-					'src',
-					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
-				)
-				// $('#logged_in_info').show()
-				// document.getElementById('logged_in_info').classList.remove('hide')
-				$('#logged_in_info').removeClass('hide')
-			}
-			document.getElementById('home_not_logged_in').classList.add('hide')
+			store.dispatch('setUser', user)
 			break
 		case 0:
+			// Login failed
 			toast(i18n.t('toasts.loginFailed'), 'close', true, 'login-toast')
-			localStorage.removeItem('arl')
-			$('#login_input_arl').val('')
-			$('#open_login_prompt').show()
-			$('#logged_in_info').addClass('hide')
-			// document.getElementById('logged_in_info').classList.add('hide')
-			$('#settings_username').text('Not Logged')
-			$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
-			document.getElementById('home_not_logged_in').classList.remove('hide')
+
+			store.dispatch('removeARL')
 			break
 	}
 })
 
 socket.on('logged_out', function() {
 	toast(i18n.t('toasts.loggedOut'), 'done', true, 'login-toast')
-	localStorage.removeItem('arl')
-	$('#login_input_arl').val('')
-	$('#open_login_prompt').show()
-	document.getElementById('logged_in_info').classList.add('hide')
-	$('#settings_username').text('Not Logged')
-	$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
-	document.getElementById('home_not_logged_in').classList.remove('hide')
+
+	store.dispatch('logout')
 })
 
 socket.on('restoringQueue', function() {
@@ -179,11 +142,11 @@ socket.on('currentItemCancelled', function(uuid) {
 })
 
 socket.on('startAddingArtist', function(data) {
-	toast(i18n.t('toasts.startAddingArtist', {artist: data.name}), 'loading', false, 'artist_' + data.id)
+	toast(i18n.t('toasts.startAddingArtist', { artist: data.name }), 'loading', false, 'artist_' + data.id)
 })
 
 socket.on('finishAddingArtist', function(data) {
-	toast(i18n.t('toasts.finishAddingArtist', {artist: data.name}), 'done', true, 'artist_' + data.id)
+	toast(i18n.t('toasts.finishAddingArtist', { artist: data.name }), 'done', true, 'artist_' + data.id)
 })
 
 socket.on('startConvertingSpotifyPlaylist', function(id) {
@@ -204,7 +167,7 @@ socket.on('queueError', function(queueItem) {
 })
 
 socket.on('alreadyInQueue', function(data) {
-	toast(i18n.t('toasts.alreadyInQueue', {item: data.title}), 'playlist_add_check')
+	toast(i18n.t('toasts.alreadyInQueue', { item: data.title }), 'playlist_add_check')
 })
 
 socket.on('loginNeededToDownload', function(data) {

src/components/TheHomeTab.vue

@@ -1,10 +1,15 @@
 <template>
 	<div id="home_tab" class="main_tabcontent" ref="root">
 		<h2 class="page_heading">{{ $t('globals.welcome') }}</h2>
-		<section id="home_not_logged_in" class="home_section" ref="notLogged">
+
+		<section class="home_section" ref="notLogged" v-if="!isLoggedIn">
 			<p id="home_not_logged_text">{{ $t('home.needTologin') }}</p>
-			<button type="button" name="button" @click="openSettings">{{ $t('home.openSettings') }}</button>
+			<!-- <button type="button" name="button" @click="openSettings">{{ $t('home.openSettings') }}</button> -->
+			<router-link tag="button" name="button" :to="{ name: 'Settings' }">
+				{{ $t('home.openSettings') }}
+			</router-link>
 		</section>
+
 		<section v-if="playlists.length" class="home_section">
 			<h3 class="section_heading">{{ $t('home.sections.popularPlaylists') }}</h3>
 			<div class="release_grid">
@@ -39,6 +44,7 @@
 				</div>
 			</div>
 		</section>
+
 		<section v-if="albums.length" class="home_section">
 			<h3 class="section_heading">{{ $t('home.sections.popularAlbums') }}</h3>
 			<div class="release_grid">
@@ -84,7 +90,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters(['getHomeData']),
+		...mapGetters(['getHomeData', 'isLoggedIn']),
 		needToWait() {
 			return this.getHomeData.albums.data.length === 0 && this.getHomeData.playlists.data.length === 0
 		}
@@ -93,9 +99,6 @@ export default {
 		artistView: showView.bind(null, 'artist'),
 		albumView: showView.bind(null, 'album'),
 		playlistView: showView.bind(null, 'playlist'),
-		openSettings() {
-			document.getElementById('main_settings_tablink').click()
-		},
 		addToQueue(e) {
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
@@ -127,19 +130,11 @@ export default {
 		}
 	},
 	mounted() {
-		console.log('home mounted')
-		// this.$refs.root.style.display = 'block'
-
-		if (localStorage.getItem('arl')) {
-			this.$refs.notLogged.classList.add('hide')
-		}
+		// if (localStorage.getItem('arl')) {
+		// 	this.$refs.notLogged.classList.add('hide')
+		// }
 
 		this.checkIfWaitData(this.getHomeData)
-		// socket.on('init_home', this.initHome)
-	},
-	beforeDestroy() {
-		console.log('home bef dest')
-		// this.$refs.root.style.display = 'none'
 	}
 }
 </script>

src/components/TheSettingsTab.vue

@@ -2,14 +2,17 @@
 	<div id="settings_tab" class="main_tabcontent fixed_footer" ref="root">
 		<h2 class="page_heading">{{ $t('settings.title') }}</h2>
 
-		<div id="logged_in_info" ref="loggedInInfo">
-			<img id="settings_picture" src="" alt="Profile Picture" ref="userpicture" class="circle" />
+		<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
+			<img id="settings_picture" :src="pictureHref" alt="Profile Picture" ref="userpicture" class="circle" />
+
 			<i18n path="settings.login.loggedIn" tag="p">
-				<strong place="username" id="settings_username" ref="username"></strong>
+				<strong place="username" id="settings_username" ref="username">{{ user.name || 'Non loggato ahah' }}</strong>
 			</i18n>
+
 			<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.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>
+				<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
 			</select>
 		</div>
 
@@ -18,7 +21,14 @@
 				<i class="material-icons">person</i>{{ $t('settings.login.title') }}
 			</h3>
 			<div class="inline-flex">
-				<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
+				<input
+					autocomplete="off"
+					type="password"
+					:value="arl"
+					id="login_input_arl"
+					ref="loginInput"
+					placeholder="ARL"
+				/>
 				<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
@@ -600,6 +610,7 @@
 		</footer>
 	</div>
 </template>
+
 <style lang="scss">
 .locale-flag {
 	width: 60px;
@@ -627,16 +638,16 @@
 </style>
 
 <script>
-import Vue from 'vue'
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
+
 import { toast } from '@/utils/toasts'
 import { socket } from '@/utils/socket'
 import EventBus from '@/utils/EventBus'
 import flags from '@/utils/flags'
 
 export default {
-	name: 'the-settings-tab',
-	data: () => ({
+	data() {
+		return {
 			flags,
 			currentLocale: 'en',
 			locales: [],
@@ -653,19 +664,42 @@ export default {
 			previewVolume: window.vol,
 			accountNum: 0,
 			accounts: []
+		}
+	},
+	computed: {
+		...mapGetters({
+			getSettings: 'getSettings',
+			getCredentials: 'getCredentials',
+			getDefaultSettings: 'getDefaultSettings',
+			arl: 'getARL',
+			user: 'getUser',
+			isLoggedIn: 'isLoggedIn'
 		}),
+		needToWait() {
+			return Object.keys(this.getSettings).length === 0
+		},
+		changeSlimDownloads: {
+			get() {
+				return this.slimDownloads
+			},
+			set(wantSlimDownloads) {
+				this.slimDownloads = wantSlimDownloads
+				document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
+				localStorage.setItem('slimDownloads', wantSlimDownloads)
+			}
+		},
+		pictureHref() {
+			// Default image: https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg
+			return `https://e-cdns-images.dzcdn.net/images/user/${this.user.picture}/125x125-000000-80-0-0.jpg`
+		}
+	},
 	mounted() {
-		console.log('settings mounted')
-
 		this.locales = this.$i18n.availableLocales
 
 		this.revertSettings()
 		this.revertCredentials()
 
-		// EventBus.$on('settingsTab:revertSettings', this.revertSettings)
-		// EventBus.$on('settingsTab:revertCredentials', this.revertCredentials)
-
-		this.$refs.loggedInInfo.classList.add('hide')
+		// this.$refs.loggedInInfo.classList.add('hide')
 
 		let storedLocale = localStorage.getItem('locale')
 
@@ -676,9 +710,9 @@ export default {
 
 		let storedArl = localStorage.getItem('arl')
 
-		if (storedArl) {
-			this.$refs.loginInput.value = storedArl.trim()
-		}
+		// if (storedArl) {
+		// 	this.$refs.loginInput.value = storedArl.trim()
+		// }
 
 		let storedAccountNum = localStorage.getItem('accountNum')
 
@@ -712,23 +746,11 @@ export default {
 		socket.on('downloadFolderSelected', this.downloadFolderSelected)
 		socket.on('applogin_arl', this.setArl)
 	},
-	computed: {
-		...mapGetters(['getSettings', 'getCredentials', 'getDefaultSettings']),
-		needToWait() {
-			return Object.keys(this.getSettings).length === 0
-		},
-		changeSlimDownloads: {
-			get() {
-				return this.slimDownloads
-			},
-			set(wantSlimDownloads) {
-				this.slimDownloads = wantSlimDownloads
-				document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
-				localStorage.setItem('slimDownloads', wantSlimDownloads)
-			}
-		}
-	},
+
 	methods: {
+		...mapActions({
+			dispatchARL: 'setARL'
+		}),
 		waitSettings() {
 			if (this.needToWait) {
 				// Checking if the saving of the settings is completed
@@ -802,7 +824,8 @@ export default {
 		},
 		login() {
 			let arl = this.$refs.loginInput.value.trim()
-			if (arl != '' && arl != localStorage.getItem('arl')) {
+
+			if (arl !== '' && arl !== localStorage.getItem('arl')) {
 				socket.emit('login', arl, true, this.accountNum)
 			}
 		},
@@ -812,7 +835,10 @@ export default {
 			}
 		},
 		setArl(arl) {
-			this.$refs.loginInput.value = arl
+			console.log({ arl })
+			// this.$refs.loginInput.value = arl
+			this.dispatchARL(arl)
+
 			this.login()
 		},
 		changeAccount() {

src/store/index.js

@@ -8,6 +8,7 @@ import spotifyCredentials from '@/store/modules/spotifyCredentials'
 import charts from '@/store/modules/charts'
 import favorites from '@/store/modules/favorites'
 import about from '@/store/modules/about'
+import login from '@/store/modules/login'
 
 // Load Vuex
 Vue.use(Vuex)
@@ -21,7 +22,8 @@ export default new Vuex.Store({
 		spotifyCredentials,
 		charts,
 		favorites,
-		about
+		about,
+		login
 	},
 	strict: process.env.NODE_ENV !== 'production'
 })

src/store/modules/login.js

@@ -0,0 +1,75 @@
+const getDefaultState = () => {
+	return {
+		arl: '',
+		status: null,
+		user: {
+			id: null,
+			name: '',
+			picture: ''
+		}
+	}
+}
+
+const state = getDefaultState()
+
+const actions = {
+	login({ commit }, payload) {
+		const { arl, user, status } = payload
+
+		commit('SET_ARL', arl)
+		commit('SET_USER', user)
+		commit('SET_STATUS', status)
+	},
+	logout({ commit }) {
+		console.log('logout')
+		commit('RESET_LOGIN')
+
+		localStorage.removeItem('arl')
+	},
+	setARL({ commit }, payload) {
+		const { arl, saveOnLocalStorage } = payload
+
+		commit('SET_ARL', arl)
+
+		if (saveOnLocalStorage) {
+			localStorage.setItem('arl', arl)
+		}
+	},
+	removeARL({ commit }) {
+		commit('SET_ARL', '')
+
+		localStorage.removeItem('arl')
+	},
+	setUser({ commit }, payload) {
+		commit('SET_USER', payload)
+	}
+}
+
+const getters = {
+	getARL: state => state.arl,
+	getUser: state => state.user,
+	isLoggedIn: state => [1, 2, 3].indexOf(state.status) !== -1
+}
+
+const mutations = {
+	SET_ARL(state, payload) {
+		state.arl = payload
+	},
+	SET_STATUS(state, payload) {
+		state.status = payload
+	},
+	SET_USER(state, payload) {
+		state.user = payload
+	},
+	RESET_LOGIN(state) {
+		// Needed for reactivity
+		Object.assign(state, getDefaultState())
+	}
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations
+}