LABIGAIL RULEZ

lab-abigail/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

lab-abigail/.env

@@ -0,0 +1,3 @@
+API_URL=http://localhost:3000
+CDN_URL=/
+NODE_ENV=dev

lab-abigail/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package_lock
+build

lab-abigail/README.md

@@ -0,0 +1,50 @@
+![cf](https://i.imgur.com/7v5ASc8.png) Lab 27: CFgram Login and Sign Up
+======
+
+# CFgram: Abs' Gallery App
+This application allows users to create accounts, add, and store personal images. This app persists user login information.
+
+## Open Website in Browser
+In terminal tab, enter:
+1. `npm install` to install application resources.
+2. `rm -rf build` to remove build, if necessary.
+2. `npm run build-watch` to run webpack server
+3. Open on `http://localhost:8080/`
+
+## Login and Sign Up functionality with MongoDB
+1. In terminal tab, enter `mongod`
+2. In new tab, enter `mongo`
+* To view dbs, enter `show dbs`
+* To use local dbs, enter `use cfgram-backend`
+* To `show collections`
+* To view dbs, enter `db.users.find()`
+* To clear dbs, enter `db.users.drop()`
+
+## Run Test
+In terminal tab, enter:
+1. `npm install` to install application resources.
+2. `npm run test` to run tests using jasmine.
+--------------------
+## Application Resources
+* "angular"
+* "babel-core"
+* babel-loader"
+* "babel-preset-es2015"
+* "cowsay-browser"
+* "css-loader"
+* "extract-text-webpack-plugin"
+* "html-webpack-plugin"
+* "node-sass"
+* "sass-loader"
+* "style-loader"
+* "webpack"
+
+## Testing Resources
+* "angular-mocks"
+* "jasmine"
+* "jasmine-core"
+* "karma"
+* "karma-chrome-launcher"
+* "karma-jasmine"
+* "karma-webpack"
+* "webpack-dev-server"

lab-abigail/app/component/landing/login/login.html

@@ -0,0 +1,35 @@
+<section class="login-form">
+  <form
+  name="loginForm"
+  ng-submit="loginCtrl.login()"
+  novalidate>
+
+    <div
+    ng-class="{
+      'error': loginForm.username.$invalid,
+      'success': loginForm.username.$valid
+    }">
+      <input type="text"
+      name="username"
+      placeholder="username"
+      ng-minlength="4"
+      ng-model="loginCtrl.user.username" required>
+
+      <input type="text" placeholder="email">
+    </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="8"
+      ng-model="loginCtrl.user.password" required>
+    </div>
+
+    <button class="btn-std">sign in</button>
+
+  </form>
+</section>

lab-abigail/app/component/landing/login/login.js

@@ -0,0 +1,21 @@
+'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.log('loginCtrl.login()');
+
+    authService.login(this.user).then( () => $location.url('/home'));
+  }
+}

lab-abigail/app/component/landing/signup/signup.html

@@ -0,0 +1,27 @@
+<section class="signup">
+  <form class="signup-form"
+    ng-submit="signupCtrl.signup(signupCtrl.user)"
+    novalidate>
+
+    <input class="input-std"
+      type="text"
+      placeholder="name"
+      ng-minlength="4"
+      ng-model="signupCtrl.user.username"
+      required>
+
+    <input class="input-std"
+      type="text"
+      placeholder="email"
+      ng-model="signupCtrl.user.email">
+
+    <input class="input-std"
+      type="password"
+      placeholder="password"
+      ng-minlength="8"
+      ng-model="signupCtrl.user.password"
+      required>
+
+    <input type="submit" value="sign up">
+  </form>
+</section>

lab-abigail/app/component/landing/signup/signup.js

@@ -0,0 +1,24 @@
+
+'use strict'
+
+require('./_signup.scss')
+
+module.exports = {
+  template: require('./signup.html'),
+  controller: ['$log', '$location', 'authService', SignupController],
+  controllerAs: 'signupCtrl'
+}
+
+function SignupController($log, $location, authService) {
+  this.$onInit = () => {
+    $log.debug('SignupController');
+
+    authService.getToken().then(() => $location.url('/home'))
+
+    this.signup = function(user) {
+      $log.debug('signupCtrl.signup()');
+
+      authService.signup(user).then(() => $location.url('/home'));
+    }
+  }
+}

