Add profile picture on profile page

src/app/components/profile/profile.component.html

@@ -4,12 +4,12 @@
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
                     <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
                 
                 <span id="username">{{userProfile.username}}</span>
@@ -45,12 +45,13 @@
         <!--on big screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
+                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
                 <span id="username">{{userProfile.username}}</span>
                 <span id="handle">@{{userProfile.handle}}</span>

src/app/components/profile/profile.component.ts

@@ -73,7 +73,9 @@ export class ProfileComponent implements OnInit {
     formData.append('profilePicture', event.target.files[0]);
 
     this.http.post('https://greenvironment.net/upload', formData).subscribe(
-    (response) => console.log(response),
+    async (response: Response) => {
+      this.userProfile.profilePicture = 'https://greenvironment.net/' + (await response.json()).filename;
+    },
     (error) => console.log(error)
   );
   }

src/app/services/profile/profile.service.ts

@@ -81,6 +81,11 @@ export class ProfileService {
       profile.level = response.data.getUser.level;
       profile.friendCount = response.data.getUser.friendCount;
       profile.groupCount = response.data.getUser.groupCount;
+      if (response.data.getUser.profilePicture) {
+        profile.profilePicture = 'https://greenvironment.net/' + response.data.getUser.profilePicture;
+      } else {
+        profile.profilePicture = 'assets/images/account_circle-24px.svg';
+      }
       const temp = new Date(Number(response.data.getUser.joinedAt));
       const date = temp.toLocaleString('en-GB');
       profile.joinedAt = date;

src/assets/images/account_circle-24px.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="account_circle-24px.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1000"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="19.666667"
+     inkscape:cx="3.495666"
+     inkscape:cy="8.6464111"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Layer 1"
+     style="display:inline">
+    <path
+       inkscape:connector-curvature="0"
+       style="opacity:0.98999999;fill:#f9f9f9;fill-opacity:0.99607843"
+       id="path2-3"
+       d="m 12.160208,1.9088359 c -5.5200001,0 -9.9999991,4.4800002 -9.9999991,10.0000001 0,5.520001 4.479999,10.000001 9.9999991,10.000001 5.52,0 10.000001,-4.48 10.000001,-10.000001 0,-5.5199999 -4.480001,-10.0000001 -10.000001,-10.0000001 z"
+       sodipodi:nodetypes="sssss" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     sodipodi:insensitive="true">
+    <a
+       transform="translate(0.16020778,-0.09116412)"
+       id="a822">
+      <path
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1"
+         id="path2"
+         d="M 12,2 C 6.48,2 2,6.48 2,12 2,17.52 6.48,22 12,22 17.52,22 22,17.52 22,12 22,6.48 17.52,2 12,2 Z m 0,3 c 1.66,0 3,1.34 3,3 0,1.66 -1.34,3 -3,3 C 10.34,11 9,9.66 9,8 9,6.34 10.34,5 12,5 Z m 0,14.2 c -2.5,0 -4.71,-1.28 -6,-3.22 0.03,-1.99 4,-3.08 6,-3.08 1.99,0 5.97,1.09 6,3.08 -1.29,1.94 -3.5,3.22 -6,3.22 z" />
+    </a>
+  </g>
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path4" />
+</svg>