Merge branch 'new_auth' of https://github.com/hyle-team/zano-extension into new_auth

src/app/components/ConnectPage/ConnectPage.jsx

@@ -17,60 +17,65 @@ export default function ConnectPage({
 
 
     const [keyValue, setKeyValue] = useState("");
-    const [receivedPublicKey, setReceivedPublicKey] = useState("");
 
     const [keyIncorrect, setKeyIncorrect] = useState(false);
+    const [portIncorrect, setPortIncorrect] = useState(false);
 
     const [password, setPassword] = useState("");
-	const [passwordRepeat, setPasswordRepeat] = useState("");
+    const [passwordRepeat, setPasswordRepeat] = useState("");
+    const [walletPort, setWalletPort] = useState("12111");
 
-	const [invalidPassword, setInvalidPassword] = useState(false);
+    const [invalidPassword, setInvalidPassword] = useState(false);
 
-	function onPasswordInput(event, repeat) {
-		const { value } = event.currentTarget;
-		setIncorrectPassword(false);
-		setInvalidPassword(false);
-		if (repeat) {
-			setPasswordRepeat(value);
-		} else {
-			setPassword(value);
-		}
-	}
-
-    async function connectClick() {
-        const response = await fetchBackground({ method: "CREATE_CONNECT_KEY" });
-        setReceivedPublicKey(response.publicKey);
+    function onPasswordInput(event, repeat) {
+        const { value } = event.currentTarget;
+        setIncorrectPassword(false);
+        setInvalidPassword(false);
+        if (repeat) {
+            setPasswordRepeat(value);
+        } else {
+            setPassword(value);
+        }
     }
 
-
-    useEffect(() => {
-        connectClick();
-    }, []);
-
     async function continueClick() {
 
-        
+
         const correctPassword = (
-            password === passwordRepeat && 
+            password === passwordRepeat &&
             password
         );
 
         if (!correctPassword) return setInvalidPassword(true);
 
+        if (!parseInt(walletPort, 10)) {
+            console.log('PORT IS NOT A NUMBER');
+            return setPortIncorrect(true);
+        }
 
-        const publicKey = forge.pki.publicKeyFromPem(receivedPublicKey);
-        const encrypted = publicKey.encrypt(keyValue);
-        const response = await fetchBackground({ method: "VALIDATE_CONNECT_KEY", key: encrypted });
+        await fetchBackground({ method: "SET_API_CREDENTIALS", credentials: { port: walletPort } });
 
-        if (response.success) {
-            setConnectData(dispatch, {
-                token: keyValue,
-                publicKey: receivedPublicKey
-            });
-    
-            onConfirm && onConfirm(password, keyValue, receivedPublicKey);
+        const publicKeyResponse = await fetchBackground({ method: "CREATE_CONNECT_KEY" });
+        
+        if (!publicKeyResponse.publicKey) {
+            console.log('NO PUBLIC KEY RECEIVED');
+            return setPortIncorrect(true);
+        }
+
+        setConnectData(dispatch, {
+            token: keyValue,
+            publicKey: publicKeyResponse.publicKey,
+            port: walletPort // not handled
+        });
+
+        if (onConfirm) {
+            onConfirm(
+                password, 
+                keyValue, 
+                publicKeyResponse.publicKey
+            );
         } else {
-            setKeyIncorrect(true);
+            throw new Error("No onConfirm function provided");
         }
     }
 
@@ -81,40 +86,45 @@ export default function ConnectPage({
 
     return (
         <div className={s.connect}>
-			<img
-				className={s.logoImage}
-				src={logo}
-				alt="Zano"
-			/>
+            <img
+                className={s.logoImage}
+                src={logo}
+                alt="Zano"
+            />
             <div className={s.connectCodeContent}>
                 <div className={s.input}>
-                    <MyInput 
-                        type="number"
+                    <MyInput
                         label="Wallet port"
                         placeholder="Enter port here"
-                        inputData={{ value: "" }} 
+                        inputData={{ value: walletPort }}
+                        noValidation={true}
+                        type={"number"}
+                        onChange={event => {
+                            setWalletPort(event.currentTarget.value);
+                            setPortIncorrect(false);
+                        }}
                     />
-                    {false && <p>Wallet is not responding</p>}
+                    {portIncorrect && <p>Wallet is not responding</p>}
                 </div>
 
-                <MyInput 
+                <MyInput
                     label="Wallet secret"
                     placeholder="Enter secret here"
                     inputData={{ value: keyValue, isDirty: keyIncorrect }}
                     onChange={onKeyInput}
                 />
-                <MyInput 
-					type="password"
+                <MyInput
+                    type="password"
                     label="Password"
                     placeholder="Password"
                     inputData={{ value: password, isDirty: !!(incorrectPassword || invalidPassword) }}
-					onChange={event => onPasswordInput(event, false)}
+                    onChange={event => onPasswordInput(event, false)}
                 />
-                <MyInput 
-					type="password"
+                <MyInput
+                    type="password"
                     placeholder="Repeat password"
                     inputData={{ value: passwordRepeat, isDirty: !!(incorrectPassword || invalidPassword) }}
-					onChange={event => onPasswordInput(event, true)}
+                    onChange={event => onPasswordInput(event, true)}
                 />
                 <Button onClick={continueClick}>Continue</Button>
             </div>

src/app/components/UI/MyInput/MyInput.jsx

@@ -12,13 +12,14 @@ const MyInput = memo((props) => {
     noActiveBorder,
     type,
     isError,
+    noValidation,
     ...otherProps
   } = props;
   const { value, onChange, onInput, inputValid, onBlur, isDirty, isFilled } =
     inputData;
 
   const onInputHandler = (e) => {
-    if (type === "number") {
+    if (type === "number" && !noValidation) {
       const newValue = e.target.value
         .replace(/[^0-9.]/g, "")
         .replace(/(\..*?)\..*/g, "$1")

src/background/background.js

@@ -34,7 +34,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
   switch (request.method) {
     case "SET_API_CREDENTIALS":
-      apiCredentials = request.credentials;
+      apiCredentials = {
+        ...(apiCredentials || {}),
+        ...request.credentials
+      };
+      console.log("API credentials set to", apiCredentials);
       break;
 
     case "PING_WALLET":