added profile picture on profile page

app/client/app.css

@@ -1403,6 +1403,14 @@ nav form input[type="image"]{
     margin-right: 5px;
     float: left;
 }
+.profile-img{
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+}
+.profile-img .avatar-initials{
+    line-height: 100px !important;
+}
 #doorbell-email{
     color: black;
 }

app/client/client.js

@@ -96,7 +96,7 @@ Template.settings.events({
 });
 
 Template.profile.helpers({
-    username: function() {
+    "username": function() {
         return Session.get("username")
     },
     "first_joined": function() {
@@ -137,7 +137,15 @@ Template.profile.helpers({
             })
         });
         return dislikedArr;
-    }
+    },
+    initials: function() {
+        var user = Meteor.user();
+        if (user !== undefined) {
+            return user.profile.username[0].toUpperCase();
+        } else {
+            return "";
+        }
+    },
 });
 
 Template.profile.onCreated(function() {

app/client/templates/profile.html

@@ -4,6 +4,7 @@
       {{> header}}
       <div class="row">
         {{#if loaded}}
+            {{> avatar userId=userId shape="circle" class="profile-img" initials=initials}}
             <h1 id="profile-name">{{username}}</h1>
 
             <div class="col-md-4">