diff --git a/README.md b/README.md index 0779601..b550d5e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -WebApps 3: Project +WebApps: Project = Drawing Web Application @@ -14,6 +14,7 @@ Features: * Authentication (& sessions) * Custom colors * Custom brush size +* Change Canvas Background color * Clear the Canvas * Home Page showing several saved drawings * More to come... diff --git a/app.js b/app.js index b950734..55264af 100644 --- a/app.js +++ b/app.js @@ -13,8 +13,8 @@ const server = http.createServer(app); const io = require('socket.io').listen(server); const mongoose = require('mongoose'), - db = mongoose.connection, - User = require('./server/models/user'); + db = mongoose.connection, + User = require('./server/models/user'); mongoose.Promise = global.Promise; mongoose.connect('mongodb://localhost/draw'); @@ -62,9 +62,9 @@ io.on('connection', (socket) => { socket.on('clearCanvas', () => { socket.broadcast.emit('clearCanvas'); }); - socket.on('bgColorChange', (bgColor) => { - socket.broadcast.emit('bgColorChange', {bgColor}); - }); + socket.on('bgColorChange', (bgColor) => { + socket.broadcast.emit('bgColorChange', {bgColor}); + }); }); // catch 404 and forward to error handler diff --git a/client/app/app.js b/client/app/app.js index 28cf9d4..cbe70db 100644 --- a/client/app/app.js +++ b/client/app/app.js @@ -1,4 +1,3 @@ - // Import our app config files import constants from './config/app.constants'; import appConfig from './config/app.config'; @@ -9,7 +8,7 @@ import './config/app.templates'; import './layout'; import './components'; import './home'; -import './services' +import './services'; import './auth'; import './canvas'; //development @@ -18,16 +17,16 @@ import './canvas'; // Create and bootstrap application const requires = [ - 'ui.router', - 'templates', - 'app.layout', - 'app.components', - 'app.home', - 'app.services', - 'app.auth', - 'app.canvas', - 'ngMaterial', - 'ngSanitize' + 'ui.router', + 'templates', + 'app.layout', + 'app.components', + 'app.home', + 'app.services', + 'app.auth', + 'app.canvas', + 'ngMaterial', + 'ngSanitize' ]; // Mount on window for testing @@ -40,5 +39,5 @@ angular.module('app').config(appConfig); angular.module('app').run(appRun); angular.bootstrap(document, ['app'], { - strictDi: true + strictDi: true }); diff --git a/client/app/auth/auth.config.js b/client/app/auth/auth.config.js index d1c7032..38833f0 100644 --- a/client/app/auth/auth.config.js +++ b/client/app/auth/auth.config.js @@ -1,34 +1,35 @@ function AuthConfig($stateProvider, $httpProvider) { - 'ngInject'; + 'ngInject'; - // Define the routes - $stateProvider + // Define the routes + $stateProvider - .state('app.login', { - url: '/login', - controller: 'AuthCtrl as $ctrl', - templateUrl: 'auth/auth.html', - title: 'Sign in', - resolve: { - auth: (User) => { - return User.ensureAuthIs(false); - } - } - }) + .state('app.login', { + url: '/login', + controller: 'AuthCtrl as $ctrl', + templateUrl: 'auth/auth.html', + title: 'Sign in', + resolve: { + auth: (User) => { + return User.ensureAuthIs(false); + } + } + }) - .state('app.register', { - url: '/register', - controller: 'AuthCtrl as $ctrl', - templateUrl: 'auth/auth.html', - title: 'Sign up', - resolve: { - auth: (User) => { - return User.ensureAuthIs(false); - } - } - }); + .state('app.register', { + url: '/register', + controller: 'AuthCtrl as $ctrl', + templateUrl: 'auth/auth.html', + title: 'Sign up', + resolve: { + auth: (User) => { + return User.ensureAuthIs(false); + } + } + }); + +} -}; AuthConfig.$inject = ["$stateProvider", "$httpProvider"]; //Explicit annotation needed! export default AuthConfig; \ No newline at end of file diff --git a/client/app/auth/auth.controller.js b/client/app/auth/auth.controller.js index d28f95c..51c8da6 100644 --- a/client/app/auth/auth.controller.js +++ b/client/app/auth/auth.controller.js @@ -1,29 +1,28 @@ class AuthCtrl { - constructor(User, $state) { - 'ngInject'; - - this._User = User; - this._$state = $state; - - this.title = $state.current.title; - this.authType = $state.current.name.replace('app.', ''); - - } - - submitForm() { - - this.isSubmitting = true; - - this._User.attemptAuth(this.authType, this.formData).then( - (res) => { - this._$state.go('app.home'); - }, - (err) => { - this.isSubmitting = false; - this.errors = err.data; - } - ); - } + constructor(User, $state) { + 'ngInject'; + + this._User = User; + this._$state = $state; + + this.title = $state.current.title; + this.authType = $state.current.name.replace('app.', ''); + + } + + submitForm() { + + this.isSubmitting = true; + + this._User.attemptAuth(this.authType, this.formData).then( + (res) => { + this._$state.go('app.home'); + }, + (err) => { + this.isSubmitting = false; + this.errors = err.data; + }); + } } diff --git a/client/app/auth/auth.html b/client/app/auth/auth.html index 42366b5..6af2db1 100644 --- a/client/app/auth/auth.html +++ b/client/app/auth/auth.html @@ -1,51 +1,51 @@
-
- - -
+
+ + +

- - Have an account? - - - Need an account? - + + Have an account? + + + Need an account? +

- -

{{$ctrl.errors}}

-
-
+

{{$ctrl.errors}}

+ + +
- + - + - + - -
- -
+ + + +
\ No newline at end of file diff --git a/client/app/canvas/canvas.config.js b/client/app/canvas/canvas.config.js index ad20f60..ebe71bb 100644 --- a/client/app/canvas/canvas.config.js +++ b/client/app/canvas/canvas.config.js @@ -1,20 +1,21 @@ function CanvasConfig($stateProvider) { - 'ngInject'; + 'ngInject'; - $stateProvider - .state('app.canvas', { - url: '/canvas', - controller: 'CanvasCtrl as $ctrl', - templateUrl: 'canvas/canvas.html', - title: 'Canvas', - resolve: { - auth: function(User) { - return User.ensureAuthIs(true); - } - } - }); + $stateProvider + .state('app.canvas', { + url: '/canvas', + controller: 'CanvasCtrl as $ctrl', + templateUrl: 'canvas/canvas.html', + title: 'Canvas', + resolve: { + auth: function (User) { + return User.ensureAuthIs(true); + } + } + }); + +} -}; CanvasConfig.$inject = ["$stateProvider"]; //Explicit annotation needed! export default CanvasConfig; diff --git a/client/app/canvas/canvas.controller.js b/client/app/canvas/canvas.controller.js index 9b215cb..11396d2 100644 --- a/client/app/canvas/canvas.controller.js +++ b/client/app/canvas/canvas.controller.js @@ -1,284 +1,284 @@ class CanvasCtrl { - constructor(AppConstants, Drawing, $scope, $mdDialog) { - 'ngInject'; - - //Unregister all event handlers to prevent double event handlers/memory leaks - $(document).off(); + constructor(AppConstants, Drawing, $scope, $mdDialog) { + 'ngInject'; - this.appName = AppConstants.appName; - this._Drawing = Drawing - this._$scope = $scope; - this._$mdDialog = $mdDialog; - - this.socket = io(); - - this.App = {}; - this.App.init = this.init() - - this.App.socket = io.connect(); - - this.App.socket.on('draw', (data) => { - return this.App.draw(data.x, data.y, data.brushSize, data.color, data.prevx, data.prevy); - }); - this.App.socket.on('bgColorChange', (data) => { - this.App.changeBgColor(data.bgColor.bgColor); - }); - this.App.socket.on('clearCanvas', () => { - this.App.clear(); - }); - - $scope.showAlert = false; - $scope.switchBool = function(value) { - $scope[value] = !$scope[value]; - } - - $scope.submitCustomColor = (hexColor) => { - this.App.ctx.strokeStyle = hexColor; - this.ownColor = hexColor; - this.toggleColorChooser(); - } - - //Add JQuery listeners - this.initListeners(); - } - - init() { - this.ownColor = '#000000'; - this.ownBrushSize = 5; - let flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false; - - this.App.canvas = $("", {id: 'canvas'})[0]; - this.App.canvas.height = $('#cvContainer').height(); - this.App.canvas.width = $('#cvContainer').width(); - //App.canvas.width = window.innerWidth; - $('#cvContainer').append(this.App.canvas); - this.App.ctx = this.App.canvas.getContext('2d'); - this.App.canvas.onselectstart = () => { - return false; - }; - this.App.ctx.fillStyle = '#000000'; - this.App.ctx.strokeStyle = '#000000'; - this.App.ctx.lineWidth = 5; - this.App.ctx.lineCap = 'round'; - this.App.draw = (x, y, brushSize, color, prevX, prevY) => { - this.App.ctx.lineWidth = brushSize; - this.App.ctx.strokeStyle = color; - this.App.ctx.beginPath(); - this.App.ctx.moveTo(prevX, prevY); /// previous point for this client - this.App.ctx.lineTo(x, y); - this.App.ctx.stroke(); - this.App.ctx.closePath(); - }; - this.App.clear = () => { - this.App.ctx.clearRect(0, 0, this.App.canvas.width, this.App.canvas.height); - }; - this.App.changeBgColor = (color) => { - $(this.App.canvas).css("background-color", color); - }; - this.App.changeBrushSize = (size) => { - this.App.ctx.lineWidth = size; - this.ownBrushSize = size; - }; - this.App.canvas.addEventListener("mousemove", (e) => { - this.App.findxy('move', e); - e.preventDefault(); - }, false); - this.App.canvas.addEventListener("mousedown", (e) => { - this.App.findxy('down', e); - e.preventDefault(); - }, false); - this.App.canvas.addEventListener("mouseup", (e) => { - this.App.findxy('up', e); - e.preventDefault(); - }, false); - this.App.canvas.addEventListener("mouseout", (e) => { - this.App.findxy('out', e); - e.preventDefault(); - }, false); - this.App.findxy = (res, e) => { - if (res === 'down') { - prevX = currX; - prevY = currY; - currX = e.clientX - this.App.canvas.offsetLeft; - currY = e.clientY - this.App.canvas.offsetTop; + //Unregister all event handlers to prevent double event handlers/memory leaks + $(document).off(); - flag = true; - dot_flag = true; - if (dot_flag) { - this.App.ctx.beginPath(); - this.App.ctx.fillStyle = this.ownColor; - this.App.ctx.fillRect(currX, currY, 2, 2); - this.App.ctx.closePath(); - dot_flag = false; - } - } - if (res === 'up' || res === "out") { - flag = false; - } - if (res === 'move') { - if (flag) { - prevX = currX; - prevY = currY; - currX = e.clientX - this.App.canvas.offsetLeft; - currY = e.clientY - this.App.canvas.offsetTop; - this.App.draw(currX, currY, this.ownBrushSize, this.ownColor, prevX, prevY); - this.App.emit(currX, currY, this.ownBrushSize, this.ownColor, prevX, prevY); - } - } - }; - this.App.emit = (x, y, size, color, prevx, prevy) => { - this.App.socket.emit('drawClick', { - x: x, - y: y, - brushSize: size, - color: color, - prevx: prevx, - prevy: prevy - }); - }; + this.appName = AppConstants.appName; + this._Drawing = Drawing; + this._$scope = $scope; + this._$mdDialog = $mdDialog; - }; - - initListeners() { - $(document).on('click', '#clearCv', (e) => { - const app = this.App; - let confirm = this._$mdDialog.confirm() - .title('Clear the canvas?') - .textContent('Are you sure you want to clear the canvas?') - .ariaLabel('clearCanvasConfirm') - .ok("Yes, I'm sure!") - .cancel('No, take me back.'); + this.socket = io(); - this._$mdDialog.show(confirm).then(function() { - app.clear(); - app.socket.emit('clearCanvas'); - }); - }); - - $(document).on('click', '#colorOptions', (e) => { - this.toggleColorChooser(); - }); - - $(document).on('click', '.color', (e) => { - const selectedColor = $(e.currentTarget).attr('id'); - this.App.ctx.strokeStyle = selectedColor; - this.ownColor = selectedColor; - this.toggleColorChooser(); - }); - - $(document).on('click', '#saveDrawing', (e) => { - const scope = this._$scope; - const canvas = this.App.canvas; - const Drawing = this._Drawing; - let prompt = this._$mdDialog.prompt() - .title('Name and save your drawing') - .textContent('Please give your drawing a name. This will also save the drawing and show it on the home page.') - .placeholder('Name...') - .ariaLabel('Drawing Name') - .ok('Save!') - .cancel('Cancel'); + this.App = {}; + this.App.init = this.init(); - this._$mdDialog.show(prompt).then((result) => { - if (result !== undefined) { - //save drawing - const dataURL = canvas.toDataURL("image/png"); - Drawing.attemptSave(result, dataURL).then( - (res) => { - scope.textAlert = "The drawing was saved succesfully!"; - scope.textTitle = "SUCCESS: "; - this.changeAlertBgColor("#60997A"); - if (!scope.showAlert) { - scope.switchBool('showAlert'); - } - }, - (err) => { - scope.textAlert = "Something went wrong while saving the drawing, contact an administrator if this issue persists."; - scope.textTitle = "ERROR: "; - this.changeAlertBgColor("#e56969"); - if (!scope.showAlert) { - scope.switchBool('showAlert'); - } - } - ); - } else { - scope.textAlert = "You didn't name your drawing!"; - scope.textTitle = "ERROR: " - this.changeAlertBgColor("#e56969"); - if (!scope.showAlert) { - scope.switchBool('showAlert'); - } - } - }); - }); - - $(document).on('click', '#changeBrushSize', (e) => { - const scope = this._$scope; - const app = this.App; - let prompt = this._$mdDialog.prompt() - .title('Choose brush size') - .textContent('Please choose the size of your brush') - .placeholder('Size...') - .ariaLabel('Brush Size') - .ok('Ok!') - .cancel('Cancel'); + this.App.socket = io.connect(); - this._$mdDialog.show(prompt).then((result) => { - if (result !== undefined) { - app.changeBrushSize(result); - } else { - scope.textAlert = "You didn't enter a brush size!"; - scope.textTitle = "ERROR: " - this.changeAlertBgColor("#e56969"); - if (!scope.showAlert) { - scope.switchBool('showAlert'); - } - } - }); - }); - - $(document).on('click', '#changeBgColor', (e) => { - const scope = this._$scope; - const app = this.App; - const canvas = this.App.canvas; - let prompt = this._$mdDialog.prompt() - .title('Change the canvas background color') - .htmlContent('Please enter the new color for the canvas background by name or HEX.
(Or enter "default" to reset the default color)

