auth init

src/api/index.ts

@@ -37,14 +37,28 @@ export const getAuthApi = async (args: GetAuth): Promise<any> => {
         }
         const state = await getState();
         const data = response.data;
-        const access_token = _get(data, "data.auth.session.access_token");
-        const refresh_token = _get(data, "data.auth.session.refresh_token");
-        if (isEmpty(access_token) || isEmpty(refresh_token)) {
-            throw new Error("error getting tokens");
-        };
-        const newAuth = { access_token, refresh_token };
-        await setState({ ...state, auth: newAuth });
-        return newAuth;
+        if (data.success !== true) {
+            const message = _get(data, "message");
+            const status = _get(data, "status");
+            const newAuth = { ...state.auth, res: { status, message, success: data.success } };
+            await setState({ ...state, auth: newAuth });
+            return newAuth;
+        } else {
+
+            const access_token = _get(data, "data.auth.session.access_token");
+            const refresh_token = _get(data, "data.auth.session.refresh_token");
+            if (isEmpty(access_token) || isEmpty(refresh_token)) {
+                throw new Error("error getting tokens");
+            };
+
+            const email = _get(data, "data.auth.user.email", "");
+            const credits = _get(data, "data.credits", 0);
+            const newAuth = { access_token, refresh_token, email, credits, res: { success: true } };
+            await setState({ ...state, auth: newAuth });
+            return newAuth;
+        }
+
+
     }
     catch (error) {
         console.error("Error getAuthApi", error);

src/app/auth/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const AuthPage = () => {
+
+  const openAuthLink = async () => {
+    await (window as any).api.invoke("open:link", "http://localhost:3001/signin/app");
+  };
+
+  return (
+    <div>
+      <h1>Auth Page</h1>
+      <button onClick={openAuthLink}>Login / Signup</button>
+    </div>
+  );
+};
+
+export default AuthPage;

src/app/hooks.tsx

@@ -21,7 +21,7 @@ export const useAppState = (): BEState => {
   useEffect(() => {
     const intervalId = setInterval(() => {
       getState().then((fetchedData) => {
-        console.log("fetchedData", fetchedData);
+        // console.log("fetchedData", fetchedData);
       });
     }, 1000);
 

src/app/index.tsx

@@ -3,7 +3,7 @@ import { Layout } from "./layout";
 import Navbar from "./navbar";
 import { createRoot } from "react-dom/client";
 
-const root = createRoot(document.body);
+const root = createRoot(document.querySelector("#app")!);
 root.render(
   <div className="h-full bg-gray-50">
     <Layout />

src/app/layout.tsx

@@ -1,10 +1,12 @@
+import AuthPage from "./auth";
 import { BEState } from "../utils/state/state.interfaces";
 import Dashboard from "./dashboard";
 import Navbar from "./navbar";
 import Questions from "./questions";
 import React from "react";
 import Resume from "./resume";
 import Settings from "./settings";
+import _get from "lodash/get";
 import { isEmpty } from "lodash";
 import { useAppState } from "./hooks";
 
@@ -19,7 +21,7 @@ const NotFound = () => {
 const routes = [
   { path: "", component: Dashboard },
   { path: "questions", component: Questions },
-  { path: "settings", component: Settings },
+  { path: "account", component: Settings },
   { path: "resume", component: Resume },
   { path: "*", component: NotFound },
 ];
@@ -49,6 +51,17 @@ export const Layout = () => {
     : route
     ? route.component
     : NotFound;
+
+  const isAuth = _get(state, "auth.res.success");
+
+  if (!isAuth) {
+    return (
+      <div className="h-full bg-gray-50 w-full">
+        <AuthPage />
+      </div>
+    );
+  };
+
   return (
     <div className="h-full bg-gray-50 w-full">
       <Navbar user={null} />

src/app/navbar.tsx

@@ -7,7 +7,7 @@ const navigation = [
   { name: "Dashboard", href: "/" },
   { name: "Questions", href: "/questions" },
   { name: "Resume", href: "/resume" },
-  { name: "Settings", href: "/settings" },
+  { name: "Account", href: "/account" },
 ];
 
 function classNames(...classes: string[]) {

src/app/settings/index.tsx

@@ -1,21 +1,27 @@
-import { Button, Card, TextInput } from "@tremor/react";
+import { Bold, Button, Card, Metric, TextInput } from "@tremor/react";
 
 import { LayoutPageProps } from "../layout";
 import React from "react";
 
 export const SettingsPage = ({ state }: LayoutPageProps) => {
+  const auth = state.auth;
+
+  if (!auth) {
+    // TODO login
+    return null;
+  }
+
+  const { email, credits } = auth;
   return (
     <Card>
-      <div className="p-2">
-        <TextInput placeholder="path" />
-      </div>
-
-      <div className="p-2">
-        <TextInput placeholder="key" />
+      <div className="p-2 flex justify-between">
+        <Bold>Credits: </Bold>
+        <Metric>{credits}</Metric>
       </div>
 
-      <div className="flex center p-2">
-        <Button>Save</Button>
+      <div className="p-2 flex justify-between">
+        <Bold>Email: </Bold>
+        <Bold>{email}</Bold>
       </div>
     </Card>
   );

src/index.html

@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="UTF-8" />
-  <title>Hello World!</title>
+  <title>AIJ</title>
+</head>
 
 <body>
-  <div id="root"></div>
+  <div id="app"></div>
 </body>
-</head>
 
 </html>

src/index.ts

@@ -29,12 +29,22 @@ if (process.defaultApp) {
 const gotTheLock = app.requestSingleInstanceLock()
 
 
-const launchAppFromUrl = async (url: string) => {
+const getAppAuth = async (urlLinking?: string) => {
+
+  let access_token, refresh_token;
 
   try {
-    const urlObj = new URL(url);
-    const access_token = urlObj.searchParams.get('access_token');
-    const refresh_token = urlObj.searchParams.get('refresh_token');
+    if (urlLinking) {
+      const urlObj = new URL(urlLinking);
+      access_token = urlObj.searchParams.get('access_token');
+      refresh_token = urlObj.searchParams.get('refresh_token');
+
+    } else {
+      const state = await getState();
+      access_token = state.auth.access_token;
+      refresh_token = state.auth.refresh_token;
+    }
+
     if (access_token && refresh_token) {
       const getAuth = await getAuthApi({ access_token, refresh_token });
       if (!getAuth) {
@@ -60,19 +70,20 @@ if (!gotTheLock) {
 
     const url = commandLine.pop().slice(0, -1);
     if (url) {
-      await launchAppFromUrl(url);
+      await getAppAuth(url);
     }
 
   })
 
   // Create mainWindow, load the rest of the app, etc...
   app.whenReady().then(() => {
+    console.log("app.whenReady");
     createWindow()
   })
 
   app.on('open-url', async (event, url) => {
     if (url) {
-      await launchAppFromUrl(url);
+      await getAppAuth(url);
     }
   })
 }
@@ -104,7 +115,10 @@ const createWindow = (): void => {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', createWindow);
+app.on('ready', () => {
+  createWindow();
+  getAppAuth();
+});
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
@@ -116,6 +130,7 @@ app.on('window-all-closed', () => {
 });
 
 app.on('activate', () => {
+  console.log("activate");
   // On OS X it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (BrowserWindow.getAllWindows().length === 0) {
@@ -256,6 +271,12 @@ ipcMain.handle('resume:save', async (event, resume) => {
   return savedResume;
 });
 
+ipcMain.handle('open:link', async (event, link) => {
+  if (!link) return;
+  await shell.openExternal(link);
+  return true;
+});
+
 ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
   const state = await getState();
   // const browser = await getBrowser();

src/preload.ts

@@ -13,6 +13,7 @@ let validChannels = ["my-invokable-ipc",
     "settings:save",
     "questions:getall", "questions:save", "questions:read",
     "resume:get", "resume:save",
+    "open:link",
 ]; // list of ipcMain.handle channels you want access in frontend to
 // All of the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.

src/utils/state/state.interfaces.ts

@@ -20,8 +20,15 @@ export interface BEState {
         path: string;
     },
     auth?: {
+        email?: string;
+        credits?: number;
         access_token: string;
         refresh_token: string;
+        res: {
+            status?: number;
+            message?: string;
+            success: boolean;
+        }
     }
     // TODO: add more states
 };