From 4880943b95f6664ba0f7ee71f9ea21b6c9d013e6 Mon Sep 17 00:00:00 2001
From: ropiteauxi <ivan.ropiteaux@cgi.com>
Date: Thu, 1 Jun 2023 17:43:15 +0200
Subject: [PATCH] Add on edge device screen and allow file download

---
 .../Devices/ConnectionStringDialog.razor      |  30 ++++-
 .../EdgeDevices/ConnectionStringDialog.razor  | 105 +++++++++++++-----
 .../Services/EdgeDeviceClientService.cs       |   4 +-
 .../Services/IEdgeDeviceClientService.cs      |   2 +-
 4 files changed, 105 insertions(+), 36 deletions(-)

diff --git a/src/AzureIoTHub.Portal.Client/Pages/Devices/ConnectionStringDialog.razor b/src/AzureIoTHub.Portal.Client/Pages/Devices/ConnectionStringDialog.razor
index 8b7e45f04..6c08a1b12 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/Devices/ConnectionStringDialog.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/Devices/ConnectionStringDialog.razor
@@ -1,8 +1,10 @@
 @using AzureIoTHub.Portal.Models.v10
 @using AzureIoTHub.Portal.Shared.Models.v10
+@using System.Text
 
 @inject ClipboardService ClipboardService
 @inject IDeviceClientService DeviceClientService
+@inject IJSRuntime JS
 
 <div class="ConnectionString-dialog">
     <MudDialog>
@@ -38,15 +40,15 @@
                             {
                                 <MudItem xs="12">
                                     <MudText Style="text-decoration:underline"><b>Certificate Pem</b></MudText>
-                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.CertificatePem))"/>
+                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPemFile"/>
                                 </MudItem>
                                 <MudItem Class="mt-0" xs="12">
                                     <MudText Style="text-decoration:underline"><b>Public Key</b></MudText>
-                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.PublicKey))"/>
+                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPublicKeyFile"/>
                                 </MudItem>
                                 <MudItem Class="mt-0" xs="12">
                                     <MudText Style="text-decoration:underline"><b>Private Key</b></MudText>
-                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(credentials.CertificateCredentials.PrivateKey))"/>
+                                    <MudTextField @bind-Value="@credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPrivateKeyFile"/>
                                 </MudItem>
                             }
                         }
@@ -83,5 +85,27 @@
         }
     }
 
+    private async Task DownloadPemFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(credentials.CertificateCredentials.CertificatePem)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "certificate.pem", stream);
+    }
+
+    private async Task DownloadPublicKeyFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(credentials.CertificateCredentials.PublicKey)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "key.pub", stream);
+    }
+
+    private async Task DownloadPrivateKeyFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(credentials.CertificateCredentials.PrivateKey)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "key", stream);
+    }
+
+
     void Cancel() => MudDialog.Cancel();
 }
diff --git a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/ConnectionStringDialog.razor b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/ConnectionStringDialog.razor
index dc3e2b363..668e82a70 100644
--- a/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/ConnectionStringDialog.razor
+++ b/src/AzureIoTHub.Portal.Client/Pages/EdgeDevices/ConnectionStringDialog.razor
@@ -1,6 +1,7 @@
-@using AzureIoTHub.Portal.Models.v10
-@using AzureIoTHub.Portal.Shared.Constants;
-
+@using AzureIoTHub.Portal.Shared.Models.v10
+@using AzureIoTHub.Portal.Models.v10
+@using System.Text
+@inject IJSRuntime JS
 @inject ClipboardService ClipboardService
 @inject IEdgeDeviceClientService EdgeDeviceClientService
 @inject PortalSettings Portal
@@ -10,52 +11,75 @@
         <MudCard Outlined="true">
             <MudCardContent>
                 <MudGrid>
