Skip to content

Commit

Permalink
Add styling to token page
Browse files Browse the repository at this point in the history
  • Loading branch information
@tlmii
tlmii committed Mar 27, 2024
1 parent 402a84a commit b8109dc
Show file tree
Hide file tree
Showing 8 changed files with 216 additions and 9 deletions.
95 changes: 95 additions & 0 deletions src/Aspire.Dashboard/Components/Controls/AspireLogo.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<svg width="@Height" height="@Width" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_449_831" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="22">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.39001 12C4.49001 12 3.67 12.4799 3.22 13.2499L6.67 7.27994L6.6817 7.25982L9.84001 1.79005C10.05 1.43005 10.36 1.11005 10.75 0.880049C11.14 0.650049 11.57 0.550049 12 0.550049C12.86 0.550049 13.7 0.990049 14.17 1.80005L17.33 7.28005L23.67 18.25C23.88 18.62 24 19.05 24 19.5C24 20.88 22.88 22 21.5 22H8.27002C8.27001 22 8.27002 22 8.27002 22H2.5C1.12 22 0 20.88 0 19.5C0 19.05 0.12 18.62 0.33 18.25L3.22 13.2499C3.67 12.4799 4.49001 12 5.39001 12C5.39002 12 5.39001 12 5.39001 12Z" fill="url(#paint0_linear_449_831)" />
</mask>
<g mask="url(#mask0_449_831)">
<path d="M20.06 12H13.72L11 7.28005C10.79 6.91005 10.48 6.59005 10.08 6.37005C8.88998 5.67005 7.35998 6.08005 6.66998 7.28005L9.83998 1.79005C10.05 1.43005 10.36 1.11005 10.75 0.880049C11.14 0.650049 11.57 0.550049 12 0.550049C12.86 0.550049 13.7 0.990049 14.17 1.80005L17.33 7.28005L20.06 12Z" fill="url(#paint1_linear_449_831)" />
<g filter="url(#filter0_dd_449_831)">
<path d="M5.38997 11.9999H13.72L11 7.27994C10.79 6.90994 10.48 6.58994 10.08 6.36994C8.88997 5.66994 7.35997 6.07994 6.66997 7.27994L3.21997 13.2499C3.66997 12.4799 4.48997 11.9999 5.38997 11.9999Z" fill="url(#paint2_linear_449_831)" />
<path d="M21.5 22C22.88 22 24 20.88 24 19.5C24 19.05 23.88 18.62 23.67 18.25L20.06 12L13.72 11.9999L17.33 18.25C17.55 18.62 17.67 19.05 17.67 19.5C17.67 20.88 16.55 22 15.17 22H21.5Z" fill="url(#paint3_linear_449_831)" />
</g>
<g filter="url(#filter1_dd_449_831)">
<path d="M17.67 19.5C17.67 20.88 16.55 22 15.17 22H8.27002C9.65002 22 10.77 20.88 10.77 19.5C10.77 19.05 10.65 18.62 10.44 18.25L7.55001 13.25C7.52002 13.19 7.48001 13.14 7.44001 13.08C6.99001 12.42 6.23001 12 5.39001 12H13.72L17.33 18.25C17.55 18.62 17.67 19.05 17.67 19.5Z" fill="url(#paint4_linear_449_831)" />
</g>
<g filter="url(#filter2_dd_449_831)">
<path d="M10.77 19.5C10.77 20.88 9.65 22 8.27 22H2.5C1.12 22 0 20.88 0 19.5C0 19.05 0.12 18.62 0.33 18.25L3.22 13.25C3.67 12.48 4.49 12 5.39 12C6.23 12 6.99 12.42 7.44 13.08C7.48 13.14 7.52 13.19 7.55 13.25L10.44 18.25C10.65 18.62 10.77 19.05 10.77 19.5Z" fill="url(#paint5_linear_449_831)" />
</g>
</g>
<defs>
<filter id="filter0_dd_449_831" x="1.21997" y="4.52808" width="24.78" height="19.9719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.095" />
<feGaussianBlur stdDeviation="0.095" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_449_831" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.5" />
<feGaussianBlur stdDeviation="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0" />
<feBlend mode="normal" in2="effect1_dropShadow_449_831" result="effect2_dropShadow_449_831" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_449_831" result="shape" />
</filter>
<filter id="filter1_dd_449_831" x="3.39001" y="10.5" width="16.28" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.095" />
<feGaussianBlur stdDeviation="0.095" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_449_831" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.5" />
<feGaussianBlur stdDeviation="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0" />
<feBlend mode="normal" in2="effect1_dropShadow_449_831" result="effect2_dropShadow_449_831" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_449_831" result="shape" />
</filter>
<filter id="filter2_dd_449_831" x="-2" y="10.5" width="14.77" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.095" />
<feGaussianBlur stdDeviation="0.095" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_449_831" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="0.5" />
<feGaussianBlur stdDeviation="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0" />
<feBlend mode="normal" in2="effect1_dropShadow_449_831" result="effect2_dropShadow_449_831" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_449_831" result="shape" />
</filter>
<linearGradient id="paint0_linear_449_831" x1="1.88475" y1="11.1667" x2="10.31" y2="23.1443" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBBFF2" />
<stop offset="1" stop-color="#B9AAEE" />
</linearGradient>
<linearGradient id="paint1_linear_449_831" x1="9.6127" y1="-0.685575" x2="16.8764" y2="13.8912" gradientUnits="userSpaceOnUse">
<stop stop-color="#7455DD" />
<stop stop-color="#6745DA" />
<stop offset="1" stop-color="#512BD4" />
</linearGradient>
<linearGradient id="paint2_linear_449_831" x1="7.90532" y1="3.78438" x2="19.1767" y2="23.0023" gradientUnits="userSpaceOnUse">
<stop stop-color="#856AE1" />
<stop offset="1" stop-color="#7455DD" />
</linearGradient>
<linearGradient id="paint3_linear_449_831" x1="7.90532" y1="3.78438" x2="19.1767" y2="23.0023" gradientUnits="userSpaceOnUse">
<stop stop-color="#856AE1" />
<stop offset="1" stop-color="#7455DD" />
</linearGradient>
<linearGradient id="paint4_linear_449_831" x1="5.4257" y1="9.22222" x2="13.2216" y2="21.4193" gradientUnits="userSpaceOnUse">
<stop stop-color="#A895E9" />
<stop offset="1" stop-color="#9780E5" />
</linearGradient>
<linearGradient id="paint5_linear_449_831" x1="1.88475" y1="11.1667" x2="10.31" y2="23.1443" gradientUnits="userSpaceOnUse">
<stop stop-color="#CBBFF2" />
<stop offset="1" stop-color="#B9AAEE" />
</linearGradient>
</defs>
</svg>

