From bd0d69cdc361b8e7ccc6b74fc40c1850be15bf8a Mon Sep 17 00:00:00 2001
From: Mia Winter <mia@miawinter.de>
Date: Wed, 27 Mar 2024 10:19:49 +0100
Subject: [PATCH] Improved Manage API Page

---
 Wave/Components/Pages/ManageApi.razor         | 40 +++++++++++--------
 .../Components/Pages/ManageApi.de-DE.resx     |  3 ++
 .../Resources/Components/Pages/ManageApi.resx |  3 ++
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/Wave/Components/Pages/ManageApi.razor b/Wave/Components/Pages/ManageApi.razor
index 552ed57..8bd4f5a 100644
--- a/Wave/Components/Pages/ManageApi.razor
+++ b/Wave/Components/Pages/ManageApi.razor
@@ -14,8 +14,29 @@
 
 <PageTitle>@(Localizer["Title"] + TitlePostfix)</PageTitle>
 
+<ModalComponent Id="@ModalId">
+	<ChildContent>
+		<EditForm id="NewApiKey" method="post" FormName="NewApiKey" Model="@Model" OnValidSubmit="CreateApiKey">
+			<InputLabelComponent LabelText="@Localizer["Name_Label"]">
+				<InputText @bind-Value="@Model.Name" placeholder="@Localizer["Name_Placeholder"]"
+						   required aria-required max="128" class="input input-bordered"
+						   autocomplete="off" />
+			</InputLabelComponent>
+		</EditForm>
+	</ChildContent>
+	<Actions>
+		<button type="submit" form="NewApiKey" class="btn btn-primary">@Localizer["Submit"]</button>
+	</Actions>
+</ModalComponent>
+
 <h1 class="text-3xl lg:text-5xl font-light mb-6 text-primary">@Localizer["Title"]</h1>
 
+<div class="flex gap-2 mb-3">
+	<button class="btn btn-sm btn-primary" onclick="@(ModalId).showModal()">
+		@Localizer["Key_Label"]
+	</button>
+</div>
+
 <section>
 	@if (!string.IsNullOrWhiteSpace(Key)) {
 		<Alert CanRemove="true" Type="Alert.MessageType.Information">
@@ -53,7 +74,7 @@
 							<AntiforgeryToken />
 							<button type="submit" class="btn btn-sm btn-square btn-error" title="@Localizer["Delete_Label"]">
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-									<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+									<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd"/>
 								</svg>
 							</button>
 						</form>
@@ -61,21 +82,6 @@
 				</tr>
 			}
 			</tbody>
-			<tfoot>
-			<tr>
-				<td colspan="3">
-					<EditForm method="post" FormName="NewApiKey" Model="@Model" OnValidSubmit="CreateApiKey">
-						<div class="join join-vertical md:join-horizontal w-full">
-							<span class="btn no-animation join-item">@Localizer["Name_Label"]</span>
-							<InputText @bind-Value="@Model.Name" placeholder="@Localizer["Name_Placeholder"]"
-							           required aria-required max="128" class="input input-bordered join-item" 
-							           autocomplete="off" />
-							<button type="submit" class="btn btn-primary join-item">@Localizer["Submit"]</button>
-						</div>
-					</EditForm>
-				</td>
-			</tr>
-			</tfoot>
 		</table>
 	</div>
 </section>
@@ -89,6 +95,8 @@
 	private List<ApiKey> ApiKeys { get; set; } = [];
 
 	private string? Key { get; set; }
+	
+	private static string ModalId => "CreateApiKeyDialog";
 
 	protected override async Task OnInitializedAsync() {
 		await using var context = await ContextFactory.CreateDbContextAsync();
diff --git a/Wave/Resources/Components/Pages/ManageApi.de-DE.resx b/Wave/Resources/Components/Pages/ManageApi.de-DE.resx
index 786c9b4..3b64d50 100644
--- a/Wave/Resources/Components/Pages/ManageApi.de-DE.resx
+++ b/Wave/Resources/Components/Pages/ManageApi.de-DE.resx
@@ -128,4 +128,7 @@
     <data name="Delete_Error" xml:space="preserve">
         <value>Unerwarteter Fehler beim Versuch einen API-Schlüssel zu löschen</value>
     </data>
+    <data name="Key_Label" xml:space="preserve">
+        <value>API-Schlüssel erstellen</value>
+    </data>
 </root>
\ No newline at end of file
diff --git a/Wave/Resources/Components/Pages/ManageApi.resx b/Wave/Resources/Components/Pages/ManageApi.resx
index ba9cd72..f988ff5 100644
--- a/Wave/Resources/Components/Pages/ManageApi.resx
+++ b/Wave/Resources/Components/Pages/ManageApi.resx
@@ -131,4 +131,7 @@
     <data name="Delete_Success" xml:space="preserve">
         <value>API Key has been deleted</value>
     </data>
+    <data name="Key_Label" xml:space="preserve">
+        <value>Create API Key</value>
+    </data>
 </root>
\ No newline at end of file