[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:
parent
bc66b63098
commit
a68f94d76d
|
@ -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'
|
||||||
|
|
|
@ -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%; }
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue