From 4839b3248ce8aad83bd06947d0c12e82ddea8d91 Mon Sep 17 00:00:00 2001
From: Rodney Mort <rodneymort@gmail.com>
Date: Sun, 3 Mar 2024 21:22:18 -0800
Subject: [PATCH] IOS fix attempt 2.

---
 Components/CopyButton.razor      | 19 +++++++++++++++++++
 Components/CopyButton.razor.css  | 15 +++++++++++++++
 Components/CopyToClipboard.razor |  7 +++++--
 Components/Pages/Home.razor      |  3 ++-
 4 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 Components/CopyButton.razor
 create mode 100644 Components/CopyButton.razor.css

diff --git a/Components/CopyButton.razor b/Components/CopyButton.razor
new file mode 100644
index 0000000..2df8c93
--- /dev/null
+++ b/Components/CopyButton.razor
@@ -0,0 +1,19 @@
+<a href=""
+   onclick="var el = this;
+            navigator.clipboard.writeText('@Value');"
+
+>
+
+    <MudIcon Icon="@Icons.Material.Filled.ContentCopy" />
+
+</a>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+
+    //onclick description:
+    //assign the anchor element to a variable since settimeout callback function loses the reference to "this"
+    //add a class to give IU feedback to the user hidding the standard copy icon and showing a loader
+    //write the value to clipboard. Due to IOS restrictions, Html native onclick event must be used instead of Blazor event.
+    //add a delay in miliseconds with a callback function that removes the CSS class to hide the loader and display the standard copy icon again
+}
\ No newline at end of file
diff --git a/Components/CopyButton.razor.css b/Components/CopyButton.razor.css
new file mode 100644
index 0000000..4adb513
--- /dev/null
+++ b/Components/CopyButton.razor.css
@@ -0,0 +1,15 @@
+.StandBy {
+    display: inline-block;
+}
+
+.Loader {
+    display: none;
+}
+
+.Copying .StandBy {
+    display: none;
+}
+
+.Copying .Loader {
+    display: inline-block;
+}
diff --git a/Components/CopyToClipboard.razor b/Components/CopyToClipboard.razor
index 3ad3c89..b9f091e 100644
--- a/Components/CopyToClipboard.razor
+++ b/Components/CopyToClipboard.razor
@@ -5,8 +5,7 @@
 
  <MudSnackbarProvider />
 
-@* <MudIconButton OnClick="OnClick" Icon="@Icons.Material.Filled.ContentCopy" Size="Size.Small" /> *@
-<button onclick="@OnClick" style="background-color:lightgray; padding:5px;border-radius: 4px;">Copy</button>
+<MudIconButton OnClick="OnClick" Icon="@Icons.Material.Filled.ContentCopy" Size="Size.Small" />
 
 @code {
 
@@ -25,11 +24,15 @@
         try
         {
             await ClipboardService.CopyToClipboard(TextToCopy);
+
             Snackbar.Add("Password copied!", Severity.Success);
         }
 
         catch(Exception e)
         {
+            Snackbar.Configuration.ShowCloseIcon = true;
+            Snackbar.Configuration.RequireInteraction = true;
+            
             Snackbar.Add(e.Message, Severity.Error);            
         }
 
diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor
index 18841ae..72e30c8 100644
--- a/Components/Pages/Home.razor
+++ b/Components/Pages/Home.razor
@@ -31,7 +31,8 @@
                 </MudField>
                 <MudStack Row="true">
                     <MudSpacer/>
-                    <CopyToClipboard TextToCopy="@pass" />
+                    @* <CopyToClipboard TextToCopy="@pass" /> *@
+                    <CopyButton  Value="@pass"/>
                 </MudStack>
                 </MudStack>
             </MudCardContent>