AreaFiftyLAN · svenpopping · May 27, 2015 · May 27, 2015 · May 27, 2015 · May 27, 2015
diff --git a/app/images/logos/sponsors/tournaments/Untitled-1.psd b/app/images/logos/sponsors/tournaments/Untitled-1.psd
diff --git a/app/index.html b/app/index.html
@@ -116,6 +116,7 @@
   <link rel="import" href="/lib/components/lancie-timetable/lancie-timetable.html">
   <link rel="import" href="/lib/components/lancie-tournaments/lancie-tournaments.html">
   <link rel="import" href="/lib/components/lancie-faq/lancie-faq.html">
+  <link rel="import" href="/lib/components/lancie-login-form/lancie-login-form.html">
 
 
   <!-- JSON-LD markup generated by Google Structured Data Markup Helper. -->
@@ -169,6 +170,9 @@
             <core-item label="Contact" horizontal center layout>
               <a data-scroll href="#about" borderless></a>
             </core-item>
+            <core-item label="Login" horizontal center layout>
+              <a data-scroll href="javascript:document.getElementById('login-form').show()" borderless></a>
+            </core-item>            
           </core-menu>
         </core-dropdown>
       </core-menu-button>
@@ -196,6 +200,9 @@
         <a href="javascript:document.getElementById('faq').show()">
           <paper-button>FAQ</paper-button>
         </a>
+        <a href="javascript:document.getElementById('login-form').show()">
+          <paper-button>LOGIN</paper-button>
+        </a>
       </app-bar></site-banner>
 
     <main>
@@ -320,6 +327,7 @@ <h1>1<sup>st</sup> LANcie of W.I.S.V. 'Christiaan Huygens'</h1>
 
   <lancie-contact id="contact-form"></lancie-contact>
   <lancie-faq id="faq"></lancie-faq>
+  <lancie-login-form id="login-form"></lancie-login-form>
 
   <!-- SMOOTHSCROLL -->
   <script src="/lib/components/smooth-scroll/dist/js/smooth-scroll.js"></script>

