From ba0965c0163d7b4f02792978eb275a38ec75df4a Mon Sep 17 00:00:00 2001
From: devfake <devfakeplus@googlemail.com>
Date: Tue, 23 Jun 2015 09:44:14 +0200
Subject: [PATCH] implement login view

---
 site/client/app/components/deckBuilder.js     |  8 +-------
 site/client/app/components/landing.js         | 18 ++++++++++++++++++
 site/client/app/components/modals/login.js    | 11 +++++++++++
 site/client/app/views/deckBuilder.html        |  1 +
 site/client/app/views/landing.html            |  4 +++-
 site/client/app/views/modals/login.html       | 19 +++++++++++++++++++
 site/client/app/views/modals/searchMatch.html |  2 +-
 site/client/assets/sass/_modal.scss           |  9 +++++++--
 8 files changed, 61 insertions(+), 11 deletions(-)
 create mode 100644 site/client/app/components/modals/login.js
 create mode 100644 site/client/app/views/deckBuilder.html
 create mode 100644 site/client/app/views/modals/login.html

diff --git a/site/client/app/components/deckBuilder.js b/site/client/app/components/deckBuilder.js
index 113437f..b3113c5 100644
--- a/site/client/app/components/deckBuilder.js
+++ b/site/client/app/components/deckBuilder.js
@@ -1,11 +1,5 @@
 module.exports = {
 
-  template: "<h2>deckbuilder hier</h2>",
-
-  data: function() {
-    return {
-
-    }
-  }
+  template: require('../views/deckBuilder.html')
 
 };
\ No newline at end of file
diff --git a/site/client/app/components/landing.js b/site/client/app/components/landing.js
index 339f7aa..e294772 100644
--- a/site/client/app/components/landing.js
+++ b/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);
     }
   }
 
diff --git a/site/client/app/components/modals/login.js b/site/client/app/components/modals/login.js
new file mode 100644
index 0000000..05c69d2
--- /dev/null
+++ b/site/client/app/components/modals/login.js
@@ -0,0 +1,11 @@
+module.exports = {
+
+  template: require('../../views/modals/login.html'),
+
+  inherit: true,
+
+  methods: {
+
+  }
+
+};
\ No newline at end of file
diff --git a/site/client/app/views/deckBuilder.html b/site/client/app/views/deckBuilder.html
new file mode 100644
index 0000000..b5c5998
--- /dev/null
+++ b/site/client/app/views/deckBuilder.html
@@ -0,0 +1 @@
+deckbuilder
\ No newline at end of file
diff --git a/site/client/app/views/landing.html b/site/client/app/views/landing.html
index c495841..883aac7 100644
--- a/site/client/app/views/landing.html
+++ b/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>
diff --git a/site/client/app/views/modals/login.html b/site/client/app/views/modals/login.html
new file mode 100644
index 0000000..c8e5bf2
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/site/client/app/views/modals/searchMatch.html b/site/client/app/views/modals/searchMatch.html
index f529f5b..c6e8d0d 100644
--- a/site/client/app/views/modals/searchMatch.html
+++ b/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>
diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss
index 48770d6..933c9d0 100644
--- a/site/client/assets/sass/_modal.scss
+++ b/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;
+  }
 }
\ No newline at end of file