update and test something
This commit is contained in:
Kenta420
parent
3e3c92b0af
commit
ed90e1fd85
10 changed files with 147 additions and 15 deletions
|
|
@ -3,9 +3,13 @@
|
|||
*/
|
||||
{
|
||||
$schema: 'https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json',
|
||||
appId: 'com.forthvending.manager',
|
||||
appId: 'com.forthvending.taobin-recipe-manager',
|
||||
asar: true,
|
||||
productName: 'taobin-recipe-manager',
|
||||
protocols: {
|
||||
name: 'taobin-recipe-manager',
|
||||
schemes: ['taobin-electron']
|
||||
},
|
||||
directories: {
|
||||
output: 'release/${version}'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { app, BrowserWindow } from 'electron'
|
||||
import { app, BrowserWindow, ipcMain, shell } from 'electron'
|
||||
import path from 'node:path'
|
||||
|
||||
// The built directory structure
|
||||
|
|
@ -11,8 +11,9 @@ import path from 'node:path'
|
|||
// │ │ └── preload.js
|
||||
// │
|
||||
process.env.DIST = path.join(__dirname, '../dist')
|
||||
process.env.VITE_PUBLIC = app.isPackaged ? process.env.DIST : path.join(process.env.DIST, '../public')
|
||||
|
||||
process.env.VITE_PUBLIC = app.isPackaged
|
||||
? process.env.DIST
|
||||
: path.join(process.env.DIST, '../public')
|
||||
|
||||
let win: BrowserWindow | null
|
||||
// 🚧 Use ['ENV_NAME'] avoid vite:define plugin - Vite@2.x
|
||||
|
|
@ -22,15 +23,25 @@ function createWindow() {
|
|||
win = new BrowserWindow({
|
||||
icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
preload: path.join(__dirname, 'preload.js')
|
||||
}
|
||||
})
|
||||
|
||||
// Test active push message to Renderer-process.
|
||||
win.webContents.on('did-finish-load', () => {
|
||||
win?.webContents.send('main-process-message', (new Date).toLocaleString())
|
||||
win?.webContents.send('main-process-message', new Date().toLocaleString())
|
||||
})
|
||||
|
||||
if (process.defaultApp) {
|
||||
if (process.argv.length >= 2) {
|
||||
app.setAsDefaultProtocolClient('taobin-electron', process.execPath, [
|
||||
path.resolve(process.argv[1])
|
||||
])
|
||||
}
|
||||
} else {
|
||||
app.setAsDefaultProtocolClient('taobin-electron')
|
||||
}
|
||||
|
||||
if (VITE_DEV_SERVER_URL) {
|
||||
win.loadURL(VITE_DEV_SERVER_URL)
|
||||
} else {
|
||||
|
|
@ -57,4 +68,17 @@ app.on('activate', () => {
|
|||
}
|
||||
})
|
||||
|
||||
app.whenReady().then(createWindow)
|
||||
app.on('open-url', (_event, url) => {
|
||||
win?.webContents.send('deeplink', url)
|
||||
})
|
||||
|
||||
// Create mainWindow, load the rest of the app, etc...
|
||||
app.whenReady().then(() => {
|
||||
createWindow()
|
||||
})
|
||||
|
||||
// deeplink
|
||||
ipcMain.on('deeplink', (_event, url) => {
|
||||
// open browser
|
||||
shell.openExternal(url)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<script src="https://accounts.google.com/gsi/client" async></script>
|
||||
<title>Taobin Recipe Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "client-electron",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build && electron-builder",
|
||||
|
|
|
|||
11
client-electron/public/test.html
Normal file
11
client-electron/public/test.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="taobin-electron://test">test</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
import { BrowserRouter, Route, Routes } from 'react-router-dom'
|
||||
import { HashRouter, Route, Routes } from 'react-router-dom'
|
||||
import Home from './pages/Home'
|
||||
import AuthCallBack from './AuthCallBack'
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<HashRouter>
|
||||
<header>{/* header here */}</header>
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/callback" element={<AuthCallBack />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</BrowserRouter>
|
||||
</HashRouter>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
19
client-electron/src/AuthCallBack.tsx
Normal file
19
client-electron/src/AuthCallBack.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// this is the component that will be called by the backend after the user has logged in google
|
||||
// this component will take user info and save it to local storage
|
||||
// then emit a message to the main process to close the window
|
||||
const AuthCallBack: React.FC = () => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
|
||||
// emit message to main process
|
||||
window.opener.postMessage(
|
||||
{
|
||||
payload: 'loginSuccess',
|
||||
data: params
|
||||
},
|
||||
'*'
|
||||
)
|
||||
|
||||
return <div>it just call back</div>
|
||||
}
|
||||
|
||||
export default AuthCallBack
|
||||
28
client-electron/src/assets/google-color.svg
Normal file
28
client-electron/src/assets/google-color.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="-0.5 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<title>Google-color</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
|
||||
</defs>
|
||||
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Color-" transform="translate(-401.000000, -860.000000)">
|
||||
<g id="Google" transform="translate(401.000000, 860.000000)">
|
||||
<path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05">
|
||||
|
||||
</path>
|
||||
<path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335">
|
||||
|
||||
</path>
|
||||
<path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853">
|
||||
|
||||
</path>
|
||||
<path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -16,3 +16,8 @@ postMessage({ payload: 'removeLoading' }, '*')
|
|||
window.ipcRenderer.on('main-process-message', (_event, message) => {
|
||||
console.log(message)
|
||||
})
|
||||
|
||||
// Use deep link
|
||||
window.ipcRenderer.on('deeplink', (_event, url) => {
|
||||
console.log(url)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,49 @@
|
|||
import React from 'react'
|
||||
import googleLogo from '../assets/google-color.svg'
|
||||
|
||||
const Home: React.FC = () => {
|
||||
console.log(import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL)
|
||||
|
||||
const loginWithGoogle = () => {
|
||||
// if is web mode then use window.open
|
||||
// if is electron mode then use ipcRenderer.send to use deep link method
|
||||
if (import.meta.env.TAOBIN_RECIPE_MANAGER_MODE === 'web') {
|
||||
// open new window and listen to message from window.opener
|
||||
const newWindow = window.open(
|
||||
import.meta.env.TAOBIN_RECIPE_MANAGER_SERVER_URL,
|
||||
'_blank',
|
||||
'width=500,height=600'
|
||||
)
|
||||
|
||||
// listen to message from new window
|
||||
window.addEventListener('message', event => {
|
||||
if (event.data.payload === 'loginSuccess') {
|
||||
// close new window
|
||||
newWindow?.close()
|
||||
|
||||
console.log(event.data)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
window.ipcRenderer.send('deeplink', 'http://127.0.0.1:5500/test.html')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>This is Home Page!!!</h1>
|
||||
<button
|
||||
onClick={loginWithGoogle}
|
||||
className="bg-white px-4 py-2 border flex gap-2 border-slate-200 rounded-lg text-slate-700 hover:border-slate-400 hover:text-slate-900 hover:shadow transition duration-150"
|
||||
>
|
||||
<img
|
||||
className="w-6 h-6"
|
||||
src={googleLogo}
|
||||
alt="google logo"
|
||||
loading="lazy"
|
||||
/>
|
||||
<span>Login with @forth.co.th Google account</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue