[ux] register/login as pages
This commit is contained in:
les
parent
5c4cf2967f
commit
ae2269a8e9
3 changed files with 78 additions and 84 deletions
|
|
@ -1,77 +1,55 @@
|
|||
<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')
|
||||
div#nav
|
||||
nuxt-link#logo(to='/')
|
||||
img(src='/favicon.ico')
|
||||
span.ml-1.hidden-xs-only {{settings.title}}
|
||||
small.hidden-sm-only {{settings.description}}
|
||||
|
||||
nuxt-link(v-if='!$auth.loggedIn' to='/?ref=login')
|
||||
el-menu-item(:title="$t('common.login')")
|
||||
v-icon(color='lightgreen' name='user')
|
||||
el-menu#menu(mode='horizontal' router )
|
||||
el-menu-item(v-if='could_add' index='/add')
|
||||
i.el-icon-plus
|
||||
span.hidden-xs-only {{$t('common.add_event')}}
|
||||
|
||||
nuxt-link(v-if='could_add' to='/add')
|
||||
el-menu-item(:title="$t('common.add_event')")
|
||||
v-icon(color='lightgreen' name='plus')
|
||||
//- nuxt-link(to='/export')
|
||||
el-menu-item(index='/export')
|
||||
i.el-icon-share
|
||||
span.hidden-xs-only {{$t('common.share')}}
|
||||
|
||||
el-popover(placement="bottom" trigger="click")
|
||||
Search(past-filter recurrent-filter)
|
||||
el-menu-item(slot='reference' :title="$t('common.search')" icon='el-share-button')
|
||||
v-icon(color='lightblue' name='search')
|
||||
el-badge(v-if='filters.tags.length+filters.places.length>0' is-dot type='warning')
|
||||
el-menu-item(v-if='!$auth.loggedIn' index='/login')
|
||||
i.el-icon-user
|
||||
span.hidden-xs-only {{$t('common.login')}}
|
||||
el-submenu(v-if='$auth.loggedIn' index=3)
|
||||
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(:title="$t('common.settings')")
|
||||
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')
|
||||
el-menu-item(type='text' 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 },
|
||||
data () {
|
||||
return {
|
||||
showLogin: this.$route.query.ref === 'login',
|
||||
showRegister: this.$route.query.ref === 'register'
|
||||
}
|
||||
},
|
||||
components: { Search },
|
||||
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>
|
||||
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none;
|
||||
}
|
||||
<style lang='less'>
|
||||
|
||||
#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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
<template lang='pug'>
|
||||
el-dialog(:visible='show' @close='close' :close-on-click-modal='false'
|
||||
append-to-body :title="$t('common.register')")
|
||||
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')
|
||||
|
||||
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(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.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')")
|
||||
|
||||
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,
|
||||
Loading…
Reference in a new issue