[Playground] 177 auth UI component

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Home.razor

@@ -1,5 +1,4 @@
 @page "/"
-@using AzureOpenAIProxy.PlaygroundApp.Components.UI
 
 <PageTitle>Home</PageTitle>
 

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor

@@ -8,6 +8,7 @@
 
     <FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
         <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
+            <ApiKeyInputComponent Id="api-key" @rendermode="InteractiveServer" />
             <ConfigTabComponent @rendermode="InteractiveServer"/>
         </FluentGridItem>
 

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Tests.razor

@@ -1,29 +1,38 @@
-@page "/tests"
-@rendermode InteractiveServer
-
-<h1>Component Tests</h1>
-
-<h2>Debug Button</h2>
-<DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
-<DebugButtonComponent Id="debug-button" Input="@targetValue" />
-
-<h2>Deployment Models</h2>
-<DeploymentModelListComponent Id="debug-deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
-<DebugButtonComponent Id="debug-button-deployment-model-list" Input="@selectedModel" />
-
-@code {
-    private object? targetValue;
-    private string? selectedModel;
-
-    private async Task SetInput(int value)
-    {
-        targetValue = value;
-        await Task.CompletedTask;
-    }
-
-    private async Task SetDeploymentModel(string value)
-    {
-        selectedModel = value;
-        await Task.CompletedTask;
-    }
-}
+@page "/tests"
+@rendermode InteractiveServer
+
+<h1>Component Tests</h1>
+
+<h2>Debug Button</h2>
+<DebugTargetComponent Id="debug-target" OnValueChanged="SetInput" />
+<DebugButtonComponent Id="debug-button" Input="@targetValue" />
+
+<ApiKeyInputComponent Id="api-key-input" OnKeyInput="HandleApiKeyInput" />
+<DebugButtonComponent Id="debug-api-key" Input="@apiKey" />
+
+<h2>Deployment Models</h2>
+<DeploymentModelListComponent Id="debug-deployment-model-list" OnUserOptionSelected="SetDeploymentModel" @rendermode="InteractiveServer" />
+<DebugButtonComponent Id="debug-button-deployment-model-list" Input="@selectedModel" />
+
+@code {
+    private object? targetValue;
+    private string? apiKey;
+    private string? selectedModel;
+
+    private async Task SetInput(int value)
+    {
+        targetValue = value;
+        await Task.CompletedTask;
+    }
+
+    private void HandleApiKeyInput(string apiKeyValue)
+    {
+        apiKey = apiKeyValue;
+    }
+
+    private async Task SetDeploymentModel(string value)
+    {
+        selectedModel = value;
+        await Task.CompletedTask;
+    }
+}

src/AzureOpenAIProxy.PlaygroundApp/Components/UI/ApiKeyInputComponent.razor

@@ -0,0 +1,22 @@
+<FluentTextField Id="@Id" @bind-Value=apiKeyValue TextFieldType="TextFieldType.Password" data-type="GUID" @oninput="SetApiKey" Required="true">API key input</FluentTextField>
+
+@code {
+    private string? apiKeyValue { get; set; }
+
+    [Parameter]
+    public string? Id { get; set; }
+
+    [Parameter]
+    public EventCallback<string> OnKeyInput { get; set; }
+
+    private async Task SetApiKey(ChangeEventArgs e)
+    {
+        apiKeyValue = e.Value!.ToString();
+        if (string.IsNullOrWhiteSpace(apiKeyValue) == true)
+        {
+            return;
+        }
+
+        await OnKeyInput.InvokeAsync(apiKeyValue);
+    }
+}