Finished the last of the most common template pages.

MudBlazor · Jun 23, 2024 · 42a416d · 42a416d
1 parent 1d546a8
commit 42a416d
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 43 deletions.
diff --git a/src/mudblazor/MudBlazor.Template.Client/Pages/Weather.razor b/src/mudblazor/MudBlazor.Template.Client/Pages/Weather.razor
@@ -26,7 +26,7 @@
 }
 else
 {
-  <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0">
+  <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0" AllowUnsorted="false">
         <HeaderContent>
             <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
             <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ForgotPassword.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ForgotPassword.razor
@@ -14,24 +14,24 @@
 
 <PageTitle>Forgot your password?</PageTitle>
 
-<h1>Forgot your password?</h1>
-<h2>Enter your email.</h2>
-<MudDivider />
-<div class="row">
-    <div class="col-md-4">
-        <EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
-            <DataAnnotationsValidator />
-            <ValidationSummary class="text-danger" role="alert" />
+<MudText Typo="Typo.h3" GutterBottom="true">Forgot your password?</MudText>
 
-            <div class="form-floating mb-3">
-                <InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
-                <label for="email" class="form-label">Email</label>
-                <ValidationMessage For="() => Input.Email" class="text-danger" />
-            </div>
-            <button type="submit" class="w-100 btn btn-lg btn-primary">Reset password</button>
-        </EditForm>
-     </div>
-</div>
+<MudText Typo="Typo.body1" GutterBottom="true">Enter your email.</MudText>
+
+<EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
+    <DataAnnotationsValidator />
+
+    <MudGrid>
+        <MudItem md="12">
+            <MudStaticTextField For="@(() => Input.Email)" @bind-Value="Input.Email"
+                                Label="Email" Placeholder="[email protected]"
+                                UserAttributes="@(new() { { "autocomplete", "username" }, { "aria-required", "true" } } )" />
+        </MudItem>
+        <MudItem md="12">
+            <MudStaticButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" FormAction="FormAction.Submit">Reset password</MudStaticButton>
+        </MudItem>
+    </MudGrid>
+</EditForm>
 
 @code {
     [SupplyParameterFromForm]

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ForgotPasswordConfirmation.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ForgotPasswordConfirmation.razor
@@ -2,7 +2,6 @@
 
 <PageTitle>Forgot password confirmation</PageTitle>
 
-<h1>Forgot password confirmation</h1>
-<p>
-    Please check your email to reset your password.
-</p>
+<MudText Typo="Typo.h3" GutterBottom="true">Forgot password confirmation</MudText>
+
+<MudText Typo="Typo.body1" GutterBottom="true">Please check your email to reset your password.</MudText>
diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/DeletePersonalData.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/DeletePersonalData.razor
@@ -22,7 +22,6 @@
 
 <EditForm Model="Input" FormName="delete-user" OnValidSubmit="OnValidSubmitAsync" method="post">
     <DataAnnotationsValidator />
-    <ValidationSummary class="text-danger" role="alert" />
 
     <MudGrid>
         @if (requirePassword)

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/EnableAuthenticator.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/EnableAuthenticator.razor
@@ -43,7 +43,7 @@ else
                 Scan the QR Code or enter this key into your two factor authenticator app. Spaces and casing do not matter:
             </MudText>
 
-            <MudAlert Variant="Variant.Text" Severity="Severity.Info">@sharedKey</MudAlert>
+            <MudAlert Variant="Variant.Text" Severity="Severity.Info" Icon="@Icons.Material.Filled.Key">@sharedKey</MudAlert>
 
             <MudText Typo="Typo.body2">
                 Learn how to <MudLink Target="_blank" Href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</MudLink>.

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/Index.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Manage/Index.razor
@@ -25,7 +25,7 @@
         <MudItem md="12">
             <MudStaticTextField For="@(() => Input.PhoneNumber)" @bind-Value="Input.PhoneNumber"
                                 Label="Phone Number" HelperText="Please enter your phone number."
-                                UserAttributes="@(new() { { "autocomplete", "tel" } } )" />
+                                UserAttributes="@(new() { { "autocomplete", "tel-national" } } )" />
         </MudItem>
         <MudItem md="12">
             <MudStaticButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" FormAction="FormAction.Submit">Save</MudStaticButton>

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Register.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/Register.razor
@@ -51,7 +51,6 @@
     </MudItem>
     <MudItem md="6">
         <MudText Typo="Typo.body1" GutterBottom="true">Use another service to register.</MudText>
-        <MudDivider />
         <ExternalLoginPicker />
     </MudItem>
 </MudGrid>

diff --git a/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ResendEmailConfirmation.razor b/src/mudblazor/MudBlazor.Template/Components/Account/Pages/ResendEmailConfirmation.razor
@@ -14,24 +14,26 @@
 
 <PageTitle>Resend email confirmation</PageTitle>
 
-<h1>Resend email confirmation</h1>
-<h2>Enter your email.</h2>
-<MudDivider />
+<MudText Typo="Typo.h3" GutterBottom="true">Resend email confirmation</MudText>
+
+<MudText Typo="Typo.body1" GutterBottom="true">Enter your email.</MudText>
+
 <StatusMessage Message="@message" />
-<div class="row">
-    <div class="col-md-4">
-        <EditForm Model="Input" FormName="resend-email-confirmation" OnValidSubmit="OnValidSubmitAsync" method="post">
-            <DataAnnotationsValidator />
-            <ValidationSummary class="text-danger" role="alert" />
-            <div class="form-floating mb-3">
-                <InputText @bind-Value="Input.Email" class="form-control" aria-required="true" placeholder="[email protected]" />
-                <label for="email" class="form-label">Email</label>
-                <ValidationMessage For="() => Input.Email" class="text-danger" />
-            </div>
-            <button type="submit" class="w-100 btn btn-lg btn-primary">Resend</button>
-        </EditForm>
-    </div>
-</div>
+
+<EditForm Model="Input" FormName="resend-email-confirmation" OnValidSubmit="OnValidSubmitAsync" method="post">
+    <DataAnnotationsValidator />
+
+    <MudGrid>
+        <MudItem md="12">
+            <MudStaticTextField For="@(() => Input.Email)" @bind-Value="Input.Email"
+                                Label="Email" Placeholder="[email protected]"
+                                UserAttributes="@(new() { { "autocomplete", "true" }, { "aria-required", "true" } } )" />
+        </MudItem>
+        <MudItem md="12">
+            <MudStaticButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" FormAction="FormAction.Submit">Resend</MudStaticButton>
+        </MudItem>
+    </MudGrid>
+</EditForm>
 
 @code {
     private string? message;