lab-abigail/app/config/log-config.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ['$logProvider', logConfig];
+
+function logConfig($logProvider) {
+  $logProvider.debugEnabled(__DEBUG__);
+};

lab-abigail/app/config/router-config.js

@@ -0,0 +1,30 @@
+
+'use strict'
+
+module.exports = ['$stateProvider', '$urlRouterProvider', routerConfig]
+
+function routerConfig($stateProvider, $urlRouterProvider) {
+  $urlRouterProvider.when('', '/home')
+  $urlRouterProvider.when('/', '/join#signup')
+  $urlRouterProvider.when('/signup', '/join#signup')
+  $urlRouterProvider.when('/login', '/join#login')
+
+  let routes = [
+    {
+      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'
+    }
+  ]
+
+  routes.forEach($stateProvider.state)
+}

lab-abigail/app/entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+require('./scss/main.scss');
+
+const path = require('path');
+const camelcase = require('camelcase');
+const pascalcase = require('pascalcase');
+const angular = require('angular');
+const uiRouter = require('@uirouter/angularjs');
+
+const cfgram = angular.module('cfgram', ['ui.router']);
+
+let context = require.context('./config/', true, /\.js$/);
+context.keys().forEach( path => cfgram.config(context(path)));
+
+context = require.context('./view/', true, /\.js$/);
+context.keys().forEach( key => cfgram.controller(pascalcase(path.basename(key, '.js')), context(key)));
+
+context = require.context('./service/', true, /\.js$/);
+context.keys().forEach( key => cfgram.service(camelcase(path.basename(key, '.js')), context(key)));
+
+context = require.context('./component/', true, /\.js$/);
+context.keys().forEach( key => cfgram.component(camelcase(path.basename(key, '.js')), context(key)));

lab-abigail/app/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang-"en" ng-app="cfgram">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Londrina+Sketch" rel="stylesheet">
+    <title>Routes app</title>
+  </head>
+  <body>
+    <header>
+      <h1>Abs' Gallery App</h1>
+    </header>
+
+    <main>
+      <ui-view></ui-view>
+    </main>
+    <footer></footer>
+  </body>
+</html>

lab-abigail/app/scss/main.scss

@@ -0,0 +1,49 @@
+$brand-primary: #444;
+$btn-primary: $brand-primary / 2;
+$btn-hover: #31b1c1;
+$black: #000;
+$white: #fff;
+$box-std: 10%;
+$gutter-std: 5%;
+$gutter-sm: $gutter-std / 2;
+$font-fam: 'Londrina Sketch';
+$background-color: #FF6103;
+$header-background: white;
+
+// $mixins
+
+@mixin link {
+  color: white;
+  text-decoration: none;
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+}
+
+// global styles
+
+body {
+  font-family: $font-fam;
+  font-size: 2vw;
+  background: $background-color;
+  text-align: center;
+  margin: 0;
+}
+
+h1 {
+  background-color: $header-background;
+  margin: 0;
+  padding-top: .2em;
+  padding-bottom: .2em;
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 2.5em;
+}
+
+a {
+  @include link;
+  font-size: 2em;
+}

lab-abigail/app/service/auth-service.js

@@ -0,0 +1,90 @@
+'use strict'
+
+module.exports = [
+  '$q',
+  '$log',
+  '$http',
+  '$window',
+  function($q, $log, $http, $window, authService) {
+    $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.logout = function() {
+      $log.debug('authService.logout()');
+
+      $window.localStorage.removeItem('token');
+      token = null;
+
+      return $q.resolve();
+    }
+
+    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)
+        return $q.reject(err)
+      })
+    }
+
+    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.error('failure', err.message)
+        return $q.reject(err)
+      })
+    }
+
+    return service;
+  }
+]