From 392593648e4feedeb38b1d27ffd5b68f5281cecb Mon Sep 17 00:00:00 2001
From: Khalid Mohamud <kmohamud1@outlook.com>
Date: Tue, 4 Apr 2017 09:34:31 -0700
Subject: [PATCH 1/2] lab-khalid

---
 lab-khalid | 1 +
 1 file changed, 1 insertion(+)
 create mode 160000 lab-khalid

diff --git a/lab-khalid b/lab-khalid
new file mode 160000
index 0000000..7e51537
--- /dev/null
+++ b/lab-khalid
@@ -0,0 +1 @@
+Subproject commit 7e515373fb159dcf0d3c3d59199ff9e29f60c956

From 8def4261dc732d1558ad2aa8f0fecb413ad70083 Mon Sep 17 00:00:00 2001
From: Khalid Mohamud <kmohamud1@outlook.com>
Date: Tue, 4 Apr 2017 12:58:12 -0700
Subject: [PATCH 2/2] lab-khalid

---
 lab-khlid/.babelrc                            |  3 +
 lab-khlid/.eslintrc                           | 21 +++++
 lab-khlid/.gitignore                          | 33 +++++++
 .../create-gallery/_create-gallery.scss       |  0
 .../create-gallery/create-gallery.html        | 17 ++++
 .../gallery/create-gallery/create-gallery.js  | 22 +++++
 .../app/component/landing/login/_login.scss   |  0
 .../app/component/landing/login/login.html    | 26 ++++++
 .../app/component/landing/login/login.js      | 27 ++++++
 .../app/component/landing/signup/_signup.scss | 35 ++++++++
 .../app/component/landing/signup/signup.html  | 10 +++
 .../app/component/landing/signup/signup.js    | 25 ++++++
 lab-khlid/app/component/navbar/_navbar.scss   |  8 ++
 lab-khlid/app/component/navbar/navbar.html    | 14 +++
 lab-khlid/app/component/navbar/navbar.js      | 43 +++++++++
 lab-khlid/app/config/log-config.js            |  7 ++
 lab-khlid/app/config/router-config.js         | 31 +++++++
 lab-khlid/app/entry.js                        | 47 ++++++++++
 lab-khlid/app/index.html                      | 20 +++++
 lab-khlid/app/package.json                    | 49 +++++++++++
 lab-khlid/app/scss/lib/header/_reset.scss     | 48 ++++++++++
 lab-khlid/app/scss/lib/header/header.scss     | 28 ++++++
 lab-khlid/app/scss/main.scss                  |  6 ++
 lab-khlid/app/service/auth-service.js         | 88 +++++++++++++++++++
 lab-khlid/app/service/gallery-service.js      | 82 +++++++++++++++++
 lab-khlid/app/view/home/_home.scss            |  0
 lab-khlid/app/view/home/home-controller.js    | 23 +++++
 lab-khlid/app/view/home/home.html             |  9 ++
 lab-khlid/app/view/landing/_landing.scss      | 14 +++
 .../app/view/landing/landing-controller.js    | 12 +++
 lab-khlid/app/view/landing/landing.html       | 17 ++++
 lab-khlid/app/webpack.config.js               | 43 +++++++++
 lab-khlid/karma.conf.js                       | 70 +++++++++++++++
 33 files changed, 878 insertions(+)
 create mode 100644 lab-khlid/.babelrc
 create mode 100644 lab-khlid/.eslintrc
 create mode 100644 lab-khlid/.gitignore
 create mode 100644 lab-khlid/app/component/gallery/create-gallery/_create-gallery.scss
 create mode 100644 lab-khlid/app/component/gallery/create-gallery/create-gallery.html
 create mode 100644 lab-khlid/app/component/gallery/create-gallery/create-gallery.js
 create mode 100644 lab-khlid/app/component/landing/login/_login.scss
 create mode 100644 lab-khlid/app/component/landing/login/login.html
 create mode 100644 lab-khlid/app/component/landing/login/login.js
 create mode 100644 lab-khlid/app/component/landing/signup/_signup.scss
 create mode 100644 lab-khlid/app/component/landing/signup/signup.html
 create mode 100644 lab-khlid/app/component/landing/signup/signup.js
 create mode 100644 lab-khlid/app/component/navbar/_navbar.scss
 create mode 100644 lab-khlid/app/component/navbar/navbar.html
 create mode 100644 lab-khlid/app/component/navbar/navbar.js
 create mode 100644 lab-khlid/app/config/log-config.js
 create mode 100644 lab-khlid/app/config/router-config.js
 create mode 100644 lab-khlid/app/entry.js
 create mode 100644 lab-khlid/app/index.html
 create mode 100644 lab-khlid/app/package.json
 create mode 100644 lab-khlid/app/scss/lib/header/_reset.scss
 create mode 100644 lab-khlid/app/scss/lib/header/header.scss
 create mode 100644 lab-khlid/app/scss/main.scss
 create mode 100644 lab-khlid/app/service/auth-service.js
 create mode 100644 lab-khlid/app/service/gallery-service.js
 create mode 100644 lab-khlid/app/view/home/_home.scss
 create mode 100644 lab-khlid/app/view/home/home-controller.js
 create mode 100644 lab-khlid/app/view/home/home.html
 create mode 100644 lab-khlid/app/view/landing/_landing.scss
 create mode 100644 lab-khlid/app/view/landing/landing-controller.js
 create mode 100644 lab-khlid/app/view/landing/landing.html
 create mode 100644 lab-khlid/app/webpack.config.js
 create mode 100644 lab-khlid/karma.conf.js

