Implemented inApp login and accessToken fallback

src/app.js

@@ -21,7 +21,7 @@ import router from '@/router'
 import store from '@/store'
 
 import { socket } from '@/utils/socket'
-import { fetchData } from '@/utils/api'
+import { fetchData, postToServer } from '@/utils/api'
 import { toast } from '@/utils/toasts'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
@@ -40,12 +40,14 @@ async function startApp() {
 	store.dispatch('setAppInfo', connectResponse.update).catch(console.error)
 
 	let arl = localStorage.getItem('arl')
+	const accessToken = localStorage.getItem('accessToken')
 
 	if (connectResponse.autologin) {
 		console.info('Autologin')
 		const accountNum = localStorage.getItem('accountNum')
 
-		if (arl) {
+		async function login(arl, accountNum) {
+			toast(i18n.t('toasts.loggingIn'), 'loading', false, 'login-toast')
 			arl = arl.trim()
 			let result
 
@@ -55,6 +57,19 @@ async function startApp() {
 				result = await fetchData('login-arl', { arl }, 'POST')
 			}
 
+			return result
+		}
+
+		if (arl) {
+			let result = await login(arl, accountNum)
+			if (result.status === 0 && accessToken) {
+				const { arl: newArl } = await postToServer('loginWithCredentials', { accessToken })
+				if (newArl && newArl !== arl) {
+					arl = newArl
+					store.dispatch('setARL', { arl })
+				}
+				result = await login(newArl, accountNum)
+			}
 			loggedIn(result)
 		}
 	} else {
@@ -68,7 +83,7 @@ function initClient() {
 }
 
 document.addEventListener('DOMContentLoaded', startApp)
-if (window.api){
+if (window.api) {
 	initClient()
 }
 
@@ -152,22 +167,6 @@ function loggedIn(data) {
 	}
 }
 
-/*
-socket.on('logging_in', function() {
-	toast(i18n.t('toasts.loggingIn'), 'loading', false, 'login-toast')
-})
-
-socket.on('logged_in', function(data) {
-
-})
-
-socket.on('logged_out', function() {
-	toast(i18n.t('toasts.loggedOut'), 'done', true, 'login-toast')
-
-	store.dispatch('logout')
-})
-*/
-
 socket.on('restoringQueue', function () {
 	toast(i18n.t('toasts.restoringQueue'), 'loading', false, 'restoring_queue')
 })
@@ -212,7 +211,7 @@ socket.on('alreadyInQueue', function (data) {
 	toast(i18n.t('toasts.alreadyInQueue', { item: data.title }), 'playlist_add_check')
 })
 
-socket.on('loginNeededToDownload', function (data) {
+socket.on('loginNeededToDownload', function () {
 	toast(i18n.t('toasts.loginNeededToDownload'), 'report')
 })
 

src/components/pages/Settings.vue

@@ -54,21 +54,21 @@
 					{{ $t('settings.login.login') }}
 				</a>
 
-				<button class="btn btn-primary" style="width: 100%" @click="login">
+				<button class="btn btn-primary" style="width: 100%" @click="loginButton">
 					{{ $t('settings.login.arl.update') }}
 				</button>
 			</div>
 		</div>
 
-		<div class="settings-group">
+		<div v-if="!isLoggedIn" class="settings-group">
 			<h3 class="settings-group__header">
 				<i class="material-icons">person</i>{{ $t('settings.loginWithCredentials.title') }}
 			</h3>
 
 			<form ref="loginWithCredentialsForm" class="my-5 space-y-5" @submit.prevent="loginWithCredentials">
 				<label>
-					<span>Username</span>
+					<span>E-mail</span>
-					<input type="text" name="username" />
+					<input type="text" name="email" />
 				</label>
 				<label>
 					<span>Password</span>
@@ -832,6 +832,7 @@ export default {
 	computed: {
 		...mapGetters({
 			arl: 'getARL',
+			accessToken: 'getAccessToken',
 			user: 'getUser',
 			isLoggedIn: 'isLoggedIn',
 			clientMode: 'getClientMode',
@@ -896,22 +897,28 @@ export default {
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)
 		socket.on('familyAccounts', this.initAccounts)
+		if (this.clientMode){
 			window.api.receive('downloadFolderSelected', this.downloadFolderSelected)
 			window.api.receive('applogin_arl', this.loggedInViaDeezer)
+		}
 
 		this.$on('hook:destroyed', () => {
 			socket.off('updateSettings')
 			socket.off('accountChanged')
 			socket.off('familyAccounts')
-			socket.off('applogin_arl')
 		})
 	},
 	methods: {
 		...mapActions({
 			dispatchARL: 'setARL',
+			dispatchAccessTocken: 'setAccessToken',
+			dispatchUser: 'setUser',
+			removeARL: 'removeARL',
 			setPreviewVolume: 'setPreviewVolume',
 			setSlimDownloads: 'setSlimDownloads',
-			setSlimSidebar: 'setSlimSidebar'
+			setSlimSidebar: 'setSlimSidebar',
+			dispatchLogout: 'logout',
+			dispatchLogin: 'login'
 		}),
 		onTemplateVariableClick(templateName) {
 			copyToClipboard(templateName)
@@ -978,22 +985,48 @@ export default {
 			// this.login()
 			// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
 		},
-		async login() {
+		async login(arl, force = false) {
+			toast(this.$t('toasts.loggingIn'), 'loading', false, 'login-toast')
+			const data = await fetchData('login-arl', { arl, force, child: this.accountNum }, 'POST')
+			const { status, user } = data
+			switch (status) {
+				case 1:
+				case 3:
+					// Login ok
+					toast(this.$t('toasts.loggedIn'), 'done', true, 'login-toast')
+					this.dispatchLogin(data)
+					break
+				case 2:
+					// Already logged in
+					toast(this.$t('toasts.alreadyLogged'), 'done', true, 'login-toast')
+					this.dispatchUser(user)
+					break
+				case 0:
+					// Login failed
+					toast(this.$t('toasts.loginFailed'), 'close', true, 'login-toast')
+					this.removeARL()
+					break
+				case -1:
+					toast(this.$t('toasts.deezerNotAvailable'), 'close', true, 'login-toast')
+			}
+		},
+		async loginButton() {
 			const newArl = this.$refs.loginInput.value.trim()
 
 			if (newArl && newArl !== this.arl) {
-				const res = await fetchData('login-arl', { arl: newArl, force: true, child: this.accountNum }, 'POST')
+				this.login(newArl, true)
-				this.loggedInViaDeezer(res.arl)
 			}
 		},
 		async loginWithCredentials() {
 			const fromLoginForm = getFormItem(this.$refs.loginWithCredentialsForm)
 
-			const { username } = fromLoginForm('username')
+			const { email } = fromLoginForm('email')
 			const { password } = fromLoginForm('password')
 
-			const response = await postToServer('loginWithCredentials', { username, password })
+			const { accessToken, arl } = await postToServer('loginWithCredentials', { email, password, accessToken: this.accessToken})
-			console.log({ response })
+
+			if (accessToken !== this.accessToken) this.dispatchAccessTocken({ accessToken })
+			if (arl) this.login(arl)
 		},
 		appLogin() {
 			window.api.send('applogin')
@@ -1011,8 +1044,13 @@ export default {
 		initAccounts(accounts) {
 			this.accounts = accounts
 		},
-		logout() {
+		async logout() {
-			socket.emit('logout')
+			const result = await postToServer('logout')
+			console.log(result)
+			if (result.logged_out) {
+				toast(this.$t('toasts.loggedOut'), 'done', true, 'login-toast')
+				this.dispatchLogout()
+			}
 		},
 		initSettings(settings, credentials) {
 			// this.loadDefaultSettings()

src/store/modules/login.js

@@ -1,5 +1,6 @@
 const getDefaultState = () => ({
 	arl: localStorage.getItem('arl') || '',
+	accessToken: localStorage.getItem('accessToken') || '',
 	status: null,
 	user: {
 		id: null,
@@ -28,6 +29,7 @@ const actions = {
 	},
 	logout({ commit }) {
 		localStorage.removeItem('arl')
+		localStorage.removeItem('accessToken')
 
 		commit('RESET_LOGIN')
 	},
@@ -42,11 +44,27 @@ const actions = {
 			localStorage.setItem('arl', arl)
 		}
 	},
+	setAccessToken({ commit }, payload) {
+		let { accessToken, saveOnLocalStorage } = payload
+
+		saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
+
+		commit('SET_ACCESS_TOKEN', accessToken)
+
+		if (saveOnLocalStorage) {
+			localStorage.setItem('accessToken', accessToken)
+		}
+	},
 	removeARL({ commit }) {
 		commit('SET_ARL', '')
 
 		localStorage.removeItem('arl')
 	},
+	removeAccessToken({ commit }) {
+		commit('SET_ACCESS_TOKEN', '')
+
+		localStorage.removeItem('accessToken')
+	},
 	setUser({ commit }, payload) {
 		commit('SET_USER', payload)
 	},
@@ -57,6 +75,7 @@ const actions = {
 
 const getters = {
 	getARL: state => state.arl,
+	getAccessToken: state => state.accessToken,
 	getUser: state => state.user,
 	getSpotifyUser: state => state.spotifyUser,
 	getClientMode: state => state.clientMode,
@@ -69,6 +88,9 @@ const mutations = {
 	SET_ARL(state, payload) {
 		state.arl = payload
 	},
+	SET_ACCESS_TOKEN(state, payload) {
+		state.accessToken = payload
+	},
 	SET_STATUS(state, payload) {
 		state.status = payload
 	},