Fixes #969 : Added photoURL Change for the user profile (#977)

.flake8

@@ -4,5 +4,5 @@ ignore = W191
 exclude =
     .git,
     __pycache__,
-    backend/migrations,
+    api/migrations,
 	site-packages

api/controllers/updateProfile.py

@@ -9,16 +9,15 @@
     PayloadNotFound,
     ImageNotFound,
     UserNotFound,
-    ExtensionNotFound,
-    PNGNotFound
+    ExtensionNotFound
 )
 from api.schemas.user import UpdateUserSchema
 from api.models.user import User
 
 router = Blueprint('updateUserProfile', __name__)
 
 
-@router.route('/profileImage')
+@router.route('/profileImage', methods=['POST'])
 def update_profile_image():
     try:
         data = request.get_json()['data']['attributes']
@@ -31,9 +30,6 @@ def update_profile_image():
     if not data['extension']:
         return ErrorResponse(ExtensionNotFound().message, 422, {'Content-Type': 'application/json'}).respond()
 
-    if data['extension'] != 'png':
-        return ErrorResponse(PNGNotFound().message, 422, {'Content-Type': 'application/json'}).respond()
-
     image = data['image']
     extension = data['extension']
     try:

api/helpers/uploads.py

@@ -14,7 +14,7 @@ def saveToImage(imageFile=None, extension='.png'):
 
     if not os.path.isdir(imageDirectory):
         os.makedirs(imageDirectory)
-    imageFile = imageFile.replace('data:image/png;base64,', '')
+    imageFile = imageFile.replace('data:image/' + extension.split('.')[1] + ';base64,', '')
     imagePath = os.path.join(imageDirectory, imageName)
     image = open(imagePath, "wb")
     image.write(base64.b64decode(imageFile))

api/migrations/versions/0401105d0287_.py → api/migrations/versions/ba0a1f466b08_.py

@@ -1,16 +1,16 @@
 """empty message
 
-Revision ID: 0401105d0287
+Revision ID: ba0a1f466b08
 Revises: 
-Create Date: 2018-06-09 18:48:16.814689
+Create Date: 2018-06-10 15:08:00.600923
 
 """
 from alembic import op
 import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
-revision = '0401105d0287'
+revision = 'ba0a1f466b08'
 down_revision = None
 branch_labels = None
 depends_on = None
@@ -24,6 +24,7 @@ def upgrade():
     sa.Column('password', sa.String(length=100), nullable=True),
     sa.Column('email', sa.String(length=100), nullable=True),
     sa.Column('photoURL', sa.String(), nullable=True),
+    sa.Column('allowed_usage', sa.Integer(), nullable=True),
     sa.PrimaryKeyConstraint('id')
     )
     op.create_table('Badges',

api/schemas/badges.py

@@ -90,4 +90,3 @@ class Meta:
         include_resource_linkage=True,
         type_='User'
     )
-

frontend/app/adapters/profile-image.js

@@ -0,0 +1,12 @@
+import DS from 'ember-data';
+import ENV from '../config/environment';
+
+const { JSONAPIAdapter } = DS;
+const { APP } = ENV;
+
+export default JSONAPIAdapter.extend({
+  host        : APP.backLink,
+  pathForType : () => {
+    return 'update/profileImage';
+  }
+});

frontend/app/components/background-component/def-image-component.js

