add basic profile put request use purple as main color

src/app/User.ts

@@ -24,7 +24,7 @@ interface Claims {
 
 interface User {
   claims: Claims;
-  customers: string[];
+  customers?: string[];
 }
 
 interface Address {

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -35,6 +35,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
   imports: [
     BrowserAnimationsModule,
     FormsModule,
+    ReactiveFormsModule,
     HttpClientModule,
     ComponentsModule,
     RouterModule,

src/app/components/sidebar/sidebar.component.ts

@@ -89,14 +89,6 @@ export class SidebarComponent implements OnInit {
     appModulesService.showTestData.subscribe((newValue: boolean) => {
       this.showTestData = newValue;
     });
-
-    profileService.currentUser().subscribe((user) => {
-      console.log(user);
-    });
-
-    profileService.currentUser().subscribe((user) => {
-      console.log(user);
-    });
   }
 
   ngOnInit() {

src/app/layouts/admin-layout/admin-layout.component.html

@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <div class="sidebar" data-color="danger" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
+    <div class="sidebar" [attr.data-color]="currentColor" data-background-color="white" data-image="./assets/img/sidebar-1.jpg">
         <app-sidebar></app-sidebar>
         <div class="sidebar-background" style="background-image: url(./assets/img/sidebar-4.jpg)"></div>
     </div>

src/app/layouts/admin-layout/admin-layout.component.ts

@@ -6,6 +6,16 @@ import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 import PerfectScrollbar from 'perfect-scrollbar';
 
+const COLORS = [
+  `danger`,
+  `purple`,
+  `azure`,
+  `green`,
+  `orange`,
+  `rose`,
+  `white`,
+];
+
 @Component({
   selector: 'app-admin-layout',
   templateUrl: './admin-layout.component.html',
@@ -15,8 +25,17 @@ export class AdminLayoutComponent implements OnInit {
   private _router: Subscription;
   private lastPoppedUrl: string;
   private yScrollStack: number[] = [];
+  private colorIndex: number = 1;
+  public currentColor: string = COLORS[this.colorIndex];
 
-  constructor( public location: Location, private router: Router) {}
+  constructor( public location: Location, private router: Router) {
+    // setInterval(() => {
+    //   this.colorIndex = this.colorIndex + 1;
+    //   if (this.colorIndex > COLORS.length - 1) this.colorIndex = 0;
+    //   this.currentColor = COLORS[this.colorIndex];
+    // }, 3000);
+
+  }
 
   ngOnInit() {
       const isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;

src/app/layouts/admin-layout/admin-layout.module.ts

@@ -33,6 +33,7 @@ import {
     CommonModule,
     RouterModule.forChild(AdminLayoutRoutes),
     FormsModule,
+    ReactiveFormsModule,
     MatButtonModule,
     MatRippleModule,
     MatFormFieldModule,

src/app/profile.service.ts

@@ -25,6 +25,10 @@ export class ProfileService {
     return this.uberCache.getRequest(this.requestCurrentUser.bind(this), `/api/v1/profile/events`, 'userUpdated');
   }
 
+  public updateCurrentUser(newUserInfo: User): Observable<RequestStatus> {
+    return this.http.put<RequestStatus>('/api/v1/profile/me', newUserInfo).pipe(catchError(this.handleError));
+  }
+
   private handleError(error: HttpErrorResponse) {
     if (error.error instanceof ErrorEvent) {
       // client or network error
@@ -46,3 +50,8 @@ interface UserResponse {
   status: string;
   user: User
 }
+
+interface RequestStatus {
+  status: string;
+  eventId: string;
+}

src/app/user-profile/user-profile.component.html

@@ -3,12 +3,12 @@
       <div class="row">
           <div class="col-md-8">
               <div class="card">
-                  <div class="card-header card-header-danger">
+                  <div class="card-header card-header-primary">
                       <h4 class="card-title">Edit Profile</h4>
                       <p class="card-category">Complete your profile</p>
                   </div>
                   <div class="card-body">
-                      <form>
+                      <form [formGroup]="profileForm" (ngSubmit)="submitUpdatedUserInfo()">
                           <div class="row">
                               <div class="col-md-5">
                                 <mat-form-field class="example-full-width">
@@ -17,56 +17,63 @@
                               </div>
                               <div class="col-md-3">
                                   <mat-form-field class="example-full-width">
-                                    <input matInput placeholder="Username">
+                                    <input matInput placeholder="Preferred Username" formControlName="preferred_username">
                                   </mat-form-field>
                               </div>
                               <div class="col-md-4">
                                   <mat-form-field class="example-full-width">
-                                    <input matInput placeholder="Email address" type="email">
+                                    <input matInput placeholder="Email address" type="email" value="{{(_currentUser | async)?.claims.email}}" disabled>
                                   </mat-form-field>
                               </div>
                           </div>
                           <div class="row">
                               <div class="col-md-6">
                                 <mat-form-field class="example-full-width">
-                                  <input matInput placeholder="Fist Name" type="text">
+                                  <input matInput placeholder="Fist Name" type="text" formControlName="given_name">
                                 </mat-form-field>
                               </div>
                               <div class="col-md-6">
                                 <mat-form-field class="example-full-width">
-                                  <input matInput placeholder="Last Name" type="text">
+                                  <input matInput placeholder="Last Name" type="text" formControlName="family_name">
                                 </mat-form-field>
                               </div>
                           </div>
-                          <div class="row">
+                          <div formGroupName="address">
-                              <div class="col-md-12">
+                            <div class="row">
-                                <mat-form-field class="example-full-width">
+                                <div class="col-md-12">
-                                  <input matInput placeholder="Adress" type="text">
+                                  <mat-form-field class="example-full-width">
-                                </mat-form-field>
+                                    <input matInput placeholder="Adress" type="text" formControlName="street_address">
-                              </div>
+                                  </mat-form-field>
-                          </div>
+                                </div>
-                          <div class="row">
+                            </div>
-                              <div class="col-md-4">
+                            <div class="row">
-                                <mat-form-field class="example-full-width">
+                                <div class="col-md-3">
-                                  <input matInput placeholder="City" type="text">
+                                  <mat-form-field class="example-full-width">
-                                </mat-form-field>
+                                    <input matInput placeholder="City" type="text" formControlName="locality">
-                              </div>
+                                  </mat-form-field>
-                              <div class="col-md-4">
+                                </div>
-                                <mat-form-field class="example-full-width">
+                                <div class="col-md-3">
-                                  <input matInput placeholder="Country" type="text">
+                                  <mat-form-field class="example-full-width">
-                                </mat-form-field>
+                                    <input matInput placeholder="State" type="text" formControlName="region">
-                              </div>
+                                  </mat-form-field>
-                              <div class="col-md-4">
+                                </div>
-                                <mat-form-field class="example-full-width">
+                                <div class="col-md-3">
-                                  <input matInput placeholder="Postal Code" type="text">
+                                  <mat-form-field class="example-full-width">
-                                </mat-form-field>
+                                    <input matInput placeholder="Country" type="text" formControlName="country">
-                              </div>
+                                  </mat-form-field>
+                                </div>
+                                <div class="col-md-3">
+                                  <mat-form-field class="example-full-width">
+                                    <input matInput placeholder="Postal Code" type="text" formControlName="postal_code">
+                                  </mat-form-field>
+                                </div>
+                            </div>
                           </div>
                           <div class="row">
                               <div class="col-md-12">
                                 <label>About Me</label>
                                 <mat-form-field class="example-full-width">
-                                   <textarea matInput placeholder="Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo."></textarea>
+                                   <textarea matInput placeholder="Bio..."></textarea>
                                  </mat-form-field>
                                   <!-- <div class="form-group">
 
@@ -77,7 +84,7 @@
                                   </div> -->
                               </div>
                           </div>
-                          <button mat-raised-button type="submit" class="btn btn-danger pull-right">Update Profile</button>
+                          <button mat-raised-button type="submit" class="btn btn-primary pull-right">Update Profile</button>
                           <div class="clearfix"></div>
                       </form>
                   </div>
@@ -96,7 +103,7 @@
                       <p class="card-description">
                           Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
                       </p>
-                      <a href="#pablo" class="btn btn-danger btn-round">Follow</a>
+                      <a href="#pablo" class="btn btn-primary btn-round">Follow</a>
                   </div>
               </div>
           </div>

src/app/user-profile/user-profile.component.ts

@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { ProfileService } from '../profile.service';
+import { User } from '../User';
 
 @Component({
   selector: 'app-user-profile',
@@ -6,10 +11,41 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./user-profile.component.css']
 })
 export class UserProfileComponent implements OnInit {
+  private _currentUser: Observable<User>;
+  public profileForm: FormGroup = new FormGroup({
+    given_name: new FormControl(''),
+    family_name: new FormControl(''),
+    middle_name: new FormControl(''),
+    nickname: new FormControl(''),
+    preferred_username: new FormControl(''),
+    birthdate: new FormControl(''),
+    gender: new FormControl(''),
+    phone_number: new FormControl(''),
+    website: new FormControl(''),
+    address: new FormGroup({
+      street_address: new FormControl(''),
+      locality: new FormControl(''),
+      region: new FormControl(''),
+      postal_code: new FormControl(''),
+      country: new FormControl('')
+    })
+  });
 
-  constructor() { }
+
+  constructor(
+    private profileService: ProfileService
+  ) { }
 
   ngOnInit() {
+    this._currentUser = this.profileService.currentUser();
+    this.profileService.currentUser().pipe(take(1)).subscribe((user: User) => {
+      if (user) {
+        this.profileForm.patchValue(user.claims);
+      }
+    });
   }
 
+  submitUpdatedUserInfo() {
+    this.profileService.updateCurrentUser({claims: this.profileForm.value}).subscribe();
+  }
 }