-                    @if (Portal.CloudProvider.Equals(CloudProviders.Azure))
+                    @if (Credentials.AuthenticationMode != null && AuthenticationMode.SymmetricKey.Equals(Credentials.AuthenticationMode))
                     {
-                        <MudItem xs="12">
-                            <MudText Style="text-decoration:underline"><b>Service Endpoint</b></MudText>
-                            <MudTextField @bind-Value="@Credentials.ProvisioningEndpoint" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.ProvisioningEndpoint))" />
-                        </MudItem>
-                        <MudItem Class="mt-0" xs="12">
-                            <MudText Style="text-decoration:underline"><b>Registration Id</b></MudText>
-                            <MudTextField @bind-Value="@Credentials.RegistrationID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.RegistrationID))" />
-                        </MudItem>
-                        <MudItem Class="mt-0" xs="12">
-                            <MudText Style="text-decoration:underline"><b>Scope Id</b></MudText>
-                            <MudTextField @bind-Value="@Credentials.ScopeID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.ScopeID))" />
-                        </MudItem>
-                        <MudItem Class="mt-0" xs="12">
-                            <MudText Style="text-decoration:underline"><b>Symmetric Key</b></MudText>
-                            <MudTextField @bind-Value="@Credentials.SymmetricKey" Variant="Variant.Text" InputType="InputType.Password" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricKey))" />
-                        </MudItem>
+                        @if (Credentials.SymmetricCredentials != null)
+                        {
+                            <MudItem xs="12">
+                                <MudText Style="text-decoration:underline"><b>Service Endpoint</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.SymmetricCredentials.ProvisioningEndpoint" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.ProvisioningEndpoint))"/>
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Registration Id</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.SymmetricCredentials.RegistrationID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.RegistrationID))"/>
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Scope Id</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.SymmetricCredentials.ScopeID" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.ScopeID))"/>
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Symmetric Key</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.SymmetricCredentials.SymmetricKey" Variant="Variant.Text" InputType="InputType.Password" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(Credentials.SymmetricCredentials.SymmetricKey))"/>
+                            </MudItem>
+                        }
                     }
-                    else if (Portal.CloudProvider.Equals(CloudProviders.AWS))
+                    else
                     {
+                        @if (Credentials.CertificateCredentials != null)
+                        {
+                            <MudItem xs="12">
+                                <MudText Style="text-decoration:underline"><b>Certificate Pem</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.CertificateCredentials.CertificatePem" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPemFile"/>
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Public Key</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.CertificateCredentials.PublicKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPublicKeyFile"/>
+                            </MudItem>
+                            <MudItem Class="mt-0" xs="12">
+                                <MudText Style="text-decoration:underline"><b>Private Key</b></MudText>
+                                <MudTextField @bind-Value="@Credentials.CertificateCredentials.PrivateKey" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Download" OnAdornmentClick="DownloadPrivateKeyFile"/>
+                            </MudItem>
+                        }
+
+                        <div style="border-bottom:1px solid var(--mud-palette-lines-default);width: 90%;text-align: center;margin: auto;">
+                            <span style="background-color: white;transform:translateY(10px);display: inline-block;padding: 0px 10px">OR</span>
+                        </div>
+
                         <MudItem xs="12">
                             @if (string.IsNullOrEmpty(EnrollementScriptCommand))
                             {
                                 <MudText>Quick connect</MudText>
-                                <br />
+                                <br/>
                                 <MudAlert Severity="Severity.Normal">
                                     Quiclky connect your Edge device on the platform by executing one command.
                                 </MudAlert>
-                                <br />
+                                <br/>
                                 <MudButton Variant="Variant.Outlined" Color="Color.Primary" Style="margin:0.5em;display: block; margin-left: auto; margin-right: auto" OnClick="GetEnrollmentScriptCommand">Get the magic command</MudButton>
                             }
                             else
                             {
-                                <br />
+                                <br/>
                                 <MudText Style="text-decoration:underline"><b>Operating system</b></MudText>
                                 <MudSelect T="string" @bind-Value="@templateName" Text="Operating system" SelectedValuesChanged="GetEnrollmentScriptCommand">
-                                    <MudSelectItem  Value="@("debian_11_bullseye")">Debian 11 (Bulleseye)</MudSelectItem>
+                                    <MudSelectItem Value="@("debian_11_bullseye")">Debian 11 (Bulleseye)</MudSelectItem>
                                 </MudSelect>
-                                <br />
+                                <br/>
                                 <MudAlert Severity="Severity.Info">
-                                    Copy this command line above and paste it into the device prompt.<br />
+                                    Copy this command line above and paste it into the device prompt.<br/>
                                     <b>Note that you should have administrative rights on the device to execute the command.</b>
                                 </MudAlert>
-                                <br />
-                                <MudTextField @bind-Value="@EnrollementScriptCommand" Style="text-overflow: ellipsis" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(EnrollementScriptCommand))" />
+                                <br/>
+                                <MudTextField @bind-Value="@EnrollementScriptCommand" Style="text-overflow: ellipsis" Class="mt-0" Variant="Variant.Text" Margin="Margin.Dense" ReadOnly="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.ContentCopy" OnAdornmentClick="@(() => ClipboardService.WriteTextAsync(EnrollementScriptCommand))"/>
                             }
                         </MudItem>
                     }