diff --git a/app/view/myarea.html b/app/view/myarea.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>Area FiftyLAN - Gaming Event - Registration</title>
+
+  <!-- IPHONE -->
+  <meta name="apple-mobile-web-app-title" content="Area FiftyLAN"> <!-- New in iOS6 -->
+  <meta name='apple-mobile-web-app-capable' content='yes'>
+  <meta name='apple-mobile-web-app-status-bar-style' content='black'>
+  <meta name='format-detection' content='telephone=no'>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+
+  <!-- WINDOWS PHONE-->
+  <meta name="application-name" content="Area FiftyLAN" />
+  <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml; polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />
+
+  <!-- FAVICON -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/Icon-76.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/Icon-72.png">
+  <link rel="apple-touch-icon" href="/images/favicon/Icon.png">
+  <link rel="shortcut icon" href="/images/favicon/[email protected]">
+
+  <link rel="icon" sizes="192x192" href="/images/favicon/[email protected]">
+  <link rel="icon" sizes="128x128" href="/images/favicon/[email protected]">
+
+  <meta name="msapplication-TileImage" content="/images/favicon/[email protected]">
+  <meta name="msapplication-TileColor" content="#1a2a43">
+
+  <script src="/lib/components/webcomponentsjs/webcomponents.js"></script>
+
+  <!--
+  Chrome 35 has old :host behavior before :host-context addition.
+  Since Chrome 35 does not have HTMLImports, we can use this as a decent signal
+  to force the ShadowDOM Polyfill.
+  -->
+  <script>
+    if (!('import' in document.createElement('link'))) {
+      var Platform = {flags: {shadow: true}};
+    }
+  </script>
+
+  <link rel="import" href="/lib/components/polymer/polymer.html">
+  <link rel="import" href="/lib/components/font-roboto/roboto.html">
+
+  <!-- CORE ELEMENTS && PAPER ELEMENTS -->
+  <link rel="import" href="/lib/components/core-elements/core-elements.html">
+  <link rel="import" href="/lib/components/paper-elements/paper-elements.html">
+
+  <!-- OWN ELEMENTS -->
+  <link rel="import" href="/lib/components/lancie-contact-form/lancie-contact-form.html">
+  <link rel="import" href="/lib/components/lancie-scroll-area/lancie-scroll-area.html">
+  <link rel="import" href="/lib/components/lancie-site-banner/lancie-site-banner.html">
+  <link rel="import" href="/lib/components/lancie-my-area/lancie-my-area.html">
+  <link rel="import" href="/lib/components/lancie-app-bar/lancie-app-bar.html">
+
+  <!-- STYLESHEET -->
+  <link rel="stylesheet" href="/lib/styles/lancie.css">
+  <link rel="stylesheet" href="/lib/components/components-font-awesome/css/font-awesome.min.css" no-shim>
+
+</head>
+<body unresolved>
+
+  <site-banner class="sticky  site-padding" layout horizontal center start>
+
+      <core-menu-button>
+        <core-icon id="dropdown-toggle" icon="menu" borderless></core-icon>
+        <core-dropdown class="dropdown  core-transition-left" layered>
+          <core-menu>
+            <div id="logo-container" layout horizontal center>
+              <core-image preload fade sizing="contain" style="height: 33px; width: 203px;" position="left" src="/images/logos/lancie/logo_without_date.png"></core-image>
+            </div>
+            <core-item label="Home" horizontal center layout>
+              <a data-scroll href="/" borderless></a>
+            </core-item>
+            <core-item label="Event" horizontal center layout>
+              <a data-scroll href="/#event" borderless></a>
+            </core-item>
+            <core-item label="Tournaments" horizontal center layout>
+              <a data-scroll href="/#tournament" borderless></a>
+            </core-item>
+            <core-item label="Contact" horizontal center layout>
+              <a data-scroll href="javascript:document.getElementById('contact-form').show()" borderless></a>
+            </core-item>
+          </core-menu>
+        </core-dropdown>
+      </core-menu-button>
+
+      <a data-scroll href="/" class="logo" layout horizontal start>
+        <core-image preload fade sizing="contain" style="height: 33px; width: 203px;" position="left" src="/images/logos/lancie/logo_without_date.png"></core-image>
+      </a>
+
+      <app-bar theme="dark" home badge class="bar  fixed">
+        <a href="/" data-scroll>
+          <paper-button>HOME</paper-button>
+        </a>
+        <a data-scroll href="/#event">
+          <paper-button>EVENT</paper-button>
+        </a>
+        <a data-scroll href="/#tournament">
+          <paper-button>TOURNAMENTS</paper-button>
+        </a>
+        <a href="javascript:document.getElementById('contact-form').show()">
+          <paper-button>contact</paper-button>
+        </a>
+      </app-bar></site-banner>
+
+  <main>
+
+    <lancie-my-area></lancie-my-area>
+<!--      -->
+
+  </main>
+
+  <lancie-contact id="contact-form"></lancie-contact>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-60209049-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+</body>
+</html>
diff --git a/app/view/profile.html b/app/view/profile.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>Area FiftyLAN - Gaming Event - Registration</title>
+
+  <!-- IPHONE -->
+  <meta name="apple-mobile-web-app-title" content="Area FiftyLAN"> <!-- New in iOS6 -->
+  <meta name='apple-mobile-web-app-capable' content='yes'>
+  <meta name='apple-mobile-web-app-status-bar-style' content='black'>
+  <meta name='format-detection' content='telephone=no'>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+
+  <!-- WINDOWS PHONE-->
+  <meta name="application-name" content="Area FiftyLAN" />
+  <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml; polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />
+
+  <!-- FAVICON -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/[email protected]">
+  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/Icon-76.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/Icon-72.png">
+  <link rel="apple-touch-icon" href="/images/favicon/Icon.png">
+  <link rel="shortcut icon" href="/images/favicon/[email protected]">
+
+  <link rel="icon" sizes="192x192" href="/images/favicon/[email protected]">
+  <link rel="icon" sizes="128x128" href="/images/favicon/[email protected]">
+
+  <meta name="msapplication-TileImage" content="/images/favicon/[email protected]">
+  <meta name="msapplication-TileColor" content="#1a2a43">
+
+  <script src="/lib/components/webcomponentsjs/webcomponents.js"></script>
+
+  <!--
+  Chrome 35 has old :host behavior before :host-context addition.
+  Since Chrome 35 does not have HTMLImports, we can use this as a decent signal
+  to force the ShadowDOM Polyfill.
+  -->
+  <script>
+    if (!('import' in document.createElement('link'))) {
+      var Platform = {flags: {shadow: true}};
+    }
+  </script>
+
+  <link rel="import" href="/lib/components/polymer/polymer.html">
+  <link rel="import" href="/lib/components/font-roboto/roboto.html">
+
+  <!-- CORE ELEMENTS && PAPER ELEMENTS -->
+  <link rel="import" href="/lib/components/core-elements/core-elements.html">
+  <link rel="import" href="/lib/components/paper-elements/paper-elements.html">
+
+  <!-- OWN ELEMENTS -->
+  <link rel="import" href="/lib/components/lancie-contact-form/lancie-contact-form.html">
+  <link rel="import" href="/lib/components/lancie-section/lancie-section.html">
+  <link rel="import" href="/lib/components/lancie-profile/lancie-profile.html">
+  <link rel="import" href="/lib/components/lancie-scroll-area/lancie-scroll-area.html">
+  <link rel="import" href="/lib/components/lancie-site-banner/lancie-site-banner.html">
+  <link rel="import" href="/lib/components/lancie-app-bar/lancie-app-bar.html">
+
+  <!-- STYLESHEET -->
+  <link rel="stylesheet" href="/lib/styles/lancie.css">
+
+</head>
+<body unresolved>
+
+  <site-banner class="sticky  site-padding" layout horizontal center start>
+
+      <core-menu-button>
+        <core-icon id="dropdown-toggle" icon="menu" borderless></core-icon>
+        <core-dropdown class="dropdown  core-transition-left" layered>
+          <core-menu>
+            <div id="logo-container" layout horizontal center>
+              <core-image preload fade sizing="contain" style="height: 33px; width: 203px;" position="left" src="/images/logos/lancie/logo_without_date.png"></core-image>
+            </div>
+            <core-item label="Home" horizontal center layout>
+              <a data-scroll href="/" borderless></a>
+            </core-item>
+            <core-item label="Event" horizontal center layout>
+              <a data-scroll href="/#event" borderless></a>
+            </core-item>
+            <core-item label="Tournaments" horizontal center layout>
+              <a data-scroll href="/#tournament" borderless></a>
+            </core-item>
+            <core-item label="Contact" horizontal center layout>
+              <a data-scroll href="javascript:document.getElementById('contact-form').show()" borderless></a>
+            </core-item>
+          </core-menu>
+        </core-dropdown>
+      </core-menu-button>
+
+      <a data-scroll href="/" class="logo" layout horizontal start>
+        <core-image preload fade sizing="contain" style="height: 33px; width: 203px;" position="left" src="/images/logos/lancie/logo_without_date.png"></core-image>
+      </a>
+
+      <app-bar theme="dark" home badge class="bar  fixed">
+        <a href="/" data-scroll>
+          <paper-button>HOME</paper-button>
+        </a>
+        <a data-scroll href="/#event">
+          <paper-button>EVENT</paper-button>
+        </a>
+        <a data-scroll href="/#tournament">
+          <paper-button>TOURNAMENTS</paper-button>
+        </a>
+        <a href="javascript:document.getElementById('contact-form').show()">
+          <paper-button>contact</paper-button>
+        </a>
+      </app-bar></site-banner>
+
+  <main>
+
+    <lancie-section nomargin="true" center>
+      <lancie-profile horizontal layout flex></lancie-profile>
+    </lancie-section>
+
+  </main>
+
+  <lancie-contact id="contact-form"></lancie-contact>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-60209049-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+</body>
+</html>
diff --git a/lib/components/lancie-input/lancie-input.html b/lib/components/lancie-input/lancie-input.html
@@ -1,7 +1,7 @@
 <link rel="import" href="/lib/components/polymer/polymer.html">
 <link rel="import" href="/lib/components/paper-input/paper-input-decorator.html">
 
