electron adjustments

package.json

@@ -244,5 +244,6 @@
         "height": 380
       }
     }
-  }
-}
+  },
+  "packageManager": "[email protected]"
+}

public/app/protocol.js

@@ -1,11 +1,11 @@
-const { app } = require('electron')
+const { app, BrowserWindow } = require('electron')
 const path = require('path')
 
 const setupProtocol = () => {
-if (require('electron-squirrel-startup')) {
+  if (require('electron-squirrel-startup')) {
     app.quit()
-    }
-if (process.defaultApp) {
+  }
+  if (process.defaultApp) {
     if (process.argv.length >= 2) {
       app.setAsDefaultProtocolClient('ledfx', process.execPath, [
         path.resolve(process.argv[1])
@@ -16,28 +16,30 @@ if (process.defaultApp) {
   }
 }
 
-const handleProtocol = (wind, gotTheLock, ready) => {
-    if (process.platform === 'win32') {
-        if (!gotTheLock) {
-          app.quit()
-        } else {
-          app.on('second-instance', (event, commandLine, workingDirectory) => {
-            if (wind) {
-              if (wind.isMinimized()) wind.restore()
-              wind.focus()
-              wind.webContents.send('fromMain', [
-                'protocol',
-                JSON.stringify({ event, commandLine, workingDirectory })
-              ])
-            }
-          })
-          ready()
-          app.on('open-url', (event, url) => console.log(event, url))
+const handleProtocol = (getWind, gotTheLock, ready) => {
+  if (process.platform === 'win32') {
+    if (!gotTheLock) {
+      app.quit()
+    } else {
+      app.on('second-instance', (event, commandLine, workingDirectory) => {
+        const wind = getWind()
+        console.log(commandLine, wind)
+        if (wind) {
+          if (wind.isMinimized()) wind.restore()
+          wind.webContents.send('fromMain', [
+            'protocol',
+            JSON.stringify({ event, commandLine, workingDirectory })
+          ])
+          wind.focus()
         }
-      } else {
-        ready()
-        app.on('open-url', (event, url) => console.log(event, url))
-      }
+      })
+      ready()
+      app.on('open-url', (event, url) => console.log(event, url))
+    }
+  } else {
+    ready()
+    app.on('open-url', (event, url) => console.log(event, url))
+  }
 }
 
-module.exports = { setupProtocol, handleProtocol }
+module.exports = { setupProtocol, handleProtocol }

public/electron.js

@@ -40,8 +40,11 @@ const ready = () =>
     require('@electron/remote/main').enable(wind.webContents)
 
     wind.webContents.setWindowOpenHandler(({ url }) => {
-      if (url.includes(' https://accounts.spotify.com/authorize')) {
+      if (url.includes(' https://accounts.spotify.com/authorize') 
+      // || url.includes('https://strapi.yeonv.com/connect/github?callback')
+      ) {
         shell.openExternal(url)
+        // return { action: 'deny' }
       }
       return { action: 'allow' }
     })
@@ -60,7 +63,7 @@ const ready = () =>
     })
   })
 
-handleProtocol(wind, gotTheLock, ready)
+handleProtocol(() => wind, gotTheLock, ready)
 
 app.on('window-all-closed', () => {
   closeAllSubs(wind, subpy, subprocesses)

src/App.tsx

@@ -16,6 +16,7 @@ import SpotifyProvider from './components/Integrations/Spotify/SpotifyProvider'
 import { ledfxThemes, ledfxTheme, common } from './themes/AppThemes'
 import xmas from './assets/xmas.png'
 import newyear from './assets/fireworks.jpg'
+import login from './utils/login'
 
 export default function App() {
   const { height, width } = useWindowDimensions()
@@ -93,6 +94,7 @@ export default function App() {
       console.log(parameters[1])
     }
     if (parameters[0] === 'protocol') {
+      console.log('protocol', parameters[1])
       setProtoCall(JSON.parse(parameters[1]).commandLine.pop())
     }
     if (parameters[0] === 'snackbar') {
@@ -126,7 +128,7 @@ export default function App() {
 
   useEffect(() => {
     if (protoCall !== '') {
-      showSnackbar('info', `External call: ${protoCall}`)
+      // showSnackbar('info', `External call: ${protoCall}`)
       const proto = protoCall.split('/').filter((n) => n)
       // eslint-disable-next-line no-console
       console.table({
@@ -144,6 +146,12 @@ export default function App() {
           proto[2].replace('?code=', '').replace('#%2FIntegrations%3F', ''),
           { expires: expDate }
         )
+      } else if (proto[1] === 'auth') {
+        login(proto.join().split('redirect?')[1]).then(() => {
+          window.location.reload()
+        })
+      } else {
+        showSnackbar('info', `External call: ${protoCall}`)
       }
       setProtoCall('')
     }

src/components/Bars/BarTop.tsx

@@ -24,10 +24,11 @@ import {
   Menu,
   MenuItem,
   ListItemIcon,
-  Button
+  Button,
+  useTheme
 } from '@mui/material'
 import { styled } from '@mui/styles'
-import { useTheme } from '@mui/material/styles'
+
 import useStore from '../../store/useStore'
 import { drawerWidth, ios } from '../../utils/helpers'
 import TourDevice from '../Tours/TourDevice'
@@ -150,9 +151,10 @@ const Title = (pathname: string, latestTag: string, virtuals: any) => {
 const TopBar = () => {
   // const classes = useStyles();
   const navigate = useNavigate()
-
   const theme = useTheme()
 
+  const [loggingIn, setLogginIn] = useState(false)
+
   const open = useStore((state) => state.ui.bars && state.ui.bars?.leftBar.open)
   const latestTag = useStore((state) => state.ui.latestTag)
   const setLatestTag = useStore((state) => state.ui.setLatestTag)
@@ -471,27 +473,41 @@ const TopBar = () => {
 
                 {features.cloud && (
                   <MenuItem
-                    onClick={(e) => {
+                    onClick={(e: any) => {
+                      e.preventDefault()
+                      setLogginIn(true)
                       if (isLogged) {
+                        setLogginIn(false)
                         logout(e)
                       } else if (
                         window.location.pathname.includes('hassio_ingress')
                       ) {
                         window.location.href = `https://strapi.yeonv.com/connect/github?callback=${window.location.origin}`
+                      } else if (isElectron()) {
+                        window.open(
+                          'https://strapi.yeonv.com/connect/github?callback=ledfx://auth/github/',
+                          '_blank',
+                          'noopener,noreferrer'
+                        )
                       } else {
                         window.open(
                           `https://strapi.yeonv.com/connect/github?callback=${window.location.origin}`,
                           '_blank',
                           'noopener,noreferrer'
                         )
-                        setTimeout(() => {
-                          window.location.reload()
-                        }, 5000)
                       }
                     }}
                   >
                     <ListItemIcon>
-                      {isLogged ? <Logout /> : <Login />}
+                      {isLogged ? (
+                        <Logout />
+                      ) : loggingIn ? (
+                        <Box sx={{ display: 'flex', marginLeft: 0.6 }}>
+                          <CircularProgress size="0.9rem" />
+                        </Box>
+                      ) : (
+                        <Login />
+                      )}
                     </ListItemIcon>
                     {isLogged ? 'Logout' : 'Login with Github'}
                   </MenuItem>

src/store/ui/storeCloud.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable no-param-reassign */
+import { produce } from 'immer'
+import type { IStore } from '../useStore'
+
+const storeCloud = (set: any) => ({
+  loginDialog: false,
+  setLoginDialog: (open: boolean) => {
+    set(
+      produce((state: IStore) => {
+        state.loginDialog = open
+      }),
+      false,
+      'cloud/setLoginDialog'
+    )
+  }
+})
+
+export default storeCloud

src/store/useStore.ts

@@ -11,6 +11,7 @@ import storeDialogs from './ui/storeDialogs'
 import storeSpotify from './ui/storeSpotify'
 import storeQLC from './ui/storeQLC'
 import storeWebAudio from './ui/storeWebAudio'
+import storeCloud from './ui/storeCloud'
 import storeYoutube from './ui/storeYoutube'
 import storeDevices from './api/storeDevices'
 import storeVirtuals from './api/storeVirtuals'
@@ -57,7 +58,9 @@ const useStore = create(
           ...storePresets(set),
           ...storeConfig(set),
           ...storeActions(set),
-          ...storeIntegrationsSpotify(set)
+          ...storeIntegrationsSpotify(set),
+
+          ...storeCloud(set)
         })
       ),
       {

src/utils/login.ts

@@ -0,0 +1,37 @@
+import axios from 'axios'
+
+const cloud = axios.create({
+  baseURL: 'https://strapi.yeonv.com'
+})
+
+const login = async (search: string) => {
+  await fetch(`https://strapi.yeonv.com/auth/github/callback?${search}`)
+    .then((res) => {
+      if (res.status !== 200) {
+        throw new Error(`Couldn't login to Strapi. Status: ${res.status}`)
+      }
+      return res
+    })
+    .then((res) => res.json())
+    .then(async (res) => {
+      localStorage.setItem('jwt', res.jwt)
+      localStorage.setItem('username', res.user.username)
+      const me = await cloud.get('users/me', {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('jwt')}`
+        }
+      })
+      const user = await me.data
+      localStorage.setItem('ledfx-cloud-userid', user.id)
+      localStorage.setItem('ledfx-cloud-role', user.role.type)
+      // setTimeout(() => {
+      //   return isElectron() ? window.close() : history('/devices')
+      // }, 2000)
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-console
+      console.log(err)
+    })
+}
+
+export default login

yarn3.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+pnpFallbackMode: all