implement login view

site/client/app/components/deckBuilder.js

@@ -1,11 +1,5 @@
 module.exports = {
 
-  template: "<h2>deckbuilder hier</h2>",
+  template: require('../views/deckBuilder.html')
-
-  data: function() {
-    return {
-
-    }
-  }
 
 };

site/client/app/components/landing.js

@@ -6,6 +6,16 @@ module.exports = {
 
   inherit: true,
 
+  data: function() {
+    return {
+      modal: false
+    }
+  },
+
+  components: {
+    login: require('./modals/login')
+  },
+
   ready: function() {
     setTimeout(function() {
       $('.container-form-landing').addClass('active')
@@ -20,6 +30,14 @@ module.exports = {
       setTimeout(function() {
         window.location.href = './lobby';
       }, 500);
+    },
+
+    openLogin: function() {
+      this.modal = true;
+
+      setTimeout(function() {
+        $('.login-username').focus();
+      }, 500);
     }
   }
 

site/client/app/components/modals/login.js

@@ -0,0 +1,11 @@
+module.exports = {
+
+  template: require('../../views/modals/login.html'),
+
+  inherit: true,
+
+  methods: {
+
+  }
+
+};

site/client/app/views/deckBuilder.html

@@ -0,0 +1 @@
+deckbuilder

site/client/app/views/landing.html

@@ -1,3 +1,5 @@
+<login></login>
+
 <section class="container-landing">
   <div class="wrap-landing">
     <img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
@@ -22,7 +24,7 @@
       <span class="choose">or</span>
 
       <a class="btn-second btn-guest" v-on="click: asGuest">Play as guest <i class="icon-guest-load"></i></a>
-      <a href="#" class="btn-none btn-login">Login</a>
+      <a class="btn-none btn-login" v-on="click: openLogin">Login</a>
 
     </div>
   </div>

site/client/app/views/modals/login.html

@@ -0,0 +1,19 @@
+<div class="modal" v-class="active: modal">
+  <div class="modal-banner">
+    <div class="wrap-modal-login">
+
+      <form class="form-session">
+        <input type="text" placeholder="Username" class="field-session login-username">
+        <input type="password" placeholder="Password" class="field-session login-password">
+
+        <div class="wrap-btn-action btn-register-action">
+          <input type="submit" value="Login" class="btn-action">
+          <i class="icon-action-load"></i>
+        </div>
+
+        <span class="btn-sub">Forgot Password?</span>
+      </form>
+
+    </div>
+  </div>
+</div>

site/client/app/views/modals/searchMatch.html

@@ -5,7 +5,7 @@
       <i class="icon-content-load"></i>
       <p class="modal-para">Search for Player</p>
 
-      <span class="btn-cancel" v-on="click: cancelMatch">Cancel</span>
+      <span class="btn-sub" v-on="click: cancelMatch">Cancel</span>
 
     </div>
   </div>

site/client/assets/sass/_modal.scss

@@ -1,4 +1,4 @@
-.wrap-modal {
+.wrap-modal-login {
   max-width: 600px;
   margin: 0 auto;
 }
@@ -64,7 +64,7 @@
   margin: 20px 0 50px 0;
 }
 
-.btn-cancel {
+.btn-sub {
   color: darken(#8798ac, 30%);
   cursor: pointer;
   text-transform: uppercase;
@@ -74,4 +74,9 @@
   &:hover {
     color: #8798ac;
   }
+
+  .wrap-modal-login & {
+    margin: 30px 0 0 0;
+    float: left;
+  }
 }