diff --git a/front/src/components/auth/Login.vue b/front/src/components/auth/Login.vue index f84ad9295b1f4a77f67599b769f558d318ee8882..2cf6d5f6db1cd8bc4e4d72d96be5c70d559e9452 100644 --- a/front/src/components/auth/Login.vue +++ b/front/src/components/auth/Login.vue @@ -32,6 +32,9 @@ > </div> <button :class="['ui', {'loading': isLoading}, 'button']" type="submit">Login</button> + <router-link class="ui right floated basic button" :to="{path: '/signup'}"> + Create an account + </router-link> </form> </div> </div> diff --git a/front/src/components/auth/Signup.vue b/front/src/components/auth/Signup.vue new file mode 100644 index 0000000000000000000000000000000000000000..13b723d201437933d9f6fd46bcaccfb2d316f5ed --- /dev/null +++ b/front/src/components/auth/Signup.vue @@ -0,0 +1,137 @@ +<template> + <div class="main pusher"> + <div class="ui vertical stripe segment"> + <div class="ui small text container"> + <h2>Create a funkwhale account</h2> + <form + v-if="$store.state.instance.settings.users.registration_enabled.value" + :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']" + @submit.prevent="submit()"> + <div v-if="errors.length > 0" class="ui negative message"> + <div class="header">We cannot create your account</div> + <ul class="list"> + <li v-for="error in errors">{{ error }}</li> + </ul> + </div> + <div class="field"> + <label>Username</label> + <input + ref="username" + required + type="text" + autofocus + placeholder="Enter your username" + v-model="username"> + </div> + <div class="field"> + <label>Email</label> + <input + ref="email" + required + type="email" + placeholder="Enter your email" + v-model="email"> + </div> + <div class="field"> + <label>Password</label> + <div class="ui action input"> + <input + required + :type="passwordInputType" + placeholder="Enter your password" + v-model="password"> + <span @click="showPassword = !showPassword" title="Show/hide password" class="ui icon button"> + <i class="eye icon"></i> + </span> + </div> + </div> + <button :class="['ui', 'green', {'loading': isLoading}, 'button']" type="submit">Create my account</button> + </form> + <p v-else>Registration is currently disabled on this instance, please try again later.</p> + </div> + </div> + </div> +</template> + +<script> +import axios from 'axios' +import logger from '@/logging' + +export default { + name: 'login', + props: { + next: {type: String, default: '/'} + }, + data () { + return { + username: '', + email: '', + password: '', + isLoadingInstanceSetting: true, + errors: [], + isLoading: false, + showPassword: false + } + }, + created () { + let self = this + this.$store.dispatch('instance/fetchSettings', { + callback: function () { + self.isLoadingInstanceSetting = false + } + }) + }, + methods: { + submit () { + var self = this + self.isLoading = true + this.errors = [] + var payload = { + username: this.username, + password1: this.password, + password2: this.password, + email: this.email + } + return axios.post('auth/registration/', payload).then(response => { + logger.default.info('Successfully created account') + self.$router.push({ + name: 'profile', + params: { + username: this.username + }}) + }, error => { + self.errors = this.getErrors(error.response) + self.isLoading = false + }) + }, + getErrors (response) { + let errors = [] + if (response.status !== 400) { + errors.push('An unknown error occured, ensure your are connected to the internet and your funkwhale instance is up and running') + return errors + } + for (var field in response.data) { + if (response.data.hasOwnProperty(field)) { + response.data[field].forEach(e => { + errors.push(e) + }) + } + } + return errors + } + }, + computed: { + passwordInputType () { + if (this.showPassword) { + return 'text' + } + return 'password' + } + } + +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +</style> diff --git a/front/src/router/index.js b/front/src/router/index.js index ea8854bbe48e4f06ec4369a2853b3e98271df733..c1d03e059442ff98731bb903159d532b62ef4286 100644 --- a/front/src/router/index.js +++ b/front/src/router/index.js @@ -3,6 +3,7 @@ import Router from 'vue-router' import PageNotFound from '@/components/PageNotFound' import Home from '@/components/Home' import Login from '@/components/auth/Login' +import Signup from '@/components/auth/Signup' import Profile from '@/components/auth/Profile' import Settings from '@/components/auth/Settings' import Logout from '@/components/auth/Logout' @@ -38,6 +39,11 @@ export default new Router({ component: Login, props: (route) => ({ next: route.query.next || '/library' }) }, + { + path: '/signup', + name: 'signup', + component: Signup + }, { path: '/logout', name: 'logout', diff --git a/front/src/store/instance.js b/front/src/store/instance.js index a0071f0961d6536f2133331787d90245a6dc1df4..dd20a8b1d72b7ab62f190cf4d54ac4aec8a9483d 100644 --- a/front/src/store/instance.js +++ b/front/src/store/instance.js @@ -6,6 +6,11 @@ export default { namespaced: true, state: { settings: { + users: { + registration_enabled: { + value: true + } + }, raven: { front_enabled: { value: false @@ -23,7 +28,7 @@ export default { }, actions: { // Send a request to the login URL and save the returned JWT - fetchSettings ({commit}) { + fetchSettings ({commit}, {callback}) { return axios.get('instance/settings/').then(response => { logger.default.info('Successfully fetched instance settings') let sections = {} @@ -34,6 +39,9 @@ export default { sections[e.section][e.name] = e }) commit('settings', sections) + if (callback) { + callback() + } }, response => { logger.default.error('Error while fetching settings', response.data) })