From 72a2064417ff3b8a46978b9cd05f8a1b8923d128 Mon Sep 17 00:00:00 2001
From: mahcodes <mhmdali102@bk.ru>
Date: Thu, 26 Jan 2023 09:25:03 +0200
Subject: [PATCH 1/3] feat(ui only): support signin by generating
 public/private keypair #33

---
 app/Login.tsx      | 52 ++++++++++++++++++++++++++++++++++++++++++----
 app/PopupInput.tsx | 40 +++++++++++++++++++++++++++--------
 2 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/app/Login.tsx b/app/Login.tsx
index 8e37089..45ed202 100644
--- a/app/Login.tsx
+++ b/app/Login.tsx
@@ -7,12 +7,16 @@ import Button from "./Button";
 import AccountButton from "./AccountButton";
 
 import { KeysContext } from "./context/keys-provider.jsx";
+import PopupInput from "./PopupInput";
+import { generatePrivateKey, getPublicKey } from 'nostr-tools'
+import { ImShuffle } from "react-icons/im";
 
 export default function Login() {
   // @ts-ignore
   const { keys, setKeys } = useContext(KeysContext);
   const [isOpen, setIsOpen] = useState(false);
   const [isLightningConnected, setIsLightningConnected] = useState(false);
+  const [hidePrivateKey, setHidePrivateKey] = useState(true);
 
   useEffect(() => {
     const shouldReconnect = localStorage.getItem("shouldReconnect");
@@ -28,7 +32,7 @@ export default function Login() {
           // @ts-ignore
           const publicKey = await nostr.getPublicKey();
           // console.log("public key", publicKey);
-          setKeys({ privateKey: "", publicKey: publicKey });
+          setKeys({ privateKey: "", publicKey });
         } catch (e: any) {
           console.log(e.message);
         }
@@ -39,7 +43,7 @@ export default function Login() {
     if (shouldReconnect === "true") {
       getConnected(shouldReconnect);
     }
-  }, []);
+  }, [setKeys]);
 
   const loginHandler = async () => {
     // @ts-ignore
@@ -56,6 +60,12 @@ export default function Login() {
     setIsOpen(false);
   };
 
+  const generateKeys = () => {
+    const privateKey = generatePrivateKey();
+    const publicKey = getPublicKey(privateKey);
+    setKeys({ privateKey, publicKey });
+  };
+
   const handleClick = async () => {
     setIsOpen(true);
   };
@@ -76,12 +86,46 @@ export default function Login() {
       )}
 
       <Popup title="Generate Keys" isOpen={isOpen} setIsOpen={setIsOpen}>
+        <div className="flex items-center gap-2">
+          <PopupInput
+            label="Private Key"
+            value={keys?.privateKey}
+            onChange={(e) => setKeys({ ...keys, privateKey: e.target.value })}
+            password={keys.privateKey}
+            isPassword={hidePrivateKey}
+            toggleIsPassword={() => setHidePrivateKey(current => !current)}
+          />
+        </div>
+        <PopupInput
+          label="Public Key"
+          value={keys?.publicKey}
+          onChange={(e) => setKeys({ ...keys, publicKey: e.target.value })}
+        />
+        <div className="flex items-center gap-2 ">
+          <Button
+            className="w-full"
+            variant="outline"
+            onClick={generateKeys}
+            size="sm"
+            icon=<ImShuffle />
+          >
+            Generate Keys
+          </Button>
+          <Button
+            className="w-full"
+            onClick={loginHandler}
+            size="sm"
+
+          >
+          Login
+          </Button>
+        </div>
+        <h2 className="text-center">OR</h2>
         <Button
           className="w-full"
           onClick={loginHandler}
-          color="blue"
           size="sm"
-          icon={<BsLightningChargeFill size="14" />}
+          icon={<BsLightningChargeFill />}
         >
           {isLightningConnected ? "connected" : "Login with NIP-07 Extension"}
         </Button>
diff --git a/app/PopupInput.tsx b/app/PopupInput.tsx
index 4991653..4420fe4 100644
--- a/app/PopupInput.tsx
+++ b/app/PopupInput.tsx
@@ -1,4 +1,7 @@
 import { DetailedHTMLProps, InputHTMLAttributes, useId } from "react";
+import { RxEyeClosed, RxEyeOpen } from "react-icons/rx";
+import Button from "./Button";
+import Truncate from "./Truncate";
 
 interface PopupInputProps
   extends DetailedHTMLProps<
@@ -9,6 +12,9 @@ interface PopupInputProps
   error?: string;
   value?: string;
   className?: string;
