Merge pull request #1 from fosslife/master

V1.1.0

.github/FUNDING.yml

@@ -0,0 +1,14 @@
+# These are supported funding model platforms
+
+github: [sparkenstein, fosslife]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -2,14 +2,20 @@
 
 (didn't want to call it tauthy or Taegis)
 
-![Logo](banner.jpg)
+![Logo](assets/banner.jpg)
 
 ## Badges
 
 ![MIT License](https://img.shields.io/github/license/fosslife/truthy.svg)
 ![GitHub issues](https://badgen.net/github/issues/fosslife/truthy) ![GitHub stars](https://badgen.net/github/stars/fosslife/truthy)
 ![Latest release](https://badgen.net/github/release/fosslife/truthy)
 
+## Screenshots
+
+![ss1](assets/ss1.png)
+![ss2](assets/ss2.png)
+![ss3](assets/ss3.png)
+
 ## Summary
 
 - Data is stored in battle-tested KBDX format

package.json

@@ -1,7 +1,7 @@
 {
   "name": "truthy",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "truthy"
-version = "1.0.0"
+version = "1.1.0"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"
@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = [ "dialog-message", "dialog-save", "window-minimize", "dialog-open", "dialog-confirm", "clipboard-write-text", "fs-all", "path-all", "shell-open"] }
+tauri = { version = "1", features = [ "window-close", "dialog-message", "dialog-save", "window-minimize", "dialog-open", "dialog-confirm", "clipboard-write-text", "fs-all", "path-all", "shell-open"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rust-argon2 = "2.1.0"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "truthy",
-    "version": "1.0.0"
+    "version": "1.1.0"
   },
   "tauri": {
     "allowlist": {
@@ -30,12 +30,12 @@
       },
       "fs": {
         "all": true,
-        "scope": ["**"]
+        "scope": ["$APPDATA", "$APPDATA/vault.kdbx", "$APPLOG"]
       },
       "window": {
         "all": false,
         "center": false,
-        "close": false,
+        "close": true,
         "create": false,
         "hide": false,
         "maximize": false,

src/App.tsx

@@ -49,7 +49,7 @@ function App() {
       const b64 = _arrayBufferToBase64(contents);
 
       await writeTextFile("vault.kdbx", b64, {
-        dir: BaseDirectory.App,
+        dir: BaseDirectory.AppData,
       });
       loadDb(db);
 
@@ -64,7 +64,7 @@ function App() {
       );
 
       const b64 = await readTextFile("vault.kdbx", {
-        dir: BaseDirectory.App,
+        dir: BaseDirectory.AppData,
       });
 
       const contents = _base64ToArrayBuffer(b64);
@@ -88,7 +88,7 @@ function App() {
   useEffect(() => {
     (async () => {
       const fileExists = await exists("vault.kdbx", {
-        dir: BaseDirectory.App,
+        dir: BaseDirectory.AppData,
       });
       setFirstTime(!fileExists);
     })();

src/components/Modals/ChangePasswordModal.tsx

@@ -34,7 +34,7 @@ export function ChangePasswordModal({
         kdbxweb.ProtectedValue.fromString(currentPassword)
       );
       const b64 = await readTextFile("vault.kdbx", {
-        dir: BaseDirectory.App,
+        dir: BaseDirectory.AppData,
       });
       const contents = _base64ToArrayBuffer(b64);
       await kdbxweb.Kdbx.load(contents, creds);

src/components/Modals/ExportModal.tsx

@@ -130,7 +130,7 @@ function ExportModalBase({ isOpen, onClose }: ExportModalProps) {
 
     if (path) {
       await copyFile("vault.kdbx", path, {
-        dir: BaseDirectory.App,
+        dir: BaseDirectory.AppData,
       });
       notifications.show({
         message: "Exported KDBX",

src/components/Modals/MainModal.tsx

@@ -75,15 +75,11 @@ export function MainModalBase({ onClose, opened }: QrModalProps) {
           onClick={() => {
             onClose();
             nav("/new", { replace: true });
-            // openManual();
           }}
-          variant="light"
         >
           Add Manually
         </Button>
-        <Button onClick={readQr} variant="light">
-          Read QR Code
-        </Button>
+        <Button onClick={readQr}>Read QR Code</Button>
       </Stack>
     </Opener>
   );

src/contexts/Settings.tsx

@@ -1,12 +1,15 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { useAppContext } from "./App";
 import { savedb } from "../utils/kdbx";
+import { baseColors } from "../utils/random";
+import { useTheme } from "./Theme";
 
 export type Settings = {
   blurMode: boolean;
   digitGrouping: string;
   minimizeOnCopy: boolean;
   view: "compact" | "card";
+  theme: (typeof baseColors)[number];
 };
 
 type SettingsContext = {
@@ -24,6 +27,7 @@ const defaultSettings: Settings = {
   digitGrouping: "3",
   minimizeOnCopy: false,
   view: "card",
+  theme: "brand",
 };
 
 export const SettingsContextProvider = ({
@@ -33,6 +37,7 @@ export const SettingsContextProvider = ({
 }) => {
   const [settings, setSettings] = useState<Settings>(defaultSettings);
   const { db, group } = useAppContext();
+  const { changePrimaryColor } = useTheme();
 
   useEffect(() => {
     if (!db) return;
@@ -47,7 +52,9 @@ export const SettingsContextProvider = ({
     async function init() {
       const settings = db?.meta.customData?.get("settings");
       if (settings) {
-        setSettings(JSON.parse(settings.value!));
+        const s = JSON.parse(settings.value!);
+        setSettings(s);
+        changePrimaryColor(s.theme);
         return;
       }
       setSettings({ ...defaultSettings });

src/contexts/Theme.tsx

@@ -0,0 +1,57 @@
+import {
+  MantineColorsTuple,
+  MantineProvider,
+  createTheme,
+} from "@mantine/core";
+import { PropsWithChildren, createContext, useContext, useState } from "react";
+
+type ThemeContextType = {
+  color: string;
+  changePrimaryColor: (color: string) => void;
+};
+
+const ThemeContext = createContext<ThemeContextType>({
+  color: "blue",
+  changePrimaryColor: () => {},
+});
+
+const brand: MantineColorsTuple = [
+  "#ffeaf3",
+  "#fdd4e1",
+  "#f4a7bf",
+  "#ec779c",
+  "#e64f7e",
+  "#e3356b",
+  "#e22762",
+  "#c91a52",
+  "#b41149",
+  "#9f003e",
+];
+
+export const ThemeProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const [primaryColor, setPrimaryColor] = useState<string>("brand");
+
+  const theme = createTheme({
+    components: {},
+    primaryColor,
+    colors: {
+      brand,
+    },
+  });
+
+  const changePrimaryColor = (color: string) => {
+    setPrimaryColor(color);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ color: primaryColor, changePrimaryColor }}>
+      <MantineProvider defaultColorScheme={"dark"} theme={theme}>
+        {children}
+      </MantineProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};

src/main.tsx

@@ -17,6 +17,7 @@ import { SettingsContextProvider } from "./contexts/Settings";
 import EntryDetails from "./pages/New/indx";
 import { createDir, exists } from "@tauri-apps/api/fs";
 import { appDataDir } from "@tauri-apps/api/path";
+import { ThemeProvider } from "./contexts/Theme";
 
 const browserRouter = createBrowserRouter([
   {
@@ -31,39 +32,21 @@ const browserRouter = createBrowserRouter([
   { path: "/edit/:id", element: <EntryDetails /> },
 ]);
 
-const myColor: MantineColorsTuple = [
-  "#ffeaf3",
-  "#fdd4e1",
-  "#f4a7bf",
-  "#ec779c",
-  "#e64f7e",
-  "#e3356b",
-  "#e22762",
-  "#c91a52",
-  "#b41149",
-  "#9f003e",
-];
-
-const theme = createTheme({
-  components: {},
-  primaryColor: "brand",
-  colors: {
-    brand: myColor,
-  },
-});
-
 (async () => {
-  const appdir = await appDataDir();
+  const appDatadir = await appDataDir();
+  console.log("appDatadir", appDatadir);
 
-  const appDirExists = await exists(appdir);
-  if (!appDirExists) {
-    await createDir(appdir);
+  const addExists = await exists(appDatadir);
+  console.log("app dir exists?", addExists);
+  if (!addExists) {
+    await createDir(appDatadir);
+    console.log("App dir created");
   }
 })();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <MantineProvider defaultColorScheme={"dark"} theme={theme}>
+    <ThemeProvider>
       <Notifications
         styles={{
           root: {
@@ -79,6 +62,6 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           <RouterProvider router={browserRouter} />
         </SettingsContextProvider>
       </AppContextProvider>
-    </MantineProvider>
+    </ThemeProvider>
   </React.StrictMode>
 );

src/pages/Home/components/Card.tsx

@@ -133,6 +133,8 @@ export function Card({ e, isLatest }: CardProps) {
             color={copied ? "teal" : undefined}
             onClick={async () => {
               copy();
+              e.entry?.fields.set("counter", (e.counter + 1).toString());
+              e.entry?.times.update();
               await clipboard.writeText(e.otp!);
               if (settings.minimizeOnCopy) {
                 appWindow.minimize();

src/pages/Home/components/Navbar.tsx

@@ -111,7 +111,6 @@ export function Navbar({
             </Menu.Item>
 
             <Menu.Item
-              disabled
               onClick={() => handleSortType("usage count")}
               leftSection={
                 <IconBrandDaysCounter
@@ -122,7 +121,6 @@ export function Navbar({
               Most used
             </Menu.Item>
             <Menu.Item
-              disabled
               onClick={() => handleSortType("last used")}
               leftSection={
                 <IconCalendar style={{ width: rem(24), height: rem(24) }} />