Note: Doing this will NOT remove your drawing. This background will also NOT be saved if you save the drawing!') - .placeholder('Color...') - .ariaLabel('Background Color') - .ok('Ok!') - .cancel('Cancel'); + this.App.socket.on('draw', (data) => { + return this.App.draw(data.x, data.y, data.brushSize, data.color, data.prevx, data.prevy); + }); + this.App.socket.on('bgColorChange', (data) => { + this.App.changeBgColor(data.bgColor.bgColor); + }); + this.App.socket.on('clearCanvas', () => { + this.App.clear(); + }); + + $scope.showAlert = false; + $scope.switchBool = function (value) { + $scope[value] = !$scope[value]; + }; + + $scope.submitCustomColor = (hexColor) => { + this.App.ctx.strokeStyle = hexColor; + this.ownColor = hexColor; + this.toggleColorChooser(); + }; + + //Add JQuery listeners + this.initListeners(); + } + + init() { + this.ownColor = '#000000'; + this.ownBrushSize = 5; + let flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false; + + this.App.canvas = $("", {id: 'canvas'})[0]; + this.App.canvas.height = $('#cvContainer').height(); + this.App.canvas.width = $('#cvContainer').width(); + //App.canvas.width = window.innerWidth; + $('#cvContainer').append(this.App.canvas); + this.App.ctx = this.App.canvas.getContext('2d'); + this.App.canvas.onselectstart = () => { + return false; + }; + this.App.ctx.fillStyle = '#000000'; + this.App.ctx.strokeStyle = '#000000'; + this.App.ctx.lineWidth = 5; + this.App.ctx.lineCap = 'round'; + this.App.draw = (x, y, brushSize, color, prevX, prevY) => { + this.App.ctx.lineWidth = brushSize; + this.App.ctx.strokeStyle = color; + this.App.ctx.beginPath(); + this.App.ctx.moveTo(prevX, prevY); /// previous point for this client + this.App.ctx.lineTo(x, y); + this.App.ctx.stroke(); + this.App.ctx.closePath(); + }; + this.App.clear = () => { + this.App.ctx.clearRect(0, 0, this.App.canvas.width, this.App.canvas.height); + }; + this.App.changeBgColor = (color) => { + $(this.App.canvas).css("background-color", color); + }; + this.App.changeBrushSize = (size) => { + this.App.ctx.lineWidth = size; + this.ownBrushSize = size; + }; + this.App.canvas.addEventListener("mousemove", (e) => { + this.App.findxy('move', e); + e.preventDefault(); + }, false); + this.App.canvas.addEventListener("mousedown", (e) => { + this.App.findxy('down', e); + e.preventDefault(); + }, false); + this.App.canvas.addEventListener("mouseup", (e) => { + this.App.findxy('up', e); + e.preventDefault(); + }, false); + this.App.canvas.addEventListener("mouseout", (e) => { + this.App.findxy('out', e); + e.preventDefault(); + }, false); + this.App.findxy = (res, e) => { + if (res === 'down') { + prevX = currX; + prevY = currY; + currX = e.clientX - this.App.canvas.offsetLeft; + currY = e.clientY - this.App.canvas.offsetTop; + + flag = true; + dot_flag = true; + if (dot_flag) { + this.App.ctx.beginPath(); + this.App.ctx.fillStyle = this.ownColor; + this.App.ctx.fillRect(currX, currY, 2, 2); + this.App.ctx.closePath(); + dot_flag = false; + } + } + if (res === 'up' || res === "out") { + flag = false; + } + if (res === 'move') { + if (flag) { + prevX = currX; + prevY = currY; + currX = e.clientX - this.App.canvas.offsetLeft; + currY = e.clientY - this.App.canvas.offsetTop; + this.App.draw(currX, currY, this.ownBrushSize, this.ownColor, prevX, prevY); + this.App.emit(currX, currY, this.ownBrushSize, this.ownColor, prevX, prevY); + } + } + }; + this.App.emit = (x, y, size, color, prevx, prevy) => { + this.App.socket.emit('drawClick', { + x: x, + y: y, + brushSize: size, + color: color, + prevx: prevx, + prevy: prevy + }); + }; + + } + + initListeners() { + $(document).on('click', '#clearCv', (e) => { + const app = this.App; + let confirm = this._$mdDialog.confirm() + .title('Clear the canvas?') + .textContent('Are you sure you want to clear the canvas?') + .ariaLabel('clearCanvasConfirm') + .ok("Yes, I'm sure!") + .cancel('No, take me back.'); + + this._$mdDialog.show(confirm).then(function () { + app.clear(); + app.socket.emit('clearCanvas'); + }); + }); + + $(document).on('click', '#colorOptions', (e) => { + this.toggleColorChooser(); + }); + + $(document).on('click', '.color', (e) => { + const selectedColor = $(e.currentTarget).attr('id'); + this.App.ctx.strokeStyle = selectedColor; + this.ownColor = selectedColor; + this.toggleColorChooser(); + }); + + $(document).on('click', '#saveDrawing', (e) => { + const scope = this._$scope; + const canvas = this.App.canvas; + const Drawing = this._Drawing; + let prompt = this._$mdDialog.prompt() + .title('Name and save your drawing') + .textContent('Please give your drawing a name. This will also save the drawing and show it on the home page.') + .placeholder('Name...') + .ariaLabel('Drawing Name') + .ok('Save!') + .cancel('Cancel'); + + this._$mdDialog.show(prompt).then((result) => { + if (result !== undefined) { + //save drawing + const dataURL = canvas.toDataURL("image/png"); + Drawing.attemptSave(result, dataURL).then( + (res) => { + scope.textAlert = "The drawing was saved succesfully!"; + scope.textTitle = "SUCCESS: "; + this.changeAlertBgColor("#60997A"); + if (!scope.showAlert) { + scope.switchBool('showAlert'); + } + }, + (err) => { + scope.textAlert = "Something went wrong while saving the drawing, contact an administrator if this issue persists."; + scope.textTitle = "ERROR: "; + this.changeAlertBgColor("#e56969"); + if (!scope.showAlert) { + scope.switchBool('showAlert'); + } + } + ); + } else { + scope.textAlert = "You didn't name your drawing!"; + scope.textTitle = "ERROR: "; + this.changeAlertBgColor("#e56969"); + if (!scope.showAlert) { + scope.switchBool('showAlert'); + } + } + }); + }); + + $(document).on('click', '#changeBrushSize', (e) => { + const scope = this._$scope; + const app = this.App; + let prompt = this._$mdDialog.prompt() + .title('Choose brush size') + .textContent('Please choose the size of your brush') + .placeholder('Size...') + .ariaLabel('Brush Size') + .ok('Ok!') + .cancel('Cancel'); + + this._$mdDialog.show(prompt).then((result) => { + if (result !== undefined) { + app.changeBrushSize(result); + } else { + scope.textAlert = "You didn't enter a brush size!"; + scope.textTitle = "ERROR: "; + this.changeAlertBgColor("#e56969"); + if (!scope.showAlert) { + scope.switchBool('showAlert'); + } + } + }); + }); + + $(document).on('click', '#changeBgColor', (e) => { + const scope = this._$scope; + const app = this.App; + const canvas = this.App.canvas; + let prompt = this._$mdDialog.prompt() + .title('Change the canvas background color') + .htmlContent('Please enter the new color for the canvas background by name or HEX.
(Or enter "default" to reset the default color)

