Improve login flow when cors-errors are likely

This commit is contained in:
Matthias 2020-12-02 08:14:00 +01:00
parent 778cc2e7ff
commit 82cf57ad11

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container"> <div>
<form ref="form" novalidate @submit.stop.prevent="handleSubmit" @reset="handleReset"> <form ref="form" novalidate @submit.stop.prevent="handleSubmit" @reset="handleReset">
<b-form-group <b-form-group
:state="urlState" :state="urlState"
@ -38,16 +38,23 @@
@keydown.enter.native="handleOk" @keydown.enter.native="handleOk"
></b-form-input> ></b-form-input>
</b-form-group> </b-form-group>
<div>
<b-alert v-if="errorMessage" class="alert-wrap" show variant="warning">
{{ errorMessage }}
<br />
<span v-if="errorMessageCORS">
Please also check your bot's CORS configuration:
<a href="https://www.freqtrade.io/en/latest/rest-api/#cors"
>Freqtrade CORS documentation</a
></span
>
</b-alert>
</div>
<div v-if="inModal === false" class="float-right"> <div v-if="inModal === false" class="float-right">
<b-button class="mr-2" type="reset" variant="danger">Reset</b-button> <b-button class="mr-2" type="reset" variant="danger">Reset</b-button>
<b-button type="submit" variant="primary">Submit</b-button> <b-button type="submit" variant="primary">Submit</b-button>
</div> </div>
</form> </form>
<div>
<b-alert v-if="errorMessage" show variant="warning">
{{ errorMessage }}
</b-alert>
</div>
</div> </div>
</template> </template>
@ -88,6 +95,8 @@ export default class Login extends Vue {
errorMessage = ''; errorMessage = '';
errorMessageCORS = false;
checkFormValidity() { checkFormValidity() {
const valid = this.$refs.form.checkValidity(); const valid = this.$refs.form.checkValidity();
this.nameState = valid; this.nameState = valid;
@ -141,16 +150,20 @@ export default class Login extends Vue {
} }
}) })
.catch((error) => { .catch((error) => {
this.errorMessageCORS = false;
// this.nameState = false; // this.nameState = false;
console.log(error.response); console.log(error.response);
if (error.response && error.response.status === 401) { if (error.response && error.response.status === 401) {
this.nameState = false; this.nameState = false;
this.errorMessage = 'Login failed, Username or Password wrong.'; this.errorMessage = 'Connected to bot, however Login failed, Username or Password wrong.';
} else { } else {
this.urlState = false; this.urlState = false;
this.errorMessage = `Login failed. this.errorMessage = `Login failed.
Please verify that the bot is running, the Bot API is enabled and the URL is reachable. Please verify that the bot is running, the Bot API is enabled and the URL is reachable.
You can try this by going to http://${this.auth.url}/api/v1/ping`; You can verify this by navigating to ${this.auth.url}/api/v1/ping to make sure the bot API is reachable`;
if (this.auth.url !== window.location.origin) {
this.errorMessageCORS = true;
}
} }
console.log(this.errorMessage); console.log(this.errorMessage);
this.emitLoginResult(false); this.emitLoginResult(false);
@ -159,4 +172,8 @@ export default class Login extends Vue {
} }
</script> </script>
<style scoped></style> <style scoped lang="scss">
.alert-wrap {
white-space: pre-wrap;
}
</style>