@@ -18,3 +18,50 @@ }
 .o_textRight{
     text-align: right;
 }
+.o_loginBackground{
+    height: 100%!important;
+    width: 100%;
+    min-height: auto;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+    background-position: center;
+    background-image: url('../img/loginWallpaper.png');
+    text-align: center;
+    /*color: white;*/
+
+    /* Create the parallax scrolling effect */
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    color: #000000;
+
+    padding-top: 30%;
+}
+.o_loginBackground h1{
+    color: #000000!important;
+    margin: 10px;
+}
+.o_loginInput{
+    background: rgba(255, 255, 255, 0.2);
+    padding:10px;
+    color: #000000;
+    border: 0px;
+    width: 80%;
+    font-size: 120%;
+}
+.o_loginInput::-webkit-input-placeholder{
+    color: rgba(0, 0, 0, 0.6);
+}
+.o_loginButton{
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: bold;
+    margin: 10%;
+}
+.o_signupLink{
+    text-decoration: none;
+    color: #000000;
+}

@@ -50,8 +50,10 @@ <script src="js/events.js"></script>
     <script src="js/event.js"></script>
     <script src="js/alerts.js"></script>
     <script src="js/savedEvents.js"></script>
+    <script src="js/byCategories.js"></script>
     <script src="js/users.js"></script>
     <script src="js/user.js"></script>
+    <script src="js/login.js"></script>
 
   </head>
 

@@ -1,5 +1,5 @@
-//var urlapi = "http://localhost:3000/api/";
-var urlapi = "http://192.168.1.34:3000/api/";
+var urlapi = "http://localhost:3000/api/";
+//var urlapi = "http://192.168.1.34:3000/api/";
 
 
 
@@ -13,8 +13,10 @@ 'app.events',
     'app.event',
     'app.alerts',
     'app.savedEvents',
+    'app.byCategories',
     'app.users',
-    'app.user'
+    'app.user',
+    'app.login'
   ])
 
 .run(function($ionicPlatform) {
@@ -89,6 +91,15 @@ controller: 'SavedEventsCtrl'
         }
       }
     })
+    .state('app.byCategories', {
+      url: '/byCategories',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/byCategories.html',
+          controller: 'ByCategoriesCtrl'
+        }
+      }
+    })
     .state('app.users', {
       url: '/users',
       views: {
@@ -104,6 +115,15 @@ views: {
         'menuContent': {
           templateUrl: 'templates/user.html',
           controller: 'UserCtrl'
+        }
+      }
+    })
+    .state('app.login', {
+      url: '/login',
+      views: {
+        'menuContent': {
+          templateUrl: 'templates/login.html',
+          controller: 'LoginCtrl'
         }
       }
     });

@@ -0,0 +1,78 @@
+angular.module('app.byCategories', ['pascalprecht.translate'])
+
+.controller('ByCategoriesCtrl', function($scope, $http, $ionicModal,
+            $timeout, $ionicLoading, $filter) {
+
+
+    $scope.events=[];
+    $scope.alerts=[];
+    $scope.page=0;
+    $scope.doRefresh = function() {
+      /* events refresh: */
+        //$http.get(urlapi + 'events?page=' + $scope.page)
+        $http.get(urlapi + 'events')
+        .then(function(data){
+            console.log('data success events');
+            console.log(data); // for browser console
+            //$scope.events = data.data; // for UI
+            $scope.events=data.data;
+            $scope.$broadcast('scroll.refreshComplete');//refresher stop
+
+        }, function(data){
+            console.log('data error');
+            $scope.$broadcast('scroll.refreshComplete');//refresher stop
+            $ionicLoading.show({ template: 'Error connecting server', noBackdrop: true, duration: 2000 });
+
+        });
+        $http.get(urlapi + 'alerts')
+        .then(function(data){
+            $scope.alerts=data.data;
+        }, function(data){
+        });
+    };
+    $scope.doRefresh();
+
+    $scope.share = function(event){
+        var message = "[" + event.title + "]" + event.description;
+        /*var subject = event.title;
+        var file= ['',''];*/
+        var link = "http://duckduckgo.com";
+        $cordovaSocialSharing
+        .share(message, link) // Share via native share sheet
+        .then(function(result) {
+          // Success!
+        }, function(err) {
+          // An error occured. Show a message to the user
+      });
+    };
+    $scope.savedEvents=[];
+    $scope.$on('$ionicView.enter', function(){//per executar-ho cada cop que es carrega el view
+        if (localStorage.getItem("events_app_savedEvents")) {
+          $scope.savedEvents = JSON.parse(localStorage.getItem("events_app_savedEvents"));
+          console.log("savedEvents");
+          console.log($scope.savedEvents);
+        }
+    });
+    $scope.saveEvent = function(event){
+        $scope.savedEvents.push(event);
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event saved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.unsaveEvent = function(event){
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                $scope.savedEvents.splice(i, 1);
+            }
+        }
+        localStorage.setItem("events_app_savedEvents", JSON.stringify($scope.savedEvents));
+        $ionicLoading.show({ template: 'Event unsaved', noBackdrop: true, duration: 1000 });
+    };
+    $scope.isEventSaved = function(event) {
+        for(var i=0; i<$scope.savedEvents.length; i++) {
+            if ($scope.savedEvents[i]._id === event._id){
+                return true;
+            }
+        }
+        return false;
+    };
+});

