Creating ProjectTeam plugin for TeamScreen

2017-05-18 kkalinowski Comments 1 comment

As I mentioned in the first post of this series, when you are going through IT company, TV screens with a list of running/failing builds aren’t an uncommon thing. Depending on the size of the company you can pass many of them, but all you see it’s just a set of different words, you have not a clue what actually means. You pass these people every day and very often all you know about them are just those build names. That’s why one of the first ideas for TeamScreen plugin was to create a ProjectTeam plugin when you could learn more about project and people involved in it.

Creating plugin was described in the previous posts in this series, so I won’t repeat here myself. Let’s instead think what kind of information we want to display. I wanted to show project name and description, a list of people involved in the project with their photos and list of technologies used in it. Apart from the list of people with photos, all other information will be set in settings screen similar to previous plugins. When it comes to the list of people – it’s time to turn on authentication mechanism. First I merged two Entity Framework context that I had to create a new one:

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using TeamScreen.Data.Entities;

namespace TeamScreen.Data.Context
{
    public class AppDbContext : IdentityDbContext<ApplicationUser>
    {
        public DbSet<PluginSetting> PluginSettings { get; set; }

        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        { }

        protected override void OnModelCreating(ModelBuilder builder)
        {
            builder.Entity<PluginSetting>().HasKey(x => x.Id);
            base.OnModelCreating(builder);
        }
    }
}

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;

using Microsoft.EntityFrameworkCore;

using TeamScreen.Data.Entities;

namespace TeamScreen.Data.Context

{

public class AppDbContext : IdentityDbContext<ApplicationUser>

{

public DbSet<PluginSetting> PluginSettings { get; set; }

public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)

{ }

protected override void OnModelCreating(ModelBuilder builder)

{

builder.Entity<PluginSetting>().HasKey(x => x.Id);

base.OnModelCreating(builder);

}

We will need a full person’s name and his/her photo so we need to add two additional properties to user entity:

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;

namespace TeamScreen.Data.Entities
{
    public class ApplicationUser : IdentityUser
    {
        public string FullName { get; set; }
        public byte[] UserPhoto { get; set; }
    }
}

using Microsoft.AspNetCore.Identity.EntityFrameworkCore;

namespace TeamScreen.Data.Entities

{

public class ApplicationUser : IdentityUser

{

public string FullName { get; set; }

public byte[] UserPhoto { get; set; }

}

After recreating DB with the new schema, I altered Manage and Account controllers and views and set up links to them in the application. Also by decorating SettingsController with [Authorize] attribute, I restricted access to settings only to registered users. The hardest part of developing ProjectTeam plugin was to actually give user ability to upload the photo, store it in DB and then display it on the page. To do that I created a new page when the user can upload his/her photo:

@model SetPasswordViewModel
@{
    ViewData["Title"] = "Change photo";
}

<form asp-controller="Manage" asp-action="ChangePhoto" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"
      enctype="multipart/form-data" class="form-horizontal">
    <h4>Set your photo</h4>
    <hr />
    <fieldset>
        @Html.AntiForgeryToken()
        <legend>Photo</legend>
        <div class="form-group">
            <label for="photo" class="control-label">File name:</label>
            <input class="form-control" name="photo" id="photo" type="file"/>
        </div>
        <p>
            <input type="submit" value="Change"/>
        </p>
    </fieldset>
</form>

@model SetPasswordViewModel

ViewData["Title"] = "Change photo";

}

<form asp-controller="Manage" asp-action="ChangePhoto" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"

enctype="multipart/form-data" class="form-horizontal">

<h4>Set your photo</h4>

<hr />

@Html.AntiForgeryToken()

<legend>Photo</legend>

</div>

<p>

</p>

</fieldset>

</form>

I created standard HTML form with an input of type file and submit button. This page is accessible through ManageController:

[HttpGet]
public IActionResult ChangePhoto()
{
    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ChangePhoto(IFormFile photo)
{
    var memoryStream = new MemoryStream();
    await photo.CopyToAsync(memoryStream);

    var user = await GetCurrentUserAsync();
    user.UserPhoto = memoryStream.ToArray();
    await _userManager.UpdateAsync(user);

    return RedirectToAction("Index");
}

[HttpGet]

public IActionResult ChangePhoto()

{

return View();

}

[HttpPost]

[ValidateAntiForgeryToken]

public async Task<ActionResult> ChangePhoto(IFormFile photo)

{

var memoryStream = new MemoryStream();

await photo.CopyToAsync(memoryStream);

var user = await GetCurrentUserAsync();

user.UserPhoto = memoryStream.ToArray();

await _userManager.UpdateAsync(user);

return RedirectToAction("Index");

}

GET returns previously presented page, whereas POST uses special class IFormFile to copy content to temporary MemoryStream and then get currently logged user and update his/her photo in DB. To display the photo of the given user on a page I use this statement:

<img class="photo" src="@Url.Action("GetByEmail", "Photo", new {user.Email})" />

1	<img class="photo" src="@Url.Action("GetByEmail", "Photo", new {user.Email})" />

The actual photo comes from PhotoController:

using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using TeamScreen.Data.Entities;

namespace TeamScreen.Controllers
{
    public class PhotoController : Controller
    {
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly IHostingEnvironment _hostingEnvironment;

        public PhotoController(UserManager<ApplicationUser> userManager, IHostingEnvironment hostingEnvironment)
        {
            _userManager = userManager;
            _hostingEnvironment = hostingEnvironment;
        }

        public async Task<FileContentResult> GetByEmail(string email)
        {
            var user = await _userManager.Users.FirstOrDefaultAsync(x => x.Email == email);
            if (user?.UserPhoto == null)
                return GetFallBackPhoto();

            return new FileContentResult(user.UserPhoto, "image/jpeg");
        }

        private FileContentResult GetFallBackPhoto()
        {
            var fileName = Path.Combine(_hostingEnvironment.WebRootPath, "images\\fallback_photo.png");
            var content = System.IO.File.ReadAllBytes(fileName);

            return File(content, "image/png");
        }
    }
}

using System.IO;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Hosting;

using Microsoft.AspNetCore.Identity;

using Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;

using TeamScreen.Data.Entities;

namespace TeamScreen.Controllers

{

public class PhotoController : Controller

{

private readonly UserManager<ApplicationUser> _userManager;

private readonly IHostingEnvironment _hostingEnvironment;

public PhotoController(UserManager<ApplicationUser> userManager, IHostingEnvironment hostingEnvironment)

{

_userManager = userManager;

_hostingEnvironment = hostingEnvironment;

}

public async Task<FileContentResult> GetByEmail(string email)

{

var user = await _userManager.Users.FirstOrDefaultAsync(x => x.Email == email);

if (user?.UserPhoto == null)

return GetFallBackPhoto();

return new FileContentResult(user.UserPhoto, "image/jpeg");

}

private FileContentResult GetFallBackPhoto()

{

var fileName = Path.Combine(_hostingEnvironment.WebRootPath, "images\\fallback_photo.png");

var content = System.IO.File.ReadAllBytes(fileName);

return File(content, "image/png");

}

PhotoController returns a photo of the user with given email or in case if the user is not registered in the application or doesn’t provide photo returns a fallback picture.

With all plugin/settings/identity/photos on the place I created this view:

With that, we have another plugin for TeamScreen. Full source code is available on GitHub. Thanks for reading and see you next time!

kkalinowski.net

.NET programmer's blog

Creating ProjectTeam plugin for TeamScreen

2017-05-18 kkalinowski Comments 1 comment

One thought on “Creating ProjectTeam plugin for TeamScreen”

Leave a Reply Cancel reply