Issue #112: autenticação de mocambola.

static/css/header.css

-
 @media (min-width: 768px) {
     #bbx-header {
         height: 100px;
@@ -45,62 +44,3 @@
     color: #0e5c82;
     text-transform: uppercase;
 }
-
-#bbx-user-panel {
-    background-color: aliceblue;
-    position: absolute;
-    top: 0px;
-    right: -300px;
-    height: 100vh;
-    width: 300px;
-    z-index: 100;
-}
-
-#bbx-user-button {
-    background-color: rgba(195, 235, 255, 0.5);
-    width: 80px;
-    height: 80px;
-    border: 0px solid white;
-    border-radius: 50%;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 101;
-}
-
-#bbx-user-button img {
-    opacity: 0.7;
-    width: 40px;
-    height: 40px;
-    margin-top: 20px;
-    margin-left: 20px;
-}
-
-#bbx-login-panel {
-    padding: 18px;
-}
-
-#bbx-login-grettings {
-    display: block;
-    font: bold 24px Verdana, Helvetica, sans-serif;
-    color: rgba(14, 92, 130, 0.5);
-}
-
-#bbx-login-ask {
-    margin-top: 12px;
-    margin-bottom: 8px;
-    display: block;
-    font: bold 18px Verdana, Helvetica, sans-serif;
-}
-
-.bbx-login {
-    margin-top: 8px;
-    width: 264px;
-}
-
-.bbx-login-help {
-    margin-top: 8px;
-    font: bold 14px Verdana, Helvetica, sans-serif;
-    color:rgba(14, 92, 130, 0.5);
-    cursor: pointer; 
-}
\ No newline at end of file

static/index.html

@@ -35,6 +35,8 @@
     <script src="lang/pt-BR.js"></script>
     <link rel="stylesheet" href="css/header.css">
     <script src="js/header.js"></script>
+    <link rel="stylesheet" href="css/user.css">
+    <script src="js/user.js"></script>
 
     <!-- Page Scripts -->
     <script>
@@ -120,14 +122,22 @@
           <img src="img/user.svg" />
         </span>
         <div id="bbx-user-panel">
-          <div id="bbx-login-panel">
-            <div id="bbx-login-grettings" data-translate="user.guest.grettings"></div>
-            <div id="bbx-login-ask" data-translate="user.guest.ask_login"></div>
-            <input id="bbx-login-username" data-translate="user.guest.username" type="text" class="bbx-login" placeholder="" />
-            <input id="bbx-login-password" data-translate="user.guest.password" type="password" class="bbx-login" placeholder="" />
-            <button id="bbx-login-submit" class="btn btn-primary bbx-login" data-translate="user.guest.do_login"></button>
-            <div id="bbx-login-recovery" class="bbx-login-help" data-translate="user.guest.recovery"></div>
-            <div id="bbx-login-register" class="bbx-login-help" data-translate="user.guest.register"></div>
+          <div id="bbx-user-inner-panel">
+            <div id="bbx-login-panel">
+              <div id="bbx-login-grettings" data-translate="user.guest.grettings"></div>
+              <div id="bbx-login-ask" data-translate="user.guest.ask_login"></div>
+              <form id="bbx-login-form">
+                <input id="bbx-login-username" data-translate="user.guest.username" type="text" class="bbx-login" placeholder="" />
+                <input id="bbx-login-password" data-translate="user.guest.password" type="password" class="bbx-login" placeholder="" />
+                <button id="bbx-login-submit" type="submit" class="btn btn-primary bbx-login" data-translate="user.guest.do_login"></button>
+              </form>
+              <div id="bbx-login-recovery" class="bbx-login-help" data-translate="user.guest.recovery"></div>
+              <div id="bbx-login-register" class="bbx-login-help" data-translate="user.guest.register"></div>
+            </div>
+            <div id="bbx-profile-panel">
+              <div id="bbx-profile-name"></div>
+              <div id="bbx-profile-logout" class="bbx-profile-help" data-translate="user.profile.logout"></div>
+            </div>
           </div>
         </div>
 

static/js/controller.js

@@ -8,6 +8,7 @@ var $page = {
         'mucua',
         'mucuaDefault',
         'mucuasList',
+        'session',
     ],
 
     init: function () {
@@ -38,6 +39,12 @@ var $page = {
             $page.mucuasList = response;
         });
     },
+    postAuth: function(username, password) {
+        var data = 'username='+username+'&password='+password;
+        this.load('POST', 'auth', data, function (response) {
+            $page.session = response;
+        });
+    },
     load: function (method, endpoint, data, success, error) {
         const xhr = new XMLHttpRequest();
         xhr.onload = function () {
@@ -60,6 +67,7 @@ var $page = {
         };
         xhr.open(method, API_URL+endpoint);
         xhr.setRequestHeader("Cache-Control", "no-cache");
+        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
         xhr.send(data);
     },
 
@@ -120,4 +128,7 @@ $(function () {
     $page.onChange('balaio', function () {
         $page.loadMucuasList();
     });
+    $page.onChange('session', function() {
+        $page.loadBalaiosList();
+    })
 });
\ No newline at end of file

static/js/header.js

 $(function () {
-    var user_panel_visible = false;
-    $("#bbx-user-button").click(function (event) {
-        if (user_panel_visible) {
-            $("#bbx-user-panel").animate({right: '-300px'});
-        } else {
-            $("#bbx-user-panel").animate({right: '0px'});
-        }
-        user_panel_visible = !user_panel_visible;
-    })
     $page.onChange('balaiosList', function (event) {
         menu = $('#nav-balaios-menu');
         menu.empty();

static/lang/pt-BR.js

@@ -14,5 +14,8 @@ $t.translations['pt-BR'] = {
             recovery: 'Esqueceu a senha?',
             register: 'Faça seu cadastro!',
         },
+        profile: {
+            logout: 'Sair ou trocar de mocambola',
+        },
     },
 };
\ No newline at end of file