Add login component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskflow2",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "a little task manager",
   "main": ".vite/build/main/index.js",
   "author": "@audrey-yang",

src/global.d.ts

@@ -11,5 +11,6 @@ interface Window {
     changeTaskTitle: (id: string, title: string) => Promise<any>;
     changeTaskNote: (id: string, note: string) => Promise<any>;
     deleteTask: (id: string) => Promise<void>;
+    checkPassword: (password: string) => Promise<boolean>;
   };
 }

src/main/backend/api.ts

@@ -109,4 +109,7 @@ export const api = {
     // Recursively delete descendants
     await recursiveDelete(id);
   },
+  checkPassword: (password: string) => {
+    return password === import.meta.env.VITE_APP_PASSWORD;
+  },
 };

src/main/index.ts

@@ -87,6 +87,9 @@ app.whenReady().then(() => {
   ipcMain.handle("deleteTask", async (_, id: string) => {
     return await api.deleteTask(id);
   });
+  ipcMain.handle("checkPassword", async (_, password) => {
+    return api.checkPassword(password);
+  });
 
   createWindow();
 

src/preload/index.ts

@@ -20,6 +20,7 @@ const api = {
   changeTaskTitle: (id: string, title: string) => ipcRenderer.invoke("changeTaskTitle", id, title),
   changeTaskNote: (id: string, note: string) => ipcRenderer.invoke("changeTaskNote", id, note),
   deleteTask: (id: string) => ipcRenderer.invoke("deleteTask", id),
+  checkPassword: (password: string) => ipcRenderer.invoke("checkPassword", password),
 };
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/App.tsx

@@ -3,6 +3,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { CssBaseline, Typography } from "@mui/material";
 import Header from "./components/Header";
 import TaskList from "./components/TaskList";
+import Login from "./components/Login";
 import { STATUS } from "./types";
 
 const darkTheme = createTheme({
@@ -19,6 +20,8 @@ const darkTheme = createTheme({
 });
 
 const App: () => JSX.Element = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(window.sessionStorage.getItem("loggedIn") === "y");
+
   // Lift state out of Header for refresh
   const [numUnstartedTasks, setNumUnstartedTasks] = useState(0);
   const [numInProgressTasks, setNumInProgressTasks] = useState(0);
@@ -37,12 +40,18 @@ const App: () => JSX.Element = () => {
         <Typography variant="h3" className="my-2">
           Taskflow
         </Typography>
-        <Header
-          numUnstartedTasks={numUnstartedTasks}
-          numInProgressTasks={numInProgressTasks}
-          numCompletedTasks={numCompletedTasks}
-        />
-        <TaskList refreshHeader={getTaskCounts} />
+        {isLoggedIn ? (
+          <>
+            <Header
+              numUnstartedTasks={numUnstartedTasks}
+              numInProgressTasks={numInProgressTasks}
+              numCompletedTasks={numCompletedTasks}
+            />
+            <TaskList refreshHeader={getTaskCounts} />
+          </>
+        ) : (
+          <Login setIsLoggedIn={setIsLoggedIn} />
+        )}
       </div>
     </ThemeProvider>
   );

src/renderer/components/Header.tsx

@@ -22,7 +22,7 @@ const Header = ({
         <Typography>Completed: {numCompletedTasks}</Typography>
       </div>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <DateCalendar sx={{ margin: 0 }} />
+        <DateCalendar sx={{ margin: 0 }} readOnly />
         <DateCalendar
           sx={{ margin: 0 }}
           readOnly

src/renderer/components/Login.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import TextField from "@mui/material/TextField";
+import IconButton from "@mui/material/IconButton";
+import DoneIcon from "@mui/icons-material/Done";
+
+const Login = ({ setIsLoggedIn }: { setIsLoggedIn: (isLoggedIn: boolean) => void }) => {
+  const [password, setPassword] = useState("");
+  const [hasError, setHasError] = useState(false);
+
+  const submitPassword = async () => {
+    if (await window.api.checkPassword(password)) {
+      window.sessionStorage.setItem("loggedIn", "y");
+      setIsLoggedIn(true);
+    } else {
+      setHasError(true);
+    }
+    setPassword("");
+  };
+
+  return (
+    <div className="flex flex-row my-4">
+      <TextField
+        label={hasError ? "Try again" : "Enter password"}
+        spellCheck={true}
+        onChange={(event) => setPassword(event.target.value)}
+        className="w-1/2"
+        error={hasError}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            submitPassword();
+          }
+        }}
+      />
+      <IconButton onClick={submitPassword}>
+        <DoneIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+export default Login;