[refactoring] login/register as dialog

assets/style.less

@@ -20,7 +20,6 @@ html, body {
   background-color: @background;
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
   box-sizing: border-box;
   font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif !important;  
   font-size: 15px;
@@ -34,22 +33,12 @@ html, body {
   margin-bottom: 5px;
 }
 
-.el-main,
+.el-main {
-.el-card {
   max-width: 1000px;
   border-radius: 0px;
-  margin: 0 auto;
+  margin: auto;
   padding: 10px;
-}
+  overflow: unset;
-
-.el-dialog {
-  margin-top: 0px !important;
-  border-radius: 0px;
-  width: 100%;
-
-  .el-dialog__body {
-    word-break: break-word;
-  }
 }
 
 .el-select-dropdown {
@@ -77,7 +66,40 @@ pre {
   word-break: normal;
 }
 
+.el-dialog {
+  z-index: 100;
+  max-width: 550px;
+  .el-dialog__body {
+    word-break: unset;
+  }
+  .el-dialog__headerbtn {
+    font-size: 27px;
+    top: 9px;
+    right: 10px;
+    .el-dialog__close {
+      color: red;
+      // padding: 5px;
+      // background-color: #f0f0f0;
+      // border-radius: 22px;
+      // border: 1px solid #f0f0f0;
+    }
+  }
+  p {
+    font-size: 16px;
+  }
+}
+
+.el-input__icon {
+  font-size: 20px;
+}
+
 @media only screen and (max-width: 768px) {
+  .el-dialog {
+    margin-top: 0px !important;
+    border-radius: 0px;
+    width: 100%;
+  }
+  
   html {
     font-size: 13px;
   }

components/Login.vue

@@ -1,27 +1,25 @@
 <template lang='pug'>
-  el-card
+  el-dialog(:visible='show' @close='close'
-    nuxt-link.float-right(to='/')
+    append-to-body :title="$t('common.login')")
-      el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
 
-    h5 {{$t('common.login')}}
+    p(v-html="$t('login.description')")
-    el-form(v-loading='loading')
+    div(v-loading='loading')
-      p(v-html="$t('login.description')")
 
-      el-input.mb-2(v-model='email' type='email' name='email'
+      el-input.mb-2(v-model='email' type='email' name='email' prefix-icon='el-icon-user'
         :placeholder='$t("common.email")' autocomplete='email' ref='email')
-        v-icon(name='envelope' slot='prepend')
 
-      el-input.mb-1(v-model='password'  @keyup.enter.native="submit" name='password'
+      el-input.mb-1(v-model='password'  @keyup.enter.native="submit"
+        prefix-icon='el-icon-lock' name='password'
         type='password' :placeholder='$t("common.password")')
-        v-icon(name='lock' slot='prepend')
 
+      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')
-      nuxt-link(to='/register' v-if='settings.allow_registration')
         el-button.mt-1(plain type="primary") {{$t('login.not_registered')}}
 
-      a.float-right(href='#' @click='forgot') {{$t('login.forgot_password')}}
 </template>
 
 <script>
@@ -31,22 +29,26 @@ import get from 'lodash/get'
 
 export default {
   name: 'Login',
+  props: ['show'],
   data () {
     return {
       password: '',
       email: '',
-      loading: false
+      loading: false,
     }
   },
   computed: {
     ...mapState(['settings']),
     disabled () {
-      if (process.server) { return false }
       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' })
@@ -59,12 +61,14 @@ export default {
       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' })

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

@@ -1,29 +1,24 @@
 <template lang='pug'>
-  el-card
+  el-dialog(:visible='show' @close='close'
+    append-to-body :title="$t('common.register')")
 
-    nuxt-link.float-right(to='/')
+    p(v-html="$t('register.description')")
-      el-button(circle  icon='el-icon-close' type='danger' size='small' plain)
+    div(v-loading='loading')
-    h5 {{$t('common.register')}}
-
-    el-form(@submit.native.prevent='register' method='POST' action='')
-      p(v-html="$t('register.description')")
 
       el-input.mb-2(v-model='user.username' type='text' name='username'
-        :placeholder='$t("common.username")')
+        :placeholder='$t("common.username")' prefix-icon='el-icon-user')
-        v-icon(name='user' slot='prepend')
 
       el-input.mb-2(ref='email' v-model='user.email' type='email' required
-        :placeholder='$t("common.email")' autocomplete='email' name='email')
+        :placeholder='$t("common.email")' autocomplete='email' 
-        v-icon(name='envelope' slot='prepend')
+        prefix-icon='el-icon-message' name='email')
 
-      el-input.mb-2(v-model='user.password' type="password" placeholder="Password" name='password' required)
+      el-input.mb-2(v-model='user.password' type="password"
-        v-icon(name='lock' slot='prepend')
+        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')")
-          v-icon(name='envelope-open-text')
 
-      el-button(plain type="success" native-type='submit'
+    span(slot='footer')
-        :disabled='disabled') {{$t('common.send')}} <v-icon :name='loading?"circle-notch":"chevron-right"' :spin='loading'/>
+      el-button(plain type="success" :disabled='disabled' @click='register') {{$t('common.send')}} <v-icon :name='loading?"circle-notch":"chevron-right"' :spin='loading'/>
 </template>
 
 <script>
@@ -33,6 +28,7 @@ import get from 'lodash/get'
 
 export default {
   name: 'Register',
+  props: ['show'],
   data () {
     return {
       loading: false,
@@ -55,7 +51,10 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['login']),
+    close () {
+      this.$router.replace('/')
+      this.$emit('close')
+    },
     async register () {
       this.loading = true
       try {