Merge pull request #377 from cstenglein/syncscreen-form

make syncscreen unlock a form
raspiblitz · Jul 3, 2022 · fb77f01 · fb77f01
2 parents 64b71ae + a94e50e
commit fb77f01
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 25 deletions.
diff --git a/backend-mock/setup.js b/backend-mock/setup.js
@@ -12,6 +12,16 @@ router.get("/status", function (req, res) {
       initialsync: "",
     })
   );
+
+  // Syncscreen
+  // res.status(200).send(
+  //   JSON.stringify({
+  //     setupPhase: "",
+  //     state: "ready",
+  //     message: "Node Running",
+  //     initialsync: "running",
+  //   })
+  // );
 });
 
 router.get("/setup-start-info", function (req, res) {
@@ -54,7 +64,20 @@ router.get("/shutdown", function (req, res) {
 
 router.post("/setup-sync-info", function (req, res) {
   console.info(`call to ${req.originalUrl}`);
-  res.send(true);
+  res.status(200).send(
+    JSON.stringify({
+      initialsync: "",
+      btc_default: "1",
+      btc_default_ready: "1",
+      btc_default_sync_percentage: "20",
+      btc_default_peers: "3",
+      system_count_start_blockchain: "1",
+      ln_default: "1",
+      ln_default_ready: "1",
+      ln_default_locked: "1",
+      system_count_start_lightning: "3",
+    })
+  );
 });
 
 module.exports = router;
diff --git a/src/components/Setup/SyncScreen.tsx b/src/components/Setup/SyncScreen.tsx
@@ -1,12 +1,15 @@
 import { ChangeEvent, FC, useState } from "react";
+import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import LoadingSpinner from "../../components/Shared/LoadingSpinner/LoadingSpinner";
+import { ReactComponent as CheckCircleIcon } from "../../assets/check-circle.svg";
+import { ReactComponent as XCircleIcon } from "../../assets/x-circle.svg";
+import Message from "../../container/Message/Message";
 import ProgressCircle from "../../container/ProgressCircle/ProgressCircle";
 import SetupContainer from "../../container/SetupContainer/SetupContainer";
 import { instance } from "../../util/interceptor";
-import { ReactComponent as CheckCircleIcon } from "../../assets/check-circle.svg";
-import { ReactComponent as XCircleIcon } from "../../assets/x-circle.svg";
+import ButtonWithSpinner from "../Shared/ButtonWithSpinner/ButtonWithSpinner";
+import InputField from "../Shared/InputField/InputField";
 
 export interface InputData {
   data: SyncData | any;
@@ -26,19 +29,25 @@ interface SyncData {
   system_count_start_lightning: string;
 }
 
+interface IFormInputs {
+  passwordInput: string;
+}
+
 const SyncScreen: FC<InputData> = ({ data, callback }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
   const [password, setPassword] = useState("");
   const [runningUnlock, setRunningUnlock] = useState(false);
+  const [passwordWrong, setPasswordWrong] = useState(false);
 
   const changePasswordHandler = (event: ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };
 
   const unlockWallet = async () => {
     setRunningUnlock(true);
+    setPasswordWrong(false);
     await instance
       .post("/lightning/unlock-wallet", {
         password: password,
@@ -47,9 +56,9 @@ const SyncScreen: FC<InputData> = ({ data, callback }) => {
         if (err.response.status === 403) {
           navigate("/login?back=/setup");
         } else {
-          console.log("error on unlock wallet");
           setPassword("");
           setRunningUnlock(false);
+          setPasswordWrong(true);
         }
       });
     // TODO: Why setRunningUnlock always after 30s?
@@ -59,6 +68,14 @@ const SyncScreen: FC<InputData> = ({ data, callback }) => {
     }, 30000);
   };
 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<IFormInputs>({
+    mode: "onChange",
+  });
+
   return (
     <SetupContainer>
       <section className="flex h-full flex-col items-center justify-center md:p-8">
@@ -99,33 +116,34 @@ const SyncScreen: FC<InputData> = ({ data, callback }) => {
                 )}
               {data.ln_default &&
                 data.ln_default !== "none" &&
-                data.ln_default_locked !== "0" &&
-                !runningUnlock && (
-                  <div className="flex flex-col justify-center">
-                    <label htmlFor="passfirst" className="label-underline">
-                      {t("setup.sync_wallet_info")}
-                    </label>
-                    <input
-                      id="passfirst"
-                      className="input-underline w-full"
+                data.ln_default_locked !== "0" && (
+                  <form
+                    className="flex flex-col justify-center"
+                    onSubmit={handleSubmit(unlockWallet)}
+                  >
+                    <InputField
+                      {...register("passwordInput", {
+                        required: t("setup.password_error_empty"),
+                        onChange: changePasswordHandler,
+                      })}
                       type="password"
+                      label={t("setup.sync_wallet_info")}
+                      disabled={runningUnlock}
+                      errorMessage={errors.passwordInput}
                       value={password}
-                      onChange={changePasswordHandler}
-                      required
                     />
-                    <button
+                    <ButtonWithSpinner
+                      type="submit"
                       onClick={unlockWallet}
+                      loading={runningUnlock}
+                      disabled={!isValid}
                       className="bd-button my-5 p-2"
                     >
                       {t("setup.sync_wallet_unlock")}
-                    </button>
-                  </div>
+                    </ButtonWithSpinner>
+                  </form>
                 )}
-              {runningUnlock && (
-                <div className="flex justify-center">
-                  <LoadingSpinner color="text-yellow-500" />
-                </div>
-              )}
+              {passwordWrong && <Message message={t("login.invalid_pass")} />}
             </div>
           </div>
           <div className="mx-auto flex flex-col justify-center">

diff --git a/src/components/Shared/I18nDropdown/I18nDropdown.tsx b/src/components/Shared/I18nDropdown/I18nDropdown.tsx
@@ -24,7 +24,10 @@ const I18nDropdown: FC = () => {
 
   return (
     <article className="flex justify-between">
-      <label htmlFor="lngSelect" className="w-1/2 font-bold dark:text-white">
+      <label
+        htmlFor="lngSelect"
+        className="mr-2 w-1/2 font-bold dark:text-white"
+      >
         {t("settings.language")}
       </label>
       <select