Nebucatnetzer
/
find_coach
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add error handling to the auth page

This commit is contained in:
Andreas Zweili 2021-07-28 22:50:43 +02:00
parent ba84e606c5
commit 0d0f934a9a
1 changed files with 50 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/auth/UserAuth.vue
View File

@ -1,23 +1,32 @@
<template> <template>
<base-card> <div>
<form @submit.prevent="submitForm"> <base-dialog :show="!!error" title="An error occured" @close="handleError">
<div class="form-control"> <p>{{ error }}</p>
<label for="email">E-Mail</label> </base-dialog>
<input type="email" id="email" v-model.trim="email" /> <base-dialog :show="isLoading" title="Authenticating..." fixed>
</div> <base-spinner></base-spinner>
<div class="form-control"> </base-dialog>
<label for="password">Password</label>
<input type="password" id="password" v-model.trim="password" /> <base-card>
</div> <form @submit.prevent="submitForm">
<p v-if="!formIsValid"> <div class="form-control">
Please enter a valid email and password (min. 6 characters). <label for="email">E-Mail</label>
</p> <input type="email" id="email" v-model.trim="email" />
<base-button>{{ submitButtonCaption }}</base-button> </div>
<base-button type="button" mode="flat" @click="switchAuthMode">{{ <div class="form-control">
switchModeButtonCaption <label for="password">Password</label>
}}</base-button> <input type="password" id="password" v-model.trim="password" />
</form> </div>
</base-card> <p v-if="!formIsValid">
Please enter a valid email and password (min. 6 characters).
</p>
<base-button>{{ submitButtonCaption }}</base-button>
<base-button type="button" mode="flat" @click="switchAuthMode">{{
switchModeButtonCaption
}}</base-button>
</form>
</base-card>
</div>
</template> </template>
<script> <script>
@ -27,7 +36,9 @@ export default {
email: '', email: '',
password: '', password: '',
formIsValid: true, formIsValid: true,
mode: 'login' mode: 'login',
isLoading: false,
error: null
}; };
}, },
computed: { computed: {
@ -47,7 +58,7 @@ export default {
} }
}, },
methods: { methods: {
submitForm() { async submitForm() {
this.formIsValid = true; this.formIsValid = true;
if ( if (
this.email === '' || this.email === '' ||
@ -57,22 +68,32 @@ export default {
this.formIsValid = false; this.formIsValid = false;
return; return;
} }
this.isLoading = true;
if (this.mode === 'login') { try {
// if (this.mode === 'login') {
} else { //
this.$store.dispatch('signup', { } else {
email: this.email, await this.$store.dispatch('signup', {
password: this.password email: this.email,
}); password: this.password
});
}
} catch (error) {
this.error = error;
} }
this.isLoading = false;
}, },
switchAuthMode() { switchAuthMode() {
if (this.mode === 'login') { if (this.mode === 'login') {
this.mode = 'signup'; this.mode = 'signup';
} else { } else {
this.mode = 'login'; this.mode = 'login';
} }
},
handleError() {
this.error = null;
} }
} }
}; };