-<polymer-element name="lancie-input" attributes="label, name, type, value" on-blur="{{emptyCheck}}">
+<polymer-element name="lancie-input" attributes="label, name, type, value, disabled" on-blur="{{emptyCheck}}">
   <template>
     <style>
       :host paper-input {
@@ -11,9 +11,9 @@
     <div layout horizontal center>
       <label for="{{name}}" flex two style="display: inline-block;">{{label}} *</label>
       <div flex four>
-        <paper-input-decorator id="decorator" name="{{name}}" label="{{label}}" value="{{value}}" error="{{error}}" 
+        <paper-input-decorator disabled?="{{disabled}}" id="decorator" name="{{name}}" label="{{label}}" value="{{value}}" error="{{error}}" 
           isInvalid="{{isEmpty || isInValid}}">
-          <input is="core-input" type="{{type}}" value="{{value}}" committedValue="{{committedValue}}" required>
+          <input is="core-input" disabled?="{{disabled}}" type="{{type}}" value="{{value}}" committedValue="{{committedValue}}" required>
         </paper-input-decorator>
       </div>
     </div>

diff --git a/lib/components/lancie-login-form/lancie-login-form.coffee b/lib/components/lancie-login-form/lancie-login-form.coffee
@@ -0,0 +1,20 @@
+Polymer 'lancie-login-form',
+
+  ready: ->
+
+  handleResponse: ->
+    callback = @$.loginAJAX.response
+    console.log callback
+    if callback.status.code is 200
+      @$.username.isInValid = @$.password.isInValid = false
+      @userdata = callback.details
+      window.location = '/myarea/'
+    else
+      @$.username.error = @$.password.error = 'Username and password do not match!'
+      @$.username.isInValid = @$.password.isInValid = true
+
+  submit: ->
+    @$.loginAJAX.go()
+
+  show: ->
+    @$.loginForm.toggle()
diff --git a/lib/components/lancie-login-form/lancie-login-form.html b/lib/components/lancie-login-form/lancie-login-form.html
@@ -0,0 +1,45 @@
+<link rel="import" href="/lib/components/polymer/polymer.html">
+<link rel="import" href="/lib/components/ajax-form/ajax-form.html">
+<link rel="import" href="/lib/components/core-ajax/core-ajax.html">
+<link rel="import" href="/lib/components/core-localstorage/core-localstorage.html">
+
+<link rel="import" href="/lib/components/paper-button/paper-button.html">
+<link rel="import" href="/lib/components/paper-dialog/paper-dialog.html">
+<link rel="import" href="/lib/components/paper-input/paper-input-decorator.html">
+<link rel="import" href="/lib/components/paper-input/paper-autogrow-textarea.html">
+
+<link rel="import" href="/lib/components/lancie-input/lancie-input.html">
+
+<polymer-element name="lancie-login-form" attributes="">
+  <template>
+    <core-localstorage name="lancie-myarea-storage" value="{{userdata}}"></core-localstorage>
+    <core-ajax
+      id="loginAJAX"
+      method="POST"
+      params='{
+          "username": "{{username}}",
+          "password": "{{password}}"
+      }'
+      url="/api/login/create/session/"
+      handleAs="json"
+      on-core-response="{{handleResponse}}"></core-ajax>
+
+    <paper-dialog backdrop id="loginForm" transition="core-transition-top" 
+      style="width: {{isPhone ? 'calc(100vw)' : '600px'}};">
+
+      <h1>Login</h1>
+
+      <form action="" style="padding: 0 24px; margin-bottom: 20px;">
+        <lancie-input label="Username" value="{{username}}" id="username"></lancie-input>
+        <lancie-input label="Password" value="{{password}}" type="password" id="password"></lancie-input>
+
+        <div class="buttons" horizontal end-justified layout center>
+          <paper-button raised on-click="{{submit}}">LOGIN</paper-button>
+        </div>
+      </form>
+
+    </paper-dialog>
+  </template>
+
+  <script src="lancie-login-form.js"></script>
+</polymer-element>