Note: Doing this will NOT remove your drawing. This background will also NOT be saved if you save the drawing!') + .placeholder('Color...') + .ariaLabel('Background Color') + .ok('Ok!') + .cancel('Cancel'); + + this._$mdDialog.show(prompt).then((result) => { + if (result !== undefined) { + if (result === "default") { + result = "#E2E2E2"; + app.changeBgColor(result); + app.socket.emit('bgColorChange', {bgColor: result}); + } else { + app.changeBgColor(result); + app.socket.emit('bgColorChange', {bgColor: result}); + } + } else { + scope.textAlert = "You didn't enter a color for the background!"; + scope.textTitle = "ERROR: "; + this.changeAlertBgColor("#e56969"); + if (!scope.showAlert) { + scope.switchBool('showAlert'); + } + } + }); + }); + } + + toggleColorChooser() { + $('#colorList').slideToggle(); + $('#customColor').toggle(); + } + + changeAlertBgColor(color) { + $(".alertCustom").css("background-color", color); + } - this._$mdDialog.show(prompt).then((result) => { - if (result !== undefined) { - if (result === "default") { - result = "#E2E2E2"; - app.changeBgColor(result); - app.socket.emit('bgColorChange', {bgColor: result}); - } else { - app.changeBgColor(result); - app.socket.emit('bgColorChange', {bgColor: result}); - } - } else { - scope.textAlert = "You didn't enter a color for the background!"; - scope.textTitle = "ERROR: " - this.changeAlertBgColor("#e56969"); - if (!scope.showAlert) { - scope.switchBool('showAlert'); - } - } - }); - }); - }; - - toggleColorChooser() { - $('#colorList').slideToggle(); - $('#customColor').toggle(); - }; - - changeAlertBgColor(color) { - $(".alertCustom").css("background-color", color); - }; - } export default CanvasCtrl; diff --git a/client/app/canvas/canvas.html b/client/app/canvas/canvas.html index 2c82932..032d8a9 100644 --- a/client/app/canvas/canvas.html +++ b/client/app/canvas/canvas.html @@ -1,48 +1,48 @@ - +
-
- - +
+ +
\ No newline at end of file diff --git a/client/app/canvas/canvas.spec.js b/client/app/canvas/canvas.spec.js index fa5bf97..c9b1213 100644 --- a/client/app/canvas/canvas.spec.js +++ b/client/app/canvas/canvas.spec.js @@ -2,50 +2,50 @@ describe("Canvas Controller Test", () => { describe("When I call canvas.init", () => { beforeEach(angular.mock.module('app')); - - let scope; - let vm; - - beforeEach(inject(($controller, _$rootScope_) => { - scope = _$rootScope_.$new(); - vm = $controller('CanvasCtrl', { $scope: scope }); - })); + + let scope; + let vm; + + beforeEach(inject(($controller, _$rootScope_) => { + scope = _$rootScope_.$new(); + vm = $controller('CanvasCtrl', {$scope: scope}); + })); it('sets the brush size to 5', () => { - const size = 5; - expect(vm.App.ctx.lineWidth).toEqual(size); + const size = 5; + expect(vm.App.ctx.lineWidth).toEqual(size); expect(vm.ownBrushSize).toEqual(size); }); - - it('sets the fillStyle to solid', () => { - const lineCap = "round"; + + it('sets the fillStyle to solid', () => { + const lineCap = "round"; expect(vm.App.ctx.lineCap).toEqual(lineCap); }); - - it('changes brush size correctly when method is called', () => { - const initialSize = 5; - const newSize = 85; - expect(vm.App.ctx.lineWidth).toEqual(initialSize); - expect(vm.ownBrushSize).toEqual(initialSize); - vm.App.changeBrushSize(85); + + it('changes brush size correctly when method is called', () => { + const initialSize = 5; + const newSize = 85; + expect(vm.App.ctx.lineWidth).toEqual(initialSize); + expect(vm.ownBrushSize).toEqual(initialSize); + vm.App.changeBrushSize(85); expect(vm.App.ctx.lineWidth).toEqual(newSize); - expect(vm.ownBrushSize).toEqual(newSize); + expect(vm.ownBrushSize).toEqual(newSize); }); - - it('sets the alert boolean to false initially', () => { - const bool = false; - expect(scope.showAlert).toEqual(bool); + + it('sets the alert boolean to false initially', () => { + const bool = false; + expect(scope.showAlert).toEqual(bool); }); - - it('changes brush color correctly when method is called', () => { - const initialColor = "#000000"; - const newColor = "#111111"; - expect(vm.App.ctx.strokeStyle).toEqual(initialColor); - expect(vm.ownColor).toEqual(initialColor); - scope.submitCustomColor("#111111"); + + it('changes brush color correctly when method is called', () => { + const initialColor = "#000000"; + const newColor = "#111111"; + expect(vm.App.ctx.strokeStyle).toEqual(initialColor); + expect(vm.ownColor).toEqual(initialColor); + scope.submitCustomColor("#111111"); expect(vm.App.ctx.strokeStyle).toEqual(newColor); - expect(vm.ownColor).toEqual(newColor); + expect(vm.ownColor).toEqual(newColor); }); - }); + }); }); \ No newline at end of file diff --git a/client/app/components/list-errors.component.js b/client/app/components/list-errors.component.js index 2de72c9..a95743a 100644 --- a/client/app/components/list-errors.component.js +++ b/client/app/components/list-errors.component.js @@ -1,8 +1,8 @@ let ListErrors = { - bindings: { - errors: '=' - }, - templateUrl: 'components/list-errors.html' + bindings: { + errors: '=' + }, + templateUrl: 'components/list-errors.html' }; export default ListErrors; \ No newline at end of file diff --git a/client/app/components/list-errors.html b/client/app/components/list-errors.html index 5858508..51c3a60 100644 --- a/client/app/components/list-errors.html +++ b/client/app/components/list-errors.html @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/client/app/components/press-enter.directive.js b/client/app/components/press-enter.directive.js index 3d9b06b..6f79db2 100644 --- a/client/app/components/press-enter.directive.js +++ b/client/app/components/press-enter.directive.js @@ -1,8 +1,8 @@ function PressEnter() { - - return { - restrict: 'A', - link: (scope, element, attrs) => { + + return { + restrict: 'A', + link: (scope, element, attrs) => { element.bind("keydown keypress", (event) => { if (event.which === 13) { scope.$apply(() => { @@ -13,7 +13,7 @@ function PressEnter() { } }); } - }; + }; } export default PressEnter; \ No newline at end of file diff --git a/client/app/components/show-authed.directive.js b/client/app/components/show-authed.directive.js index 0f64840..f7bde59 100644 --- a/client/app/components/show-authed.directive.js +++ b/client/app/components/show-authed.directive.js @@ -1,28 +1,28 @@ function ShowAuthed(User) { - 'ngInject'; - - return { - restrict: 'A', - link: (scope, element, attrs) => { - scope.User = User; - - scope.$watch('User.current', (val) => { - if (val) { - if (attrs.showAuthed === 'true') { - element.css({ display: 'inherit' }) - } else { - element.css({ display: 'none' }) - } - } else { - if (attrs.showAuthed === 'true') { - element.css({ display: 'none' }) - } else { - element.css({ display: 'inherit' }) - } - } - }); - } - }; + 'ngInject'; + + return { + restrict: 'A', + link: (scope, element, attrs) => { + scope.User = User; + + scope.$watch('User.current', (val) => { + if (val) { + if (attrs.showAuthed === 'true') { + element.css({display: 'inherit'}); + } else { + element.css({display: 'none'}); + } + } else { + if (attrs.showAuthed === 'true') { + element.css({display: 'none'}); + } else { + element.css({display: 'inherit'}); + } + } + }); + } + }; } export default ShowAuthed; \ No newline at end of file diff --git a/client/app/config/app.config.js b/client/app/config/app.config.js index 63db2f5..b24c0f9 100644 --- a/client/app/config/app.config.js +++ b/client/app/config/app.config.js @@ -1,28 +1,28 @@ import authInterceptor from './auth.interceptor'; function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) { - 'ngInject'; - - $httpProvider.interceptors.push(authInterceptor); + 'ngInject'; - /* - If you don't want hashbang routing, uncomment this line. - Our tutorial will be using hashbang routing though :) - */ - //$locationProvider.html5Mode(true); + $httpProvider.interceptors.push(authInterceptor); - $stateProvider - .state('app', { - abstract: true, - templateUrl: 'layout/app-view.html', - resolve: { - auth: (User) => { - return User.verifyAuth(); - } - } - }); + /* + If you don't want hashbang routing, uncomment this line. + Our tutorial will be using hashbang routing though :) + */ + //$locationProvider.html5Mode(true); - $urlRouterProvider.otherwise('/'); + $stateProvider + .state('app', { + abstract: true, + templateUrl: 'layout/app-view.html', + resolve: { + auth: (User) => { + return User.verifyAuth(); + } + } + }); + + $urlRouterProvider.otherwise('/'); } AppConfig.$inject = ["$httpProvider", "$stateProvider", "$locationProvider", "$urlRouterProvider"]; //Explicit annotation needed! diff --git a/client/app/config/app.constants.js b/client/app/config/app.constants.js index 6b14be4..db7674e 100644 --- a/client/app/config/app.constants.js +++ b/client/app/config/app.constants.js @@ -1,8 +1,8 @@ const AppConstants = { - //api: 'http://localhost:8085/api', //Development - api: 'https://webapps.evilwhale.nl/api', //Production - jwtKey: 'jwtToken', - appName: 'Draw', + //api: 'http://localhost:8085/api', //Development + api: 'https://webapps.evilwhale.nl/api', //Production + jwtKey: 'jwtToken', + appName: 'Draw' }; export default AppConstants; diff --git a/client/app/config/app.run.js b/client/app/config/app.run.js index 27dee49..b3c1786 100644 --- a/client/app/config/app.run.js +++ b/client/app/config/app.run.js @@ -1,20 +1,20 @@ function AppRun(AppConstants, $rootScope) { - 'ngInject'; + 'ngInject'; - // change page title based on state - $rootScope.$on('$stateChangeSuccess', (event, toState) => { - $rootScope.setPageTitle(toState.title); - }); + // change page title based on state + $rootScope.$on('$stateChangeSuccess', (event, toState) => { + $rootScope.setPageTitle(toState.title); + }); - // Helper method for setting the page's title - $rootScope.setPageTitle = (title) => { - $rootScope.pageTitle = ''; - if (title) { - $rootScope.pageTitle += title; - $rootScope.pageTitle += ' \u2014 '; - } - $rootScope.pageTitle += AppConstants.appName; - }; + // Helper method for setting the page's title + $rootScope.setPageTitle = (title) => { + $rootScope.pageTitle = ''; + if (title) { + $rootScope.pageTitle += title; + $rootScope.pageTitle += ' \u2014 '; + } + $rootScope.pageTitle += AppConstants.appName; + }; } AppRun.$inject = ["AppConstants", "$rootScope"]; //Explicit annotation needed! diff --git a/client/app/config/app.templates.js b/client/app/config/app.templates.js index 302759a..0aab866 100644 --- a/client/app/config/app.templates.js +++ b/client/app/config/app.templates.js @@ -1,8 +1,8 @@ -angular.module('templates', []).run(['$templateCache', function($templateCache) {$templateCache.put('auth/auth.html','
\r\n
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n

\r\n \r\n Have an account?\r\n \r\n\t\t \r\n Need an account?\r\n \r\n

\r\n\t\t\r\n\t\t

{{$ctrl.errors}}

\r\n\r\n\t\t\t
\r\n\t\t\t
\r\n\r\n\t\t\t\t \r\n\r\n\t\t\t\t \r\n\r\n\t\t\t\t \r\n\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t
\r\n
\r\n
'); -$templateCache.put('components/list-errors.html',''); -$templateCache.put('canvas/canvas.html','\r\n\t\r\n
\r\n\r\n\t
\r\n\t\r\n\t\r\n
\r\n\r\n'); +angular.module('templates', []).run(['$templateCache', function($templateCache) {$templateCache.put('auth/auth.html','
\r\n
\r\n
\r\n \r\n\r\n
\r\n

\r\n \r\n Have an account?\r\n \r\n \r\n Need an account?\r\n \r\n

\r\n\r\n

{{$ctrl.errors}}

\r\n\r\n
\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
'); +$templateCache.put('canvas/canvas.html','\r\n\r\n
\r\n\r\n
\r\n \r\n\r\n
\r\n\r\n'); +$templateCache.put('components/list-errors.html',''); +$templateCache.put('home/home.html','
\r\n\r\n
\r\n \r\n
\r\n\r\n
\r\n

Welcome to the home page of this Drawing Application.

\r\n

This website allows you to draw alone or with other people. You can also name your drawing and save it, it will then display here on the home page.

\r\n

Below you can see a list of drawings that were already saved by other people.

\r\n

This website was developed by Thomas Buys.

\r\n
\r\n\r\n
\r\n
\r\n

Loading images...

\r\n
\r\n
\r\n\r\n
\r\n'); $templateCache.put('layout/app-view.html','
'); -$templateCache.put('layout/footer.html',''); -$templateCache.put('layout/header.html',''); -$templateCache.put('layout/sidebar.html',''); -$templateCache.put('home/home.html','
\r\n\r\n\t
\r\n\t\t\r\n\t
\r\n\t\r\n\t
\r\n\t\t

Welcome to the home page of this Drawing Application.

\r\n\t\t

This website allows you to draw alone or with other people. You can also name your drawing and save it, it will then display here on the home page.

\r\n\t\t

Below you can see a list of drawings that were already saved by other people.

\r\n\t\t

This website was developed by Thomas Buys.

\r\n\t
\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t

Loading images...

\r\n\t\t
\r\n\t
\r\n\r\n
\r\n');}]); \ No newline at end of file +$templateCache.put('layout/footer.html',''); +$templateCache.put('layout/header.html',''); +$templateCache.put('layout/sidebar.html','');}]); \ No newline at end of file diff --git a/client/app/config/auth.interceptor.js b/client/app/config/auth.interceptor.js index 003911e..59ba4b1 100644 --- a/client/app/config/auth.interceptor.js +++ b/client/app/config/auth.interceptor.js @@ -1,21 +1,21 @@ function authInterceptor(JWT, AppConstants, $window, $q) { - 'ngInject'; - - return { - request: (config) => { - if (config.url.indexOf(AppConstants.api) === 0 && JWT.get()) { - config.headers.Authorization = 'Token ' + JWT.get(); - } - return config; - }, - responseError: (rejection) => { - if (rejection.status === 401) { - JWT.destroy(); - $window.location.reload(); - } - return $q.reject(rejection); - } - } + 'ngInject'; + + return { + request: (config) => { + if (config.url.indexOf(AppConstants.api) === 0 && JWT.get()) { + config.headers.Authorization = 'Token ' + JWT.get(); + } + return config; + }, + responseError: (rejection) => { + if (rejection.status === 401) { + JWT.destroy(); + $window.location.reload(); + } + return $q.reject(rejection); + } + }; } authInterceptor.$inject = ["JWT", "AppConstants", "$window", "$q"]; //Explicit annotation needed! diff --git a/client/app/home/home.config.js b/client/app/home/home.config.js index 71e7a9a..b0d5095 100644 --- a/client/app/home/home.config.js +++ b/client/app/home/home.config.js @@ -1,16 +1,17 @@ function HomeConfig($stateProvider) { - 'ngInject'; + 'ngInject'; - $stateProvider - .state('app.home', { - url: '/', - controller: 'HomeCtrl', - controllerAs: '$ctrl', - templateUrl: 'home/home.html', - title: 'Home' - }); + $stateProvider + .state('app.home', { + url: '/', + controller: 'HomeCtrl', + controllerAs: '$ctrl', + templateUrl: 'home/home.html', + title: 'Home' + }); + +} -}; HomeConfig.$inject = ["$stateProvider"]; //Explicit annotation needed! export default HomeConfig; diff --git a/client/app/home/home.controller.js b/client/app/home/home.controller.js index 97bd560..7858554 100644 --- a/client/app/home/home.controller.js +++ b/client/app/home/home.controller.js @@ -1,39 +1,32 @@ class HomeCtrl { - constructor(AppConstants, Drawing, $scope, User) { - 'ngInject'; + constructor(AppConstants, Drawing, $scope, User) { + 'ngInject'; + this.appName = AppConstants.appName; + this._Drawing = Drawing; + this._$scope = $scope; + this._User = User; - this.appName = AppConstants.appName; - this._Drawing = Drawing; - this._$scope = $scope; - this._User = User; - - this.logout = User.logout.bind(User); - this.authed = (User.current != null); - - this.getDrawings(); - } - - getDrawings() { - let src = ''; - let drawName = ''; - let by = ''; - this._Drawing.getTwelveMostRecentDrawings().then( - (res) => { - $("#loading").hide(); - for (let val of res.data.reverse()) { - src = val.drawingData; - drawName = val.drawingName; - by = val.byUsername; - $('#images').prepend('
Title: ' + drawName + '
By: ' + by + '
') - } - }, - (err) => { - console.log(err); - } - ); - - } + this.logout = User.logout.bind(User); + this.authed = (User.current !== null); + this.getDrawings(); + } + + getDrawings() { + let src = ''; + let drawName = ''; + let by = ''; + this._Drawing.getTwelveMostRecentDrawings().then( + (res) => { + $("#loading").hide(); + for (let val of res.data.reverse()) { + src = val.drawingData; + drawName = val.drawingName; + by = val.byUsername; + $('#images').prepend('
Title: ' + drawName + '
By: ' + by + '
'); + } + }); + } } export default HomeCtrl; diff --git a/client/app/home/home.html b/client/app/home/home.html index b768f38..c8f0be3 100644 --- a/client/app/home/home.html +++ b/client/app/home/home.html @@ -1,60 +1,60 @@
-
- -
- -
-

Welcome to the home page of this Drawing Application.

-

This website allows you to draw alone or with other people. You can also name your drawing and save it, it will then display here on the home page.

-

Below you can see a list of drawings that were already saved by other people.

-

This website was developed by Thomas Buys.

-
- -
-
-

Loading images...

-
-
+
+ +
+ +
+

Welcome to the home page of this Drawing Application.

+

This website allows you to draw alone or with other people. You can also name your drawing and save it, it will then display here on the home page.

+

Below you can see a list of drawings that were already saved by other people.

+

This website was developed by Thomas Buys.

+
+ +
+
+

Loading images...

+
+
diff --git a/client/app/layout/footer.component.js b/client/app/layout/footer.component.js index c54c80a..1dccc32 100644 --- a/client/app/layout/footer.component.js +++ b/client/app/layout/footer.component.js @@ -1,16 +1,16 @@ class AppFooterCtrl { - constructor(AppConstants) { - 'ngInject'; - this.appName = AppConstants.appName; + constructor(AppConstants) { + 'ngInject'; + this.appName = AppConstants.appName; - // Get today's date to generate the year - this.date = new Date(); - } + // Get today's date to generate the year + this.date = new Date(); + } } let AppFooter = { - controller: AppFooterCtrl, - templateUrl: 'layout/footer.html' + controller: AppFooterCtrl, + templateUrl: 'layout/footer.html' }; export default AppFooter; diff --git a/client/app/layout/footer.html b/client/app/layout/footer.html index 8e71836..b27665b 100644 --- a/client/app/layout/footer.html +++ b/client/app/layout/footer.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/client/app/layout/header.component.js b/client/app/layout/header.component.js index 7b37e76..032886b 100644 --- a/client/app/layout/header.component.js +++ b/client/app/layout/header.component.js @@ -1,19 +1,19 @@ class AppHeaderCtrl { - constructor(AppConstants, User, $scope) { - 'ngInject'; + constructor(AppConstants, User, $scope) { + 'ngInject'; - this.appName = AppConstants.appName; - this.currentUser = User.current; - - $scope.$watch('User.current', (newUser) => { - this.currentUser = newUser; - }) - } + this.appName = AppConstants.appName; + this.currentUser = User.current; + + $scope.$watch('User.current', (newUser) => { + this.currentUser = newUser; + }); + } } let AppHeader = { - controller: AppHeaderCtrl, - templateUrl: 'layout/header.html' + controller: AppHeaderCtrl, + templateUrl: 'layout/header.html' }; export default AppHeader; diff --git a/client/app/layout/header.html b/client/app/layout/header.html index 33eab46..e361531 100644 --- a/client/app/layout/header.html +++ b/client/app/layout/header.html @@ -1,4 +1,4 @@ \ No newline at end of file diff --git a/client/app/layout/sidebar.component.js b/client/app/layout/sidebar.component.js index 466d44a..905a526 100644 --- a/client/app/layout/sidebar.component.js +++ b/client/app/layout/sidebar.component.js @@ -1,19 +1,19 @@ class AppSidebarCtrl { - constructor(AppConstants, User, $scope) { - 'ngInject'; + constructor(AppConstants, User, $scope) { + 'ngInject'; - this.appName = AppConstants.appName; - this.currentUser = User.current; - - $scope.$watch('User.current', (newUser) => { - this.currentUser = newUser; - }) - } + this.appName = AppConstants.appName; + this.currentUser = User.current; + + $scope.$watch('User.current', (newUser) => { + this.currentUser = newUser; + }); + } } let AppSidebar = { - controller: AppSidebarCtrl, - templateUrl: 'layout/sidebar.html' + controller: AppSidebarCtrl, + templateUrl: 'layout/sidebar.html' }; export default AppSidebar; diff --git a/client/app/layout/sidebar.html b/client/app/layout/sidebar.html index ea321f9..bbd5680 100644 --- a/client/app/layout/sidebar.html +++ b/client/app/layout/sidebar.html @@ -1,4 +1,4 @@ \ No newline at end of file diff --git a/client/app/normalize.css b/client/app/normalize.css index 01ee697..aceb456 100644 --- a/client/app/normalize.css +++ b/client/app/normalize.css @@ -11,10 +11,10 @@ ========================================================================== */ html { - font-family: sans-serif; /* 1 */ - line-height: 1.15; /* 2 */ - -ms-text-size-adjust: 100%; /* 3 */ - -webkit-text-size-adjust: 100%; /* 3 */ + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections @@ -25,7 +25,7 @@ html { */ body { - margin: 0; + margin: 0; } /** @@ -38,7 +38,7 @@ footer, header, nav, section { - display: block; + display: block; } /** @@ -47,8 +47,8 @@ section { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /* Grouping content @@ -62,7 +62,7 @@ h1 { figcaption, figure, main { /* 1 */ - display: block; + display: block; } /** @@ -70,7 +70,7 @@ main { /* 1 */ */ figure { - margin: 1em 40px; + margin: 1em 40px; } /** @@ -79,9 +79,9 @@ figure { */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** @@ -90,8 +90,8 @@ hr { */ pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* Text-level semantics @@ -103,8 +103,8 @@ pre { */ a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** @@ -114,7 +114,7 @@ a { a:active, a:hover { - outline-width: 0; + outline-width: 0; } /** @@ -123,9 +123,9 @@ a:hover { */ abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** @@ -134,7 +134,7 @@ abbr[title] { b, strong { - font-weight: inherit; + font-weight: inherit; } /** @@ -143,7 +143,7 @@ strong { b, strong { - font-weight: bolder; + font-weight: bolder; } /** @@ -154,8 +154,8 @@ strong { code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** @@ -163,7 +163,7 @@ samp { */ dfn { - font-style: italic; + font-style: italic; } /** @@ -171,8 +171,8 @@ dfn { */ mark { - background-color: #ff0; - color: #000; + background-color: #ff0; + color: #000; } /** @@ -180,7 +180,7 @@ mark { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -190,18 +190,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* Embedded content @@ -213,7 +213,7 @@ sup { audio, video { - display: inline-block; + display: inline-block; } /** @@ -221,8 +221,8 @@ video { */ audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } /** @@ -230,7 +230,7 @@ audio:not([controls]) { */ img { - border-style: none; + border-style: none; } /** @@ -238,7 +238,7 @@ img { */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } /* Forms @@ -254,10 +254,10 @@ input, optgroup, select, textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** @@ -267,7 +267,7 @@ textarea { button, input { /* 1 */ - overflow: visible; + overflow: visible; } /** @@ -277,7 +277,7 @@ input { /* 1 */ button, select { /* 1 */ - text-transform: none; + text-transform: none; } /** @@ -290,7 +290,7 @@ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { - -webkit-appearance: button; /* 2 */ + -webkit-appearance: button; /* 2 */ } /** @@ -301,8 +301,8 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } /** @@ -313,7 +313,7 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** @@ -321,9 +321,9 @@ button:-moz-focusring, */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** @@ -334,12 +334,12 @@ fieldset { */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** @@ -348,8 +348,8 @@ legend { */ progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -357,7 +357,7 @@ progress { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -367,8 +367,8 @@ textarea { [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** @@ -377,7 +377,7 @@ textarea { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** @@ -386,8 +386,8 @@ textarea { */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** @@ -396,7 +396,7 @@ textarea { [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -405,8 +405,8 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* Interactive @@ -419,7 +419,7 @@ textarea { details, /* 1 */ menu { - display: block; + display: block; } /* @@ -427,7 +427,7 @@ menu { */ summary { - display: list-item; + display: list-item; } /* Scripting @@ -438,7 +438,7 @@ summary { */ canvas { - display: inline-block; + display: inline-block; } /** @@ -446,7 +446,7 @@ canvas { */ template { - display: none; + display: none; } /* Hidden @@ -457,5 +457,5 @@ template { */ [hidden] { - display: none; + display: none; } \ No newline at end of file diff --git a/client/app/services/drawing.service.js b/client/app/services/drawing.service.js index 13615dd..2f8bad5 100644 --- a/client/app/services/drawing.service.js +++ b/client/app/services/drawing.service.js @@ -1,50 +1,50 @@ export default class Drawing { - constructor(AppConstants, User, $http, $state, $q) { - 'ngInject'; - - this._AppConstants = AppConstants; - this._$http = $http; - this._$state = $state; - this._$q = $q; - - this.user = User.current; - } - - attemptSave(drawingName, canvasData) { - return this._$http({ - url: this._AppConstants.api + '/drawing', - method: 'POST', - data: { - drawingName: drawingName, - canvas: canvasData, - user: this.user - } - }).then( - (res) => { - return res; - } - ); - } - - getTwelveMostRecentDrawings() { - return this._$http({ - url: this._AppConstants.api + '/drawingLimited', - method: 'GET' - }).then( - (res) => { - return res; - } - ); - } - - getDrawings() { - return this._$http({ - url: this._AppConstants.api + '/drawing', - method: 'GET' - }).then( - (res) => { - return res; - } - ); - } + constructor(AppConstants, User, $http, $state, $q) { + 'ngInject'; + + this._AppConstants = AppConstants; + this._$http = $http; + this._$state = $state; + this._$q = $q; + + this.user = User.current; + } + + attemptSave(drawingName, canvasData) { + return this._$http({ + url: this._AppConstants.api + '/drawing', + method: 'POST', + data: { + drawingName: drawingName, + canvas: canvasData, + user: this.user + } + }).then( + (res) => { + return res; + } + ); + } + + getTwelveMostRecentDrawings() { + return this._$http({ + url: this._AppConstants.api + '/drawingLimited', + method: 'GET' + }).then( + (res) => { + return res; + } + ); + } + + getDrawings() { + return this._$http({ + url: this._AppConstants.api + '/drawing', + method: 'GET' + }).then( + (res) => { + return res; + } + ); + } } \ No newline at end of file diff --git a/client/app/services/jwt.service.js b/client/app/services/jwt.service.js index 4b5c0b3..f6e7399 100644 --- a/client/app/services/jwt.service.js +++ b/client/app/services/jwt.service.js @@ -1,21 +1,21 @@ export default class JWT { - constructor(AppConstants, $window) { - 'ngInject'; - - this._AppConstants = AppConstants; - this._$window = $window; - } - - save(token) { - this._$window.localStorage[this._AppConstants.jwtKey] = token; - } - - get() { - return this._$window.localStorage[this._AppConstants.jwtKey]; - } - - destroy() { - this._$window.localStorage.removeItem(this._AppConstants.jwtKey); - } + constructor(AppConstants, $window) { + 'ngInject'; + + this._AppConstants = AppConstants; + this._$window = $window; + } + + save(token) { + this._$window.localStorage[this._AppConstants.jwtKey] = token; + } + + get() { + return this._$window.localStorage[this._AppConstants.jwtKey]; + } + + destroy() { + this._$window.localStorage.removeItem(this._AppConstants.jwtKey); + } } JWT.$inject = ["AppConstants", "$window"]; //Explicit annotation needed! \ No newline at end of file diff --git a/client/app/services/user.service.js b/client/app/services/user.service.js index a0647ed..8539bf1 100644 --- a/client/app/services/user.service.js +++ b/client/app/services/user.service.js @@ -1,98 +1,96 @@ import { createHash } from 'crypto'; export default class User { - constructor(JWT, AppConstants, $http, $state, $q) { - 'ngInject'; - - this._JWT = JWT; - this._AppConstants = AppConstants; - this._$http = $http; - this._$state = $state; - this._$q = $q; - - this.current = null; - } + constructor(JWT, AppConstants, $http, $state, $q) { + 'ngInject'; - attemptAuth(type, credentials) { - const userData = angular.copy(credentials); - userData.password = createHash('sha256').update(userData.password).digest('hex'); - let route = (type === 'login') ? '/login' : '/signup'; - return this._$http({ - url: this._AppConstants.api + route, - method: 'POST', - data: { - user: userData - } - }).then( - (res) => { - this._JWT.save(res.data.user.token); - this.current = res.data.user; - return res; - } - ); - } - - logout() { - this.current = null; - this._JWT.destroy(); - this._$state.go(this._$state.$current, null, { reload: true }); - } - - verifyAuth() { - let deferred = this._$q.defer(); - - if (!this._JWT.get()) { - deferred.resolve(false); - return deferred.promise; - } - - if (this.current) { - deferred.resolve(true); - } else { - this._$http({ - url: this._AppConstants.api + '/user', - method: 'GET', - headers: { - Authorization: this._JWT.get() - } - }).then( - (res) => { - this.current = res.data.user; - deferred.resolve(true); - }, - (err) => { - this._JWT.destroy(); - deferred.resolve(false); - } - ); - } - return deferred.promise; - } - - ensureAuthIs(bool) { - let deferred = this._$q.defer(); - - this.verifyAuth().then((authValid) => { - if (authValid !== bool) { - this._$state.go('app.home'); - deferred.resolve(false); - } else { - deferred.resolve(true); - } - }) - return deferred.promise; - } - - update(fields) { - return this._$http({ - url: this._AppConstants.api + '/user', - method: 'PUT', - data: { user: fields } - }).then( - (res) => { - this.current = res.data.user; - return res.data.user; - } - ); - } + this._JWT = JWT; + this._AppConstants = AppConstants; + this._$http = $http; + this._$state = $state; + this._$q = $q; + + this.current = null; + } + + attemptAuth(type, credentials) { + const userData = angular.copy(credentials); + userData.password = createHash('sha256').update(userData.password).digest('hex'); + let route = (type === 'login') ? '/login' : '/signup'; + return this._$http({ + url: this._AppConstants.api + route, + method: 'POST', + data: { + user: userData + } + }).then( + (res) => { + this._JWT.save(res.data.user.token); + this.current = res.data.user; + return res; + }); + } + + logout() { + this.current = null; + this._JWT.destroy(); + this._$state.go(this._$state.$current, null, {reload: true}); + } + + verifyAuth() { + let deferred = this._$q.defer(); + + if (!this._JWT.get()) { + deferred.resolve(false); + return deferred.promise; + } + + if (this.current) { + deferred.resolve(true); + } else { + this._$http({ + url: this._AppConstants.api + '/user', + method: 'GET', + headers: { + Authorization: this._JWT.get() + } + }).then( + (res) => { + this.current = res.data.user; + deferred.resolve(true); + }, + (err) => { + this._JWT.destroy(); + deferred.resolve(false); + }); + } + return deferred.promise; + } + + ensureAuthIs(bool) { + let deferred = this._$q.defer(); + + this.verifyAuth().then((authValid) => { + if (authValid !== bool) { + this._$state.go('app.home'); + deferred.resolve(false); + } else { + deferred.resolve(true); + } + }) + return deferred.promise; + } + + update(fields) { + return this._$http({ + url: this._AppConstants.api + '/user', + method: 'PUT', + data: {user: fields} + }).then( + (res) => { + this.current = res.data.user; + return res.data.user; + } + ); + } } \ No newline at end of file diff --git a/client/app/style.css b/client/app/style.css index 53b479c..6f71f24 100644 --- a/client/app/style.css +++ b/client/app/style.css @@ -1,401 +1,344 @@ html, body, #fullheight { - min-height: 100% !important; - height: 100%; - width: 100%; - margin: 0px; - overflow: hidden; -} + min-height: 100% !important; + height: 100%; + width: 100%; + margin: 0px; + overflow: hidden; } h1, p, ul { - margin: 0 !important; -} + margin: 0 !important; } #wrapper { - height: 100%; - width: 100%; - background-color: #575252; -} + height: 100%; + width: 100%; + background-color: #575252; } #navbar { - height:10%; - width: 100%; - float: left; - //border: 1px solid red; - background-color: #575252; -} + height: 10%; + width: 100%; + float: left; + background-color: #575252; } #content { - max-width: 100%; - width: 100%; - height: 85%; - float: left; - //border: 1px solid green; -} + max-width: 100%; + width: 100%; + height: 85%; + float: left; } .ng-scope { - height: 100%; -} + height: 100%; } #cvContainer { - height: 100%; - width: 95%; - float: left; - //border: 2px dashed yellow; -} + height: 100%; + width: 95%; + float: left; } #sidebar { - height: 100%; - width: auto; - //border: 1px solid aqua; - overflow: hidden; - text-align: center; - background-color: #575252; -} + height: 100%; + width: auto; + overflow: hidden; + text-align: center; + background-color: #575252; } #canvas { - //border: 1px solid black; - background-color: #E2E2E2; - position: absolute; -} + background-color: #E2E2E2; + position: absolute; } #footer { - height: 4%; - width: 100%; - float: left; - //border: 1px solid blue; - background-color: #575252; -} + height: 4%; + width: 100%; + float: left; + background-color: #575252; } #footerText { - color: #CBCACA; - text-align: center; -} - -.close{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.6;filter:alpha(opacity=60);}.close:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);} -button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;} + color: #CBCACA; + text-align: center; } + +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: 20px; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.6; + filter: alpha(opacity=60); } + +.close:hover { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + filter: alpha(opacity=40); } + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; } /* Home Page */ #home-navbar { - width: 100%; - height: 8%; - -} + width: 100%; + height: 8%; } ul { - width: 100%; - height: 100%; - padding: 0; - text-align: center; -} + width: 100%; + height: 100%; + padding: 0; + text-align: center; } li { - display: inline-block; -} + display: inline-block; } .canvas-button { - height: 100%; - width: 10%; - float: left; - position: relative; - background-color: #3B3B3B; -} - -.canvas-button a { - display: block; - color: white; - width: 100%; - height: 100%; - position: absolute; - top: 50%; - transform: translateY(-50%); - text-decoration: none; -} - -.canvas-button a:before { - content:''; - display:inline-block; - height:100%; - vertical-align:middle; -} - -.canvas-button a:hover { - box-shadow: 0 4px 2px -2px gray; -} + height: 100%; + width: 10%; + float: left; + position: relative; + background-color: #3B3B3B; } + .canvas-button a { + display: block; + color: white; + width: 100%; + height: 100%; + position: absolute; + top: 50%; + transform: translateY(-50%); + text-decoration: none; } + .canvas-button a:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + .canvas-button a:hover { + box-shadow: 0 4px 2px -2px gray; } .authDiv { - display: inline-block; - width: 10%; - height: 100%; - float: right; -} + display: inline-block; + width: 10%; + height: 100%; + float: right; } .auth-button { - height: 100%; - width: 50%; - float: right; - background-color: #3B3B3B; -} - -.auth-button a { - display: block; - color: white; - width: 100%; - height: 100%; - text-decoration: none; -} - -.auth-button a:before { - content:''; - display:inline-block; - height:100%; - vertical-align:middle; -} - -.auth-button a:hover { - box-shadow: 0 4px 2px -2px gray; -} + height: 100%; + width: 50%; + float: right; + background-color: #3B3B3B; } + .auth-button a { + display: block; + color: white; + width: 100%; + height: 100%; + text-decoration: none; } + .auth-button a:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + .auth-button a:hover { + box-shadow: 0 4px 2px -2px gray; } h1 { - display: inline-block; - position: relative; - top: 50%; - transform: translateY(-50%); - -} + display: inline-block; + position: relative; + top: 50%; + transform: translateY(-50%); } #newsMessage { - margin: 0% 0% 5% 10%; - width: 80%; - height: 30%; - background-color: #B9B0B0; - font-size: 1.25em; -} -#newsMessage p:first-child { - padding: 5% 0% 0% 5%; -} -#newsMessage p:not(:first-child) { - padding: 1em 0% 0% 5%; -} + margin: 0% 0% 5% 10%; + width: 80%; + height: 30%; + background-color: #B9B0B0; + font-size: 1.25em; } + #newsMessage p:first-child { + padding: 5% 0% 0% 5%; } + #newsMessage p:not(:first-child) { + padding: 1em 0% 0% 5%; } #images { - margin-left: 10%; - width: 80%; - height: 50%; - overflow-y: auto; - background-color: #B9B0B0; -} + margin-left: 10%; + width: 80%; + height: 50%; + overflow-y: auto; + background-color: #B9B0B0; } + .homeDrawingDiv { - display: inline-block; - width: 22%; - margin-bottom: 4%; - text-align: center; -} + display: inline-block; + width: 22%; + margin-bottom: 4%; + text-align: center; } + .homeDrawingDiv:not(:nth-child(4n)) { - margin-right: 4%; -} + margin-right: 4%; } + .homeDrawing { - display: inline-block; - width: 100%; -} + display: inline-block; + width: 100%; } #loading { - width: 100%; - height: 100%; - text-align: center; -} -#loading h1 { - position: relative; - top: 50%; - transform: translateY(-50%); -} + width: 100%; + height: 100%; + text-align: center; } + #loading h1 { + position: relative; + top: 50%; + transform: translateY(-50%); } /* End Home Page */ - /* Start Auth Page */ - .row { - height: 100%; - text-align: center; -} - -.row a { - text-decoration: none; - color: #7F7E7E; -} - -.row a:hover { - text-decoration: underline; -} + height: 100%; + text-align: center; } + .row a { + text-decoration: none; + color: #7F7E7E; } + .row a:hover { + text-decoration: underline; } .auth-header { - width: 100%; - height: 8%; -} -.auth-header ul { - text-align: center; -} -.auth-header ul li { - width: 10%; -} -.auth-header ul li a { - color: white; -} -.auth-header ul li a:hover { - text-decoration: none; -} + width: 100%; + height: 8%; } + .auth-header ul { + text-align: center; } + .auth-header ul li { + width: 10%; } + .auth-header ul li a { + color: white; } + .auth-header ul li a:hover { + text-decoration: none; } .auth-title { - color: #191919; -} + color: #191919; } #authForm { - display: block; - width: 30%; - height: auto; - margin: 0 auto; -} - -#authForm input { - display: block; - width: 70%; - font-size: 1.1em; - margin: 3em auto; - padding: 1em; - border: 0; -} - -#authForm input:focus { - border: 2px solid gray; -} - -#authForm fieldset { - border: 0; -} + display: block; + width: 30%; + height: auto; + margin: 0 auto; } + #authForm input { + display: block; + width: 70%; + font-size: 1.1em; + margin: 3em auto; + padding: 1em; + border: 0; } + #authForm input:focus { + border: 2px solid gray; } + #authForm fieldset { + border: 0; } .authSubmit { - display: block; - width: 70%; - height: 50px; - float: initial; - margin: 0 auto; -} + display: block; + width: 70%; + height: 50px; + float: initial; + margin: 0 auto; } .block { - width: 10%; - height: 100%; - float: right; -} + width: 10%; + height: 100%; + float: right; } /* End Auth Page */ - /* Start Canvas Page */ - .canvasNav { - text-align: inherit; -} -.canvasNav li { - width: 5%; - text-align: center; -} + text-align: inherit; } + .canvasNav li { + width: 5%; + text-align: center; } select, option { - padding-bottom: 3em; - padding-right: 4.5em; -} + padding-bottom: 3em; + padding-right: 4.5em; } + select { - -webkit-appearance: none; - -moz-appearance: none; - text-indent: 1px; - text-overflow: ''; -} + -webkit-appearance: none; + -moz-appearance: none; + text-indent: 1px; + text-overflow: ''; } button#changeBrushSize, button#clearCv, button#colorOptions, button#saveDrawing, button#changeBgColor { - background-color: gray !important; - font-size: 35px; - color: #575252 !important; -} + background-color: gray !important; + font-size: 35px; + color: #575252 !important; } + button#submitCustomColor { - background-color: gray !important; - font-size: 14px; - color: #575252 !important; - width: 24px; - min-height: 24px; - height: 24px; - line-height: 24px; -} + background-color: gray !important; + font-size: 14px; + color: #575252 !important; + width: 24px; + min-height: 24px; + height: 24px; + line-height: 24px; } #customColor { - display: none; - Width: 10%; - position: absolute; - top: 5px; - left: 35vh; -} + display: none; + width: 10%; + position: absolute; + top: 5px; + left: 35vh; } + .customColorLabel { - color: white; - font-size: 0.95vw; -} + color: white; + font-size: 0.95vw; } + .customColorInput { - width: 60%; - background-color: #575252; - color: white; - border: 1px solid gray; -} + width: 60%; + background-color: #575252; + color: white; + border: 1px solid gray; } #colorList { - width: 50px; - height: auto; - background-color: gray; - z-index: 2; - display: none; - position: absolute; - top: 5px; - left: 25vh; -} + width: 50px; + height: auto; + background-color: gray; + z-index: 2; + display: none; + position: absolute; + top: 5px; + left: 25vh; } #black { - background-color: #000000; -} + background-color: #000000; } + #white { - background-color: #FFFFFF; -} + background-color: #FFFFFF; } + #green { - background-color: #22B14C; -} + background-color: #22B14C; } + #yellow { - background-color: #FFF200; -} + background-color: #FFF200; } + #orange { - background-color: #FF7F27; -} + background-color: #FF7F27; } + #red { - background-color: #ED1C24; -} + background-color: #ED1C24; } + #lightBlue { - background-color: #00A2E8; -} + background-color: #00A2E8; } + #blue { - background-color: #3F48CC; -} + background-color: #3F48CC; } + #purple { - background-color: #A349A4; -} + background-color: #A349A4; } .color { - width: 50px; - height: 50px; - cursor: pointer; -} -.color:not(:first-child) { - margin-top: 3px; -} + width: 50px; + height: 50px; + cursor: pointer; } + .color:not(:first-child) { + margin-top: 3px; } .alertCustom { - padding: 2px; - border-radius: 4px; - background-color: #e56969; - width: 25%; - float: right; -} - -/* End Canvas Page */ \ No newline at end of file + padding: 2px; + border-radius: 4px; + background-color: #e56969; + width: 25%; + float: right; } + +/* End Canvas Page */ diff --git a/client/app/style.scss b/client/app/style.scss index 46f1cfb..f67a345 100644 --- a/client/app/style.scss +++ b/client/app/style.scss @@ -3,29 +3,29 @@ $container-width: 100%; $container-height: 100%; html, body, #fullheight { - min-height: $container-height !important; + min-height: 100% !important; height: $container-height; width: $container-width; margin: 0px; - overflow: hidden; + overflow: hidden; } -h1 { - margin: 0 !important; +h1, p, ul { + margin: 0 !important; } #wrapper { height: $container-height; width: $container-width; - background-color: $mainColor; + background-color: $mainColor; } #navbar { - height: $container-height / 10; + height: $container-height - 90%; width: $container-width; float: left; - background-color: $mainColor; -} + background-color: $mainColor; +} #content { max-width: $container-width; @@ -35,7 +35,7 @@ h1 { } .ng-scope { - height: $container-height; + height: $container-height; } #cvContainer { @@ -49,76 +49,360 @@ h1 { width: auto; overflow: hidden; text-align: center; - background-color: $mainColor; + background-color: $mainColor; } #canvas { - background-color: #E2E2E2; - position: absolute; + background-color: #E2E2E2; + position: absolute; } #footer { - height: $container-height / 25; + height: $container-height - 96%; width: $container-width; float: left; - background-color: $mainColor; + background-color: $mainColor; } -button#changeBrushSize, button#clearCv, button#colorOptions { - background-color: gray !important; - font-size: 35px; - color: $mainColor !important; +#footerText { + color: #CBCACA; + text-align: center; } -#footerText { - color: #CBCACA; - text-align: center; +.close{ float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.6; filter: alpha(opacity=60); } .close:hover{ color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } +button.close{ padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;} + +/* Home Page */ +#home-navbar { + width: $container-width; + height: $container-height - 92%; + +} + +ul { + width: $container-width; + height: $container-height; + padding: 0; + text-align: center; +} + +li { + display: inline-block; +} + +.canvas-button { + height: $container-height; + width: $container-width - 90%; + float: left; + position: relative; + background-color: #3B3B3B; + + a { + display: block; + color: white; + width: $container-width; + height: $container-height; + position: absolute; + top: 50%; + transform: translateY(-50%); + text-decoration: none; + + &:before { + content: ''; + display: inline-block; + height: $container-height; + vertical-align: middle; + } + + &:hover { + box-shadow: 0 4px 2px -2px gray; + } + } +} + +.authDiv { + display: inline-block; + width: $container-width - 90%; + height: $container-height; + float: right; +} + +.auth-button { + height: $container-height; + width: $container-width - 50%; + float: right; + background-color: #3B3B3B; + + a { + display: block; + color: white; + width: $container-width; + height: $container-height; + text-decoration: none; + + &:before { + content: ''; + display: inline-block; + height: $container-height; + vertical-align: middle; + } + + &:hover { + box-shadow: 0 4px 2px -2px gray; + } + } +} + +h1 { + display: inline-block; + position: relative; + top: 50%; + transform: translateY(-50%); + +} + +#newsMessage { + margin: 0% 0% 5% 10%; + width: $container-width - 20%; + height: $container-height - 70%; + background-color: #B9B0B0; + font-size: 1.25em; + + p:first-child { + padding: 5% 0% 0% 5%; + } + + p:not(:first-child) { + padding: 1em 0% 0% 5%; + } +} + +#images { + margin-left: 10%; + width: $container-width - 20%; + height: $container-height - 50%; + overflow-y: auto; + background-color: #B9B0B0; +} +.homeDrawingDiv { + display: inline-block; + width: $container-width - 78%; + margin-bottom: 4%; + text-align: center; +} +.homeDrawingDiv:not(:nth-child(4n)) { + margin-right: 4%; +} +.homeDrawing { + display: inline-block; + width: $container-width; +} + +#loading { + width: $container-width; + height: $container-height; + text-align: center; + + h1 { + position: relative; + top: 50%; + transform: translateY(-50%); + } +} + +/* End Home Page */ + +/* Start Auth Page */ + +.row { + height: $container-height; + text-align: center; + + a { + text-decoration: none; + color: #7F7E7E; + + &:hover { + text-decoration: underline; + } + } +} + +.auth-header { + width: $container-width; + height: $container-height - 92%; + + ul { + text-align: center; + + li { + width: $container-width - 90%; + + a { + color: white; + + &:hover { + text-decoration: none; + } + } + } + } +} + +.auth-title { + color: #191919; +} + +#authForm { + display: block; + width: $container-width - 70%; + height: auto; + margin: 0 auto; + + input { + display: block; + width: $container-width - 30%; + font-size: 1.1em; + margin: 3em auto; + padding: 1em; + border: 0; + + &:focus { + border: 2px solid gray; + } + } + + fieldset { + border: 0; + } +} + +.authSubmit { + display: block; + width: $container-width - 30%; + height: 50px; + float: initial; + margin: 0 auto; +} + +.block { + width: $container-width - 90%; + height: $container-height; + float: right; +} + +/* End Auth Page */ + +/* Start Canvas Page */ + +.canvasNav { + text-align: inherit; + + li { + width: $container-width - 95%; + text-align: center; + } +} + +select, option { + padding-bottom: 3em; + padding-right: 4.5em; +} +select { + -webkit-appearance: none; + -moz-appearance: none; + text-indent: 1px; + text-overflow: ''; +} + +button#changeBrushSize, button#clearCv, button#colorOptions, button#saveDrawing, button#changeBgColor { + background-color: gray !important; + font-size: 35px; + color: $mainColor !important; +} +button#submitCustomColor { + background-color: gray !important; + font-size: 14px; + color: $mainColor !important; + width: 24px; + min-height: 24px; + height: 24px; + line-height: 24px; +} + +#customColor { + display: none; + width: $container-width - 90%; + position: absolute; + top: 5px; + left: 35vh; +} +.customColorLabel { + color: white; + font-size: 0.95vw; +} +.customColorInput { + width: 60%; + background-color: $mainColor; + color: white; + border: 1px solid gray; } #colorList { - width: 50px; - height: auto; - background-color: gray; - z-index: 2; - display: none; - position: absolute; - top: 5px; - left: 10vh; + width: 50px; + height: auto; + background-color: gray; + z-index: 2; + display: none; + position: absolute; + top: 5px; + left: 25vh; } #black { - background-color: #000000; + background-color: #000000; } #white { - background-color: #FFFFFF; + background-color: #FFFFFF; } #green { - background-color: #22B14C; + background-color: #22B14C; } #yellow { - background-color: #FFF200; + background-color: #FFF200; } #orange { - background-color: #FF7F27; + background-color: #FF7F27; } #red { - background-color: #ED1C24; + background-color: #ED1C24; } #lightBlue { - background-color: #00A2E8; + background-color: #00A2E8; } #blue { - background-color: #3F48CC; + background-color: #3F48CC; } #purple { - background-color: #A349A4; + background-color: #A349A4; } .color { - width: 50px; - height: 50px; - cursor: pointer; + width: 50px; + height: 50px; + cursor: pointer; + + &:not(:first-child) { + margin-top: 3px; + } } -.color:not(:first-child) { - margin-top: 3px; -} \ No newline at end of file + +.alertCustom { + padding: 2px; + border-radius: 4px; + background-color: #e56969; + width: $container-width - 75%; + float: right; +} + +/* End Canvas Page */ \ No newline at end of file diff --git a/client/index.html b/client/index.html index 171f931..c6e1a6c 100644 --- a/client/index.html +++ b/client/index.html @@ -1,28 +1,28 @@ - - - - - - - - - -
- -
- -
- - - - - - - - - - - + + + + + + + + + +
+ +
+ +
+ + + + + + + + + + + diff --git a/gulpfile.babel.js b/gulpfile.babel.js index db4c7d4..e07cef5 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -20,7 +20,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware'; import colorsSupported from 'supports-color'; import historyApiFallback from 'connect-history-api-fallback'; -var interceptErrors = (error) => { +let interceptErrors = (error) => { var args = Array.prototype.slice.call(arguments); // Send error to notification center with gulp-notify @@ -34,85 +34,85 @@ var interceptErrors = (error) => { }; let root = 'client'; -var viewFiles = "client/app/**/*.html"; +let viewFiles = "client/app/**/*.html"; // helper method for resolving paths let resolveToApp = (glob = '') => { - return path.join(root, 'app', glob); // app/{glob} + return path.join(root, 'app', glob); // app/{glob} }; let resolveToComponents = (glob = '') => { - return path.join(root, 'app/components', glob); // app/components/{glob} + return path.join(root, 'app/components', glob); // app/components/{glob} }; // map of all paths let paths = { - js: resolveToComponents('**/*!(.spec.js).js'), // exclude spec files - scss: resolveToApp('**/*.scss'), //stylesheets - html: [ - resolveToApp('**/*.html'), - path.join(root, 'index.html') - ], - entry: [ - 'babel-polyfill', - path.join(__dirname, root, 'app/app.js') - ], - output: root, - blankTemplates: path.join(__dirname, 'generator', 'component/**/*.**'), - dest: path.join(__dirname, 'dist') + js: resolveToComponents('**/*!(.spec.js).js'), // exclude spec files + scss: resolveToApp('**/*.scss'), //stylesheets + html: [ + resolveToApp('**/*.html'), + path.join(root, 'index.html') + ], + entry: [ + 'babel-polyfill', + path.join(__dirname, root, 'app/app.js') + ], + output: root, + blankTemplates: path.join(__dirname, 'generator', 'component/**/*.**'), + dest: path.join(__dirname, 'dist') }; gulp.task('webpack', ['clean'], (cb) => { - const config = require('./webpack.dist.config'); - config.entry.app = paths.entry; - - webpack(config, (err, stats) => { - if(err) { - throw new gutil.PluginError("webpack", err); - } - - gutil.log("[webpack]", stats.toString({ - colors: colorsSupported, - chunks: false, - errorDetails: true - })); - - cb(); - }); + const config = require('./webpack.dist.config'); + config.entry.app = paths.entry; + + webpack(config, (err, stats) => { + if (err) { + throw new gutil.PluginError("webpack", err); + } + + gutil.log("[webpack]", stats.toString({ + colors: colorsSupported, + chunks: false, + errorDetails: true + })); + + cb(); + }); }); gulp.task('serve', ['nodemon'], () => { - const config = require('./webpack.dev.config'); - config.entry.app = [ - 'webpack-hot-middleware/client?reload=true', - ].concat(paths.entry); + const config = require('./webpack.dev.config'); + config.entry.app = [ + 'webpack-hot-middleware/client?reload=true', + ].concat(paths.entry); - var compiler = webpack(config); + var compiler = webpack(config); - serve({ - port: process.env.PORT || 8081, - open: false, - proxy: { + serve({ + port: process.env.PORT || 8081, + open: false, + proxy: { target: 'localhost:8085', // original port ws: true // enables websockets }, - middleware: [ - historyApiFallback(), - webpackDevMiddleware(compiler, { - stats: { - colors: colorsSupported, - chunks: false, - modules: false - }, - publicPath: config.output.publicPath - }), - webpackHotMiddleware(compiler) - ] - }); + middleware: [ + historyApiFallback(), + webpackDevMiddleware(compiler, { + stats: { + colors: colorsSupported, + chunks: false, + modules: false + }, + publicPath: config.output.publicPath + }), + webpackHotMiddleware(compiler) + ] + }); }); gulp.task('nodemon', (cb) => { - var started = false; + let started = false; return nodemon({ script: 'app.js' @@ -125,39 +125,39 @@ gulp.task('nodemon', (cb) => { }); gulp.task('component', () => { - const cap = (val) => { - return val.charAt(0).toUpperCase() + val.slice(1); - }; - const name = yargs.argv.name; - const parentPath = yargs.argv.parent || ''; - const destPath = path.join(resolveToComponents(), parentPath, name); - - return gulp.src(paths.blankTemplates) - .pipe(template({ - name: name, - upCaseName: cap(name) - })) - .pipe(rename((path) => { - path.basename = path.basename.replace('temp', name); - })) - .pipe(gulp.dest(destPath)); + const cap = (val) => { + return val.charAt(0).toUpperCase() + val.slice(1); + }; + const name = yargs.argv.name; + const parentPath = yargs.argv.parent || ''; + const destPath = path.join(resolveToComponents(), parentPath, name); + + return gulp.src(paths.blankTemplates) + .pipe(template({ + name: name, + upCaseName: cap(name) + })) + .pipe(rename((path) => { + path.basename = path.basename.replace('temp', name); + })) + .pipe(gulp.dest(destPath)); }); gulp.task('views', () => { - return gulp.src(viewFiles) - .pipe(templateCache({ - standalone: true - })) - .on('error', interceptErrors) - .pipe(rename("app.templates.js")) - .pipe(gulp.dest('./client/app/config/')); + return gulp.src(viewFiles) + .pipe(templateCache({ + standalone: true + })) + .on('error', interceptErrors) + .pipe(rename("app.templates.js")) + .pipe(gulp.dest('./client/app/config/')); }); gulp.task('clean', (cb) => { - del([paths.dest]).then(function (paths) { - gutil.log("[clean]", paths); - cb(); - }) + del([paths.dest]).then(function (paths) { + gutil.log("[clean]", paths); + cb(); + }); }); gulp.task('default', ['serve']); diff --git a/gulpfileserver.babel.js b/gulpfileserver.babel.js index ff9636a..4eb8d5d 100644 --- a/gulpfileserver.babel.js +++ b/gulpfileserver.babel.js @@ -1,4 +1,5 @@ 'use strict'; + import gulp from 'gulp'; import del from 'del'; import source from 'vinyl-source-stream'; @@ -12,15 +13,16 @@ import notify from 'gulp-notify'; import ejs from 'gulp-ejs'; import inject from 'gulp-inject'; import concat from 'gulp-concat'; -import minifyCSS from 'gulp-minify-css'; +import sass from 'gulp-sass'; +import cleanCSS from 'gulp-clean-css'; import uglify from 'gulp-uglify'; // Where our files are located -var jsFiles = "client/app/**/*.js"; -var viewFiles = "client/app/**/*.html"; +const jsFiles = "client/app/**/*.js"; +const viewFiles = "client/app/**/*.html"; -var interceptErrors = (error) => { - var args = Array.prototype.slice.call(arguments); +let interceptErrors = (error) => { + let args = Array.prototype.slice.call(arguments); // Send error to notification center with gulp-notify notify.onError({ @@ -48,36 +50,42 @@ gulp.task('browserify', ['views'], () => { .bundle() .on('error', interceptErrors) .pipe(source('main.js')) - .pipe(buffer()) - .pipe(uglify()) + .pipe(buffer()) + .pipe(uglify()) .pipe(gulp.dest('./build/')); }); -gulp.task('css', () => { +gulp.task('sass', function () { + return gulp.src('./client/app/*.scss') + .pipe(sass().on('error', sass.logError)) + .pipe(gulp.dest('./client/app/')); +}); + +gulp.task('css', ['sass'], () => { gulp.src('./client/app/*.css') - .pipe(minifyCSS()) + .pipe(cleanCSS()) .pipe(concat('style.css')) .on('error', interceptErrors) .pipe(gulp.dest('./build')); }); gulp.task('html', () => { - const sources = gulp.src(['./build/*.js', './build/*.css'], {read: false}); - + const sources = gulp.src(['./build/*.js', './build/*.css'], {read: false}); + return gulp.src("./client/index.html") - .pipe(inject(sources, {relative: true, ignorePath: '../build/'})) + .pipe(inject(sources, {relative: true, ignorePath: '../build/'})) .on('error', interceptErrors) .pipe(gulp.dest('./build/')); }); gulp.task('views', () => { - return gulp.src(viewFiles) - .pipe(templateCache({ - standalone: true - })) - .on('error', interceptErrors) - .pipe(rename("app.templates.js")) - .pipe(gulp.dest('./client/app/config/')); + return gulp.src(viewFiles) + .pipe(templateCache({ + standalone: true + })) + .on('error', interceptErrors) + .pipe(rename("app.templates.js")) + .pipe(gulp.dest('./client/app/config/')); }); gulp.task('clean', () => { diff --git a/karma.conf.js b/karma.conf.js index ecd327f..c286d87 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,95 +1,84 @@ // Karma configuration // Generated on Tue Dec 06 2016 21:41:03 GMT+0100 (Romance Standard Time) -module.exports = function(config) { - config.set({ - - // 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: [ - 'https://code.jquery.com/jquery-3.1.1.js', - 'node_modules/angular/angular.js', - 'node_modules/angular-mocks/angular-mocks.js', - 'node_modules/angular-ui-router/release/angular-ui-router.js', - 'node_modules/angular-material/angular-material.js', - 'node_modules/angular-animate/angular-animate.js', - 'node_modules/angular-aria/angular-aria.js', - 'node_modules/angular-sanitize/angular-sanitize.js', - 'http://localhost:9876/socket.io/socket.io.js', - 'client/app/app.js', - { pattern: 'test-context.js', watched: false } - ], - - - // 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: { - 'client/app/app.js': ['webpack'], - 'test-context.js': ['webpack'] - }, - webpack: { +module.exports = function (config) { + config.set({ + + // 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: [ + 'https://code.jquery.com/jquery-3.1.1.js', + 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js', + 'node_modules/angular-mocks/angular-mocks.js', + 'node_modules/angular-ui-router/release/angular-ui-router.js', + 'node_modules/angular-material/angular-material.js', + 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js', + 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.js', + 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js', + 'http://localhost:9876/socket.io/socket.io.js', + 'client/app/app.js', + {pattern: 'test-context.js', watched: false} + ], + + // 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: { + 'client/app/app.js': ['webpack'], + 'test-context.js': ['webpack'] + }, + webpack: { module: { loaders: [ - { test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' } + {test: /\.js/, exclude: /node_modules/, loader: 'babel-loader'} ] }, - node: { - fs: 'empty' - }, + node: { + fs: 'empty' + }, watch: true }, webpackServer: { noInfo: true - }, - - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress'], - - - // 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, + // test results reporter to use + // possible values: 'dots', 'progress' + // available reporters: https://npmjs.org/browse/keyword/karma-reporter + reporters: ['progress'], + // web server port + port: 9876, - // enable / disable watching file and executing tests whenever any file changes - autoWatch: true, + // 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, - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['Chrome'], + // 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: ['Chrome'], - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: false, + // 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 - }) -} + // Concurrency level + // how many browser should be started simultaneous + concurrency: Infinity + }); +}; diff --git a/package.json b/package.json index 20728bf..eb746bb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "webapps3", + "name": "webapps", "version": "1.0.0", - "description": "Project WebApps 3", + "description": "Project WebApps", "main": "app.js", "scripts": { "dev": "nodemon --exec babel-node app.js", @@ -19,60 +19,74 @@ }, "homepage": "https://github.com/gevalo1/WebApps3#readme", "devDependencies": { - "angular-mocks": "^1.5.8", - "babel-cli": "^6.18.0", - "babel-core": "^6.18.2", - "babel-loader": "^6.2.7", + "angular-animate": "^1.6.0", + "angular-aria": "^1.6.0", + "angular-material": "^1.1.1", + "angular-mocks": "^1.6.0", + "babel-core": "^6.20.0", + "babel-loader": "^6.2.9", "babel-plugin-transform-runtime": "^6.15.0", - "babel-polyfill": "^6.16.0", + "babel-polyfill": "^6.20.0", "babel-preset-es2015": "^6.18.0", "babel-preset-stage-0": "^6.16.0", "babelify": "^7.3.0", - "browser-sync": "^2.17.5", + "browser-sync": "^2.18.5", "browserify": "^13.1.1", "browserify-ngannotate": "^2.0.0", + "css-loader": "^0.26.1", "del": "^2.2.2", - "eslint": "^3.9.0", + "eslint": "^3.12.1", "eslint-config-standard": "^6.2.1", - "eslint-plugin-promise": "^3.3.0", + "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^2.0.1", "gulp-angular-templatecache": "^2.0.0", - "gulp-concat": "^2.6.0", - "gulp-ejs": "^2.2.1", - "gulp-html-replace": "^1.6.1", + "gulp-clean-css": "^2.2.2", + "gulp-concat": "^2.6.1", + "gulp-ejs": "^2.3.0", "gulp-inject": "^4.1.0", - "gulp-minify-css": "^1.2.4", "gulp-nodemon": "^2.2.1", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", + "gulp-sass": "^3.0.0", + "gulp-template": "^4.0.0", "gulp-uglify": "^2.0.0", + "html-webpack-plugin": "^2.24.1", "jasmine": "^2.5.2", "jasmine-core": "^2.5.2", "karma": "^1.3.0", "karma-babel-preprocessor": "^6.0.1", "karma-chrome-launcher": "^2.0.0", - "karma-jasmine": "^1.0.2", + "karma-jasmine": "^1.1.0", "karma-webpack": "^1.8.0", + "ng-annotate-loader": "^0.2.0", + "node-sass": "^3.4.2", + "raw-loader": "^0.5.1", + "run-sequence": "^1.2.2", + "sass-loader": "^4.0.2", + "style-loader": "^0.13.1", "vinyl-buffer": "^1.0.0", - "vinyl-source-stream": "^1.1.0" + "vinyl-source-stream": "^1.1.0", + "webpack": "^1.13.2", + "webpack-dev-middleware": "^1.8.4", + "webpack-hot-middleware": "^2.13.0" }, "dependencies": { - "angular": "^1.5.8", - "angular-sanitize": "^1.5.8", - "angular-ui-router": "^0.3.1", + "angular": "^1.6.0", + "angular-sanitize": "^1.6.0", + "angular-ui-router": "^0.3.2", "babel-cli": "^6.18.0", - "babel-register": "6.18.0", - "babel-runtime": "^6.18.0", - "body-parser": "1.15.2", - "cookie-parser": "1.4.3", + "babel-register": "^6.18.0", + "babel-runtime": "^6.20.0", + "body-parser": "^1.15.2", + "cookie-parser": "^1.4.3", "cors": "^2.8.1", - "ejs": "2.5.5", - "express": "4.14.0", + "ejs": "^2.5.5", + "express": "^4.14.0", "gulp": "^3.9.1", - "jsonwebtoken": "^7.1.9", - "mongoose": "^4.6.6", - "morgan": "1.7.0", - "serve-favicon": "2.3.2", - "socket.io": "^1.5.1" + "jsonwebtoken": "^7.2.1", + "mongoose": "^4.7.2", + "morgan": "^1.7.0", + "serve-favicon": "^2.3.2", + "socket.io": "^1.7.2" } } diff --git a/server/api/auth/userHandle.js b/server/api/auth/userHandle.js index 4925ad4..0a2f4bc 100644 --- a/server/api/auth/userHandle.js +++ b/server/api/auth/userHandle.js @@ -3,79 +3,80 @@ const User = require("../../models/user"); const jwt = require('jsonwebtoken'); module.exports.handle = - function handle(req, res) { - const target = getUrlName(req.url); - switch (target) { - case 'login': - handleLogin(req, res) - break; - case 'user': - handleUser(req, res) - break; - case 'signup': - handleSignup(req, res) - break; - default: - res.end; - break; - } - - function handleLogin(req, res) { - User.findOne({$and: [{'local.email': req.body.user.email}, {'local.password': req.body.user.password}]}).exec(function (err, result) { - if (result) { - req.body.user = result.local; - res.json(req.body); - } else { - res.status(500).send("Email or password is invalid."); - } - }); - }; - - function handleUser(req, res) { - const newJwt = res.req.headers.authorization.slice(6); - User.findOne({'local.token': newJwt}).exec(function (err, result) { - if (result) { - req.body.user = result.local; - res.json(req.body); - } else { - res.sendStatus(500); - } - }); - }; - - function handleSignup(req, res) { - const currentDate = new Date(); - const payload = req.body.user.username + currentDate; - req.body.user.token = jwt.sign(payload , "EvilWhaleDrawingD1ng"); - - User.findOne({'local.username': req.body.user.username}).exec(function (err, result) { - if (!result) { - User.findOne({'local.email': req.body.user.email}).exec(function (err, result) { - if (!result) { - result = new User({ - local: { - email: req.body.user.email, - password: req.body.user.password, - username: req.body.user.username, - joinDate: currentDate, - token: req.body.user.token - } - }); - result.save(); - res.json(req.body); - } else { - res.status(500).send("Email is already in use."); - } - }); - } else { - res.status(500).send("Username is already in use."); - } - }); - }; - - function getUrlName(url) { - url = url.split('/'); - url = (url[url.length - 1]); - return url; - }; - }; \ No newline at end of file + function handle(req, res) { + const target = getUrlName(req.url); + switch (target) { + case 'login': + handleLogin(req, res) + break; + case 'user': + handleUser(req, res) + break; + case 'signup': + handleSignup(req, res) + break; + default: + res.end; + break; + } + + function handleLogin(req, res) { + User.findOne({$and: [{'local.email': req.body.user.email}, {'local.password': req.body.user.password}]}).exec(function (err, result) { + if (result) { + req.body.user = result.local; + res.json(req.body); + } else { + res.status(500).send("Email or password is invalid."); + } + }); + } + + function handleUser(req, res) { + const newJwt = res.req.headers.authorization.slice(6); + User.findOne({'local.token': newJwt}).exec(function (err, result) { + if (result) { + req.body.user = result.local; + res.json(req.body); + } else { + res.sendStatus(500); + } + }); + } + + function handleSignup(req, res) { + const currentDate = new Date(); + const payload = req.body.user.username + currentDate; + req.body.user.token = jwt.sign(payload, "EvilWhaleDrawingD1ng"); + + User.findOne({'local.username': req.body.user.username}).exec(function (err, result) { + if (!result) { + User.findOne({'local.email': req.body.user.email}).exec(function (err, result) { + if (!result) { + result = new User({ + local: { + email: req.body.user.email, + password: req.body.user.password, + username: req.body.user.username, + joinDate: currentDate, + token: req.body.user.token + } + }); + result.save(); + res.json(req.body); + } else { + res.status(500).send("Email is already in use."); + } + }); + } else { + res.status(500).send("Username is already in use."); + } + }); + } + + function getUrlName(url) { + url = url.split('/'); + url = (url[url.length - 1]); + return url; + } + ; + }; \ No newline at end of file diff --git a/server/api/draw/drawingHandle.js b/server/api/draw/drawingHandle.js index bd2ff61..ffb8c92 100644 --- a/server/api/draw/drawingHandle.js +++ b/server/api/draw/drawingHandle.js @@ -2,57 +2,57 @@ const Drawing = require("../../models/drawing"); module.exports.handle = - function handle(req, res) { - const url = req.url.substr(req.url.lastIndexOf('/') + 1); - const target = req.method; - switch (target) { - case 'POST': - postDrawing(req, res); - break; - case 'GET': - if (url === 'drawingLimited') { - getTwelveMostRecentDrawings(req, res); - } else { - getDrawings(req, res); - } - break; - default: - res.end; - break; - } - - function postDrawing(req, res) { - let db = new Drawing({ - byUsername: req.body.user.username, - drawingName: req.body.drawingName, - drawingData: req.body.canvas, - createdAt: new Date() - }); - - db.save(); - res.json("success"); - } - - function getDrawings(req, res) { - Drawing.find( {} ).sort( {createdAt: -1} ).exec((err, result) => { - if (result) { - req.result = result; - res.json(req.result); - } else { - res.status(500).send("Something went wrong while retrieving all drawings from the database."); - } - }); - } - - function getTwelveMostRecentDrawings(req, res) { - Drawing.find( {} ).sort( {createdAt: -1} ).limit(12).exec((err, result) => { - if (result) { - req.result = result; - res.json(req.result); - } else { - res.status(500).send("Something went wrong while retrieving all drawings from the database."); - } - }); - } - - }; \ No newline at end of file + function handle(req, res) { + const url = req.url.substr(req.url.lastIndexOf('/') + 1); + const target = req.method; + switch (target) { + case 'POST': + postDrawing(req, res); + break; + case 'GET': + if (url === 'drawingLimited') { + getTwelveMostRecentDrawings(req, res); + } else { + getDrawings(req, res); + } + break; + default: + res.end; + break; + } + + function postDrawing(req, res) { + let db = new Drawing({ + byUsername: req.body.user.username, + drawingName: req.body.drawingName, + drawingData: req.body.canvas, + createdAt: new Date() + }); + + db.save(); + res.json("success"); + } + + function getDrawings(req, res) { + Drawing.find({}).sort({createdAt: -1}).exec((err, result) => { + if (result) { + req.result = result; + res.json(req.result); + } else { + res.status(500).send("Something went wrong while retrieving all drawings from the database."); + } + }); + } + + function getTwelveMostRecentDrawings(req, res) { + Drawing.find({}).sort({createdAt: -1}).limit(12).exec((err, result) => { + if (result) { + req.result = result; + res.json(req.result); + } else { + res.status(500).send("Something went wrong while retrieving all drawings from the database."); + } + }); + } + + }; \ No newline at end of file diff --git a/server/models/drawing.js b/server/models/drawing.js index 2d62307..ab62bea 100644 --- a/server/models/drawing.js +++ b/server/models/drawing.js @@ -3,10 +3,10 @@ const mongoose = require('mongoose'); let drawingSchema = mongoose.Schema({ - byUsername: { type : String , required : true }, - drawingName: { type : String , required : true }, - drawingData: { type : String , required : true }, - createdAt: Date + byUsername: {type: String, required: true}, + drawingName: {type: String, required: true}, + drawingData: {type: String, required: true}, + createdAt: Date }); diff --git a/server/models/user.js b/server/models/user.js index 7c0d692..f23dca8 100644 --- a/server/models/user.js +++ b/server/models/user.js @@ -4,11 +4,11 @@ const mongoose = require('mongoose'); let userSchema = mongoose.Schema({ local: { - email: { type : String , unique : true, required : true }, - password: { type : String , unique : false, required : true }, - username: { type : String , unique : true, required : true }, + email: {type: String, unique: true, required: true}, + password: {type: String, unique: false, required: true}, + username: {type: String, unique: true, required: true}, joinDate: Date, - token: String + token: String }, resetPasswordToken: String, resetPasswordExpires: Date diff --git a/server/routes.js b/server/routes.js index c339e8a..753de96 100644 --- a/server/routes.js +++ b/server/routes.js @@ -3,30 +3,30 @@ const userHandle = require('./api/auth/userHandle'); const drawHandle = require('./api/draw/drawingHandle'); module.exports = function (app) { - - app.post('/api/signup', (req, res, next) => { - userHandle.handle(req, res); - }); - - app.post('/api/login', (req, res, next) => { - userHandle.handle(req, res); - }); - - app.get('/api/user', (req, res, next) => { - userHandle.handle(req, res); - }); - - - app.post('/api/drawing', (req, res, next) => { - drawHandle.handle(req, res); - }); - - app.get('/api/drawing', (req, res, next) => { - drawHandle.handle(req, res); - }); - - app.get('/api/drawingLimited', (req, res, next) => { - drawHandle.handle(req, res); - }); + + app.post('/api/signup', (req, res, next) => { + userHandle.handle(req, res); + }); + + app.post('/api/login', (req, res, next) => { + userHandle.handle(req, res); + }); + + app.get('/api/user', (req, res, next) => { + userHandle.handle(req, res); + }); + + + app.post('/api/drawing', (req, res, next) => { + drawHandle.handle(req, res); + }); + + app.get('/api/drawing', (req, res, next) => { + drawHandle.handle(req, res); + }); + + app.get('/api/drawingLimited', (req, res, next) => { + drawHandle.handle(req, res); + }); }; \ No newline at end of file diff --git a/spec/support/jasmine.json b/spec/support/jasmine.json index 1a4529c..fa39732 100644 --- a/spec/support/jasmine.json +++ b/spec/support/jasmine.json @@ -1,11 +1,11 @@ { - "spec_dir": "spec", - "spec_files": [ - "client/app/**/*[sS]pec.js" - ], - "helpers": [ - "helpers/**/*.js" - ], - "stopSpecOnExpectationFailure": false, - "random": false + "spec_dir": "spec", + "spec_files": [ + "client/app/**/*[sS]pec.js" + ], + "helpers": [ + "helpers/**/*.js" + ], + "stopSpecOnExpectationFailure": false, + "random": false } diff --git a/webpack.config.js b/webpack.config.js index 58666c1..cea2334 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,29 +1,29 @@ -var path = require('path'); +var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { - devtool: 'inline-source-map', - entry: {}, - module: { - loaders: [ - { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' }, - { test: /\.html$/, loader: 'raw' }, - { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap'}, - { test: /\.css$/, loader: 'style!css' } + devtool: 'inline-source-map', + entry: {}, + module: { + loaders: [ + {test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel'}, + {test: /\.html$/, loader: 'raw'}, + {test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap'}, + {test: /\.css$/, loader: 'style!css'} + ] + }, + plugins: [ + new HtmlWebpackPlugin({ + template: 'client/index.html', + inject: 'body', + hash: true + }), + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module, count) { + return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1; + } + }) ] - }, - plugins: [ - new HtmlWebpackPlugin({ - template: 'client/index.html', - inject: 'body', - hash: true - }), - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module, count) { - return module.resource && module.resource.indexOf(path.resolve(__dirname, 'client')) === -1; - } - }) - ] }; diff --git a/webpack.dev.config.js b/webpack.dev.config.js index d71d494..c0e78bd 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -1,15 +1,15 @@ var webpack = require('webpack'); -var path = require('path'); -var config = require('./webpack.config'); +var path = require('path'); +var config = require('./webpack.config'); config.output = { - filename: '[name].bundle.js', - publicPath: '/', - path: path.resolve(__dirname, 'client') + filename: '[name].bundle.js', + publicPath: '/', + path: path.resolve(__dirname, 'client') }; config.plugins = config.plugins.concat([ - new webpack.HotModuleReplacementPlugin() + new webpack.HotModuleReplacementPlugin() ]); module.exports = config; diff --git a/webpack.dist.config.js b/webpack.dist.config.js index 140c462..066621f 100644 --- a/webpack.dist.config.js +++ b/webpack.dist.config.js @@ -1,19 +1,19 @@ var webpack = require('webpack'); -var path = require('path'); -var config = require('./webpack.config'); +var path = require('path'); +var config = require('./webpack.config'); config.output = { - filename: '[name].bundle.js', - publicPath: '', - path: path.resolve(__dirname, 'dist') + filename: '[name].bundle.js', + publicPath: '', + path: path.resolve(__dirname, 'dist') }; config.plugins = config.plugins.concat([ - new webpack.optimize.UglifyJsPlugin({ - mangle: { - except: ['$super', '$', 'exports', 'require', 'angular'] - } - }) + new webpack.optimize.UglifyJsPlugin({ + mangle: { + except: ['$super', '$', 'exports', 'require', 'angular'] + } + }) ]); module.exports = config;