Signup form

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>

front/src/components/auth/Signup.vue

+<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>

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',

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)
       })