[CODE PROPOSAL] Add QR code to new invatation page on faber controller

[ClemCreator]

Hello,
here is my code:
FaberController\Connection\Components\NewConnection.razor

@page "/connections/new"

@layout Connection

@using ZXing;
@using ZXing.QrCode;
@using System.IO;
@using FaberController.Shared.Components.ObjectViewer
@using FaberController.Services
@using Newtonsoft.Json.Linq

@inject FCAgentService AgentService
@inject IJSRuntime JSRuntime

<div class="container">
    <form novalidate autocomplete="false">
        <button type="button" class="btn btn-primary btn-lg btn-block mb-3" @onclick="@OnSubmit" disabled="@(Invitation != null && Invitation.HasValues)">
            Create New Invitation
        </button>
    </form>

    @if (Invitation != null && Invitation.HasValues)
    {
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <ObjectViewer Id="invitationObject" Label="Copy the following invitation object:" ObjectString="@InvitationObject"></ObjectViewer>
                </div>

                <div class="form-group">
                    <label>Alternatively copy the following invitation URL:</label>
                    <div class="input-group">
                        <input id="invitationUrl" type="text" class="form-control" @bind="InvitationUrl" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" @onclick="@(e => copy("#invitationUrl"))">
                                <i class="fas fa-clipboard"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="form-group"> 
                    <label>Or scan the following QR Code:</label>
                    <div/>
                    <object data="@($"data:image/svg+xml;utf8,{Uri.EscapeDataString(QrCodeContent)}")" type="image/svg+xml" width="300" height="300"></object>
                </div>
            </div>
        </div>
    }
</div>

@code {
    public JObject Invitation { get; set; }
    public string InvitationObject { get; set; }
    public string InvitationUrl { get; set; }
    public string QrCodeContent { get; set; }

    public async void OnSubmit()
    {
        Invitation = await AgentService.CreateInvitation();

        if (Invitation != null && Invitation.HasValues)
        {
            InvitationObject = Invitation["invitation"].ToString();
            InvitationUrl = Invitation["invitation_url"].ToString();

            QrCodeContent = GenerateQrCode(InvitationUrl);
        }
        base.StateHasChanged();
    }

    public async void copy(string selector)
    {
        await JSRuntime.InvokeAsync<string>("copyInputValue", selector);
    }

    private string GenerateQrCode(string invitationUrl)
    {
        var qrValue = invitationUrl;

        var barcodeWriter = new BarcodeWriterSvg
            {
                Format = BarcodeFormat.QR_CODE,
                Options = new QrCodeEncodingOptions
                {
                    Height = 300,
                    Width = 300
                }
            };

        var qrCodeImage = barcodeWriter.Write(qrValue);
        var qrCodeContent = qrCodeImage.Content;

        return qrCodeContent;
    }
}

FaberController.csproj :

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="Components\" />
    <Folder Include="Models\" />
    <Folder Include="Services\" />
    <Folder Include="Components\Nav\" />
    <Folder Include="Components\CardList\" />
    <Folder Include="Components\Card\" />
    <Folder Include="wwwroot\data\" />
    <Folder Include="Connection\" />
    <Folder Include="Connection\Components\" />
    <Folder Include="Shared\Components\" />
    <Folder Include="Shared\Components\ComponentNav\" />
    <Folder Include="Enums\" />
    <Folder Include="Schema\" />
    <Folder Include="Schema\Components\" />
    <Folder Include="Shared\Components\ObjectViewer\" />
    <Folder Include="Definition\" />
    <Folder Include="Definition\Components\" />
    <Folder Include="Credential\" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
    <PackageReference Include="ZXing.Net" Version="0.16.9" />
  </ItemGroup>
</Project>

[swcurran]

And this one @amanji ? If appropriate, @ClemTheStudent — will you be submitting a PR?

[amanji]

Please feel free to issue a PR and link this issue