monograph: show error message for empty password on unlock

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

apps/monograph/app/components/monographpost/index.tsx

@@ -387,10 +387,14 @@ function MonographLockscreen({
 }) {
   const [error, setError] = useState<string>();
   const [loading, setLoading] = useState<boolean>();
-  const password = useRef<string>();
+  const password = useRef<string>("");
 
   const unlock = useCallback(async () => {
-    if (!password.current) return;
+    if (!password.current) {
+      setError("Password is required.");
+      return;
+    }
+
     setError(undefined);
     setLoading(true);
     try {
@@ -470,7 +474,9 @@ function MonographLockscreen({
             }}
             autoFocus={true}
             autofillBackgroundColor="background-secondary"
-            onChange={(event) => (password.current = event.target.value)}
+            onChange={(event) => {
+              password.current = event.target.value;
+            }}
             onKeyUp={(e) => (e.key === "Enter" ? unlock() : null)}
             type="password"
             placeholder="Enter password to continue"
@@ -480,6 +486,7 @@ function MonographLockscreen({
             title="Unlock"
             sx={{ borderRadius: 100, px: 50, mt: 1 }}
             onClick={() => unlock()}
+            disabled={loading}
           >
             Unlock
           </Button>