add login and register logic
This commit is contained in:
parent
b05cb202b6
commit
46a127c217
7 changed files with 82 additions and 47 deletions
|
|
@ -34,9 +34,9 @@ export const createWindow = async (options: WindowSettings): Promise<BrowserWind
|
||||||
win.loadURL("app://./index.html");
|
win.loadURL("app://./index.html");
|
||||||
}
|
}
|
||||||
|
|
||||||
win.webContents.on('did-finish-load', () => {
|
win.webContents.on('did-finish-load', () => {
|
||||||
resolve(win);
|
resolve(win);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,14 @@ import { app } from "electron";
|
||||||
import { main } from './run';
|
import { main } from './run';
|
||||||
import { windowEmitter } from './windowEmitter';
|
import { windowEmitter } from './windowEmitter';
|
||||||
|
|
||||||
|
let winActive: boolean;
|
||||||
|
|
||||||
|
windowEmitter.on('window-active', (state: boolean) => {
|
||||||
|
winActive = state;
|
||||||
|
});
|
||||||
|
|
||||||
export function initApp(dev: boolean): void {
|
export function initApp(dev: boolean): void {
|
||||||
|
|
||||||
let winActive: boolean;
|
|
||||||
|
|
||||||
windowEmitter.on('window-active', (state: boolean) => {
|
|
||||||
winActive = state;
|
|
||||||
});
|
|
||||||
|
|
||||||
app.on("ready", () => {
|
app.on("ready", () => {
|
||||||
main();
|
main();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { createWindow } from './createWindow';
|
import { createWindow } from './createWindow';
|
||||||
import { ipcMain } from "electron";
|
import { ipcMain, BrowserWindow } from "electron";
|
||||||
import { initSession, sendMessage } from './session';
|
import { initSession, sendMessage } from './session';
|
||||||
import { windowEmitter } from './windowEmitter';
|
import { windowEmitter } from './windowEmitter';
|
||||||
const portAudio = require('naudiodon');
|
const portAudio = require('naudiodon');
|
||||||
|
|
@ -10,6 +10,14 @@ interface ipcRendererPayload {
|
||||||
}
|
}
|
||||||
|
|
||||||
let activeSession = false;
|
let activeSession = false;
|
||||||
|
let win: BrowserWindow | null;
|
||||||
|
|
||||||
|
windowEmitter.on('ipc-renderer', (payload: ipcRendererPayload) => {
|
||||||
|
if (win)
|
||||||
|
win.webContents.send(payload.endpoint, {
|
||||||
|
message: payload.message
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* The main function will be run after electron app is ready.
|
* The main function will be run after electron app is ready.
|
||||||
|
|
@ -17,13 +25,10 @@ let activeSession = false;
|
||||||
export async function main() {
|
export async function main() {
|
||||||
|
|
||||||
// create main window.
|
// create main window.
|
||||||
const win = await createWindow({ width: 350, height: 525, resizable: false });
|
if (!win) {
|
||||||
|
win = await createWindow({ width: 350, height: 525, resizable: false });
|
||||||
|
}
|
||||||
|
|
||||||
windowEmitter.on('ipc-renderer', (payload: ipcRendererPayload) => {
|
|
||||||
win.webContents.send(payload.endpoint, {
|
|
||||||
message: payload.message
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Instantiate socket session with crimata-platorm.
|
// Instantiate socket session with crimata-platorm.
|
||||||
if (!activeSession) {
|
if (!activeSession) {
|
||||||
|
|
@ -41,8 +46,9 @@ export async function main() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const windowDismount = (): void => {
|
const windowDismount = (): void => {
|
||||||
windowEmitter.emit('window-active', false);
|
win = null;
|
||||||
ipcMain.removeAllListeners('send-message');
|
windowEmitter.emit('window-active', false);
|
||||||
|
ipcMain.removeAllListeners('send-message');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle window mount and dismount.
|
// Handle window mount and dismount.
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,12 @@ import WebSocket from 'ws';
|
||||||
import { windowEmitter } from './windowEmitter';
|
import { windowEmitter } from './windowEmitter';
|
||||||
import { ipcMain } from "electron";
|
import { ipcMain } from "electron";
|
||||||
|
|
||||||
|
const EventEmitter = require('events');
|
||||||
|
|
||||||
|
class SocketEmitter extends EventEmitter {}
|
||||||
|
|
||||||
|
export const socketEmitter = new SocketEmitter();
|
||||||
|
|
||||||
interface RenderMessage {
|
interface RenderMessage {
|
||||||
type: 'render';
|
type: 'render';
|
||||||
content: string;
|
content: string;
|
||||||
|
|
@ -27,6 +33,7 @@ let auth = false;
|
||||||
const receiveMessage = (message: string): void => {
|
const receiveMessage = (message: string): void => {
|
||||||
|
|
||||||
while(!auth) {
|
while(!auth) {
|
||||||
|
console.log('window emitter @ session.ts recieve')
|
||||||
windowEmitter.emit('auth-res', message);
|
windowEmitter.emit('auth-res', message);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -43,6 +50,7 @@ const receiveMessage = (message: string): void => {
|
||||||
const authUser = async (event: any, payload: string | UserCreds | null): Promise<string> => {
|
const authUser = async (event: any, payload: string | UserCreds | null): Promise<string> => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
console.log('authenticating...');
|
console.log('authenticating...');
|
||||||
|
console.log('window emitter @ session.ts auth')
|
||||||
windowEmitter.on('auth-res', (res: string) => {
|
windowEmitter.on('auth-res', (res: string) => {
|
||||||
if (res === 'locked') {
|
if (res === 'locked') {
|
||||||
reject(res);
|
reject(res);
|
||||||
|
|
@ -74,20 +82,20 @@ export const initSession = () => {
|
||||||
socket = new WebSocket(`${ip}:${port}`);
|
socket = new WebSocket(`${ip}:${port}`);
|
||||||
socket.binaryType = 'arraybuffer';
|
socket.binaryType = 'arraybuffer';
|
||||||
|
|
||||||
|
// handle renderer auth-token event
|
||||||
|
ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers
|
||||||
|
ipcMain.handle('auth-user', authUser);
|
||||||
|
|
||||||
socket.on('open', () => {
|
socket.on('open', () => {
|
||||||
console.log('Success! Connected to Crimata.');
|
console.log('Success! Connected to Crimata.');
|
||||||
|
|
||||||
// handle renderer auth-token event
|
|
||||||
ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers
|
|
||||||
ipcMain.handle('auth-user', authUser);
|
|
||||||
|
|
||||||
// fetch token from renderer
|
// fetch token from renderer
|
||||||
windowEmitter.emit('ipc-renderer', {
|
windowEmitter.emit('ipc-renderer', {
|
||||||
endpoint: 'fetch-token',
|
endpoint: 'fetch-token',
|
||||||
message: null
|
message: null
|
||||||
});
|
});
|
||||||
|
|
||||||
success = true;
|
success = true;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on('error', (e) => {
|
socket.on('error', (e) => {
|
||||||
|
|
|
||||||
|
|
@ -49,10 +49,14 @@ export default defineComponent({
|
||||||
email: email.value,
|
email: email.value,
|
||||||
password: password.value
|
password: password.value
|
||||||
};
|
};
|
||||||
await invoke(payload);
|
try {
|
||||||
console.log('testing incoke', data.value)
|
await invoke(payload);
|
||||||
setToken(data.value, rememberMe.value);
|
console.log('testing incoke', data.value)
|
||||||
router.push({ name: "home" });
|
setToken(data.value, rememberMe.value);
|
||||||
|
router.push({ name: "home" });
|
||||||
|
} catch(e){
|
||||||
|
console.log('Error loging in.')
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="login">
|
<div id="login">
|
||||||
<!-- login title -->
|
<!-- login title -->
|
||||||
<div id="loginTitle">Login</div>
|
<div id="loginTitle">Register</div>
|
||||||
|
|
||||||
<!-- username and password forms -->
|
<!-- username and password forms -->
|
||||||
<div id="loginBox">
|
<div id="loginBox">
|
||||||
<!-- username -->
|
<!-- username -->
|
||||||
<input class="input" type="text" v-model="login.username" placeholder="username" />
|
<input class="input" type="text" v-model="email" placeholder="email" />
|
||||||
|
|
||||||
<!-- password -->
|
<!-- password -->
|
||||||
<input class="input" type="password" v-model="login.password" placeholder="Password" />
|
<input class="input" type="password" v-model="password" placeholder="Password" />
|
||||||
|
|
||||||
|
<!-- firstName -->
|
||||||
|
<input class="input" type="text" v-model="firstName" placeholder="First name" />
|
||||||
|
|
||||||
|
<!-- lastName -->
|
||||||
|
<input class="input" type="text" v-model="lastName" placeholder="Last name" />
|
||||||
|
|
||||||
|
<input type="checkbox" id="checkbox" v-model="rememberMe" />
|
||||||
|
<label for="checkbox">Remember Me</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- submit button -->
|
<!-- submit button -->
|
||||||
<button class="button" @click="submitCreds">Submit</button>
|
<button class="button" @click="submit">Submit</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -40,31 +49,39 @@ interface RegisterPayload {
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Register",
|
name: "Register",
|
||||||
setup() {
|
setup() {
|
||||||
const payload = reactive<RegisterPayload>({
|
const email = ref("");
|
||||||
email: undefined,
|
const password = ref("");
|
||||||
password: undefined,
|
const firstName = ref("");
|
||||||
firstName: undefined,
|
const lastName = ref("");
|
||||||
lastName: undefined,
|
const rememberMe = ref("");
|
||||||
});
|
|
||||||
|
|
||||||
const { error, loading, invoke, data, errorMessage } = useIpc(
|
|
||||||
"auth-register"
|
|
||||||
);
|
|
||||||
|
|
||||||
|
const { invoke, data,} = useIpc("auth-user");
|
||||||
const { setToken } = useAuth();
|
const { setToken } = useAuth();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
const payload: RegisterPayload = {
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
firstName: firstName.value,
|
||||||
|
lastName: lastName.value,
|
||||||
|
};
|
||||||
|
|
||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
await invoke(payload);
|
try {
|
||||||
setToken(data.value, true);
|
await invoke(payload);
|
||||||
router.push({ name: "home" });
|
setToken(data.value, true);
|
||||||
|
router.push({ name: "home" });
|
||||||
|
} catch(e) {
|
||||||
|
console.log('Failed to register.')
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(payload),
|
email,
|
||||||
|
password,
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
submit,
|
submit,
|
||||||
loading,
|
|
||||||
errorMessage,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ wss.on("connection", function connection(ws, req) {
|
||||||
ws.on("message", function incoming(message) {
|
ws.on("message", function incoming(message) {
|
||||||
|
|
||||||
console.log(message)
|
console.log(message)
|
||||||
if (message === 'no-token') {
|
if (message === 'no-token' || message === 'undefined') {
|
||||||
console.log('no token to authenticate');
|
console.log('no token to authenticate');
|
||||||
ws.send('locked');
|
ws.send('locked');
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue