Implemented inApp login and accessToken fallback

This commit is contained in:
RemixDev 2021-05-28 15:09:55 +02:00
parent bab72e36d0
commit 8479bf328c
4 changed files with 102 additions and 43 deletions

File diff suppressed because one or more lines are too long

View File

@ -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 {
@ -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')
})

View File

@ -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>
<input type="text" name="username" />
<span>E-mail</span>
<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.loggedInViaDeezer(res.arl)
this.login(newArl, true)
}
},
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 })
console.log({ response })
const { accessToken, arl } = await postToServer('loginWithCredentials', { email, password, accessToken: this.accessToken})
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() {
socket.emit('logout')
async 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()

View File

@ -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
},