encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[refactoring] login/register as dialog

Browse Source
This commit is contained in:
les
2019-10-22 23:47:41 +02:00
parent b4d288b132
commit d468ef33f7
4 changed files with 99 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
assets/style.less
View File

@@ -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-card {
.el-main {
max-width: 1000px;
border-radius: 0px;
margin: 0 auto;
margin: auto;
padding: 10px;
}
.el-dialog {
margin-top: 0px !important;
border-radius: 0px;
width: 100%;
.el-dialog__body {
word-break: break-word;
}
overflow: unset;
}
.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;
}

36
pages/login.vue → components/Login.vue
View File

@@ -1,27 +1,25 @@
<template lang='pug'>
el-card
nuxt-link.float-right(to='/')
el-button(circle icon='el-icon-close' type='danger' size='small' plain)
el-dialog(:visible='show' @close='close'
append-to-body :title="$t('common.login')")
h5 {{$t('common.login')}}
el-form(v-loading='loading')
p(v-html="$t('login.description')")
p(v-html="$t('login.description')")
div(v-loading='loading')
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='/register' v-if='settings.allow_registration')
nuxt-link(to='/?ref=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' })
@@ -75,4 +79,4 @@ export default {
}
}
}
</script>
</script>

30
components/Nav.vue
View File

@@ -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({

33
pages/register.vue → components/Register.vue
View File

@@ -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='/')
el-button(circle icon='el-icon-close' type='danger' size='small' plain)
h5 {{$t('common.register')}}
el-form(@submit.native.prevent='register' method='POST' action='')
p(v-html="$t('register.description')")
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")')
v-icon(name='user' slot='prepend')
: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' name='email')
v-icon(name='envelope' slot='prepend')
: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)
v-icon(name='lock' slot='prepend')
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')")
v-icon(name='envelope-open-text')
el-button(plain type="success" native-type='submit'
:disabled='disabled') {{$t('common.send')}} <v-icon :name='loading?"circle-notch":"chevron-right"' :spin='loading'/>
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>
@@ -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 {