@code {
[Parameter]
public int Height { get; set; } = 24;

[Parameter]
public int Width { get; set; } = 24;
}
3 changes: 3 additions & 0 deletions src/Aspire.Dashboard/Components/Layout/EmptyLayout.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@inherits LayoutComponentBase
@Body
<FluentTooltipProvider />
39 changes: 31 additions & 8 deletions src/Aspire.Dashboard/Components/Pages/Token.razor
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,40 @@
@page "/token"
@layout EmptyLayout
@attribute [AllowAnonymous]

<PageTitle>Token!</PageTitle>

<div class="token-form-container">
<div class="token-backdrop">
<EditForm EditContext="@EditContext" OnValidSubmit="@GetToken">
<DataAnnotationsValidator />

<FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
<FluentTextField @bind-Value="_formModel.Token" Placeholder="Enter token" />
<ValidationMessage For="() => _formModel.Token" />
</FluentStack>

<FluentButton Color="Color.Primary" Type="ButtonType.Submit">Submit</FluentButton>
<div class="token-form-container">
<div class="token-logo">
<AspireLogo Height="128" Width="128" />
</div>
<div class="token-entry-container">
<div class="token-entry">
<FluentTextField @ref="_tokenTextField" @bind-Value="_formModel.Token" Placeholder="Enter token..." 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>
<img class="token-help-image" src="/TempScreenshot.png"
alt="Screenshot of console output showing where to find the dashboard frontend token" />
</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>
</div>
</div>

<div class="token-validation">
<ValidationMessage For="() => _formModel.Token" />
</div>
</div>
</EditForm>
<div class="version-info">
@s_version
</div>
</div>
6 changes: 6 additions & 0 deletions src/Aspire.Dashboard/Components/Pages/Token.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
// 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;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.JSInterop;

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;

private TokenFormModel _formModel = default!;
public EditContext EditContext { get; private set; } = default!;
Expand Down Expand Up @@ -51,6 +55,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
if (firstRender)
{
_jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/Components/Pages/Token.razor.js");

_tokenTextField?.FocusAsync();
}
}

Expand Down
79 changes: 78 additions & 1 deletion src/Aspire.Dashboard/Components/Pages/Token.razor.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,80 @@
.token-backdrop {
background-color: var(--dotnet-purple);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}

.token-form-container {
margin: 50px;
--error: #FF8181;
background-color: var(--neutral-layer-floating);
padding: calc((var(--design-unit) * 2px) + var(--type-ramp-base-line-height));
padding-bottom: calc(var(--design-unit) * 2px);
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-areas:
"logo entry"
"empty validation";
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

.token-logo {
grid-area: logo;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
}

.token-entry-container {
--token-entry-max-width: 25em;
grid-area: entry;
display: flex;
flex-direction: column;
justify-content: center;
gap: calc(var(--design-unit) * 3px);

}

.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);
}

.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);
}

.token-help-container {
display: flex;
flex-direction: column;
gap: calc(var(--design-unit) * 1px);
}

.version-info {
position: fixed;
right: calc(var(--design-unit) * 4px);
bottom: calc(var(--design-unit) * 3px);
color: white;
}
1 change: 1 addition & 0 deletions src/Aspire.Dashboard/Components/_Imports.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@using Aspire.Dashboard
@using Aspire.Dashboard.Components
@using Aspire.Dashboard.Components.Controls
@using Aspire.Dashboard.Components.Layout
@using Microsoft.Extensions.Localization

@* Require authorization for all pages of the web app *@
Expand Down
Binary file added src/Aspire.Dashboard/wwwroot/TempScreenshot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/Aspire.Dashboard/wwwroot/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ fluent-toolbar[orientation=horizontal] {
}

:root {
--dotnet-purple: #512bd4;

--log-critical: #F8ECEB;
--log-error: #F8ECEB;
--log-warning: #FBF3DD;
Expand Down

0 comments on commit b8109dc

Please sign in to comment.