diff --git a/lab-khlid/.babelrc b/lab-khlid/.babelrc
new file mode 100644
index 0000000..2dcde76
--- /dev/null
+++ b/lab-khlid/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": "es2015"
+}
\ No newline at end of file
diff --git a/lab-khlid/.eslintrc b/lab-khlid/.eslintrc
new file mode 100644
index 0000000..b663d77
--- /dev/null
+++ b/lab-khlid/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "rules": {
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "quotes": [ "error", "single" ],
+    "semi": ["error", "always"],
+    "linebreak-style": [ "error", "unix" ]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}
\ No newline at end of file
diff --git a/lab-khlid/.gitignore b/lab-khlid/.gitignore
new file mode 100644
index 0000000..d571c04
--- /dev/null
+++ b/lab-khlid/.gitignore
@@ -0,0 +1,33 @@
+# Created by https://www.gitignore.io/api/node,vim,macos,linux,windows
+.DS_Store
+node_modules/
+.env
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+
+.env
\ No newline at end of file
diff --git a/lab-khlid/app/component/gallery/create-gallery/_create-gallery.scss b/lab-khlid/app/component/gallery/create-gallery/_create-gallery.scss
new file mode 100644
index 0000000..e69de29
diff --git a/lab-khlid/app/component/gallery/create-gallery/create-gallery.html b/lab-khlid/app/component/gallery/create-gallery/create-gallery.html
new file mode 100644
index 0000000..33780ed
--- /dev/null
+++ b/lab-khlid/app/component/gallery/create-gallery/create-gallery.html
@@ -0,0 +1,17 @@
+<section class="create-gallery">
+   <form name="createGalleryForm" 
+          ng-submit="createGalleryCtrl.createGallery()">
+  
+      <fieldset>
+        <label for="name">name</label>
+        <input type="text" class="input-std" name="name" ng-model="createGalleryCtrl.gallery.name" required>
+      </fieldset>
+
+      <fieldset>
+        <label for="desc">description</label>
+        <input type="text" name="desc" class="input-std" ng-model="createGalleryCtrl.gallery.desc" required>
+      </fieldset>
+
+      <button class="btn-std">create</button>
+          </form>
+</section>
\ No newline at end of file
diff --git a/lab-khlid/app/component/gallery/create-gallery/create-gallery.js b/lab-khlid/app/component/gallery/create-gallery/create-gallery.js
new file mode 100644
index 0000000..92e3eda
--- /dev/null
+++ b/lab-khlid/app/component/gallery/create-gallery/create-gallery.js
@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = {
+  template: require('./create-gallery.html'),
+  controller: ['$log', 'galleryService', CreateGalleryController],
+  controllerAs: 'createGalleryCtrl'
+};
+
+
+function CreateGalleryController($log, galleryService){
+  $log.debug('CreateGalleryController');
+
+  this.gallery = {};
+
+  this.createGallery = function() {
+    galleryService.createGallery(this.gallery)
+    .then( () => {
+      this.gallery.name = null;
+      this.gallery.desc = null;
+    });
+  };
+}
\ No newline at end of file
diff --git a/lab-khlid/app/component/landing/login/_login.scss b/lab-khlid/app/component/landing/login/_login.scss
new file mode 100644
index 0000000..e69de29
diff --git a/lab-khlid/app/component/landing/login/login.html b/lab-khlid/app/component/landing/login/login.html
new file mode 100644
index 0000000..fca34be
--- /dev/null
+++ b/lab-khlid/app/component/landing/login/login.html
@@ -0,0 +1,26 @@
+<section class="login-form">
+  <form name="loginForm" action="" ng-submit="loginCtrl.login()" novalidate>
+    <legend>sign in</legend>
+    <div ng-class="{ 
+      'error': loginForm.username.$invalid,
+      'success': loginForm.username.$valid
+      }">
+
+      <input type="text" 
+             name="username" 
+             placeholder="username" 
+             ng-minlength="4" 
+             ng-model="loginCtrl.username" required>
+      
+      </div>
+      <div
+      ng-class="{
+          'error': loginForm.password.$invalid && loginForm.$submitted,
+          'success': loginForm.password.$valid
+        }">
+        <input type="password" name="password" ng-disabled="loginForm.username.$invalid"
+        placeholder="password" ng-minlength="loginCtrl.user.password" required>
+      </div>
+      <button class="btn-std"> sign in </button>
+  </form>
+</section>
\ No newline at end of file
diff --git a/lab-khlid/app/component/landing/login/login.js b/lab-khlid/app/component/landing/login/login.js
new file mode 100644
index 0000000..040f152
--- /dev/null
+++ b/lab-khlid/app/component/landing/login/login.js
@@ -0,0 +1,27 @@
+'use strict';
+
+require('./_login.scss');
+
+module.exports = {
+  template: require('./login.html'),
+  controller: ['$log', '$location', 'authService', LoginController],
+  controllerAs: 'loginCtrl'
+};
+
+function LoginController($log, $location, authService){
+  $log.debug('LoginController');
+
+  authService.getToken()
+  .then( () => {
+    $location.url('/home');
+  });
+
+  this.login = function() {
+    $log.debug('loginCtrl.login');
+
+    authService.login(this.user)
+    .then( () => {
+      $location.url('/home');
+    });
+  };
+}
\ No newline at end of file
diff --git a/lab-khlid/app/component/landing/signup/_signup.scss b/lab-khlid/app/component/landing/signup/_signup.scss
new file mode 100644
index 0000000..872d99c
--- /dev/null
+++ b/lab-khlid/app/component/landing/signup/_signup.scss
@@ -0,0 +1,35 @@
+$space: 20px;
+$primary-color: #404040;
+$secondary-color: lightgrey;
+
+form {
+  display: block;
+  margin: $space auto;
+  width: 40%;
+  legend{
+    font-size: 20px;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  input{
+    display: block;
+    width: 80%;
+    height: 30px;
+    margin-top: $space;
+    font-size: 15px;
+    // margin:10px auto;
+    padding: 5px;
+    border-radius: 1px;
+    border: none;
+    // margin: auto;
+  }
+  button {
+    width: 30%;
+    height: 30px;
+    font-size: 15px;
+    margin-top: $space;
+    margin-left: 52%;
+    background-color: $primary-color;
+    color: $secondary-color;
+    border: none;
+  }
+}
\ No newline at end of file
diff --git a/lab-khlid/app/component/landing/signup/signup.html b/lab-khlid/app/component/landing/signup/signup.html
new file mode 100644
index 0000000..880316b
--- /dev/null
+++ b/lab-khlid/app/component/landing/signup/signup.html
@@ -0,0 +1,10 @@
+<section class="signup">
+  <form class="signupform" ng-submit="signupCtrl.signup(signupCtrl.user)" novalidate>
+    <legend>sign up</legend>
+    <input type="text" class="input-std" placeholder="name" ng-minlength="4" ng-model="signupCtrl.user.username">
+    <input type="email" class="input-std" placeholder="email" ng-model="signupCtrl.user.email">
+    <input type="password" class="input-std" placeholder="password" ng-minlength="3" ng-model="signupCtrl.user.password" required>
+    <button class="btn-std" value="signup"> sign up </button>
+  </form>
+</section>
+
diff --git a/lab-khlid/app/component/landing/signup/signup.js b/lab-khlid/app/component/landing/signup/signup.js
new file mode 100644
index 0000000..63d071a
--- /dev/null
+++ b/lab-khlid/app/component/landing/signup/signup.js
@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = {
+  template: require('./signup.html'),
+  controller: ['$log', '$location', 'authService', SignupController],
+  controllerAs: 'signupCtrl'
+};
+
+function SignupController($log, $location, authService){
+  $log.debug('SignupController');
+
+  authService.getToken()
+  .then( () => {
+    $location.url('/home');
+  });
+
+  this.signup = function(user){
+    $log.debug('signupCtrl.signup');
+
+    authService.signup(user)
+    .then( () => {
+      $location.url('/home');
+    });
+  };
+}
\ No newline at end of file
diff --git a/lab-khlid/app/component/navbar/_navbar.scss b/lab-khlid/app/component/navbar/_navbar.scss
new file mode 100644
index 0000000..df0b61a
--- /dev/null
+++ b/lab-khlid/app/component/navbar/_navbar.scss
@@ -0,0 +1,8 @@
+.navbar {
+  button {
+    width: 60px;
+    height: 30px;
+    border-radius: 6px;
+    border: none;
+  }
+}
\ No newline at end of file
diff --git a/lab-khlid/app/component/navbar/navbar.html b/lab-khlid/app/component/navbar/navbar.html
new file mode 100644
index 0000000..1989d33
--- /dev/null
+++ b/lab-khlid/app/component/navbar/navbar.html
@@ -0,0 +1,14 @@
+<section class="navbar">
+  <nav>
+  <ul>
+    <li> <img  alt=""></li>
+    <li> <h1>cfgram</h1></li>
+    <li>
+      <div ng-hide="navbarCtrl.hideButtons">
+        <button class="btn-std" ng-click="navbarCtrl.logout()">logout</button>
+      </div>
+    </li>
+  </ul>
+  </nav>
+
+</section>
\ No newline at end of file
diff --git a/lab-khlid/app/component/navbar/navbar.js b/lab-khlid/app/component/navbar/navbar.js
new file mode 100644
index 0000000..372880b
--- /dev/null
+++ b/lab-khlid/app/component/navbar/navbar.js
@@ -0,0 +1,43 @@
+'use strict';
+
+require('./_navbar.scss');
+
+module.exports = {
+  template: require('./navbar.html'),
+  controller: ['$log', '$location', '$rootScope', 'authService', NavbarController],
+  controllerAs: 'navbarCtrl'
+};
+
+function NavbarController($log, $location, $rootScope, authService){
+  $log.debug('NavbarController');
+
+  this.checkPath = function(){
+    let path = $location.path;
+    if(path === '/join'){
+      this.hideButtons = true;
+    }
+
+    if(path !== '/join'){
+      this.hideButtons = false;
+      authService.getToken()
+      .catch( () => {
+        $location.url('/join#login');
+      });
+    }
+  };
+
+  this.checkPath();
+
+  $rootScope.$on('$locationChangeSuccess', () => {
+    this.checkPath();
+  });
+
+  this.logout = function () {
+    $log.log('navbarCtrl.logout');
+    this.hideButtons = true;
+    authService.logout()
+    .then( () => {
+      $location.url('/');
+    });
+  };
+}
\ No newline at end of file
diff --git a/lab-khlid/app/config/log-config.js b/lab-khlid/app/config/log-config.js
new file mode 100644
index 0000000..9ffc30a
--- /dev/null
+++ b/lab-khlid/app/config/log-config.js
@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ['$logProvider', logConfig];
+
+function logConfig($logProvider){
+  $logProvider.debugEnabled(__DEBUG__);
+}
\ No newline at end of file
diff --git a/lab-khlid/app/config/router-config.js b/lab-khlid/app/config/router-config.js
new file mode 100644
index 0000000..4777210
--- /dev/null
+++ b/lab-khlid/app/config/router-config.js
@@ -0,0 +1,31 @@
+'use strict';
+
+module.exports = ['$stateProvider', '$urlRouterProvider', routerConfig];
+
+function routerConfig($stateProvider, $urlRouterProvider){
+  $urlRouterProvider.when('', '/join#signup');
+  $urlRouterProvider.when('/', '/join#signup');
+  $urlRouterProvider.when('/signup', '/join#signup');
+  $urlRouterProvider.when('/login', '/join#login');
+
+  let states = [
+    {
+      name: 'home',
+      url: '/home',
+      template: require('../view/home/home.html'),
+      controller: 'HomeController',
+      controllerAs: 'homeCtrl'
+    },
+    {
+      name: 'landing',
+      url: '/join',
+      template: require('../view/landing/landing.html'),
+      controller: 'LandingController',
+      controllerAs: 'landingCtrl'
+    }
+  ];
+
+  states.forEach( state => {
+    $stateProvider.state(state);
+  });
+}
\ No newline at end of file
diff --git a/lab-khlid/app/entry.js b/lab-khlid/app/entry.js
new file mode 100644
index 0000000..c651805
--- /dev/null
+++ b/lab-khlid/app/entry.js
@@ -0,0 +1,47 @@
+'use strict';
+
+require('./scss/main.scss');
+
+const
+  path = require('path'),
+  angular = require('angular'),
+  camelcase = require('camelcase'),
+  pascalcase = require('pascalcase'),
+  uiRouter = require('angular-ui-router'),
+  ngTouch = require('angular-touch'),
+  ngAnimate = require('angular-animate'),
+
+  cfgram = angular.module('cfgram', [ngTouch, ngAnimate, uiRouter]);
+
+let context = require.context('./config/', true, /\.js$/);
+console.log('CONTEXT', context);
+context.keys().forEach( key => {
+  console.log('k',key);
+  cfgram.config(context(key));
+});
+
+context = require.context('./view/', true, /\.js$/);
+console.log('CONTEXT2', context);
+context.keys().forEach( key => {
+  console.log('k',key);
+  let name = pascalcase(path.basename(key, '.js'));
+  let module = context(key);
+  cfgram.controller(name, module);
+});
+
+context = require.context('./service/', true, /\.js$/);
+context.keys().forEach(key => {
+   console.log('k',key);
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  cfgram.service(name, module);
+});
+
+context = require.context('./component', true, /\.js$/);
+context.keys().forEach( key => {
+   console.log('k',key);
+  let name = camelcase(path.basename(key, '.js'));
+  let module = context(key);
+  cfgram.component(name, module);
+});
+
diff --git a/lab-khlid/app/index.html b/lab-khlid/app/index.html
new file mode 100644
index 0000000..98dfca3
--- /dev/null
+++ b/lab-khlid/app/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html ng-app="cfgram">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
+    <title>cfgram</title>
+  </head>
+  <body>
+    <header>
+      <navbar></navbar>
+    </header>
+    <main>
+      <ui-view></ui-view>
+    </main>
+
+    <footer></footer>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/lab-khlid/app/package.json b/lab-khlid/app/package.json
new file mode 100644
index 0000000..ae63168
--- /dev/null
+++ b/lab-khlid/app/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "cfgram-auth",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "./node_modules/webpack/bin/webpack.js",
+    "watch": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
+    "test-watch": "./node_modules/karma/bin/karma start ",
+    "test": "./node_modules/karma/bin/karma start --single-run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "angular": "^1.6.3",
+    "angular-animate": "^1.6.3",
+    "angular-touch": "^1.6.3",
+    "angular-ui-router": "^0.4.2",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-es2015": "^6.24.0",
+    "camelcase": "^4.0.0",
+    "clean-webpack-plugin": "^0.1.16",
+    "css-loader": "^0.27.3",
+    "dotenv": "^4.0.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.28.0",
+    "node-sass": "^4.5.1",
+    "pascalcase": "^0.1.1",
+    "resolve-url-loader": "^2.0.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "ui-router": "^1.0.0-alpha.3",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.2"
+  },
+  "devDependencies": {
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.5.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-webpack": "^2.0.3",
+    "webpack-dev-server": "^2.4.2"
+  }
+}
diff --git a/lab-khlid/app/scss/lib/header/_reset.scss b/lab-khlid/app/scss/lib/header/_reset.scss
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/lab-khlid/app/scss/lib/header/_reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/lab-khlid/app/scss/lib/header/header.scss b/lab-khlid/app/scss/lib/header/header.scss
new file mode 100644
index 0000000..82bf067
--- /dev/null
+++ b/lab-khlid/app/scss/lib/header/header.scss
@@ -0,0 +1,28 @@
+header {
+  width: 100%;
+  height: 6vw;
+  background-color: black;
+  color: lightgrey;
+
+  h1 {
+    display: inline;
+    font-size: 30px;
+    font-family: Arial, sans-serif;
+    // margin: 5% 10%;
+    margin: 5%;
+    padding: 10px;
+    font-weight: lighter;
+  }
+
+  ul{
+    margin-left: 10%;
+    padding-top: 5px;
+    
+  }
+  li{
+    display: inline-block;
+    &:last-child{
+     margin-left: 90%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/lab-khlid/app/scss/main.scss b/lab-khlid/app/scss/main.scss
new file mode 100644
index 0000000..8b6d844
--- /dev/null
+++ b/lab-khlid/app/scss/main.scss
@@ -0,0 +1,6 @@
+@import './lib/header/header.scss';
+@import './lib/header/_reset.scss';
+@import '../component/landing/signup/_signup.scss';
+body {
+  background-color: $secondary-color;
+}
\ No newline at end of file
diff --git a/lab-khlid/app/service/auth-service.js b/lab-khlid/app/service/auth-service.js
new file mode 100644
index 0000000..9b5719b
--- /dev/null
+++ b/lab-khlid/app/service/auth-service.js
@@ -0,0 +1,88 @@
+'use strict';
+
+module.exports = ['$q', '$log', '$http', '$window', authService];
+
+function authService($q, $log, $http, $window){
+  $log.debug('authService');
+
+  let service = {};
+  let token = null;
+
+  function setToken(_token){
+    $log.debug('authService.setToken');
+
+    if(! _token) {
+      return $q.reject(new Error('no token'));
+    }
+
+    $window.localStorage.setItem('token', _token);
+    token = _token;
+    return $q.resolve(token);
+  }
+
+  service.getToken = function() {
+    $log.debug('authService.getToken');
+
+    if(token){
+      return $q.resolve(token);
+    }
+
+    token = $window.localStorage.getItem('token');
+    if(token) return $q.resolve(token);
+    return $q.reject(new Error('token not found'));
+  };
+
+  service.signup = function(user){
+    $log.debug('authService.signup');
+
+    let url = `${__API_URL__}/api/signup`;
+    let config = {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      }
+    };
+
+    return $http.post(url, user, config)
+    .then( res => {
+      $log.log('success ', res.data);
+      return setToken(res.data);
+    })
+    .catch( err => {
+      $log.error('failure:', err.message);
+      return $q.reject(err);
+    });
+  };
+
+  service.logout = function(){
+    $log.debug('authService.logout');
+
+    $window.localStorage.removeItem('token');
+    token = null;
+    return $q.resolve();
+  };
+
+  service.login = function(user){
+    $log.debug('authService.login');
+
+    let url = `${__API_URL__}/api/login`;
+    let base64 = $window.btoa(`${user.username}:${user.password}`);
+    let config = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Basic ${base64}`
+      }
+    };
+
+    return $http.get(url, config)
+    .then( res => {
+      $log.log('success: ', res.data);
+      return setToken(res.data);
+    })
+    .catch( err => {
+      $log.log('failure: ', err.message);
+      return $q.reject(err);
+    });
+  };
+  return service;
+}
\ No newline at end of file
diff --git a/lab-khlid/app/service/gallery-service.js b/lab-khlid/app/service/gallery-service.js
new file mode 100644
index 0000000..f07e0d9
--- /dev/null
+++ b/lab-khlid/app/service/gallery-service.js
@@ -0,0 +1,82 @@
+'use strict';
+
+module.exports = ['$q', '$log', '$http', 'authService', galleryService];
+
+function galleryService($q, $log, $http, authService){
+  $log.debug('galleryService');
+
+  let service = {};
+  service.galleries = [];
+
+  service.createGallery = function(gallery){
+    $log.debug('createGallery');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`
+        }
+      };
+
+      return $http.post(url, gallery, config);
+    })
+    .then( res => {
+      $log.log('gallery created');
+      let gallery = res.data;
+      service.galleries.unshift(gallery);
+      return gallery;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+
+  service.deleteGalleries = function(galleryID){
+    $log.debug('galleryService.deleteGallery');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery/${galleryID}`;
+      let config = {
+        headers : {
+          Accept: 'application/json',
+          Authorization: `Bearer ${token}`
+        }
+      };
+
+      //TODO create $http.delete request
+
+    });
+  };
+ 
+  service.fetchGalleries = function(){
+    $log.debug('service.fetchgalleries');
+
+    return authService.getToken()
+    .then( token => {
+      let url = `${__API_URL__}/api/gallery`;
+      let config = {
+        headers: {
+          Accept: 'application/json',
+          Authorization: `Bearer ${token}`,
+        }
+      };
+      return $http.get(url, config);
+    })
+    .then( res => {
+      $log.log('galleries retrieved');
+ 
+      service.galleries = res.data;
+      return service.galleries;
+    })
+    .catch( err => {
+      $log.error(err.message);
+      return $q.reject(err);
+    });
+  };
+}
\ No newline at end of file
diff --git a/lab-khlid/app/view/home/_home.scss b/lab-khlid/app/view/home/_home.scss
new file mode 100644
index 0000000..e69de29
diff --git a/lab-khlid/app/view/home/home-controller.js b/lab-khlid/app/view/home/home-controller.js
new file mode 100644
index 0000000..b997f32
--- /dev/null
+++ b/lab-khlid/app/view/home/home-controller.js
@@ -0,0 +1,23 @@
+'use strict';
+
+require('./_home.scss');
+
+module.exports = ['$log','galleryService', HomeController];
+
+function HomeController($log, $rootScope, galleryService){
+  $log.debug('HomeController');
+
+  this.galleries = [];
+  console.log('*************', galleryService);
+
+  this.fetchGalleries = function(){
+    galleryService.fetchGalleries()
+    .then( galleries => {
+      this.galleries = galleries;
+    });
+  };
+
+  this.fetchGalleries();
+
+  $rootScope.$on('$locationChangeSuccess', () => this.fetchGalleries());
+}
\ No newline at end of file
diff --git a/lab-khlid/app/view/home/home.html b/lab-khlid/app/view/home/home.html
new file mode 100644
index 0000000..7813828
--- /dev/null
+++ b/lab-khlid/app/view/home/home.html
@@ -0,0 +1,9 @@
+<section class="home">
+ <create-gallery></create-gallery>
+ <ul>
+   <li ng-repeat="gallery in homeCtrl.galleries">
+     <span>name: {{gallery.name}}</span>
+     <span>desc: {{gallery.desc}}</span>
+   </li>
+ </ul>
+</section>
diff --git a/lab-khlid/app/view/landing/_landing.scss b/lab-khlid/app/view/landing/_landing.scss
new file mode 100644
index 0000000..c5a6da6
--- /dev/null
+++ b/lab-khlid/app/view/landing/_landing.scss
@@ -0,0 +1,14 @@
+.landing {
+  p {
+    font-family: Arial, Helvetica, sans-serif;
+    display: inline;
+    margin-left: 44%;
+    padding: 0 10px;
+  }
+  a {
+    text-decoration: none;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 900;
+    color: black;
+  }
+}
\ No newline at end of file
diff --git a/lab-khlid/app/view/landing/landing-controller.js b/lab-khlid/app/view/landing/landing-controller.js
new file mode 100644
index 0000000..b3122d4
--- /dev/null
+++ b/lab-khlid/app/view/landing/landing-controller.js
@@ -0,0 +1,12 @@
+'use strict';
+
+require('./_landing.scss');
+
+module.exports = ['$log', '$location', '$rootScope', 'authService', LandingController];
+
+function LandingController($log, $location, authService){
+  $log.log('LandingController');
+  let url = $location.url();
+  console.log(url,'{{{{{{{{{{{{{');
+  this.showSignup = url === '/join#signup' || url === '/join';
+}
\ No newline at end of file
diff --git a/lab-khlid/app/view/landing/landing.html b/lab-khlid/app/view/landing/landing.html
new file mode 100644
index 0000000..362435e
--- /dev/null
+++ b/lab-khlid/app/view/landing/landing.html
@@ -0,0 +1,17 @@
+<section class="landing">
+  <div class="join-container" ng-if="landingCtrl.showSignup">
+    <div class="join-inner">
+      <signup></signup>
+      <p> already a member?</p>
+      <a href="/#/join#login" ng-click="landingCtrl.showSignup=false"> sign in here.</a>
+    </div>
+  </div>
+
+  <div class="join-container" ng-if="!landingCtrl.showSignup">
+    <div class="join-inner">
+      <login></login>
+      <p> want to sign up?</p>
+      <a href="/#/join#signup" ng-click="landingCtrl.showSignup=true"> sign up here.</a>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/lab-khlid/app/webpack.config.js b/lab-khlid/app/webpack.config.js
new file mode 100644
index 0000000..c612748
--- /dev/null
+++ b/lab-khlid/app/webpack.config.js
@@ -0,0 +1,43 @@
+'use strict';
+
+require('dotenv').load();
+
+const
+  HTMLPlugin = require('html-webpack-plugin'),
+  ExtractTextPlugin = require('extract-text-webpack-plugin'),
+  webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+  entry: `${__dirname}/app/entry.js`,
+  output: {
+    filename: 'bundle.js',
+    path: `${__dirname}/build`
+  },
+  plugins:[
+    new HTMLPlugin({
+      template: `${__dirname}/app/index.html`
+    }),
+    new ExtractTextPlugin('bundle.css'),
+    new webpack.DefinePlugin({
+      __API_URL__: JSON.stringify(process.env.API_URL)
+    })
+  ],
+  module:{
+    rules:[
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
+      },
+      {
+        test: /\.html$/,
+        loader: 'html-loader'
+      }
+    ]
+  }
+};
diff --git a/lab-khlid/karma.conf.js b/lab-khlid/karma.conf.js
new file mode 100644
index 0000000..6a3556d
--- /dev/null
+++ b/lab-khlid/karma.conf.js
@@ -0,0 +1,70 @@
+// Karma configuration
+// Generated on Tue Mar 28 2017 15:51:11 GMT-0700 (PDT)
+const webpackconfig = require('./webpack.config.js');
+module.exports = function(config) {
+  config.set({
+    webpack: webpackconfig,
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'test/**/*-test.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'test/**/*-test.js': ['webpack']
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['mocha'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}