@@ -76,7 +100,7 @@
 
     [Parameter] public string deviceId { get; set; } = default!;
 
-    private SymmetricCredentials Credentials = new SymmetricCredentials();
+    private DeviceCredentials Credentials = new DeviceCredentials();
 
     public string EnrollementScriptCommand { get; set; } = default!;
 
@@ -103,5 +127,26 @@
         EnrollementScriptCommand = $"curl -s {url} | bash";
     }
 
+    private async Task DownloadPemFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.CertificatePem)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "certificate.pem", stream);
+    }
+
+    private async Task DownloadPublicKeyFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.PublicKey)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "key.pub", stream);
+    }
+
+    private async Task DownloadPrivateKeyFile()
+    {
+        var stream = new DotNetStreamReference(stream: new MemoryStream(
+            Encoding.UTF8.GetBytes(Credentials.CertificateCredentials.PrivateKey)));
+        await JS.InvokeVoidAsync("downloadFileFromStream", "key", stream);
+    }
+
     void Close() => MudDialog.Cancel();
 }
diff --git a/src/AzureIoTHub.Portal.Client/Services/EdgeDeviceClientService.cs b/src/AzureIoTHub.Portal.Client/Services/EdgeDeviceClientService.cs
index 8fd6146f7..18adca77a 100644
--- a/src/AzureIoTHub.Portal.Client/Services/EdgeDeviceClientService.cs
+++ b/src/AzureIoTHub.Portal.Client/Services/EdgeDeviceClientService.cs
@@ -44,9 +44,9 @@ public Task DeleteDevice(string deviceId)
             return this.http.DeleteAsync($"api/edge/devices/{deviceId}");
         }
 
-        public Task<SymmetricCredentials> GetEnrollmentCredentials(string deviceId)
+        public Task<DeviceCredentials> GetEnrollmentCredentials(string deviceId)
         {
-            return this.http.GetFromJsonAsync<SymmetricCredentials>($"api/edge/devices/{deviceId}/credentials")!;
+            return this.http.GetFromJsonAsync<DeviceCredentials>($"api/edge/devices/{deviceId}/credentials")!;
         }
 
         public Task<string> GetEnrollmentScriptUrl(string deviceId, string templateName)
diff --git a/src/AzureIoTHub.Portal.Client/Services/IEdgeDeviceClientService.cs b/src/AzureIoTHub.Portal.Client/Services/IEdgeDeviceClientService.cs
index 8167a37dd..c2788a763 100644
--- a/src/AzureIoTHub.Portal.Client/Services/IEdgeDeviceClientService.cs
+++ b/src/AzureIoTHub.Portal.Client/Services/IEdgeDeviceClientService.cs
@@ -20,7 +20,7 @@ public interface IEdgeDeviceClientService
 
         Task DeleteDevice(string deviceId);
 
-        Task<SymmetricCredentials> GetEnrollmentCredentials(string deviceId);
+        Task<DeviceCredentials> GetEnrollmentCredentials(string deviceId);
 
         Task<string> GetEnrollmentScriptUrl(string deviceId, string templateName);