<template> <form class="signup" @submit.prevent="signup" > <div v-if="error" class="feedback error" >{{ error }}</div> <div v-if="success" class="feedback success" >Signup successful, redirecting</div> <template v-else> <input v-model="username" placeholder="Username" type="text" class="input" required > <input v-model="email" placeholder="E-mail" type="email" class="input" required > <input v-model="password" placeholder="Password" type="password" class="input" required > <button type="submit" class="button button-primary" >Sign up</button> <RouterLink v-if="$store.state.auth.login" :to="{ name: 'login', query: { ref: $route.query.ref } }" class="link link-external login" >Log in</RouterLink> </template> </form> </template> <script> async function signup() { this.error = null; this.success = false; try { await this.$store.dispatch('signup', { username: this.username, email: this.email, password: this.password, }); this.success = true; setTimeout(() => { this.$router.replace(this.$route.query.ref || { name: 'home' }); }, 1000); } catch (error) { this.error = error.message; } } function mounted() { if (!this.$store.state.auth.signup) { this.$router.replace({ name: 'not-found' }); } } export default { data() { return { username: null, email: null, password: null, success: false, error: null, }; }, mounted, methods: { signup, }, }; </script> <style lang="scss" scoped> .signup { width: 20rem; display: flex; flex-direction: column; margin: auto; } .input { margin: 0 0 .5rem 0; } .feedback { padding: 1rem; text-align: center; font-weight: bold; } .error { color: var(--error); } .success { color: var(--shadow-strong); } .button { margin: 0 0 .25rem 0; } .login { padding: .5rem; text-align: center; } </style>