From 13ab5c1345235d492bc7e39d22d4e3d0dbea46ee Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Tue, 10 Nov 2020 23:56:07 -0800
Subject: [PATCH] proxyauth: Use ajax instead of form submit

---
 src/proxyauth-login.html | 56 ++++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/src/proxyauth-login.html b/src/proxyauth-login.html
index 0ee06d033..e5ba3b230 100644
--- a/src/proxyauth-login.html
+++ b/src/proxyauth-login.html
@@ -59,23 +59,47 @@
 <div class="container">
     <h1 class="center">Cloudron Login</h1>
 
-    <form action="/login" method="post">
-        <table>
-            <tr>
-                <td>Username:</td>
-                <td><input type="text" name="username" autofocus=""/></td>
-            </tr>
-            <tr>
-                <td>Password:</td>
-                <td><input type="password" name="password"/></td>
-            </tr>
-            <tr>
-                <td></td>
-                <td class="right"><input type="submit" value="Login" class="button"/></td>
-            </tr>
-        </table>
-    </form>
+    <table>
+        <tr>
+            <td>Username:</td>
+            <td><input type="text" id="username" autofocus=""/></td>
+        </tr>
+        <tr>
+            <td>Password:</td>
+            <td><input type="password" id="password"/></td>
+        </tr>
+        <tr>
+            <td></td>
+            <td class="right"><input type="submit" value="Login" id="login" class="button"/></td>
+        </tr>
+    </table>
+
+    <p id="message"></p>
 </div>
 
+<script>
+    function login() {
+        var username = document.getElementById('username').value;
+        var password = document.getElementById('password').value;
+
+        fetch('/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username: username, password: password })
+        }).then(function (response) {
+            if (response.status === 401 || response.status === 403) {
+                document.getElementById('message').innerText = 'Invalid username or password';
+                return;
+            }
+
+            var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+            window.location.href = search.redirect || '/';
+        });
+    }
+    document.getElementById('username').addEventListener('keyup', function (e) { if (e.key === 'Enter') login(); });
+    document.getElementById('password').addEventListener('keyup', function (e) { if (e.key === 'Enter') login(); });
+    document.getElementById('login').addEventListener('click', function (e) { login(); });
+</script>
+
 </body>
 </html>