[refactoring] login/register as dialog

components/Login.vue

@@ -0,0 +1,82 @@
+<template lang='pug'>
+  el-dialog(:visible='show' @close='close'
+    append-to-body :title="$t('common.login')")
+
+    p(v-html="$t('login.description')")
+    div(v-loading='loading')
+
+      el-input.mb-2(v-model='email' type='email' name='email' prefix-icon='el-icon-user'
+        :placeholder='$t("common.email")' autocomplete='email' ref='email')
+
+      el-input.mb-1(v-model='password'  @keyup.enter.native="submit"
+        prefix-icon='el-icon-lock' name='password'
+        type='password' :placeholder='$t("common.password")')
+
+      a(href='#' @click='forgot') {{$t('login.forgot_password')}}
+
+    span(slot='footer')
+      el-button.mr-1(plain type="success"
+        :disabled='disabled' @click='submit') {{$t('common.login')}}
+      nuxt-link(to='/?ref=register' v-if='settings.allow_registration')
+        el-button.mt-1(plain type="primary") {{$t('login.not_registered')}}
+
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import { Message } from 'element-ui'
+import get from 'lodash/get'
+
+export default {
+  name: 'Login',
+  props: ['show'],
+  data () {
+    return {
+      password: '',
+      email: '',
+      loading: false,
+    }
+  },
+  computed: {
+    ...mapState(['settings']),
+    disabled () {
+      return !this.email || !this.password
+    }
+  },
+  methods: {
+    ...mapActions(['login']),
+    close () {
+      this.$router.replace('/')
+      this.$emit('close')
+    },
+    async forgot () {
+      if (!this.email) {
+        Message({ message: this.$t('login.insert_email'), showClose: true, type: 'error' })
+        this.$refs.email.focus()
+        return
+      }
+      this.loading = true
+      await this.$axios.$post('/user/recover', { email: this.email })
+      this.loading = false
+      Message({ message: this.$t('login.check_email'), type: 'success' })
+    },
+    async submit (e) {
+      if (this.disabled) return false
+      e.preventDefault()
+      try {
+        this.loading = true
+        await this.$auth.loginWith('local', { data: { email: this.email, password: this.password } })
+        this.loading = false
+        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' })
+        this.loading = false
+        return
+      }
+      this.email = this.password = ''
+    }
+  }
+}
+</script>

components/Nav.vue

@@ -1,11 +1,13 @@
 <template lang="pug">
   el-menu.d-flex.nav(mode='horizontal' background-color="#222C32")
-
+    Login(:show='showLogin', @close='showLogin=false')
+    Register(:show='showRegister', @close='showRegister=false')
     nuxt-link(to='/about')
       el-menu-item(:title="$t('common.info')")
         img#logo(src='/favicon.ico')
 
-    nuxt-link(to='/login')
+    //- el-link(@click='showLogin=true')
+    nuxt-link(to='/?ref=login')
       el-menu-item(v-if='!$auth.loggedIn' :title="$t('common.login')")
         v-icon(color='lightgreen' name='user')
 
@@ -42,16 +44,38 @@
 import { Message } from 'element-ui'
 import { mapState } from 'vuex'
 import Search from '@/components/Search'
+import Login from '@/components/Login'
+import Register from '@/components/Register'
 
 export default {
   name: 'Nav',
-  components: { Search },
+  components: { Search, Login, Register },
+  data (ctx) {
+    return {
+      showLogin: this.$route.query.ref === 'login',
+      showRegister: this.$route.query.ref === 'register'
+    }
+  },
   computed: {
     could_add () {
       return (this.$auth.loggedIn || this.settings.allow_anon_event)
     },
     ...mapState(['filters', 'settings'])
   },
+  beforeRouteUpdate (to, from, next) {
+    console.error('ciaosdfj oaisjdf oaidj ', to.params)
+  },
+  watch: {
+    '$route.query.ref' (value) {
+      if (value === 'register') {
+        this.showRegister = true
+        this.showLogin = false
+      } else if (value === 'login') {
+        this.showLogin = true
+        this.showRegister = false
+      }
+    }
+  },
   methods: {
     logout () {
       Message({

components/Register.vue

@@ -0,0 +1,80 @@
+<template lang='pug'>
+  el-dialog(:visible='show' @close='close'
+    append-to-body :title="$t('common.register')")
+
+    p(v-html="$t('register.description')")
+    div(v-loading='loading')
+
+      el-input.mb-2(v-model='user.username' type='text' name='username'
+        :placeholder='$t("common.username")' prefix-icon='el-icon-user')
+
+      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='loading?"circle-notch":"chevron-right"' :spin='loading'/>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import { Message } from 'element-ui'
+import get from 'lodash/get'
+
+export default {
+  name: 'Register',
+  props: ['show'],
+  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.$router.replace('/')
+      } 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>