1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-23 01:20:11 +00:00

provide error message on login and display it nicely

server now provides a reason for login fail to the web ui, and displays
it inside the login button, which looks a lot nicer than the previously
used error box.
This commit is contained in:
Harvey Tindall 2020-08-19 14:50:16 +01:00
parent daf190f68b
commit 6781316474
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
3 changed files with 24 additions and 11 deletions

View File

@ -97,7 +97,7 @@ func (app *appContext) GetToken(gc *gin.Context) {
if status != 200 || err != nil { if status != 200 || err != nil {
if status == 401 || status == 400 { if status == 401 || status == 400 {
app.info.Println("Auth failed: Invalid username and/or password") app.info.Println("Auth failed: Invalid username and/or password")
respond(401, "Unauthorized", gc) respond(401, "Invalid username/password", gc)
return return
} }
app.err.Printf("Auth failed: Couldn't authenticate with Jellyfin: Code %d", status) app.err.Printf("Auth failed: Couldn't authenticate with Jellyfin: Code %d", status)

View File

@ -527,9 +527,13 @@ document.getElementById('inviteForm').onsubmit = function() {
document.getElementById('loginForm').onsubmit = function() { document.getElementById('loginForm').onsubmit = function() {
window.token = ""; window.token = "";
let details = serializeForm('loginForm'); let details = serializeForm('loginForm');
let errorArea = document.getElementById('loginErrorArea'); // let errorArea = document.getElementById('loginErrorArea');
errorArea.textContent = ''; // errorArea.textContent = '';
let button = document.getElementById('loginSubmit'); let button = document.getElementById('loginSubmit');
if (button.classList.contains('btn-danger')) {
button.classList.add('btn-primary');
button.classList.remove('btn-danger');
}
button.disabled = true; button.disabled = true;
button.innerHTML = button.innerHTML =
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' + '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
@ -538,14 +542,24 @@ document.getElementById('loginForm').onsubmit = function() {
req.responseType = 'json'; req.responseType = 'json';
req.onreadystatechange = function() { req.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState == 4) {
if (this.status == 401) { if (this.status != 200) {
let errormsg = req.response["error"];
if (errormsg == "") {
errormsg = "Unknown error"
}
button.disabled = false; button.disabled = false;
button.textContent = 'Login'; button.textContent = errormsg;
let wrongPassword = document.createElement('div'); if (!button.classList.contains('btn-danger')) {
wrongPassword.classList.add('alert', 'alert-danger'); button.classList.add('btn-danger');
wrongPassword.setAttribute('role', 'alert'); button.classList.remove('btn-primary');
wrongPassword.textContent = "Incorrect username or password."; }
errorArea.appendChild(wrongPassword); setTimeout(function () {
if (button.classList.contains('btn-danger')) {
button.classList.add('btn-primary');
button.classList.remove('btn-danger');
button.textContent = 'Login';
}
}, 4000)
} else { } else {
const data = this.response; const data = this.response;
window.token = data['token']; window.token = data['token'];

View File

@ -136,7 +136,6 @@
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required> <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
</div> </div>
</form> </form>
<div id="loginErrorArea"></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" id="loginSubmit" class="btn btn-primary" form="loginForm">Login</button> <button type="submit" id="loginSubmit" class="btn btn-primary" form="loginForm">Login</button>