AngularJS login

MVC Structure implemented in login
Controller needs refactoring to remove all logs
Refactoring in styling to fit screen

package.json

@@ -15,55 +15,58 @@
   },
   "devDependencies": {},
   "dependencies": {
+    "angular": "^1.6.4",
+    "angular-cookies": "^1.6.4",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
+    "bootstrap": "^4.0.0",
+    "bootstrap-datepicker": "^1.7.1",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
+    "chart.js": "^2.7.1",
     "copy-webpack-plugin": "^4.2.0",
     "cross-env": "^5.1.0",
     "css-loader": "^0.28.7",
+    "datatables": "^1.10.13",
+    "easy-pie-chart": "^2.1.7",
     "eslint": "^4.9.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "2.7.0",
     "extract-text-webpack-plugin": "^3.0.1",
-    "html-webpack-plugin": "^2.30.1",
+    "file-loader": "^1.1.5",
+    "fullcalendar": "^3.6.2",
     "html-includes": "^4.0.0",
     "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^2.30.1",
     "imagemin-webpack-plugin": "^1.5.2",
+    "jquery": "^3.2.1",
+    "jquery-sparkline": "^2.4.0",
+    "jvectormap": "^2.0.4",
+    "load-google-maps-api": "^1.0.0",
+    "lodash": "^4.17.4",
+    "masonry-layout": "^4.2.0",
+    "moment": "^2.19.1",
+    "ng-tags-input": "^3.2.0",
     "node-sass": "^4.5.3",
+    "perfect-scrollbar": "^1.1.0",
+    "popper.js": "^1.12.6",
     "postcss-cssnext": "^3.0.2",
     "postcss-loader": "^2.0.8",
     "sass-loader": "^6.0.6",
     "shx": "^0.2.2",
+    "skycons": "^1.0.0",
     "style-loader": "^0.19.0",
     "stylelint": "^8.2.0",
     "stylelint-config-standard": "^17.0.0",
     "webpack": "^3.8.1",
     "webpack-dashboard": "^1.0.0",
-    "webpack-dev-server": "^2.9.3",
-    "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.0.0",
-    "bootstrap-datepicker": "^1.7.1",
-    "chart.js": "^2.7.1",
-    "datatables": "^1.10.13",
-    "easy-pie-chart": "^2.1.7",
-    "file-loader": "^1.1.5",
-    "fullcalendar": "^3.6.2",
-    "jquery": "^3.2.1",
-    "jquery-sparkline": "^2.4.0",
-    "jvectormap": "^2.0.4",
-    "load-google-maps-api": "^1.0.0",
-    "lodash": "^4.17.4",
-    "masonry-layout": "^4.2.0",
-    "moment": "^2.19.1",
-    "perfect-scrollbar": "^1.1.0",
-    "popper.js": "^1.12.6",
-    "skycons": "^1.0.0"
+    "webpack-dev-server": "^2.9.3"
   }
 }

src/assets/scripts/index.js

@@ -16,3 +16,5 @@ import './fullcalendar';
 import './googleMaps';
 import './utils';
 import './user-form';
+import './login';
+import './app';

src/assets/scripts/login/controller.js

@@ -0,0 +1,32 @@
+import 'babel-polyfill';
+const LoginController = ($scope, LoginService, $cookies) => {
+	$scope.userLogged = false;		
+	
+	if(typeof $cookies.get('access_token') !== 'undefined' ){
+		$scope.userLogged = true;
+		$scope.user = parseJwt( $cookies.get('access_token') );
+    }
+	console.log("BEFORE FUNC ");
+	$scope.userLogin = async () => {
+		
+		let result = await LoginService.loginUserService($scope.user); 
+		if( $scope.user !== "" || $scope.user !== "undefined"){
+            console.log(result);
+			$scope.userLogged = true;		
+			$scope.user = parseJwt( result );
+			$cookies.put('access_token', result);
+			console.log('Redirect me to Dashboard.');
+		} else {
+			console.log("User is empty");
+			
+		}
+	}
+};
+
+function parseJwt(token) {
+    var base64Url = token.split('.')[1];
+    var base64 = base64Url.replace('-', '+').replace('_', '/');
+    return JSON.parse(window.atob(base64));
+};
+
+export default LoginController;

src/assets/scripts/login/index.js

@@ -0,0 +1,12 @@
+import * as angular from 'angular';
+import ngCookies from 'angular-cookies';
+import LoginController from './controller';
+import LoginService from './service';
+
+angular.module('NomitWisp-Login', [ngCookies])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(LoginController.name, LoginController)
+    .factory(LoginService.name, LoginService);
+    

src/assets/scripts/login/service.js

@@ -0,0 +1,22 @@
+const LoginService = ($http) => {
+    let serv = {};
+
+    serv.loginUserService = (user) =>{
+        return $http({
+			method: 'POST',
+			url: 'https://nomitwisp-restapi.herokuapp.com/login',
+			data: user,
+			headers: { 'Content-Type': 'application/json' }
+		})
+        .then( (result) => {
+                console.log(result.data.token);
+                return result.data.token;              
+        }, (err) => {
+                console.log(err.data);
+                return err.data;
+        });
+    }
+    return serv;
+}
+
+export default LoginService;

src/assets/styles/nomit.scss

@@ -137,7 +137,7 @@
     visibility:visible;
 }
 .mo-title{
-    font-size: 40px;
+    font-size: 28px;
     font-weight: bolder;
 }
 .subtitle-modal{
@@ -165,7 +165,9 @@
     width: 174px;
 }
 .modal-username{
-    margin-top: 10px;;
+    font-size: 14px;
+    margin-top: 10px;
+    padding-left: 10px;
     border-radius: 50px;
     border-color: #501db9;
     width: 180px;

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html ng-app="NomitWisp">
 
 <head>
   <meta charset="utf-8">

src/login.html

@@ -55,7 +55,7 @@
     </style>
   </head>
 
-  <body class="app">
+  <body class="app" ng-app="NomitWisp-Login">
 
     <div id='loader'>
       <div class="spinner"></div>
@@ -209,10 +209,22 @@
                        </svg>
 
                     </div> <!--logo-->
-                    <h4 class=""><strong>Sign In </strong></p>
-                    <input class="modal-username" type="text" placeholder="Username">
-                    <input class="modal-username" type="password" placeholder="Password">
-                    <button type="button" class="btn btn-gradient btn-centered mt-20">SIGN IN</button> 
+                    <div ng-controller="LoginController">
+                      <h4 class=""><strong>Sign In </strong>
+                      <form ng-submit="userLogin()" name="LoginForm">
+                        <input class="modal-username" ng-model="user.email" type="text" placeholder="Email" required>
+                        <input class="modal-username" type="password" ng-model="user.password" placeholder="Password" required>
+                        <button type="submit" class="btn btn-gradient btn-centered mt-2" ng-disabled="LoginForm.$invalid">SIGN IN</button>
+                      </form> 
+                      <div ng-show="userLogged">
+                        <h2>Welcome {{user.fullname}}!</h2>
+                        <p ng-show="user.role == 'user'">This text is only visible to Users</p>
+                        <p ng-show="user.role == 'company'">This text is only visible to Companies</p>
+                        <p ng-show="user.role == 'nomit' || user.role == 'admin'">This text is visible to both Nomit and Admin</p>
+                        <p ng-show="user.role == 'nomit'">This text is only visible to Nomit</p>
+                        <p ng-show="user.role == 'admin'">This text is only visible to Admin</p>
+                      </div>
+                    </div>
                   </div>
                   </div>