[ux] register/login as pages

components/Nav.vue

@@ -1,77 +1,55 @@
 <template lang="pug">
-  el-menu.d-flex.nav(mode='horizontal' background-color="#222C32")
+  div#nav
-    Login(:show='showLogin', @close='showLogin=false')
+    nuxt-link#logo(to='/')
-    Register(:show='showRegister', @close='showRegister=false')
+      img(src='/favicon.ico')
-    nuxt-link(to='/about')
+      span.ml-1.hidden-xs-only {{settings.title}}
-      el-menu-item(:title="$t('common.info')")
+        small.hidden-sm-only  {{settings.description}}
-        img#logo(src='/favicon.ico')
 
-    nuxt-link(v-if='!$auth.loggedIn' to='/?ref=login')
+    el-menu#menu(mode='horizontal' router )
-      el-menu-item(:title="$t('common.login')")
+      el-menu-item(v-if='could_add' index='/add')
-        v-icon(color='lightgreen' name='user')
+        i.el-icon-plus
+        span.hidden-xs-only {{$t('common.add_event')}}
 
-    nuxt-link(v-if='could_add' to='/add')
+      //- nuxt-link(to='/export')
-      el-menu-item(:title="$t('common.add_event')")
+      el-menu-item(index='/export')
-        v-icon(color='lightgreen' name='plus')
+        i.el-icon-share
+        span.hidden-xs-only {{$t('common.share')}}
 
-    el-popover(placement="bottom" trigger="click")
+      el-menu-item(v-if='!$auth.loggedIn' index='/login')
-      Search(past-filter recurrent-filter)
+        i.el-icon-user
-      el-menu-item(slot='reference' :title="$t('common.search')" icon='el-share-button')
+        span.hidden-xs-only {{$t('common.login')}}
-        v-icon(color='lightblue' name='search')
+      el-submenu(v-if='$auth.loggedIn' index=3)
-        el-badge(v-if='filters.tags.length+filters.places.length>0' is-dot type='warning')
+        template(slot='title')
+          i.el-icon-user
+          span.hidden-xs-only {{$t('common.user')}}
+        el-menu-item(divided index='/settings')
+          i.el-icon-s-tools
+          span {{$t('common.settings')}}
+        el-menu-item(v-if='$auth.user.is_admin'  index='/admin')
+          i.el-icon-s-operation
+          span {{$t('common.admin')}}
+        el-menu-item(@click='logout')
+          i.el-icon-switch-button
+          span  {{$t('common.logout')}}
 
-    nuxt-link(v-if='$auth.loggedIn' to='/settings')
+      el-menu-item(type='text' v-clipboard:copy='`${settings.baseurl}/feed/rss`' v-clipboard:success='copyLink')
-      el-menu-item(:title="$t('common.settings')")
+        v-icon(color='orange' name='rss')
-        v-icon(color='orange' name='cog')
-
-    nuxt-link(v-if='$auth.user && $auth.user.is_admin'  to='/admin')
-      el-menu-item(:title="$t('common.admin')")
-        v-icon(color='lightblue' name='tools')
-
-    nuxt-link(to='/export')
-      el-menu-item(:title="$t('common.share')")
-        v-icon(name='share' color='yellow')
-
-    el-menu-item(v-if='$auth.loggedIn' @click='logout' :title="$t('common.logout')")
-      v-icon(color='red' name='sign-out-alt')
-
-    el-menu-item(:title="$t('common.feed')" v-clipboard:copy='`${settings.baseurl}/feed/rss`' v-clipboard:success='copyLink')
-      v-icon(color='orange' name='rss')
 
 </template>
 <script>
 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, Login, Register },
+  components: { Search },
-  data () {
-    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'])
   },
-  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: {
     copyLink () {
       Message({ message: this.$t('common.feed_url_copied'), type: 'success', showClose: true })
@@ -84,13 +62,28 @@ export default {
 }
 </script>
 
-<style>
+<style lang='less'>
-
-.el-menu.el-menu--horizontal {
-  border-bottom: none;
-}
 
 #logo {
-  height: 30px;
+  float: left;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  font-size: 1.5em;
+  font-weight: 600;
+  text-decoration: none;
+  small {
+    font-size: 0.5em;
+  }
 }
+
+#menu {
+  float: right;
+  border-bottom: none;
+
+  .el-menu-item {
+    padding: 0px 15px;
+  }
+}
+
 </style>

pages/Login.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
   el-main
-    el-card.mt-5
+    el-card
-      h3(slot='header') Login
+      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(get(e, 'response.data.message', e)), showClose: true, type: 'error' })
-        Message({ message: this.$t('login.error') + this.$t(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

@@ -1,31 +1,30 @@
 <template lang='pug'>
-  el-dialog(:visible='show' @close='close' :close-on-click-modal='false'
+  el-main
-    append-to-body :title="$t('common.register')")
+    el-card
+      h4(slot='header').text-center <el-icon name='user'/> {{$t('common.register')}}
+      p(v-html="$t('register.description')")
+      div(v-loading='loading')
 
-    p(v-html="$t('register.description')")
+        el-input.mb-2(ref='email' v-model='user.email' type='email' required
-    div(v-loading='loading')
+          :placeholder='$t("common.email")' autocomplete='email'
+          prefix-icon='el-icon-message' name='email')
 
-      el-input.mb-2(ref='email' v-model='user.email' type='email' required
+        el-input.mb-2(v-model='user.password' type="password"
-        :placeholder='$t("common.email")' autocomplete='email'
+          placeholder="Password" name='password' required  prefix-icon='el-icon-lock')
-        prefix-icon='el-icon-message' name='email')
 
-      el-input.mb-2(v-model='user.password' type="password"
+        el-input.mb-2(v-model='user.description' type="textarea" rows='3' :placeholder="$t('common.description')")
-        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'/>
-    span(slot='footer')
-      el-button(plain type="success" :disabled='disabled' @click='register') {{$t('common.send')}} <v-icon name='chevron-right'/>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { Message } from 'element-ui'
 import get from 'lodash/get'
 
 export default {
   name: 'Register',
-  props: ['show'],
   data () {
     return {
       loading: false,