Feedback, localization, etc

dotnet · Mar 28, 2024 · ae4da9c · ae4da9c
1 parent d6d1734
commit ae4da9c
Show file tree

Hide file tree

Showing 22 changed files with 872 additions and 15 deletions.
diff --git a/src/Aspire.Dashboard/Aspire.Dashboard.csproj b/src/Aspire.Dashboard/Aspire.Dashboard.csproj
@@ -70,6 +70,11 @@
       <AutoGen>True</AutoGen>
       <DependentUpon>Resources.resx</DependentUpon>
     </Compile>
+    <Compile Update="Resources\Token.Designer.cs">
+      <DependentUpon>Token.resx</DependentUpon>
+      <DesignTime>True</DesignTime>
+      <AutoGen>True</AutoGen>
+    </Compile>
     <Compile Update="Resources\StructuredLogs.Designer.cs">
       <DesignTime>True</DesignTime>
       <AutoGen>True</AutoGen>
@@ -142,6 +147,13 @@
       <Generator>PublicResXFileCodeGenerator</Generator>
       <LastGenOutput>Resources.Designer.cs</LastGenOutput>
     </EmbeddedResource>
+    <EmbeddedResource Update="Resources\Token.resx">
+      <XlfOutputItem>EmbeddedResource</XlfOutputItem>
+      <SubType>Designer</SubType>
+      <LastGenOutput>Token.Designer.cs</LastGenOutput>
+      <XlfSourceFormat>Resx</XlfSourceFormat>
+      <Generator>PublicResXFileCodeGenerator</Generator>
+    </EmbeddedResource>
     <EmbeddedResource Update="Resources\StructuredLogs.resx">
       <XlfSourceFormat>Resx</XlfSourceFormat>
       <XlfOutputItem>EmbeddedResource</XlfOutputItem>

diff --git a/src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor b/src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor
@@ -1,4 +1,5 @@
 @using Aspire.Dashboard.Resources
+@using Aspire.Dashboard.Utils
 @inject IStringLocalizer<Dialogs> Loc
 
 <FluentStack Orientation="Orientation.Vertical" Style="display: contents">
@@ -8,5 +9,5 @@
         <FluentRadio Value="@Aspire.Dashboard.Model.ThemeManager.ThemeSettingDark">@Loc[nameof(Dialogs.SettingsDialogDarkTheme)]</FluentRadio>
     </FluentRadioGroup>
     <div style="height: 100%;"></div>
-    <div class="version">@string.Format(Loc[nameof(Dialogs.SettingsDialogVersion)], s_version)</div>
+    <div class="version">@string.Format(Loc[nameof(Dialogs.SettingsDialogVersion)], VersionHelpers.DashboardDisplayVersion)</div>
 </FluentStack>
diff --git a/src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs b/src/Aspire.Dashboard/Components/Dialogs/SettingsDialog.razor.cs
@@ -1,7 +1,6 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using Aspire.Dashboard.Extensions;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
@@ -13,7 +12,6 @@ namespace Aspire.Dashboard.Components.Dialogs;
 public partial class SettingsDialog : IDialogContentComponent, IAsyncDisposable
 {
     private string _currentSetting = ThemeManager.ThemeSettingSystem;
-    private static readonly string? s_version = typeof(SettingsDialog).Assembly.GetDisplayVersion();
 
     private IJSObjectReference? _jsModule;
     private IDisposable? _themeChangedSubscription;

diff --git a/src/Aspire.Dashboard/Components/Pages/Token.razor b/src/Aspire.Dashboard/Components/Pages/Token.razor
@@ -1,8 +1,10 @@
 @page "/token"
+@using Aspire.Dashboard.Utils
 @layout EmptyLayout
 @attribute [AllowAnonymous]
+@inject IStringLocalizer<Dashboard.Resources.Token> Loc
 
-<PageTitle>.NET Aspire Token Validation</PageTitle>
+<PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Token.PageTitle)" Loc="@Loc" /></PageTitle>
 
 <div class="token-backdrop">
     <EditForm EditContext="@EditContext" OnValidSubmit="@GetToken">
@@ -12,20 +14,26 @@
                 <AspireLogo Height="128" Width="128" />
             </div>
             <div class="token-entry-container">
+                <div class="token-entry-header">
+                    <h1><ApplicationName ResourceName="@nameof(Dashboard.Resources.Token.Header)" Loc="@Loc" /></h1>
+                </div>
+                <div class="token-entry-instructions">
+                    Please enter the dashboard token to log in
+                </div>
                 <div class="token-entry">
