More UI tweaks

src/Aspire.Dashboard/Components/Pages/Token.razor

@@ -7,7 +7,7 @@
 <PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Token.PageTitle)" Loc="@Loc" /></PageTitle>
 
 <div class="token-backdrop">
-    <EditForm EditContext="@EditContext" OnValidSubmit="@SubmitAsync">
+    <EditForm EditContext="@EditContext" OnValidSubmit="@SubmitAsync" FormName="token_validation">
         <DataAnnotationsValidator />
         <div class="token-form-container">
             <div class="token-logo">
@@ -18,25 +18,28 @@
                     <h1><ApplicationName ResourceName="@nameof(Dashboard.Resources.Token.Header)" Loc="@Loc" /></h1>
                 </div>
                 <div class="token-entry">
-                    <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">
+                    <FluentTextField @ref="_tokenTextField" Id="token-text-field" @bind-Value="_formModel.Token"
+                                     Placeholder="@Loc[nameof(Dashboard.Resources.Token.TextFieldPlaceholder)]"
+                                     TextFieldType="TextFieldType.Password" Class="token-entry-text" />
+                </div>
+                <div class="token-validation">
+                    <FluentValidationMessage For="() => _formModel.Token" />
+                </div>
+                <div class="token-entry-footer">
+                    <a href="#" id="helpLink">@Loc[nameof(Dashboard.Resources.Token.WhereIsMyTokenLinkText)]</a>
+                    <FluentButton Appearance="Appearance.Accent" Type="ButtonType.Submit">@Loc[nameof(Dashboard.Resources.Token.LogInButtonText)]</FluentButton>
+                    <FluentTooltip Anchor="helpLink" Position="TooltipPosition.Bottom">
                         <div class="token-help-container">
                             <div class="token-help-text">@Loc[nameof(Dashboard.Resources.Token.HelpPopupText)]</div>
-                            <img class="token-help-image" src="/TempScreenshot.png"
+                            <img class="token-help-image" src="/img/TokenExample.png"
                                  alt="@Loc[nameof(Dashboard.Resources.Token.HelpScreenshotAltText)]" />
+                            <FluentAnchor Href="https://go.microsoft.com/fwlink/?linkid=2265718" Target="_blank"
+                                          Appearance="Appearance.Hypertext">
+                                @Loc[nameof(Dashboard.Resources.Token.MoreInfoLinkText)]
+                            </FluentAnchor>
                         </div>
                     </FluentTooltip>
                 </div>
-                <div class="token-entry-footer">
-                    <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>
-
-            <div class="token-validation">
-                <ValidationMessage For="() => _formModel.Token" />
-                <div class="validation-message">@_validationFailedMessage</div>
             </div>
         </div>
     </EditForm>

src/Aspire.Dashboard/Components/Pages/Token.razor.cs

@@ -15,7 +15,7 @@ public partial class Token : IAsyncDisposable
 {
     private IJSObjectReference? _jsModule;
     private FluentTextField? _tokenTextField;
-    private string? _validationFailedMessage;
+    private ValidationMessageStore? _messageStore;
 
     private TokenFormModel _formModel = default!;
     public EditContext EditContext { get; private set; } = default!;
@@ -51,11 +51,9 @@ protected override async Task OnInitializedAsync()
 
         _formModel = new TokenFormModel();
         EditContext = new EditContext(_formModel);
-        EditContext.OnValidationStateChanged += (s, e) =>
-        {
-            // Clear the validation message when the form changes.
-            _validationFailedMessage = null;
-        };
+        _messageStore = new(EditContext);
+        EditContext.OnValidationRequested += (s, e) => _messageStore.Clear();
+        EditContext.OnFieldChanged += (s, e) => _messageStore.Clear(e.FieldIdentifier);
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -89,13 +87,13 @@ private async Task SubmitAsync()
             }
             else
             {
-                _validationFailedMessage = Loc[nameof(Dashboard.Resources.Token.InvalidTokenErrorMessage)];
+                _messageStore?.Add(() => _formModel.Token!, Loc[nameof(Dashboard.Resources.Token.InvalidTokenErrorMessage)]);
             }
         }
         else
         {
             Logger.LogWarning("Unexpected result from validateToken: {Result}", result);
-            _validationFailedMessage = Loc[nameof(Dashboard.Resources.Token.UnexpectedValidationError)];
+            _messageStore?.Add(() => _formModel.Token!, Loc[nameof(Dashboard.Resources.Token.UnexpectedValidationError)]);
         }
     }
 

