# 7.10: Displaying Profile Photo in the NavBar

The next to modules are optional and are really a design decision. However, it is also a really good learning opportunity for passing data between components that isn't `Parent -> Child` or `Child -> Parent`.

## Return UserForList DTO on Login

In our .API project - in the `AuthService.cs` file, let's modify the login method to make sure we're returning photos with the user:

```csharp
public async Task<User> Login(string username, string password)
{
    var user = await _context.Users.Include(p => p.Photos).FirstOrDefaultAsync(x => x.Username == username);        //  <--- Added Include(p => p.Photos)
```

Now let's open up our old friend the `AuthController.cs` file.

We're going to map the user we're retrieving from the database to a UserForList DTO. We don't want to send back a full user because it has too much information.

Just before the return statement in the `Login()` method, add the following mapping and update the object in the return statent to also return a user:

```csharp
var user = new UserForList
{
    Id = userFromDb.Id,
    Username = userFromDb.Username,
    Specialty = userFromDb.Specialty,
    Age = userFromDb.DateOfBirth.CalculateAge(),
    KnownAs = userFromDb.KnownAs,
    Created = userFromDb.Created,
    LastActive = userFromDb.LastActive,
    City = userFromDb.City,
    State = userFromDb.State,
    PhotoUrl = userFromDb.Photos.FirstOrDefault(p => p.IsMain).Url,
};

return Ok( new { tokenString, user });
```

## Updating the AuthService in Angular

Add a property called `currentUser`, add the user item to local storage, and populate the currentUser property:

```typescript
currentUser: User;

//  ...

login(model: any) {
    return this._http.post<AuthUser>(this.baseUrl + 'auth/login', model, { headers: new HttpHeaders()
      .set('Content-Type', 'application/json') })
      .map(user => {
        if (user) {
          localStorage.setItem('token', user.tokenString);
          localStorage.setItem('user', JSON.stringify(user.user));                      //  <--- Added
          this.decodedToken = this._jwtHelperService.decodeToken(user.tokenString);
          this.currentUser = user.user;                                                 //  <--- Added
          this.userToken = user.tokenString;
        }
      });
}
```

In order to load this information when the page loads, let's also update our root `app.component.ts` file:

```typescript
export class AppComponent implements OnInit {
  constructor(
    private _authService: AuthService,
    private _jwtHelperService: JwtHelperService) {}

  ngOnInit() {
    const token = localStorage.getItem('token');
    const user: User = JSON.parse(localStorage.getItem('user'));

    if (token) {
      this._authService.decodedToken = this._jwtHelperService.decodeToken(token);
    }

    if (user) {
      this._authService.currentUser = user;
    }
}
```

When we logout - we also need to make sure that the user item from local storage is removed along with the token:

Open up `nav.component.ts` file and add the following:

```typescript
logout() {
    this.authService.userToken = null;
    this.authService.currentUser = null;            //  <--- Added
    localStorage.removeItem('token');
    localStorage.removeItem('user');                //  <--- Added
    this._alertify.success('Logged out');
    this.router.navigate(['/home']);
}
```

## Adding Profile Photo in the NavBar

In `nav.component.html`, edit the dropdown `<div>` to the following:

We'll also add some styling in `nav.component.scss`:

```css
img {
    max-height: 50px;
    border: 2px solid white;
    display: inline;
}
```

Now, our profile page is displayed next to the dropdown when we're logged in. But, we're faced with a similar problem: if we change our profile picture - it is updated in the profile tab of our edit profile component - but, the change is not reflected in our navbar.

This is a little trickier since the NavBar is not a parent or a child component of our Photo Editor component. We'll see how to do it next.