web: Add login modal

Signed-off-by: Eduardo L. Buratti <elb09@c3sl.ufpr.br>

web/app/partials/header.html

@@ -3,12 +3,13 @@
         <li><a href="">Pular para o conteúdo</a></li>
         <li><a href="">Ouvidoria</a></li>
         <li><a href="">Mapa do site</a></li>
+        <li><a href="" ng-click="login.show()">Acesso Restrito</a></li>
     </ul>
 
     <div class="header-font-size">
-        <a class="dec" href="#" title="Diminuir fonte">A-</a>
-        <a class="reset" href="#" title="Tamanho normal da fonte">A&nbsp;</a>
-        <a class="inc" href="#" title="Aumentar fonte">A+</a>
+        <a class="dec" href="" title="Diminuir fonte">A-</a>
+        <a class="reset" href="" title="Tamanho normal da fonte">A&nbsp;</a>
+        <a class="inc" href="" title="Aumentar fonte">A+</a>
     </div>
 
     <div class="header-title">
@@ -30,6 +31,8 @@
     </div>
 </div>
 
+<div ng-include="login.includeUrl"></div>
+
 <div class="container">
     <div ng-show="bigButtons.collapsed">
         <div ng-include="'partials/breadcrumb.html'"></div>

web/app/partials/login.html

+<div class="modal-backdrop fade in"></div>
+<div class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <form role="form" ng-submit="login.submit()">
+                <div class="modal-header">
+                    <h4 class="modal-title">Acesso Restrito</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="alert alert-danger" ng-show="login.error"><strong>Erro!</strong> {{ login.error }}</div>
+                    <div class="form-group">
+                        <label for="username">Usuário:</label>
+                        <input type="text" class="form-control" id="username" ng-model="login.username" autofocus>
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Senha:</label>
+                        <input type="password" class="form-control" id="password" ng-model="login.password">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-default" ng-click="login.cancel()">Cancelar</button>
+                    <button type="submit" class="btn btn-primary">
+                        Login <i class="saving" ng-show="login.loading"></i>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file

web/assets/js/app.js

@@ -63,7 +63,44 @@ angular.module('datasid', ['ngResource', 'ui.router', 'datasid.install', 'datasi
                     active: false
                 },
             ],
-        }
+        };
+
+        $scope.login = {
+            includeUrl: '',
+            error: null,
+            loading: false,
+            username: '',
+            password: '',
+            show: function () {
+                this.includeUrl = 'partials/login.html';
+            },
+            hide: function () {
+                this.includeUrl = '';
+            },
+            submit: function () {
+                this.loading = true;
+
+                setTimeout(function () {
+                    $scope.$apply(function () {
+                        $scope.login.loading = false;
+
+                        if (($scope.login.username === 'admin') && ($scope.login.password === '123mudar')) {
+                            $scope.login.hide();
+                        }
+                        else {
+                            $scope.login.error = 'Usuário ou senha inválidos.';
+                        }
+                    });
+                }, 1000);
+            },
+            cancel: function () {
+                this.error = null;
+                this.loading = false;
+                this.username = '';
+                this.password = '';
+                this.hide();
+            }
+        };
 
         $scope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
             if (typeof $state.current === "undefined")
@@ -85,5 +122,5 @@ angular.module('datasid', ['ngResource', 'ui.router', 'datasid.install', 'datasi
                     }
                 });
             }
-        })
+        });
     });
\ No newline at end of file

web/assets/less/main.less

@@ -146,3 +146,16 @@ p.note {
      padding: 14px 20px;
      mc-auto-number-format: '{b}Note: {/b}';
 }
+
+.modal {
+    display: block;
+}
+
+.saving {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0px -4px -3px 4px;
+  background-image: url("../img/saving.gif");
+  background-repeat: no-repeat;
+}
\ No newline at end of file