oidc: Give proper login error feedback

src/oidc_templates/login.ejs

@@ -71,10 +71,12 @@
             <div class="form-group">
               <label class="control-label" for="inputPassword">Password</label>
               <input type="password" class="form-control" name="password" id="inputPassword" required password-reveal>
+              <p class="has-error" id="passwordError"></p>
             </div>
             <div class="form-group">
               <label class="control-label" for="inputTotpToken">2FA Token</label>
               <input type="text" class="form-control" name="totpToken" id="inputTotpToken" value="">
+              <p class="has-error" id="totpError"></p>
             </div>
             <button class="btn btn-primary btn-outline pull-right" type="submit">Log in</button>
           </form>
@@ -89,6 +91,9 @@
 document.getElementById('loginForm').addEventListener('submit', function (event) {
     event.preventDefault();
 
+    document.getElementById('passwordError').innerText = '';
+    document.getElementById('totpError').innerText = '';
+
     var apiUrl = '<%= submitUrl %>';
     console.log('submit', apiUrl);
 
@@ -98,19 +103,37 @@ document.getElementById('loginForm').addEventListener('submit', function (event)
         totpToken: document.getElementById('inputTotpToken').value
     };
 
+    let res;
     fetch(apiUrl, {
         method: 'POST',
         body: JSON.stringify(body),
         headers: { 'Content-type': 'application/json; charset=UTF-8' }
     }).then(function (response) {
-        if (response.ok) return response.json();
-        return Promise.reject(response);
+        res = response;
+        return res.json(); // we always return objects
     }).then(function (data) {
+        console.log(res, data);
+        if (res.status === 401) {
+            if (data.message === 'Username and password does not match') {
+               document.getElementById('inputPassword').value = '';
+               document.getElementById('inputPassword').focus();
+               document.getElementById('passwordError').innerText = 'Invalid username or password';
+            } else if (data.message.indexOf('totpToken') !== -1) {
+               document.getElementById('inputTotpToken').value = '';
+               document.getElementById('inputTotpToken').focus();
+               document.getElementById('totpError').innerText = 'Missing or invalid 2FA Token';
+            } else {
+                throw new Error('Something went wrong');
+            }
+        } else if (res.status !== 200) {
+            throw new Error('Something went wrong');
+        }
+
         if (data.redirectTo) window.location.href = data.redirectTo;
         else console.log('login success but missing redirectTo in data:', data);
     }).catch(function (error) {
-        if (error.status === 401) document.getElementById('inputPassword').value = ''
-        console.warn('Something went wrong.', error);
+        document.getElementById('passwordError').innerText = 'Unexpected error. Try again later.';
+        console.warn(error, res);
     });
 });