Merge cd0a05e into dd94159

andela · Jul 19, 2018 · 86d1832 · 86d1832
2 parents dd94159 + cd0a05e
commit 86d1832
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 47 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,5 +8,8 @@
         "istanbul"
       ]
     }
-  }
+  },
+  "plugins": [
+    "transform-object-rest-spread"
+  ]
  }
diff --git a/app/controllers/users.js b/app/controllers/users.js
@@ -47,7 +47,8 @@ const signin = (req, res) => {
  * @param {object} req - request object provided by express
  * @param {object} res - response object provided by express
  * @param {function} next - next function for passing the request to next handler
- * @description Controller for handling requests to '/api/auth/login', returns token in response as JSON.
+ * @description Controller for handling requests to '/api/auth/login',
+ * returns token in response as JSON.
  * @param {object} passport - passport with all the startegies registered
  * @description Controller for handling requests to '/api/auth/login',
  * returns token in response as JSON.
@@ -80,7 +81,10 @@ const handleSignUp = (req, res, next) => {
       if (err) return next(err);
       if (!existingUser) {
         const user = new User(req.body);
-        user.avatar = avatarsArray[user.avatar];
+        if (!user.avatar) {
+          // Switch the user's avatar index to an actual avatar url
+          user.avatar = avatarsArray[user.avatar];
+        }
         user.provider = 'local';
         user.save((err, newUser) => {
           if (err) return next(err); // something went wrong saving the new user
@@ -169,8 +173,10 @@ const create = (req, res, next) => {
     }).exec((err, existingUser) => {
       if (!existingUser) {
         const user = new User(req.body);
-        // Switch the user's avatar index to an actual avatar url
-        user.avatar = avatarsArray[user.avatar];
+        if (!user.avatar) {
+          // Switch the user's avatar index to an actual avatar url
+          user.avatar = avatarsArray[user.avatar];
+        }
         user.provider = 'local';
         user.save((err) => {
           if (err) {
@@ -230,7 +236,7 @@ const addDonation = (req, res) => {
         .exec((err, user) => {
         // Confirm that this object hasn't already been entered
           let duplicate = false;
-          for (let i = 0; i < user.donations.length; i++) {
+          for (let i = 0; i < user.donations.length; i += 1) {
             if (user.donations[i].crowdrise_donation_id === req.body.crowdrise_donation_id) {
               duplicate = true;
             }

diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade
@@ -9,11 +9,17 @@ script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/under
 // Materialize
 script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js')
 
+script(type='text/javascript', src='/lib/lodash/lodash.js')
+script(type='text/javascript', src="/lib/cloudinary-core/cloudinary-core.js")
+
 //AngularJS
 script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular.min.js')
 script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular-resource.min.js')
 script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular-cookies.min.js')
 
+script(type='text/javascript', src='/lib/cloudinary_ng/js/angular.cloudinary.js')
+script(type='text/javascript', src="/lib/ng-file-upload/ng-file-upload.js")
+
 //Angular UI
 script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.js')
 script(type='text/javascript', src='/lib/angular-ui-utils/modules/route.js')

diff --git a/backend-test/integration/auth.test.js b/backend-test/integration/auth.test.js
@@ -48,6 +48,7 @@ describe('Auth endpoints', () => {
         name: faker.name.findName(),
         email: faker.internet.email(),
         password: faker.internet.password(),
+        avatar: faker.image.avatar()
       };
 
       request(app)

diff --git a/bower.json b/bower.json
@@ -7,13 +7,16 @@
     "angular-ui-utils": "0.0.4",
     "jquery": "~1.9.1",
     "underscore": "~1.5.2",
-    "materialize": "~1.0.0-rc.2", 
-    "angular-mocks": "~1.7.2"
+    "materialize": "~1.0.0-rc.2",
+    "angular-mocks": "~1.7.2",
+    "cloudinary_ng": "1.x",
+    "ng-file-upload": "^12.2.13"
   },
   "devDependencies": {
     "angular-mocks": "latest"
   },
   "resolutions": {
-    "jquery": "^3.0.0 || ^2.1.4"
+    "jquery": "^3.0.0 || ^2.1.4",
+    "lodash": "3.x"
   }
 }
diff --git a/frontend-test/angular/auth-controller.test.js b/frontend-test/angular/auth-controller.test.js
@@ -9,6 +9,13 @@ describe('AuthController', function () {
       }
     };
   };
+  mockUpload = {
+    upload() {
+      return {
+        data: { url: 'url' }
+      };
+    }
+  };
   beforeEach(inject(function (_$controller_, _$rootScope_, _$location_) {
     // assining providers to global scope
     $scope = _$rootScope_.$new();
@@ -17,7 +24,9 @@ describe('AuthController', function () {
     controller('AuthController', {
       $scope,
       $resource: mockApireq,
-      $location
+      $location,
+      Upload: mockUpload,
+      cloudinary: {}
     });
   }));
 
@@ -29,6 +38,11 @@ describe('AuthController', function () {
     expect($location.path()).toBe('/');
   });
 
+  it('Upload function returns a url', function () {
+    const img = $scope.uploadImage('file/url');
+    expect(img.data.url).toEqual('url');
+  });
+
   it('Should log in the user with the successful data then set the returning token to local storage', function () {
     $scope.user = { name: 'Test User', email: 'test@test', password: 'test123' };
     // listen for calls to the api

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -30,7 +30,12 @@ gulp.task('develop', () => {
 });
 
 gulp.task('compile', () => {
-  const stream = gulp.src(['./**/*.js', '!node_modules/**', '!dist/**/*', '!public/lib/**/*.js', '!test/angular/**/*.js'])
+  const stream = gulp.src([
+    './app/**/*.js',
+    './backend-test/**/*.js',
+    './config/**/*.js',
+    './public/js/*.js'
+  ])
     .pipe(babel({
       presets: ['env'],
       plugins: [
@@ -87,11 +92,11 @@ gulp.task('test:frontend', (done) => {
 
 // Babel task.
 gulp.task('build', () => gulp.src([
-  './**/*.js',
-  '!node_modules/**',
-  '!public/lib/**',
-  '!gulpfile.babel.js',
-  '!bower_components/**/*'
+  './app/**/*.js',
+  './backend-test/**/*.js',
+  './config/**/*.js',
+  './frontend-test/**/*.js',
+  './public/js/*.js'
 ])
   .pipe(sourcemaps.init())
   .pipe(babel())

diff --git a/public/css/style.css b/public/css/style.css
@@ -992,4 +992,21 @@ i {
   border-radius: 3px;
   padding: 8px;
   font-size: 0.9375rem;
-}
+}
+/* Fola imageview */
+.imagepreview {
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  border: 2px solid black;
+  margin-bottom: 10px;
+  background-color: #f1f1f1;
+}
+
+.modal-footer .modal-footer-btn {
+  background-color: #236231;
+  color:white;
+}
+.upload-btn {
+  background-color: #236231;
+}
diff --git a/public/js/app.js b/public/js/app.js
@@ -1,5 +1,5 @@
 /* eslint prefer-arrow-callback: 0, func-names: 0, no-undef: 0, no-var: 0, object-shorthand: 0 */
-angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.directives'])
+angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.directives', 'cloudinary', 'ngFileUpload'])
   .config(['$routeProvider',
       function($routeProvider) {
           $routeProvider.

diff --git a/public/js/controllers/auth.js b/public/js/controllers/auth.js
@@ -1,6 +1,7 @@
 /* eslint prefer-arrow-callback: 0, func-names: 0, no-undef: 0 */
 angular.module('mean.system')
-  .controller('AuthController', ['$scope', '$location', '$resource', function ($scope, $location, $resource) {
+  .controller('AuthController', ['$scope', '$location', '$resource', 'Upload', 'cloudinary', 
+    function ($scope, $location, $resource, Upload, cloudinary) {
     $scope.newUser = {};
     $scope.user = {};
     $scope.authError = '';
@@ -12,6 +13,19 @@ angular.module('mean.system')
       execute: { method: 'POST', hasBody: true }
     });
 
+    $scope.uploadImage = function (profilePic) {
+      const cloudUrl =
+      Upload.upload({
+        url: "https://api.cloudinary.com/v1_1/dffiyhgto/image/upload",
+        data: {
+          upload_preset: 'lupttjwi',
+          secure: true,
+          file: profilePic
+        }
+      });
+      return cloudUrl;
+    }
+
     $scope.logOut = function () {
       localStorage.removeItem('#cfhetusertoken');
       localStorage.removeItem('username');
@@ -28,15 +42,43 @@ angular.module('mean.system')
       return false;
     };
 
+    $scope.imagePreview = '';
+    $scope.viewImage = function () {
+      const file = event.target.files[0];
+      if(file) {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(file);
+        fileReader.onload = function (event) {
+          $scope.imagePreview = event.target.result;
+        };
+      }
+    }
+
     $scope.SignUpUser = function () {
-      SignUp.execute({}, $scope.newUser, function (response) {
-        localStorage.setItem('#cfhetusertoken', response.token);
-        localStorage.setItem('#cfhetUserId', response._id);
-        localStorage.setItem('username', response.name);
-        $location.path('/');
-      }, (error) => {
-        $scope.authError = error.data.message;
-      });
+      const profilePic = $scope.profilePic;
+      // if image is uploaded, save profile picture as avatar
+      if(profilePic){
+        $scope.uploadImage(profilePic).then( function(res) {
+          $scope.newUser.avatar = res.data.url;
+          SignUp.execute({}, $scope.newUser, function (response) {
+            localStorage.setItem('#cfhetusertoken', response.token);
+            localStorage.setItem('#cfhetUserId', response._id);
+            localStorage.setItem('username', response.name);
+            $location.path('/');
+          }, (error) => {
+            console.log(error);
+          });
+        })
+      } else {
+        SignUp.execute({}, $scope.newUser, function (response) {
+          localStorage.setItem('#cfhetusertoken', response.token);
+          localStorage.setItem('#cfhetUserId', response._id);
+          localStorage.setItem('username', response.name);
+          $location.path('/');
+        }, (error) => {
+          console.log(error);
+        });
+      }
     };
 
     $scope.SignInUser = function () {

diff --git a/public/views/signup.html b/public/views/signup.html
@@ -39,33 +39,14 @@ <h3 class="font-bold auth-text">Signup</h3>
             </div>
           </div>
           <div class="col s12">
-            <button data-target="modal1" ng-click="openModal()" class="modal-trigger center-align" id="choose-avatar" >Click to choose an avatar</button>
+            <button data-target="modal1" ng-click="openModal()" class="modal-trigger center-align" id="choose-avatar" >Click to upload profile picture</button>
           </div>
           <div class="auth-input">
             <button class="btn col s12 green darken-4 font-lg font-quick-sand auth-btn">SIGN UP</button>
           </div>
         </form>
       </div>
     </div>
-    <div id="modal1" class="modal modal-signup">
-      <div class="modal-content">
-        <h4>Choose an avatar</h4>
-        <form action="">
-            <ul ng-controller="IndexController" class="avatar-list">
-                <li ng-repeat="avatar in avatars" class="avatars ng-scope">
-                  <label>
-                    <input ng-model="newUser.avatar" class="with-gap" name="avatar" type='radio' value="{{$index}}">
-                      <img ng-src="{{avatar}}">
-                    </input>
-                  </label>
-                </li>
-              </ul>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button data-target="modal1" ng-click="closeModal()" class="modal-close" >Close</button>
-      </div>
-    </div>
     <div>
         <p class="separator">Or</p>
     </div>
@@ -86,6 +67,31 @@ <h4>Choose an avatar</h4>
         </div>
       </a>
     </div>
+    <div id="modal1" class="modal">
+      <div class="modal-content black-text">
+        <h4>Upload profile Picture</h4>
+          <div class="row">
+            <img ng-src="{{imagePreview}}" class="imagepreview" >
+          </div>
+          <div class = "row">
+            <label>Profile Image</label>
+            <div class = "file-field input-field" style="padding: 0 !important;">
+            <div class = "btn upload-btn">
+              <span>Upload</span>
+              <input type="file" ng-change="viewImage()" ngf-select ng-model="profilePic" name="profilePic" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="20MB" />
+            </div>
+
+            <div class = "file-path-wrapper">
+              <input class = "file-path validate" type = "text"
+                placeholder = "Upload Image" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button data-target="modal1" ng-click="closeModal()" class="modal-close modal-footer-btn" >Close</button>
+      </div>
+    </div>
   </section>
 
   <!-- Footer start -->