-                    <FluentTextField @ref="_tokenTextField" @bind-Value="_formModel.Token" Placeholder="Enter token..." Class="token-entry-text" />
+                    <FluentTextField @ref="_tokenTextField" @bind-Value="_formModel.Token" Placeholder="@Loc[nameof(Dashboard.Resources.Token.TextFieldPlaceholder)]" Class="token-entry-text" />
                     <FluentIcon id="inlineHelpIcon" Value="@(new Icons.Regular.Size20.QuestionCircle())" />
                     <FluentTooltip Anchor="inlineHelpIcon" Position="TooltipPosition.Right">
                         <div class="token-help-container">
-                            <div class="token-help-text">Look for your token in the console output:</div>
+                            <div class="token-help-text">@Loc[nameof(Dashboard.Resources.Token.HelpPopupText)]</div>
                             <img class="token-help-image" src="/TempScreenshot.png"
-                                 alt="Screenshot of console output showing where to find the dashboard frontend token" />
+                                 alt="@Loc[nameof(Dashboard.Resources.Token.HelpScreenshotAltText)]" />
                         </div>
                     </FluentTooltip>
                 </div>
                 <div class="token-entry-footer">
-                    <a href="https://go.microsoft.com/fwlink/?linkid=2265718" target="_blank">More Info</a>
-                    <FluentButton Appearance="Appearance.Accent" Type="ButtonType.Submit">Submit</FluentButton>
+                    <a href="https://go.microsoft.com/fwlink/?linkid=2265718" target="_blank">@Loc[nameof(Dashboard.Resources.Token.MoreInfoLinkText)]</a>
+                    <FluentButton Appearance="Appearance.Accent" Type="ButtonType.Submit">@Loc[nameof(Dashboard.Resources.Token.LogInButtonText)]</FluentButton>
                 </div>
             </div>
 
@@ -35,6 +43,6 @@
         </div>
     </EditForm>
     <div class="version-info">
-        @s_version
+        @VersionHelpers.DashboardDisplayVersion
     </div>
 </div>
diff --git a/src/Aspire.Dashboard/Components/Pages/Token.razor.cs b/src/Aspire.Dashboard/Components/Pages/Token.razor.cs
@@ -1,7 +1,6 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-using Aspire.Dashboard.Extensions;
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
@@ -14,7 +13,6 @@ namespace Aspire.Dashboard.Components.Pages;
 
 public partial class Token : IAsyncDisposable
 {
-    private static readonly string? s_version = typeof(Token).Assembly.GetDisplayVersion();
     private IJSObjectReference? _jsModule;
     private FluentTextField? _tokenTextField;
 

diff --git a/src/Aspire.Dashboard/Components/Pages/Token.razor.css b/src/Aspire.Dashboard/Components/Pages/Token.razor.css
@@ -13,8 +13,9 @@
 
 .token-form-container {
     --error: #FF8181;
-    background-color: var(--neutral-layer-floating);
-    padding: calc((var(--design-unit) * 2px) + var(--type-ramp-base-line-height));
+    --token-entry-max-width: 25em;
+    background-color: var(--neutral-layer-1);
+    padding: calc((var(--design-unit) * 3px) + var(--type-ramp-base-line-height));
     padding-bottom: calc(var(--design-unit) * 2px);
     border-radius: calc(var(--design-unit) * 2.5px);
     display: grid;
@@ -36,7 +37,6 @@
 }
 
 .token-entry-container {
-    --token-entry-max-width: 25em;
     grid-area: entry;
     display: flex;
     flex-direction: column;
@@ -45,6 +45,19 @@
 
 }
 
+.token-entry-header {
+    display: flex;
+    justify-content: center;
+    color: var(--accent-foreground-rest);
+    max-width: var(--token-entry-max-width);
+}
+
+.token-entry-instructions {
+    display: flex;
+    justify-content: center;
+    max-width: var(--token-entry-max-width);
+}
+
 .token-entry {
     grid-area: entry;
     display: flex;
@@ -68,6 +81,7 @@
     grid-area: validation;
     min-height: var(--type-ramp-base-line-height);
     max-width: var(--token-entry-max-width);
+    margin-top: calc(var(--design-unit) * 1px);
 }
 
 .token-help-container {

diff --git a/src/Aspire.Dashboard/Resources/Token.Designer.cs b/src/Aspire.Dashboard/Resources/Token.Designer.cs