[scss.global][scss.layout] layout for login+register [vue.noauth.login][vue.noauth.register] created with router-link(s) bindings

This commit is contained in:
xdrm-brackets 2018-03-25 12:24:34 +02:00
parent bc66b63098
commit a68f94d76d
6 changed files with 103 additions and 4 deletions

View File

@ -19,6 +19,10 @@ export default {
name: 'login', name: 'login',
path: '/login', path: '/login',
component: require('./vue/noauth/login.vue').default component: require('./vue/noauth/login.vue').default
}, {
name: 'register',
path: '/register',
component: require('./vue/noauth/register.vue').default
}, { }, {
path: '*', path: '*',
redirect: '/login' redirect: '/login'

View File

@ -127,7 +127,7 @@
} }
& button.submit{ button.submit{
padding: .8em 1.5em; padding: .8em 1.5em;
@ -149,3 +149,33 @@
} }
} }
a{
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
font-weight: normal;
&:after{
content: '';
display: block;
position: relative;
margin-top: .2em;
width: 0%;
height: 2px;
border-radius: 5px;
background: #fff;
transition: width .1s ease-in-out;
}
&:hover:after{ width: 100%; }
}

View File

@ -140,7 +140,16 @@ body > #WRAPPER.login{
letter-spacing: .2em; letter-spacing: .2em;
&.invalid{ color: #f04747; } &.invalid{ color: #f04747; }
&.grey{ color: #5e5e5e; }
&.link{
color: #5e5e5e;
transition: color .2s ease-in-out;
cursor: pointer;
&:hover{ color: #fff; }
}
} }
& button{ & button{
@ -152,6 +161,28 @@ body > #WRAPPER.login{
margin-bottom: .5em; margin-bottom: .5em;
} }
& > span{
display: block;
margin: .5em 0;
color: #666;
font-size: .8em;
}
& hr{
display: block;
position: relative;
width: 100%;
height: 2px;
margin: .5em 0;
border: none;
background-color: #333;
}
} }

View File

@ -29,7 +29,7 @@
<span class='select-box' @click='gs.popup.get(`room.create`).data.type=`voice`' :data-selected='gs.popup.get(`room.create`).data.type==`voice`?1:0' data-type='voice'>Voice Channel</span> <span class='select-box' @click='gs.popup.get(`room.create`).data.type=`voice`' :data-selected='gs.popup.get(`room.create`).data.type==`voice`?1:0' data-type='voice'>Voice Channel</span>
</span> </span>
<span class='footer'> <span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button> <button @click='gs.popup.hide()'>Cancel</button>
<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Channel</button> <button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
</span> </span>

View File

@ -10,9 +10,10 @@
<input type='text' name='email' class='flat'> <input type='text' name='email' class='flat'>
<label for='password'>PASSWORD</label> <label for='password'>PASSWORD</label>
<input type='password' name='password' class='flat'> <input type='password' name='password' class='flat'>
<label for='fpass' class='grey'>FORGOT YOUR PASSWORD ?</label> <label for='fpass' class='link'>FORGOT YOUR PASSWORD ?</label>
<button class='submit'>Login</button> <button class='submit'>Login</button>
<span>Need an account? <router-link to='register'>Register</router-link></span>
</div> </div>
</div> </div>

View File

@ -0,0 +1,33 @@
<template>
<div class='login-box'>
<div class='icon'></div>
<div class='form'>
<h3>Create an account</h3>
<label for='email'>EMAIL</label>
<input type='text' name='email' class='flat'>
<label for='username'>USERNAME</label>
<input type='text' name='username' class='flat'>
<label for='password'>PASSWORD</label>
<input type='password' name='password' class='flat'>
<button class='submit'>Continue</button>
<span>By registering, you agree to Discord's <a href='https://discordapp.com/terms'>Terms of Service</a> and <a href='https://discordapp.com/privacy'>Privacy Policy</a></span>
<hr>
<span>Already have an account? <router-link to='login'>Login</router-link></span>
</div>
</div>
</template><script>
export default {
name: 'login-',
data(){ return { gs: gs.get }; }
}
</script>