lab-ben

lab-ben/.bablerc

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

lab-ben/.eslintrc

@@ -0,0 +1,25 @@
+{
+  "rules": {
+    "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "semi": ["error", "always"]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "globals": {
+    "__API_URI__": false,
+    "__DEBUG__": false
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}

lab-ben/.gitignore

@@ -0,0 +1,68 @@
+# Created by https://www.gitignore.io/api/osx,linux,node,vim
+
+### OSX ###
+.DS_Store
+.AppleDouble
+.LSOverride
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+### Vim ###
+# swap
+[._]*.s[a-w][a-z]
+[._]s[a-w][a-z]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+
+# auto-generated tag files
+tags
+
+build
+.env

lab-ben/README.md

@@ -0,0 +1,13 @@
+# CFGram-Browser-App
+
+## Goals
+Make a Front end interface for the CFgram app.
+
+## Depencies
+* angular
+* babel
+* webpack
+
+## Testing Dependencies
+* Karma
+* Jasmine

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

@@ -0,0 +1,39 @@
+<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="3"
+        ng-model="loginCtrl.user.password"
+        required>
+    </div>
+
+    <button type="submit" class="btn-std">sign in</button>
+  </form>
+</section>

lab-ben/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-ben/app/component/landing/signup/signup.html

@@ -0,0 +1,31 @@
+<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="text"
+      placeholder="password"
+      ng-minlength="3"
+      ng-model="signupCtrl.user.password"
+      required>
+
+      <button type="submit">sign up</button>
+  </form>
+
+</section>

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

@@ -0,0 +1,21 @@
+'use strict';
+
+require('./_signup.scss');
+
+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'));
+  };
+}

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+module.exports = [
+  '$stateProvider',
+  '$urlRouterProvider',
+  function($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',
+      },
+      {
+        name: 'gallery',
+        url: '/gallery',
+        template: require('../view/gallery/gallery.html'),
+        controller: 'GalleryController',
+        controllerAs: 'galleryCtrl',
+      },
+    ];
+
+    routes.forEach(route => $stateProvider.state(route));
+  },
+];

lab-ben/app/entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+require('./scss/main.scss');
+
+const path = require('path');
+const camelcase = require('camelcase');
+const pascalcase = require('pascalcase');
+const angular = require('angular');
+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 => {
+  let name = pascalcase(path.basename(key, '.js'));
+  cfgram.controller(name, 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-ben/app/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html ng-app="cfgram">
+  <head>
+    <meta charset="utf-8">
+    <title>CFGram</title>
+  </head>
+  <body>
+    <header>
+      <h1>Welcome CFGram</h1>
+      <nav>
+        <ul>
+          <li><a href="/#!/home">Home</a></li>
+          <li><a href="/#!/gallery">Gallery</a></li>
+          <li><a href="/#!/login">Sign in</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <ui-view></ui-view>
+    </main>
+    <footer></footer>
+  </body>
+</html>