+  password?: string;
+  isPassword?: boolean;
+  toggleIsPassword?: () => void;
 }
 
 const PopupInput = ({
@@ -17,25 +23,41 @@ const PopupInput = ({
   placeholder = "",
   value = "",
   className = "",
+  password = "",
+  isPassword,
+  toggleIsPassword,
   ...props
 }: PopupInputProps) => {
   const id = useId();
 
   return (
-    <div>
+    <div className="w-full">
       <label className="text-sm font-bold pt-[.15rem]" htmlFor={id}>
         {label}
       </label>
       {error && <p className="text-red-400 pl-3 text-sm mt-1">{error}</p>}
       {error ? null : (
-        <input
-          type="text"
-          id={id}
-          className={`bg-secondary rounded-md border-2 border-tertiary mt-1 py-2 px-4 block w-full leading-normal ${className}`}
-          placeholder={placeholder}
-          value={value}
-          {...props}
-        />
+        <div className="relative">
+          <input
+            type={isPassword ? "password" : "text"}
+            id={id}
+            className={`bg-secondary rounded-md border-2 border-tertiary mt-1 py-2 block w-full leading-normal ${toggleIsPassword ? "pl-4 pr-20" : "px-4"
+              } ${className}`}
+            placeholder={placeholder}
+            value={value}
+            {...props}
+          />
+          {toggleIsPassword ? (
+            <div className="flex items-center gap-1 absolute right-2 top-1/2 transform -translate-y-1/2">
+              <Truncate iconOnly color="transparent" content={password} />
+              <Button
+                color="transparent"
+                icon={isPassword ? <RxEyeOpen /> : <RxEyeClosed />}
+                onClick={toggleIsPassword}
+              />
+            </div>
+          ) : null}
+        </div>
       )}
     </div>
   );

From c681371a648173b91933f24b3129d7f9713a7d7a Mon Sep 17 00:00:00 2001
From: mahcodes <mhmdali102@bk.ru>
Date: Thu, 26 Jan 2023 09:34:19 +0200
Subject: [PATCH 2/3] fix: login button icon and colors

---
 app/Login.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/Login.tsx b/app/Login.tsx
index 45ed202..2942f46 100644
--- a/app/Login.tsx
+++ b/app/Login.tsx
@@ -10,6 +10,7 @@ import { KeysContext } from "./context/keys-provider.jsx";
 import PopupInput from "./PopupInput";
 import { generatePrivateKey, getPublicKey } from 'nostr-tools'
 import { ImShuffle } from "react-icons/im";
+import { FaSignInAlt } from "react-icons/fa";
 
 export default function Login() {
   // @ts-ignore
@@ -104,6 +105,7 @@ export default function Login() {
         <div className="flex items-center gap-2 ">
           <Button
             className="w-full"
+            color="neutralLight"
             variant="outline"
             onClick={generateKeys}
             size="sm"
@@ -113,9 +115,10 @@ export default function Login() {
           </Button>
           <Button
             className="w-full"
-            onClick={loginHandler}
+            // TODO: here you need to implement the login with the generated keys
+            /* onClick={loginHandler} */
             size="sm"
-
+            icon={<FaSignInAlt />}
           >
           Login
           </Button>

From 7c792d920a64465d7baee57857637894b08cdac9 Mon Sep 17 00:00:00 2001
From: MAHcodes <MAHcodes@users.noreply.github.com>
Date: Thu, 26 Jan 2023 07:41:14 +0000
Subject: [PATCH 3/3] Prettified Code!

---
 app/Login.tsx      | 6 +++---
 app/PopupInput.tsx | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/Login.tsx b/app/Login.tsx
index 2942f46..83aaa3b 100644
--- a/app/Login.tsx
+++ b/app/Login.tsx
@@ -8,7 +8,7 @@ import AccountButton from "./AccountButton";
 
 import { KeysContext } from "./context/keys-provider.jsx";
 import PopupInput from "./PopupInput";
-import { generatePrivateKey, getPublicKey } from 'nostr-tools'
+import { generatePrivateKey, getPublicKey } from "nostr-tools";
 import { ImShuffle } from "react-icons/im";
 import { FaSignInAlt } from "react-icons/fa";
 
@@ -94,7 +94,7 @@ export default function Login() {
             onChange={(e) => setKeys({ ...keys, privateKey: e.target.value })}
             password={keys.privateKey}
             isPassword={hidePrivateKey}
-            toggleIsPassword={() => setHidePrivateKey(current => !current)}
+            toggleIsPassword={() => setHidePrivateKey((current) => !current)}
           />
         </div>
         <PopupInput
@@ -120,7 +120,7 @@ export default function Login() {
             size="sm"
             icon={<FaSignInAlt />}
           >
-          Login
+            Login
           </Button>
         </div>
         <h2 className="text-center">OR</h2>
diff --git a/app/PopupInput.tsx b/app/PopupInput.tsx
index 4420fe4..d595b74 100644
--- a/app/PopupInput.tsx
+++ b/app/PopupInput.tsx
@@ -41,8 +41,9 @@ const PopupInput = ({
           <input
             type={isPassword ? "password" : "text"}
             id={id}
-            className={`bg-secondary rounded-md border-2 border-tertiary mt-1 py-2 block w-full leading-normal ${toggleIsPassword ? "pl-4 pr-20" : "px-4"
-              } ${className}`}
+            className={`bg-secondary rounded-md border-2 border-tertiary mt-1 py-2 block w-full leading-normal ${
+              toggleIsPassword ? "pl-4 pr-20" : "px-4"
+            } ${className}`}
             placeholder={placeholder}
             value={value}
             {...props}