Merge pull request #42 from shu-vro:shu-vro/issue9

Shu-vro/issue9
shu-vro · Jul 23, 2022 · 676b63d · 676b63d
2 parents 8469390 + 67ae489
commit 676b63d
Show file tree

Hide file tree

Showing 54 changed files with 2,012 additions and 740 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,7 @@
         "npmlist",
         "Parens",
         "postbody",
+        "previewable",
         "tsbuildinfo",
         "vbscript"
     ],

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,34 @@
+## Chores
+
+-   **release:**
+    -   0.1.2 ([768f840f](https://github.com/shu-vro/CrudMan/commit/768f840f60b4d96de5bfbb23061a9dcb102f266a))
+    -   0.1.1 ([9ad5a29d](https://github.com/shu-vro/CrudMan/commit/9ad5a29d4f1d622067761085a8ad36cfabb46e6b))
+
+### v0.1.1
+
+## What's Changed
+
+-   Fixed #12 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/13
+-   Issue fixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/15
+-   Issue fixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/16
+-   Merge by @shu-vro in https://github.com/shu-vro/CrudMan/pull/17
+-   Merge pull request #17 from shu-vro/main by @shu-vro in https://github.com/shu-vro/CrudMan/pull/18
+-   Updated `authslide` pane view by @shu-vro in https://github.com/shu-vro/CrudMan/pull/19
+-   Merging changes to issueixer#14 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/20
+-   fixed #21 by @shu-vro in https://github.com/shu-vro/CrudMan/pull/22
+-   Issue Fixed #14. by @shu-vro in https://github.com/shu-vro/CrudMan/pull/24
+
+**Full Changelog**: https://github.com/shu-vro/CrudMan/compare/v0.1.0...v0.1.1
+
+### v0.1.0 (2022-07-18)
+
+## What's Changed
+
+-   Create CODE_OF_CONDUCT.md by @shu-vro in https://github.com/shu-vro/CrudMan/pull/6
+-   Create LICENSE by @shu-vro in https://github.com/shu-vro/CrudMan/pull/10
+
+## New Contributors
+
+-   @shu-vro made their first contribution in https://github.com/shu-vro/CrudMan/pull/6
+
+**Full Changelog**: https://github.com/shu-vro/CrudMan/commits/v0.1.0
diff --git a/components/Checkbox.tsx b/components/Checkbox.tsx
@@ -2,7 +2,12 @@ import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 import styles from "@styles/Checkbox.module.scss";
 
-export default function Checkbox({ label = "", ...rest }) {
+export default function Checkbox({
+    label = "",
+    type = "checkbox",
+    Ref = null,
+    ...rest
+}) {
     const [id, setId] = useState(v4());
     useEffect(() => {
         setId(prev => prev);
@@ -11,7 +16,7 @@ export default function Checkbox({ label = "", ...rest }) {
     return (
         <>
             <label className={styles.checkbox} htmlFor={id}>
-                <input id={id} {...rest} />
+                <input id={id} {...rest} type={type} ref={Ref} />
                 <svg viewBox="0 0 21 21">
                     <path d="M5,10.75 L8.5,14.25 L19.4,2.3 C18.8333333,1.43333333 18.0333333,1 17,1 L4,1 C2.35,1 1,2.35 1,4 L1,17 C1,18.65 2.35,20 4,20 L17,20 C18.65,20 20,18.65 20,17 L20,7.99769186"></path>
                 </svg>

diff --git a/components/Config/AuthSlide/APIKeySlide.tsx b/components/Config/AuthSlide/APIKeySlide.tsx
@@ -1,17 +1,25 @@
 import { useEffect, useRef, useState } from "react";
 import { InputAuth } from ".";
 import { useAuth } from "@utils/Auth";
-import { useParams } from "@utils/Params";
 import { useHistorySaver } from "@utils/HistorySaver";
 import Checkbox from "components/Checkbox";
+import { defineTooltip } from "@utils/utils";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
 
 export default function APIKeySlide() {
     const formRef = useRef(null);
     const includeRef = useRef(null);
     const { setObject } = useAuth();
-    const { setObject: setParams } = useParams();
     const [defaultValue, setDefaultValue] = useState([]);
     const historySaver = useHistorySaver();
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (historySaver.defaultObject.authMethod !== "APIKey") return;
@@ -40,72 +48,77 @@ export default function APIKeySlide() {
         );
     }, [historySaver.defaultObject]);
 
-    useEffect(() => {
-        let methodFromAuthSlide: string = "APIKey";
-        const form: HTMLFormElement = formRef.current;
-
-        form.addEventListener("input", e => {
-            e.preventDefault();
-            let formData = new FormData(form);
-            let key = formData.get("api_access_key").toString();
-            let checkbox = formData.get("api_access_checkbox");
-            let value = formData.get("api_access_value");
-            if (key === "")
-                return setObject({
-                    headers: {},
-                    params: {},
-                    setObject,
-                    methodFromAuthSlide: "",
-                });
-            if (checkbox === "on") {
-                setObject(prev => {
-                    return {
-                        ...prev,
+    return (
+        <form
+            className="slide authSlide APIKey"
+            ref={formRef}
+            onInput={() => {
+                let methodFromAuthSlide: string = "APIKey";
+                let formData = new FormData(formRef.current);
+                let key = formData.get("api_access_key").toString();
+                let checkbox = formData.get("api_access_checkbox");
+                let value = formData.get("api_access_value").toString();
+                if (key === "")
+                    return setObject({
                         headers: {},
-                        params: { [key]: value },
-                        setObject,
-                        methodFromAuthSlide,
-                    };
-                });
-            } else {
-                setObject(prev => {
-                    return {
-                        ...prev,
-                        headers: { [key]: value },
                         params: {},
                         setObject,
-                        methodFromAuthSlide,
-                    };
-                });
-            }
-        });
-    }, [setObject, setParams]);
-
-    const a = useAuth();
-    useEffect(() => {
-        console.log(a);
-    }, [a]);
-
-    return (
-        <form className="slide authSlide APIKey" ref={formRef}>
+                        methodFromAuthSlide: "",
+                    });
+                if (checkbox === "on") {
+                    setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: {},
+                            params: { [key]: value },
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                } else {
+                    setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: { [key]: value },
+                            params: {},
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                }
+            }}>
             <h3>Basic Authentication</h3>
             {/* <label>Include in Query</label> */}
             <Checkbox
                 label="Include In Query"
                 type="checkbox"
                 name="api_access_checkbox"
                 value="on"
-                ref={includeRef}
+                Ref={includeRef}
             />
             <InputAuth
                 FieldName="Key"
                 name="api_access_key"
                 defaultValue={defaultValue?.[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}
             />
             <InputAuth
                 FieldName="Value"
                 name="api_access_value"
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
         </form>
     );

diff --git a/components/Config/AuthSlide/AuthSlide.tsx b/components/Config/AuthSlide/AuthSlide.tsx
@@ -13,7 +13,13 @@ export default function AuthSlide() {
     const auth = useAuth();
     const selectRef = useRef(null);
     const historySaver = useHistorySaver();
-    let lists = ["None", "Basic", "Bearer", "APIKey", "OAuth2"];
+    let lists = [
+        "None",
+        "Basic",
+        "Bearer",
+        "APIKey",
+        // "OAuth2"
+    ];
     const [component, setComponent] = useState(null);
 
     useEffect(() => {
@@ -32,6 +38,12 @@ export default function AuthSlide() {
                 })
             );
         }, 100);
+        auth.setObject(prev => ({
+            ...prev,
+            headers: historySaver.defaultObject.auth.headers,
+            params: historySaver.defaultObject.auth.params,
+            methodFromAuthSlide: historySaver.defaultObject.authMethod,
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [historySaver.defaultObject]);
 
@@ -42,9 +54,11 @@ export default function AuthSlide() {
             setComponent(<BearerSlide />);
         } else if (e.target.value === "APIKey") {
             setComponent(<APIKeySlide />);
-        } else if (e.target.value === "OAuth2") {
-            setComponent(<OAuth2Slide />);
-        } else {
+        }
+        //  else if (e.target.value === "OAuth2") {
+        //     setComponent(<OAuth2Slide />);
+        // }
+        else {
             setComponent(<NoneSlide />);
             auth.setObject(prev => ({
                 ...prev,

diff --git a/components/Config/AuthSlide/BasicSlide.tsx b/components/Config/AuthSlide/BasicSlide.tsx
@@ -1,13 +1,24 @@
 import { useEffect, useRef, useState } from "react";
+import Mustache from "mustache";
 import { InputAuth } from ".";
 import { useAuth } from "@utils/Auth";
 import { useHistorySaver } from "@utils/HistorySaver";
+import { useEnvironment } from "@utils/Env";
+import ReactTooltip from "react-tooltip";
+import { defineTooltip } from "@utils/utils";
 
 export default function BasicSlide() {
     const formRef = useRef(null);
     const { setObject } = useAuth();
     const [defaultValue, setDefaultValue] = useState([]);
     const historySaver = useHistorySaver();
+    const [tooltipTextForField, setTooltipTextForField] = useState("");
+    const [tooltipTextForValue, setTooltipTextForValue] = useState("");
+    const environment = useEnvironment();
+
+    useEffect(() => {
+        ReactTooltip.rebuild();
+    }, []);
 
     useEffect(() => {
         if (historySaver.defaultObject.authMethod !== "basic") return;
@@ -32,54 +43,68 @@ export default function BasicSlide() {
         );
     }, [historySaver.defaultObject]);
 
-    useEffect(() => {
-        let methodFromAuthSlide: string = "basic";
-        let form: HTMLFormElement = formRef.current;
-        form.addEventListener("input", e => {
-            e.preventDefault();
-            let formData = new FormData(form);
-            let username = formData.get("basic_username");
-            let password = formData.get("basic_password");
-            if (username === "")
-                return setObject(prev => {
+    return (
+        <form
+            className="slide authSlide Basic"
+            ref={formRef}
+            onInput={() => {
+                let methodFromAuthSlide: string = "basic";
+                let formData = new FormData(formRef.current);
+                let username = formData.get("basic_username");
+                let password = formData.get("basic_password");
+                try {
+                    username = Mustache.render(username, environment.variables);
+                    password = Mustache.render(password, environment.variables);
+                } catch (error) {}
+
+                if (username === "")
+                    return setObject(prev => {
+                        return {
+                            ...prev,
+                            headers: {},
+                            params: {},
+                            setObject,
+                            methodFromAuthSlide,
+                        };
+                    });
+                let Authorization = `${methodFromAuthSlide} ${Buffer.from(
+                    `${username}:${password}`
+                ).toString("base64")}`;
+                setObject(prev => {
                     return {
                         ...prev,
-                        headers: {},
-                        params: {},
+                        headers: { Authorization },
                         setObject,
                         methodFromAuthSlide,
                     };
                 });
-            let Authorization = `${methodFromAuthSlide} ${Buffer.from(
-                `${username}:${password}`
-            ).toString("base64")}`;
-            // setObject({ Authorization, setObject, methodFromAuthSlide });
-            setObject(prev => {
-                return {
-                    ...prev,
-                    headers: { Authorization },
-                    setObject,
-                    methodFromAuthSlide,
-                };
-            });
-        });
-    }, [setObject]);
-
-    return (
-        <form className="slide authSlide Basic" ref={formRef}>
+            }}>
             <h3>Basic Authentication</h3>
             <InputAuth
                 FieldName="Username"
                 name="basic_username"
                 autoComplete="username"
                 defaultValue={defaultValue?.[0]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForField}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForField);
+                }}
             />
             <InputAuth
                 FieldName="Password"
-                type="password"
                 name="basic_password"
                 autoComplete="current-password"
                 defaultValue={defaultValue?.[1]}
+                data-html={true}
+                data-place="bottom"
+                data-tip={tooltipTextForValue}
+                onInput={e => {
+                    let value = (e.target as HTMLInputElement).value;
+                    defineTooltip(value, environment, setTooltipTextForValue);
+                }}
             />
         </form>
     );