From 729c5d5568174d058f8fc0e0e6392fe1d8054200 Mon Sep 17 00:00:00 2001
From: Ethan O'Brien <ethan.a.obrien@gmail.com>
Date: Thu, 11 Jul 2024 07:57:18 -0500
Subject: [PATCH] Add error messages to login screen

---
 webui/src/login/Login.jsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/webui/src/login/Login.jsx b/webui/src/login/Login.jsx
index c80262e..cd626c0 100644
--- a/webui/src/login/Login.jsx
+++ b/webui/src/login/Login.jsx
@@ -5,23 +5,34 @@ import Request from '../Request.jsx'
 function Login() {
     const error = useState(new URL(window.location).searchParams.get("message") || "");
     const uid = useState((window.localStorage && window.localStorage.getItem("ew_uid")) || "");
-    let password;
+    const password = useState("");
+
+    function showError(message) {
+        error[1](message);
+    }
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (!uid[0] || !password || isNaN(uid[0])) return;
+        if (!uid[0] || !password[0]) {
+            showError("Missing userid/password");
+            return;
+        }
+        if (isNaN(uid[0])) {
+            showError("UserID should be a number. (The \"Friend ID\" in your profile)");
+            return;
+        }
         if (window.localStorage) window.localStorage.setItem("ew_uid", uid[0]);
         let resp = await Request(
             "/api/webui/login",
             {
                 uid: parseInt(uid[0]),
-                password: password
+                password: password[0]
             }
         );
         if (resp.result == "OK") {
             window.location.href = "/home/";
         } else {
-            error[1](resp.message);
+            showError(resp.message);
         }
     };
     
@@ -42,7 +53,7 @@ function Login() {
                 <label htmlFor="id">SIF2 ID:</label>
                 <input type="text" id="id" name="id" onChange={(event) => {uid[1](event.target.value)}} value={uid[0]} />
                 <label htmlFor="password">Transfer passcode:</label>
-                <input type="password" id="password" name="password" onChange={(event) => {password = event.target.value}} />
+                <input type="password" id="password" name="password" onChange={(event) => {password[1](event.target.value)}} />
                 <input type="submit" value="Submit" onClick={handleSubmit}/>
                 <div id="sub_div">
                     <button onClick={import_user}>Import User</button><br/><br/>