@@ -0,0 +1,39 @@
+angular.module('app.login', ['pascalprecht.translate'])
+
+.controller('LoginCtrl', function($scope, $ionicModal, $timeout, $http, $window, $ionicLoading) {
+
+    // Form data for the login modal
+    $scope.loginData = {};
+    // Perform the login action when the user submits the login form
+    $scope.doLogin = function() {
+      console.log('Doing login', $scope.loginData);
+
+      $http({
+          url: urlapi + 'login',
+          method: "POST",
+          data: $scope.loginData
+      })
+      .then(function(response) {
+              // success
+              console.log("response: ");
+              console.log(response.data);
+              if (response.data.success == true)
+              {
+                  localStorage.setItem("events_app_token", response.data.token);
+                  localStorage.setItem("events_app_userdata", JSON.stringify(response.data.user));
+                  window.location.href="#/app/main";
+                  window.location.reload();
+              }else{
+                  console.log("login failed");
+                  $ionicLoading.show({ template: 'Login failed, user or password error.', noBackdrop: true, duration: 2000 });
+              }
+
+
+      },
+      function(response) { // optional
+              // failed
+              console.log(response);
+      });
+
+    };
+});

@@ -2,6 +2,7 @@ angular.module('app.menu', ['pascalprecht.translate'])
 
 
   .controller('MenuCtrl', function($scope, $window) {
+    $scope.storageuser;
     if (localStorage.getItem("events_app_userdata")) {
       $scope.storageuser = JSON.parse(localStorage.getItem("events_app_userdata"));
       console.log($scope.storageuser);

@@ -0,0 +1,42 @@
+<ion-view view-title="Events By Categories">
+  <ion-content class="c_blueGrey100">
+    <ion-refresher pulling-text="{{'Pull_to_refresh' | translate}}..." on-refresh="doRefresh()">
+    </ion-refresher>
+    <a href="#/app/alerts" class="item item-icon-left c_red400"
+    ng-show="alerts">
+        <i class="icon ion-android-alert"></i> <b>{{alerts.length}}</b> Emergency alerts!
+    </a>
+    <div class="card" ng-repeat="event in events">
+      <a class="item item-avatar" ng-href="#/app/users/{{event.user._id}}">
+        <img ng-src="{{event.user.img}}">
+        <h2>{{event.user.username}}</h2>
+        <p>{{event.user.shortDescription}}</p>
+      </a>
+      <a ng-href="#/app/events/{{event._id}}" class="item item-image"
+      ng-show="event.img">
+          <img ng-src="{{event.img}}">
+      </a>
+      <a ng-href="#/app/events/{{event._id}}" class="item item-text-wrap">
+            <h2>{{event.title}}</h2>
+            <p>{{event.description}}</p>
+            <p>{{event.date | date: 'HH:mm, dd/MM/yyyy'}}</p>
+      </a>
+      <div class="item tabs tabs-icon-only">
+        <a class="tab-item" ng-click="share(event)">
+          <i class="icon ion-android-share-alt"></i>
+        </a>
+        <a class="tab-item">
+
+        </a>
+        <a class="tab-item" ng-click="unsaveEvent(event)"
+        ng-show="isEventSaved(event)">
+            <i class="icon ion-heart ctext_red600"></i>
+        </a>
+        <a class="tab-item" ng-click="saveEvent(event)"
+        ng-hide="isEventSaved(event)">
+            <i class="icon ion-heart"></i>
+        </a>
+      </div>
+    </div>
+  </ion-content>
+</ion-view>

@@ -0,0 +1,36 @@
+<ion-view view-title="Login">
+  <ion-content class="o_loginBackground">
+    <div>
+      <div class="o_loginDivForm">
+        <h1>Log in to post</h1>
+
+        <span class="item-note">v0.0.1</span>
+        <br><br>
+        <p>
+            <i class="icon ion-person"></i>
+            <input ng-model="loginData.email" class="o_loginInput"
+            placeholder="{{'Email' | translate}}">
+        </p>
+        <br>
+        <p>
+            <i class="icon ion-locked"></i>
+            <input ng-model="loginData.password" class="o_loginInput"
+            placeholder="{{'Password' | translate}}" style="-webkit-text-security: disc;">
+        </p>
+        <br>
+        <p>
+            <a class="o_loginButton button button-block c_blueGrey400" ng-click="doLogin()">
+                {{'LOG_IN' | translate}}
+            </a>
+        </p>
+        <br>
+        <p>
+
+        <a class="o_signupLink" ng-href="#/app/signup">
+            Need account? Contact us!
+        </a>
+        </p>
+      </div>
+    </div>
+  </ion-content>
+</ion-view>

@@ -20,7 +20,7 @@ <div class="row o_mainOptionRow">
         <a class="col c_deepPurple400" ng-href="#/app/search">
           <i class="icon ion-search"></i>
         </a>
-        <a class="col c_cyan400" ng-href="#/app/bycategories">
+        <a class="col c_cyan400" ng-href="#/app/byCategories">
           <i class="icon ion-pound"></i><!--by categories-->
         </a>
     </div>

@@ -30,7 +30,7 @@ </a>
         <a class="item item-icon-left" menu-close href="#/app/savedEvents">
           <i class="icon ion-heart"></i> Saved Events
         </a>
-        <a class="item item-icon-left" menu-close href="#/app/events">
+        <a class="item item-icon-left" menu-close href="#/app/byCategories">
           <i class="icon ion-pound"></i> By Categories
         </a>
         <a class="item item-icon-left" menu-close href="#/app/events">
@@ -45,8 +45,13 @@ </a>
         <a class="item item-icon-left" menu-close href="#/app/settings">
           <i class="icon ion-ios-gear"></i> Settings
         </a>
-        <a class="item item-icon-left" menu-close href="#/app/login">
-          <i class="icon ion-home"></i> User login
+        <a class="item item-icon-left" menu-close href="#/app/login"
+        ng-show="!storageuser">
+          <i class="icon ion-log-in"></i> Login
+        </a>
+        <a class="item item-icon-left" menu-close ng-click="logout()"
+        ng-show="storageuser">
+          <i class="icon ion-log-out"></i> Logout
         </a>
       </ion-list>
     </ion-content>