From: riqo Date: Sat, 13 Feb 2021 20:01:37 +0000 (-0600) Subject: add persistent auth session X-Git-Tag: v0.9~82^2~11 X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=a7253ebf40a1fed862571b2ed949c7d9775c9c82;p=mime-chat add persistent auth session --- diff --git a/src/background/session.ts b/src/background/session.ts index fe0fbf1..50e9ce6 100644 --- a/src/background/session.ts +++ b/src/background/session.ts @@ -40,6 +40,7 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise< if (res === 'locked') { reject(res); } else { + console.log('Success!'); auth = true; resolve(res); } @@ -48,11 +49,12 @@ const authSession = async (_event, payload: string | UserCreds | null): Promise< if (!payload) { socket.send('no-token'); - } else if (typeof payload === 'string' || payload instanceof String) { + } else if (payload instanceof String || typeof payload === 'string') { socket.send(payload); } else { socket.send(JSON.stringify(payload)); } + }); }; @@ -95,18 +97,19 @@ export const initSession = () => { socket.binaryType = 'arraybuffer'; // handle renderer auth-token event - ipcMain.removeHandler('auth-user'); // avoid setting duplicate handlers - ipcMain.handle('auth-user', authSession); + ipcMain.removeHandler('auth-session'); // avoid setting duplicate handlers + ipcMain.handle('auth-session', authSession); // Connect to the backend. socket.on('open', () => { - console.log('Success! Connected to Crimata Servers.'); + console.log('Connected to Crimata Servers.'); - // fetch token from renderer + // call auth renderer event on connection backgroundMitt.emit('ipc-renderer', { - endpoint: 'fetch-token', + endpoint: 'auth', message: null }); + success = true; }); diff --git a/src/components/taInput/inputController.ts b/src/components/taInput/inputController.ts index fd89d2e..bc2b1b6 100644 --- a/src/components/taInput/inputController.ts +++ b/src/components/taInput/inputController.ts @@ -1,4 +1,4 @@ -import { ref, watch, onUnmounted, onMounted } from "vue"; +import { ref, watch, onUnmounted, onMounted, inject } from "vue"; import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler"; import useMediaStream from "@/modules/mediaStream"; import useAudioVisualizer from './audioDetails/audioVisualizer'; @@ -18,10 +18,29 @@ export default function useInputController() { const audioBubbleWidth = ref(10); let stream: MediaStream; - const { keyDownHandler, input } = useKeyDownHandler(); - const { textInputXoffset, renderTextInput } = useTextVisualizer(input); + const emitter: any = inject("mitt"); const { visualizeStreamAsPaths, expandBubble } = useAudioVisualizer(visualizeStream); + // send message on ENTER + const enterCallback = (input: string) => { + + const message = { + audio: 0, + text: input + }; + emitter.emit("animateSend", message); + + // await response + window.postMessage({ + myTypeField: 'send-message', + message: message + }, '*') + + } + + const { keyDownHandler, input } = useKeyDownHandler(enterCallback); + const { textInputXoffset, renderTextInput } = useTextVisualizer(input); + // stops stream recording on space key up function keyupHandler(e: any) { if (e.key === " " && visualizeStream.value) { diff --git a/src/components/taInput/textDetails/textVisualizer.ts b/src/components/taInput/textDetails/textVisualizer.ts index 6a27d48..8dbda23 100644 --- a/src/components/taInput/textDetails/textVisualizer.ts +++ b/src/components/taInput/textDetails/textVisualizer.ts @@ -32,7 +32,7 @@ export default function useTextVisualizer(input: Ref) { } } - emitter.on("newSelfMessage", async (payload: any) => { + emitter.on("animateSend", async (payload: any) => { const inputEl = document.getElementsByClassName("inputContainer"); const foreignEl = inputEl[0] as HTMLElement; animateSend(foreignEl, inputHeight.value, input); diff --git a/src/modules/auth.ts b/src/modules/auth.ts index 73edaf3..709a262 100644 --- a/src/modules/auth.ts +++ b/src/modules/auth.ts @@ -2,12 +2,12 @@ import { reactive, toRefs } from 'vue'; import { useIpc } from './ipc'; interface AuthState { - accessToken?: string | null; + accessToken: string | null; error?: Error; } const state = reactive({ - accessToken: undefined, + accessToken: null, error: undefined, }); @@ -16,7 +16,7 @@ const AUTH_KEY = 'crimata_token'; const token = window.localStorage.getItem(AUTH_KEY); const authToken = async () => { - const { data, invoke } = useIpc('auth-user'); + const { data, invoke } = useIpc('auth-session'); try { await invoke(token); state.accessToken = data.value; @@ -28,29 +28,26 @@ const authToken = async () => { } } -// authenticate on socket connect -window.ipcRenderer.on("fetch-token", async (_event, _arg) => { - authToken(); +// authenticate on auth event +window.ipcRenderer.on("auth", async (_event, _arg) => { + await authToken(); }); if (token) { - authToken(); + state.accessToken = token; } export const useAuth = () => { - const setToken = (token: string, remember: boolean) => { - if (remember) { - // Save - window.localStorage.setItem(AUTH_KEY, token); - } + const setToken = (token: string) => { + window.localStorage.setItem(AUTH_KEY, token); state.accessToken = token; state.error = undefined; } - const logout = (): Promise => { + const logout = (): Promise => { window.localStorage.removeItem(AUTH_KEY); - return Promise.resolve(state.accessToken = undefined); + return Promise.resolve(state.accessToken = null); } return { diff --git a/src/modules/keyDownHandler/useKeyDownHandler.ts b/src/modules/keyDownHandler/useKeyDownHandler.ts index 964956d..f8336e0 100644 --- a/src/modules/keyDownHandler/useKeyDownHandler.ts +++ b/src/modules/keyDownHandler/useKeyDownHandler.ts @@ -1,35 +1,17 @@ -import { ref, inject } from "vue"; +import { ref } from "vue"; import keyboardNameMap from "./keyBoardMaps/keyboardNameMap"; import keyboardCharMap from "./keyBoardMaps/keyboardCharMap"; -// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a -// scanner attached via USB -export default function useKeyDownHandler() { - interface KeyDownEvent { + +interface KeyDownEvent { keyCode: number; shiftKey: boolean; - } - - const emitter: any = inject("mitt"); - const input = ref(""); +} - // submits newSelfMessage event - function handleEnterKey() { - // does nothing if input value is empty - if (input.value === "") { - return; - } - const message = { - text: input.value, - audio: 0 - }; - // fire event with message payload - emitter.emit("newSelfMessage", message); +// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a +// scanner attached via USB +export default function useKeyDownHandler(enterCallback: (input: string) => void | null) { - window.postMessage({ - myTypeField: 'send-message', - message: message - }, '*') - } + const input = ref(""); function keyDownHandler(e: KeyDownEvent) { // keyboardCharMap is an array of arrays, with each inner @@ -49,7 +31,7 @@ export default function useKeyDownHandler() { const cmd = keyboardNameMap[e.keyCode]; switch (cmd) { case "ENTER": - handleEnterKey(); + enterCallback(input.value); break; case "BACK_SPACE": input.value = input.value.slice(0, -1); @@ -66,4 +48,4 @@ export default function useKeyDownHandler() { keyDownHandler, input }; -} \ No newline at end of file +} diff --git a/src/router.ts b/src/router.ts index ea74f4e..8f24e80 100644 --- a/src/router.ts +++ b/src/router.ts @@ -20,7 +20,9 @@ const routes: Array = [ path: "/splash", name: "splash", component: Splash, - meta: { requiresAuth: false }, + meta: { + requiresAuth: false + }, }, { path: "/login", @@ -41,14 +43,19 @@ const router = createRouter({ routes }); +// route auth check router.beforeEach((to, from, next) => { const { accessToken } = useAuth(); // Not logged into a guarded route? - if (to.meta.requiresAuth && !accessToken?.value) next({ name: 'login' }); + if (to.meta.requiresAuth && !accessToken.value) { + next({ name: 'login' }) + } // Logged in for an auth route - else if ((to.name == 'login' || to.name == 'register') && accessToken!.value) next({ name: 'home' }); + else if ((to.name == 'login' || to.name == 'register') && accessToken.value){ + next({ name: 'home' }); + } // Carry On... else next(); diff --git a/src/views/login.vue b/src/views/login.vue index 5508f00..25f9bbf 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -21,7 +21,7 @@ - + @@ -45,9 +45,9 @@ export default defineComponent({ const email = ref(""); const password = ref(""); - const rememberMe = ref(false); + const rememberMe = ref(true); - const { data, invoke } = useIpc('auth-user'); + const { data, invoke } = useIpc('auth-session'); const submit = async () => { const payload = { @@ -57,8 +57,7 @@ export default defineComponent({ }; try { await invoke(payload); - console.log('testing incoke', data.value) - setToken(data.value, rememberMe.value); + setToken(data.value); router.push({ name: "home" }); } catch(e){ console.log('Error loging in.') diff --git a/src/views/register.vue b/src/views/register.vue index 9b8e673..777f7b4 100644 --- a/src/views/register.vue +++ b/src/views/register.vue @@ -29,12 +29,8 @@