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

webpack/routes.js

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

webpack/scss/global.scss

@@ -127,7 +127,7 @@
 	}
 
 
-	& button.submit{
+	button.submit{
 
 		padding: .8em 1.5em;
 
@@ -148,4 +148,34 @@
 		&:active{ background-color: darken($main, 10%);}
 	}
 
+}
+
+
+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%; }
+
 }

webpack/scss/layout.scss

@@ -140,7 +140,16 @@ body > #WRAPPER.login{
 				letter-spacing: .2em;
 
 				&.invalid{ color: #f04747; }
-				&.grey{ color: #5e5e5e; }
+
+				&.link{
+					color: #5e5e5e;
+
+					transition: color .2s ease-in-out;
+
+					cursor: pointer;
+
+					&:hover{ color: #fff; }
+				}
 			}
 
 			& button{
@@ -152,6 +161,28 @@ body > #WRAPPER.login{
 				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;
+			}
+
 		}
 
 

webpack/vue/auth/wrapper.vue

@@ -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>
 
-			<span class='footer'>
+			<span class='footer form'>
 				<button @click='gs.popup.hide()'>Cancel</button>
 				<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
 			</span>

webpack/vue/noauth/login.vue

@@ -10,9 +10,10 @@
 			<input type='text' name='email' class='flat'>
 			<label for='password'>PASSWORD</label>
 			<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>
+			<span>Need an account? <router-link to='register'>Register</router-link></span>
 		</div>
 
 	</div>

webpack/vue/noauth/register.vue

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