@@ -2,9 +2,8 @@ import Component from '@ember/component';
 
 export default Component.extend({
   init() {
-    // To be inflated from the backend data
     this.fingerPrint = window.ASSET_FINGERPRINT_HASH;
-    return this._super(...arguments);
+    this._super(...arguments);
   },
   click() {
     let imageId = this.get('image');

frontend/app/components/user-component/my-profile.js

@@ -1,4 +1,26 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+  init() {
+    this._super(...arguments);
+  },
+  actions: {
+    updateProfileImage() {
+      document.getElementById('profileImageSelector').click();
+    },
+
+    profileImageSelected(event) {
+      const reader = new FileReader();
+      const { target } = event;
+      const { files } = target;
+      const [file] = files;
+      const _this = this;
+
+      reader.onload = () => {
+        _this.get('sendProfileImage')(reader.result, file.type.split('/')[1]);
+      };
+
+      reader.readAsDataURL(file);
+    }
+  }
 });

frontend/app/controllers/my-profile.js

@@ -0,0 +1,33 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+  routing : service('-routing'),
+  uid     : '',
+  actions : {
+    updateProfileImage(profileImageData, extension) {
+      const _this = this;
+      const user = this.get('store').peekAll('user');
+      user.forEach(user_ => {
+        _this.set('uid', user_.get('id'));
+      });
+      let profileImage = _this.get('store').createRecord('profile-image', {
+        image     : profileImageData,
+        uid       : _this.uid,
+        extension : '.' + extension
+      });
+      profileImage.save()
+        .then(record => {
+          user.forEach(user_ => {
+            user_.set('photoURL', record.photoURL);
+          });
+        })
+        .catch(err => {
+          let userErrors = profileImage.get('errors.user');
+          if (userErrors !== undefined) {
+            _this.set('userError', userErrors);
+          }
+        });
+    }
+  }
+});

frontend/app/models/profile-image.js

@@ -0,0 +1,10 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  uid       : attr('string'),
+  image     : attr('string'),
+  extension : attr('string'),
+  photoURL  : attr('string')
+});

frontend/app/routes/my-profile.js

@@ -1,4 +1,17 @@
+import Ember from 'ember';
 import Route from '@ember/routing/route';
 
+const { RSVP, set } = Ember;
+
 export default Route.extend({
+  model() {
+    return RSVP.hash({
+      user: this.get('store').peekAll('user').slice(0, 1)[0]
+    });
+  },
+
+  setupController(controller, model) {
+    this._super(...arguments);
+    set(controller, 'user', model.user);
+  }
 });

frontend/app/styles/partials/all.scss

@@ -2,3 +2,4 @@
 @import "footer";
 @import "overrides";
 @import "notifications";
+@import "profile";

frontend/app/styles/partials/profile.scss

@@ -0,0 +1,23 @@
+.profile-image:hover {
+  .profile-change {
+    opacity: 1;
+  }
+
+  img {
+    opacity: 0.3;
+  }
+}
+
+
+.profile-change {
+  bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  padding-top: 50%;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  transition: 0.5s ease;
+  width: 100%;
+}

frontend/app/templates/components/user-component/my-profile.hbs

@@ -1,8 +1,10 @@
 <div class="ui hidden divider"></div>
 <div class="ui width-container">
     <div class="left column">
-      <div class="ui small image">
-          <img src="/images/user.png">
+      <div class="ui small circular image profile-image">
+          <img src="{{user.photoURL}}">
+          <input style="display: none;" id="profileImageSelector" type="file" onchange={{action "profileImageSelected"}}>
+          <div class="profile-change" onclick={{action "updateProfileImage"}}><b>Change</b></div>
       </div>
     </div>
 <div class="ui hidden divider"></div>

frontend/app/templates/my-profile.hbs

@@ -1 +1 @@
-{{user-component/my-profile}}
+{{user-component/my-profile user=user sendProfileImage=(action 'updateProfileImage')}}

frontend/tests/unit/adapters/profile-image-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Adapter | profile image', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let adapter = this.owner.lookup('adapter:profile-image');
+    assert.ok(adapter);
+  });
+});

frontend/tests/unit/controllers/my-profile-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | my-profile', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:my-profile');
+    assert.ok(controller);
+  });
+});

frontend/tests/unit/models/profile-image-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { run } from '@ember/runloop';
+
+module('Unit | Model | profile image', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = run(() => store.createRecord('profile-image', {}));
+    assert.ok(model);
+  });
+});