[ux] register/login as pages

pages/Login.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
   el-main
-    el-card.mt-5
-      h3(slot='header') Login
+    el-card
+      h4(slot='header').text-center <el-icon name='user'/> {{$t('common.login')}}
       p(v-html="$t('login.description')")
       div(v-loading='loading')
 
@@ -15,9 +15,10 @@
         div
           el-button.text-right(type='text' @click='forgot') {{$t('login.forgot_password')}}
 
-        el-button.mt-5(plain type="success"
+        el-button.mt-5.mr-1(plain type="success"
           :disabled='disabled' @click='submit') {{$t('common.login')}}
-        el-button(type='primary' plain  href='/?ref=register' v-if='settings.allow_registration') {{$t('login.not_registered')}}
+        nuxt-link(to='/register' v-if='settings.allow_registration')
+          el-button(type='primary' plain) {{$t('login.not_registered')}}
 </template>
 
 <script>
@@ -34,9 +35,6 @@ export default {
       loading: false
     }
   },
-  head () {
-    title: 'Login'
-  },
   computed: {
     ...mapState(['settings']),
     disabled () {
@@ -71,13 +69,17 @@ export default {
         Message({ message: this.$t('login.ok'), showClose: true, type: 'success' })
         this.close()
       } catch (e) {
-        e = get(e, 'response.data.message', e)
-        Message({ message: this.$t('login.error') + this.$t(e), showClose: true, type: 'error' })
+        Message({ message: this.$t('login.error') + this.$t(get(e, 'response.data.message', e)), showClose: true, type: 'error' })
         this.loading = false
         return
       }
       this.email = this.password = ''
     }
+  },
+  head () {
+    return {
+      title: this.settings.title + ' - ' + this.$t('common.login')
+    }
   }
 }
 </script>

pages/Register.vue

@@ -0,0 +1,76 @@
+<template lang='pug'>
+  el-main
+    el-card
+      h4(slot='header').text-center <el-icon name='user'/> {{$t('common.register')}}
+      p(v-html="$t('register.description')")
+      div(v-loading='loading')
+
+        el-input.mb-2(ref='email' v-model='user.email' type='email' required
+          :placeholder='$t("common.email")' autocomplete='email'
+          prefix-icon='el-icon-message' name='email')
+
+        el-input.mb-2(v-model='user.password' type="password"
+          placeholder="Password" name='password' required  prefix-icon='el-icon-lock')
+
+        el-input.mb-2(v-model='user.description' type="textarea" rows='3' :placeholder="$t('common.description')")
+
+      span(slot='footer')
+        el-button(plain type="success" :disabled='disabled' @click='register') {{$t('common.send')}} <v-icon name='chevron-right'/>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { Message } from 'element-ui'
+import get from 'lodash/get'
+
+export default {
+  name: 'Register',
+  data () {
+    return {
+      loading: false,
+      user: {}
+    }
+  },
+  head () {
+    return {
+      title: this.settings.title + ' - ' + this.$t('common.register')
+    }
+  },
+  validate ({ store }) {
+    return store.state.settings.allow_registration
+  },
+  computed: {
+    ...mapState(['settings']),
+    disabled () {
+      if (process.server) { return false }
+      return !this.user.password || !this.user.email || !this.user.description
+    }
+  },
+  methods: {
+    close () {
+      this.$router.replace('/')
+      this.$emit('close')
+    },
+    async register () {
+      this.loading = true
+      try {
+        const { user } = await this.$axios.$post('/user/register', this.user)
+        Message({
+          showClose: true,
+          message: this.$t(`register.${user.is_admin ? 'admin_' : ''}complete`),
+          type: 'success'
+        })
+        this.close()
+      } catch (e) {
+        const error = get(e, 'response.data.errors[0].message', String(e))
+        Message({
+          showClose: true,
+          message: this.$t(error),
+          type: 'error'
+        })
+      }
+      this.loading = false
+    }
+  }
+}
+</script>