From c33b02f77e9bda0bd70a813f55284f139363d48f Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@imexsystems.ca>
Date: Fri, 28 Mar 2025 10:20:31 -0700
Subject: [PATCH] Add UI basics.

---
 .../quickbooks-desktop/quickbooks-desktop.ts  |  8 +--
 src/renderer/src/App.tsx                      | 41 +++++++-----
 src/renderer/src/components/Home/Home.tsx     | 21 -------
 .../NavigationHeader/Navigationheader.tsx     |  9 +++
 .../Settings/Settings.WatchedPaths.tsx        | 13 ++--
 .../components/Settings/Settings.Watcher.tsx  |  2 -
 .../src/components/Settings/Settings.tsx      | 17 ++---
 .../src/components/SignInForm/SignInForm.tsx  | 40 +++++-------
 src/util/translations/en-US/renderer.json     | 10 ++-
 translations.babel                            | 62 +++++++++++++++++++
 10 files changed, 142 insertions(+), 81 deletions(-)

diff --git a/src/main/quickbooks-desktop/quickbooks-desktop.ts b/src/main/quickbooks-desktop/quickbooks-desktop.ts
index 6353254..effc464 100644
--- a/src/main/quickbooks-desktop/quickbooks-desktop.ts
+++ b/src/main/quickbooks-desktop/quickbooks-desktop.ts
@@ -17,11 +17,9 @@ export async function handleQuickBookRequest(
   res: Response,
 ): Promise<void> {
   if (process.platform !== "win32") {
-    res
-      .status(500)
-      .json({
-        error: "QuickBooks Desktop integration is only available on Windows",
-      });
+    res.status(500).json({
+      error: "QuickBooks Desktop integration is only available on Windows",
+    });
     return;
   }
 
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index dcd4e7b..c21cf09 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,5 +1,5 @@
 import "@ant-design/v5-patch-for-react-19";
-import { Layout } from "antd";
+import { Layout, Skeleton } from "antd";
 import { User } from "firebase/auth";
 import { useEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
@@ -16,10 +16,15 @@ import { auth } from "./util/firebase";
 import { NotificationProvider } from "./util/notificationContext";
 
 const App: React.FC = () => {
-  const [user, setUser] = useState<User | null>(null);
+  const [user, setUser] = useState<User | boolean | null>(false);
 
   useEffect(() => {
     // Only set up the listener once when component mounts
+    if (auth.currentUser) {
+      setUser(auth.currentUser);
+    } else {
+      setUser(false);
+    }
     const unsubscribe = auth.onAuthStateChanged((user: User | null) => {
       setUser(user);
       //Send back to the main process so that it knows we are authenticated.
@@ -41,19 +46,25 @@ const App: React.FC = () => {
       <HashRouter>
         <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
           <NotificationProvider>
-            <Layout>
-              {!user ? (
-                <SignInForm />
-              ) : (
-                <>
-                  <NavigationHeader />
-                  <UpdateAvailable />
-                  <Routes>
-                    <Route path="/" element={<Settings />} />
-                  </Routes>
-                </>
-              )}
-            </Layout>
+            <Skeleton loading={user === null} active>
+              <Layout style={{ minHeight: "100vh" }}>
+                {!user ? (
+                  <SignInForm />
+                ) : (
+                  <>
+                    <Layout.Header>
+                      <NavigationHeader />
+                    </Layout.Header>
+                    <Layout.Content style={{ padding: "0 24px" }}>
+                      <UpdateAvailable />
+                      <Routes>
+                        <Route path="/" element={<Settings />} />
+                      </Routes>
+                    </Layout.Content>
+                  </>
+                )}
+              </Layout>
+            </Skeleton>
           </NotificationProvider>
         </ErrorBoundary>
       </HashRouter>
diff --git a/src/renderer/src/components/Home/Home.tsx b/src/renderer/src/components/Home/Home.tsx
index 7575fba..f02fa22 100644
--- a/src/renderer/src/components/Home/Home.tsx
+++ b/src/renderer/src/components/Home/Home.tsx
@@ -1,28 +1,7 @@
-import { Button } from "antd";
-import ipcTypes from "../../../../util/ipcTypes.json";
-
 const Home: React.FC = () => {
   return (
     <div>
       <h1>Home</h1>
-      <Button
-        onClick={(): void => {
-          window.electron.ipcRenderer.send(
-            ipcTypes.toMain.debug.decodeEstimate,
-          );
-        }}
-      >
-        Test Decode Estimate
-      </Button>
-      <Button
-        onClick={(): void => {
-          window.electron.ipcRenderer.send(
-            ipcTypes.toMain.updates.checkForUpdates,
-          );
-        }}
-      >
-        Check for Update
-      </Button>
     </div>
   );
 };
diff --git a/src/renderer/src/components/NavigationHeader/Navigationheader.tsx b/src/renderer/src/components/NavigationHeader/Navigationheader.tsx
index 633320c..fb49990 100644
--- a/src/renderer/src/components/NavigationHeader/Navigationheader.tsx
+++ b/src/renderer/src/components/NavigationHeader/Navigationheader.tsx
@@ -1,7 +1,9 @@
 import { selectWatcherStatus } from "@renderer/redux/app.slice";
 import { useAppSelector } from "@renderer/redux/reduxHooks";
+import { auth } from "@renderer/util/firebase";
 import { Badge, Layout, Menu } from "antd";
 import { MenuItemType } from "antd/es/menu/interface";
+import { signOut } from "firebase/auth";
 import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 
@@ -10,6 +12,13 @@ const NavigationHeader: React.FC = () => {
   const isWatcherStarted = useAppSelector(selectWatcherStatus);
   const menuItems: MenuItemType[] = [
     { label: <NavLink to="/">{t("navigation.home")}</NavLink>, key: "home" },
+    {
+      label: t("navigation.signout"),
+      key: "watchlist",
+      onClick: (): void => {
+        signOut(auth);
+      },
+    },
     // {
     //   label: <NavLink to="/settings">{t("navigation.settings")}</NavLink>,
     //   key: "settings",
diff --git a/src/renderer/src/components/Settings/Settings.WatchedPaths.tsx b/src/renderer/src/components/Settings/Settings.WatchedPaths.tsx
index 45e126c..dfe0999 100644
--- a/src/renderer/src/components/Settings/Settings.WatchedPaths.tsx
+++ b/src/renderer/src/components/Settings/Settings.WatchedPaths.tsx
@@ -41,9 +41,10 @@ const SettingsWatchedPaths: React.FC = () => {
         </Button>
       }
     >
-      <Timeline>
-        {watchedPaths?.map((path, index) => (
-          <Timeline.Item key={index}>
+      <Timeline
+        items={watchedPaths.map((path, index) => ({
+          key: index,
+          children: (
             <Space align="baseline">
               {path}
               <Button
@@ -54,9 +55,9 @@ const SettingsWatchedPaths: React.FC = () => {
                 onClick={() => handleRemovePath(path)}
               />
             </Space>
-          </Timeline.Item>
-        ))}
-      </Timeline>
+          ),
+        }))}
+      />
     </Card>
   );
 };
diff --git a/src/renderer/src/components/Settings/Settings.Watcher.tsx b/src/renderer/src/components/Settings/Settings.Watcher.tsx
index 06becdb..a4ab475 100644
--- a/src/renderer/src/components/Settings/Settings.Watcher.tsx
+++ b/src/renderer/src/components/Settings/Settings.Watcher.tsx
@@ -25,12 +25,10 @@ const SettingsWatcher: React.FC = () => {
     interval: 0,
   });
 
-  console.log("*** ~ pollingState:", pollingState);
   const getPollingStateFromStore = (): void => {
     window.electron.ipcRenderer
       .invoke(ipcTypes.toMain.settings.watcher.getpolling)
       .then((storePollingState: { enabled: boolean; interval: number }) => {
-        console.log("*** ~ .then ~ storePollingState:", storePollingState);
         setPollingState(storePollingState);
       });
   };
diff --git a/src/renderer/src/components/Settings/Settings.tsx b/src/renderer/src/components/Settings/Settings.tsx
index 290c36b..0a3e776 100644
--- a/src/renderer/src/components/Settings/Settings.tsx
+++ b/src/renderer/src/components/Settings/Settings.tsx
@@ -1,16 +1,17 @@
-import { Divider } from "antd";
+import { Col, Row } from "antd";
 import SettingsWatchedPaths from "./Settings.WatchedPaths";
 import SettingsWatcher from "./Settings.Watcher";
-import Home from "../Home/Home";
 
 const Settings: React.FC = () => {
   return (
-    <div>
-      <Home />
-      <Divider />
-      <SettingsWatchedPaths />
-      <SettingsWatcher />
-    </div>
+    <Row gutter={[32, 32]}>
+      <Col span={24}>
+        <SettingsWatchedPaths />
+      </Col>
+      <Col span={24}>
+        <SettingsWatcher />
+      </Col>
+    </Row>
   );
 };
 export default Settings;
diff --git a/src/renderer/src/components/SignInForm/SignInForm.tsx b/src/renderer/src/components/SignInForm/SignInForm.tsx
index 35e2ba3..a79648c 100644
--- a/src/renderer/src/components/SignInForm/SignInForm.tsx
+++ b/src/renderer/src/components/SignInForm/SignInForm.tsx
@@ -1,8 +1,10 @@
 import { auth } from "@renderer/util/firebase";
 import type { FormProps } from "antd";
-import { Button, Checkbox, Form, Input } from "antd";
+import { Alert, Button, Checkbox, Form, Input } from "antd";
 import log from "electron-log/renderer";
 import { signInWithEmailAndPassword } from "firebase/auth";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import errorTypeCheck from "../../../../util/errorTypeCheck";
 
 type FieldType = {
@@ -12,14 +14,16 @@ type FieldType = {
 };
 
 const SignInForm: React.FC = () => {
+  const [error, setError] = useState<string | null>(null);
+  const { t } = useTranslation();
   const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
-    log.info("Form submitted successfully:", values);
     const { username, password } = values;
     try {
       const result = await signInWithEmailAndPassword(auth, username, password);
       log.debug("Login result", result);
     } catch (error) {
       log.error("Login error", errorTypeCheck(error));
+      setError(t("auth.login.error"));
     }
   };
 
@@ -43,40 +47,30 @@ const SignInForm: React.FC = () => {
       <Form.Item<FieldType>
         label="Username"
         name="username"
-        rules={[{ required: true, message: "Please input your username!" }]}
+        rules={[{ required: true }]}
       >
         <Input />
       </Form.Item>
       <Form.Item<FieldType>
         label="Password"
         name="password"
-        rules={[{ required: true, message: "Please input your password!" }]}
+        rules={[{ required: true }]}
       >
         <Input.Password />
       </Form.Item>
-      <Form.Item<FieldType>
-        name="remember"
-        valuePropName="checked"
-        label={null}
-      >
-        <Checkbox>Remember me</Checkbox>
-      </Form.Item>
       <Form.Item label={null}>
         <Button type="primary" htmlType="submit">
-          Submit
+          {t("auth.login.login")}
         </Button>
       </Form.Item>
-      <Button
-        onClick={async () => {
-          if (auth.currentUser) {
-            log.info(auth.currentUser);
-          } else {
-            log.warn("No user is currently signed in.");
-          }
-        }}
-      >
-        Log user info
-      </Button>
+      {error && (
+        <Form.Item label={null}>
+          <Alert message={error} type="error" />
+        </Form.Item>
+      )}
+      <Form.Item label={null}>
+        <Button>{t("auth.login.resetpassword")}</Button>
+      </Form.Item>
     </Form>
   );
 };
diff --git a/src/util/translations/en-US/renderer.json b/src/util/translations/en-US/renderer.json
index 0e2e4be..bcf0197 100644
--- a/src/util/translations/en-US/renderer.json
+++ b/src/util/translations/en-US/renderer.json
@@ -1,8 +1,16 @@
 {
 	"translation": {
+		"auth": {
+			"login": {
+				"error": "The username and password combination provided is not valid.",
+				"login": "Log In",
+				"resetpassword": "Reset Password"
+			}
+		},
 		"navigation": {
 			"home": "Home",
-			"settings": "Settings"
+			"settings": "Settings",
+			"signout": "Sign Out"
 		},
 		"settings": {
 			"actions": {
diff --git a/translations.babel b/translations.babel
index a66532d..fa30ee9 100644
--- a/translations.babel
+++ b/translations.babel
@@ -45,6 +45,55 @@
                     <folder_node>
                         <name>translation</name>
                         <children>
+                            <folder_node>
+                                <name>auth</name>
+                                <children>
+                                    <folder_node>
+                                        <name>login</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>error</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>login</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>resetpassword</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>navigation</name>
                                 <children>
@@ -74,6 +123,19 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>signout</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>