custom key

Author: trae-op

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-gp",
   "private": true,
-  "version": "0.2.17",
+  "version": "0.2.18",
   "type": "module",
   "main": "dist-main/app.js",
   "author": "traeop",

package.json

@@ -59,6 +59,7 @@ export class ResourcesActionsIpc implements TIpcHandlerInterface {
         masterKey !== undefined &&
         payload !== undefined &&
         typeof payload.key === "string" &&
+        payload.key.length &&
         payload.key.length
       ) {
         encryptedVault = await this.cryptoService.encrypt(
@@ -110,7 +111,8 @@ export class ResourcesActionsIpc implements TIpcHandlerInterface {
         masterKey !== undefined &&
         payload !== undefined &&
         payload.key &&
-        typeof payload.key === "string"
+        typeof payload.key === "string" &&
+        payload.key.length
       ) {
         encryptedVault = await this.cryptoService.encrypt(
           masterKey,

src/main/resources/ipc/actions.ts

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import TextField from "@mui/material/TextField";
+import { useControlContextComponents } from "../hooks/useControlContext";
+
+export const CheckboxGenerateKey = () => {
+  const { renderGenerateCharacters } = useControlContextComponents();
+  const [isCheck, setCheck] = useState(false);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCheck(event.target.checked);
+  };
+
+  return (
+    <>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={isCheck}
+            onChange={handleChange}
+            name="generate-key"
+          />
+        }
+        label="Generate key"
+      />
+
+      {isCheck ? (
+        renderGenerateCharacters
+      ) : (
+        <TextField type="text" variant="outlined" name="password" fullWidth />
+      )}
+    </>
+  );
+};

src/renderer/ui-business/AddResource/components/CheckboxGenerateKey.tsx

@@ -2,11 +2,11 @@ import { useActionState, memo } from "react";
 import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import { SubmitButton } from "./SubmitButton";
-import type { TPropsForm } from "./types";
 import { useControl } from "../hooks/useControl";
 import { useControlContext } from "../hooks/useControlContext";
+import { CheckboxGenerateKey } from "./CheckboxGenerateKey";
 
-export const Form = memo(({ renderGenerateCharacters }: TPropsForm) => {
+export const Form = memo(() => {
   const { name } = useControlContext();
   const { handleTextInputChange, submitFormAction } = useControl();
   const [_, formAction] = useActionState(submitFormAction, undefined);
@@ -23,7 +23,7 @@ export const Form = memo(({ renderGenerateCharacters }: TPropsForm) => {
           fullWidth
         />
 
-        {renderGenerateCharacters}
+        <CheckboxGenerateKey />
 
         <SubmitButton />
       </Stack>

src/renderer/ui-business/AddResource/components/Form.tsx

@@ -1,8 +1,11 @@
 import { useState, useMemo } from "react";
 import type { TPropsProvider } from "./types";
-import { Context, ContextActions } from "../context";
+import { Context, ContextActions, ContextComponents } from "../context";
 
-export const Provider = ({ children }: TPropsProvider) => {
+export const Provider = ({
+  children,
+  renderGenerateCharacters,
+}: TPropsProvider) => {
   const [name, setName] = useState("");
 
   const value = useMemo(
@@ -19,11 +22,20 @@ export const Provider = ({ children }: TPropsProvider) => {
     [setName]
   );
 
+  const components = useMemo(
+    () => ({
+      renderGenerateCharacters,
+    }),
+    [renderGenerateCharacters]
+  );
+
   return (
-    <Context.Provider value={value}>
-      <ContextActions.Provider value={actions}>
-        {children}
-      </ContextActions.Provider>
-    </Context.Provider>
+    <ContextComponents.Provider value={components}>
+      <Context.Provider value={value}>
+        <ContextActions.Provider value={actions}>
+          {children}
+        </ContextActions.Provider>
+      </Context.Provider>
+    </ContextComponents.Provider>
   );
 };

src/renderer/ui-business/AddResource/components/Provider.tsx

@@ -1,12 +1,9 @@
+import { ReactElement, ReactNode } from "react";
 import { IconButtonProps } from "@mui/material/IconButton";
-import { ReactNode, ReactElement } from "react";
-
-export type TPropsForm = {
-  renderGenerateCharacters: ReactElement;
-};
 
 export type TPropsProvider = {
   children: ReactNode;
+  renderGenerateCharacters: ReactElement;
 };
 
 export type TPropsButtonProvider = IconButtonProps & {};

src/renderer/ui-business/AddResource/components/types.ts

@@ -1,7 +1,11 @@
 import { createContext } from "react";
-import type { TContext, TContextActions } from "./type";
+import type { TContext, TContextActions, TContextComponents } from "./type";
 
 export const Context = createContext<TContext | undefined>(undefined);
 export const ContextActions = createContext<TContextActions | undefined>(
   undefined
 );
+
+export const ContextComponents = createContext<TContextComponents | undefined>(
+  undefined
+);

src/renderer/ui-business/AddResource/context/context.ts

@@ -1,7 +1,13 @@
+import { ReactElement } from "react";
+
 export type TContext = {
   name: string;
 };
 
 export type TContextActions = {
   setName: React.Dispatch<React.SetStateAction<string>>;
 };
+
+export type TContextComponents = {
+  renderGenerateCharacters: ReactElement;
+};

src/renderer/ui-business/AddResource/context/type.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { Context, ContextActions } from "../context";
+import { Context, ContextActions, ContextComponents } from "../context";
 
 export const useControlContext = () => {
   const context = useContext(Context);
@@ -18,3 +18,12 @@ export const useControlContextActions = () => {
   }
   return context;
 };
+
+export const useControlContextComponents = () => {
+  const context = useContext(ContextComponents);
+
+  if (!context) {
+    throw new Error("ContextComponents must be used inside Provider");
+  }
+  return context;
+};