src/Aspire.Dashboard/Components/Pages/Token.razor.css

@@ -13,18 +13,15 @@
 
 .token-form-container {
     --error: #FF8181;
-    --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);
+    padding: calc((var(--design-unit) * 4px));
     border-radius: calc(var(--design-unit) * 2.5px);
     display: grid;
     grid-column-gap: calc(var(--design-unit) * 3px);
-    grid-template-columns: auto auto;
-    grid-template-rows: auto auto;
+    grid-template-columns: auto 25em;
+    grid-template-rows: auto;
     grid-template-areas:
-        "logo entry"
-        "empty validation";
+        "logo entry";
     box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
 }
 
@@ -33,7 +30,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
+    padding: calc(var(--design-unit) * 1px);
+    padding-left: 0;
 }
 
 .token-entry-container {
@@ -47,39 +45,50 @@
 
 .token-entry-header {
     color: var(--accent-foreground-rest);
-    max-width: var(--token-entry-max-width);
+}
+
+.token-entry-header h1 {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
 }
 
 .token-entry {
     grid-area: entry;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: calc(var(--design-unit) * 1px);
 }
 
 ::deep .token-entry-text {
-    width: var(--token-entry-max-width);
+    width: 100%;
 }
 
 .token-entry-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-right: 24px; /* Align with right edge of text box */
 }
 
 .token-validation {
-    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);
+}
+
+/* For the validation failed message that is not inside the FluentValidationMessage component */
+.token-validation > .validation-message {
+    color: var(--error);
+    font-size: var(--type-ramp-minus-1-font-size);
+    display: flex;
+    align-items: center;
+    column-gap: 4px;
 }
 
 .token-help-container {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--design-unit) * 1px);
+    gap: calc(var(--design-unit) * 2px);
+    margin: calc(var(--design-unit) * 2px);
+}
+
+.token-help-container fluent-anchor {
+    width: fit-content;
 }
 
 .version-info {

src/Aspire.Dashboard/Resources/Token.resx

@@ -149,4 +149,7 @@
   <data name="UnexpectedValidationError" xml:space="preserve">
     <value>Unexpected error when validating the token</value>
   </data>
+  <data name="WhereIsMyTokenLinkText" xml:space="preserve">
+    <value>Where do I find my token?</value>
+  </data>
 </root>

src/Aspire.ProjectTemplates/templates/aspire-starter/.template.config/localize/templatestrings.en.json

@@ -4,8 +4,8 @@
   "description": "A project template for creating a .NET Aspire app with a Blazor web frontend and web API backend service, optionally using Redis for caching.",
   "symbols/Framework/description": "The target framework for the project.",
   "symbols/Framework/choices/net8.0/description": "Target net8.0",
-  "symbols/UseRedisCache/displayName": "_Use Redis for caching (requires Docker)",
-  "symbols/UseRedisCache/description": "Configures whether to setup the application to use Redis for caching. Requires Docker to run locally.",
+  "symbols/UseRedisCache/displayName": "_Use Redis for caching (requires a supported container runtime)",
+  "symbols/UseRedisCache/description": "Configures whether to setup the application to use Redis for caching. Requires a supported continer runtime to run locally, see https://aka.ms/dotnet/aspire/containers for more details.",
   "symbols/CreateTestsProject/displayName": "Create a _tests project",
   "symbols/CreateTestsProject/description": "Configures whether to create a project for integration tests using the AppHost project.",
   "symbols/appHostHttpPort/description": "Port number to use for the HTTP endpoint in launchSettings.json of the AppHost project.",