Refactor Identity Pages to use ServiceStack.Blazor component classes

NetCoreTemplates · Nov 9, 2023 · f15a133 · f15a133
1 parent 7d4508c
commit f15a133
Show file tree

Hide file tree

Showing 35 changed files with 185 additions and 210 deletions.
diff --git a/MyApp/Components/Identity/ExternalLoginPicker.razor b/MyApp/Components/Identity/ExternalLoginPicker.razor
@@ -11,9 +11,9 @@
 {
     <div>
         <p>
-            There are no external authentication services configured. 
-            See this <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?LinkID=532715">article
-            about setting up this ASP.NET application to support logging in via external services</a>.
+            There are no external authentication services configured.
+            See this <HyperLink href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+            about setting up this ASP.NET application to support logging in via external services</HyperLink>.
         </p>
     </div>
 }
@@ -26,7 +26,7 @@ else
             <div class="space-x-2">
                 @foreach (var provider in _externalLogins!)
                 {
-                    <button type="submit" class="@Css.SecondaryButton" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                    <button type="submit" class="@SecondaryButton.Classes" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                 }
             </div>
         </div>

diff --git a/MyApp/Components/Identity/ShowRecoveryCodes.razor b/MyApp/Components/Identity/ShowRecoveryCodes.razor
@@ -1,4 +1,4 @@
-<h3 class="@Css.H3">Recovery codes</h3>
+<Heading3>Recovery codes</Heading3>
 <div class="max-w-xl">
     <StatusMessage Message="@StatusMessage" />
 

diff --git a/MyApp/Components/Layout/ManageLayout.razor b/MyApp/Components/Layout/ManageLayout.razor
@@ -3,9 +3,9 @@
 
 
 <div class="mt-8 mx-auto max-w-screen-lg">
-    <h1 class="@Css.H1">Manage your account</h1>
-    <h4 class="font-semibold text-lg my-2">Change your account settings</h4>
-    <hr class="dark:border-gray-700" />
+    <Heading1>Manage your account</Heading1>
+    <Heading4>Change your account settings</Heading4>
+    <hr class="mt-4 dark:border-gray-700" />
     <div class="flex flex-wrap">
         <div class="grow-0">
             <ManageNavMenu />

diff --git a/MyApp/Css.cs b/MyApp/Css.cs
diff --git a/MyApp/Pages/Account/ConfirmEmail.razor b/MyApp/Pages/Account/ConfirmEmail.razor
@@ -12,7 +12,7 @@
 <PageTitle>Confirm email</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Confirm email</h1>
+    <Heading1>Confirm email</Heading1>
 
     <StatusMessage Message="@statusMessage" />
 </div>

diff --git a/MyApp/Pages/Account/ConfirmEmailChange.razor b/MyApp/Pages/Account/ConfirmEmailChange.razor
@@ -13,7 +13,7 @@
 
 <PageTitle>Confirm email change</PageTitle>
 
-<h1 class="mb-3 @Css.H1">Confirm email change</h1>
+<Heading1>Confirm email change</Heading1>
 
 <div class="mt-8 mx-auto max-w-lg">
     <StatusMessage Message="@_message" />

diff --git a/MyApp/Pages/Account/ExternalLogin.razor b/MyApp/Pages/Account/ExternalLogin.razor
@@ -26,8 +26,8 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <StatusMessage class="mb-3" Message="@_message" />
-    <h1 class="@Css.H1">Register</h1>
-    <h2 class="@Css.H2" id="external-login-title">Associate your @providerDisplayName account.</h2>
+    <Heading1>Register</Heading1>
+    <Heading2 id="external-login-title">Associate your @providerDisplayName account.</Heading2>
 
     <Alert id="external-login-description" Type="AlertType.Information" class="my-4">
         You've successfully authenticated with <strong>@providerDisplayName</strong>.
@@ -39,18 +39,18 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="confirmation-form" Model="Input" OnValidSubmit="OnValidSubmitAsync" FormName="confirmation" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="email" placeholder="Please enter your email." />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="email" placeholder="Please enter your email." />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Register</button>
+                        <PrimaryButton type="submit">Register</PrimaryButton>
                     </div>
                 </div>
             </EditForm>

diff --git a/MyApp/Pages/Account/ForgotPassword.razor b/MyApp/Pages/Account/ForgotPassword.razor
@@ -17,22 +17,22 @@
 <PageTitle>Forgot your password?</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Forgot your password?</h1>
-    <h3 class="@Css.H3">Enter your email.</h3>
+    <Heading1>Forgot your password?</Heading1>
+    <Heading3>Enter your email.</Heading3>
 
     <EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
         <DataAnnotationsValidator />
-        <ValidationSummary class="@Css.ValidationSummary" />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
         <div class="flex flex-col gap-y-4">
             <div>
-                <label for="email" class="@Css.InputLabel">Email</label>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
-                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="[email protected]" />
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="[email protected]" />
                 </div>
-                <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
             </div>
             <div>
-                <button type="submit" class="@Css.PrimaryButton">Reset password</button>
+                <PrimaryButton type="submit">Reset password</PrimaryButton>
             </div>
         </div>
     </EditForm>

diff --git a/MyApp/Pages/Account/ForgotPasswordConfirmation.razor b/MyApp/Pages/Account/ForgotPasswordConfirmation.razor
@@ -3,7 +3,7 @@
 <PageTitle>Forgot password confirmation</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Forgot password confirmation</h1>
+    <Heading1>Forgot password confirmation</Heading1>
 
     <p class="my-4">
         Please check your email to reset your password.

diff --git a/MyApp/Pages/Account/InvalidPasswordReset.razor b/MyApp/Pages/Account/InvalidPasswordReset.razor
@@ -4,7 +4,7 @@
 
 <div class="mt-8 mx-auto max-w-lg">
 
-    <h1 class="@Css.H1">Invalid password reset</h1>
+    <Heading1>Invalid password reset</Heading1>
 
     <p class="my-4">
         The password reset link is invalid.

diff --git a/MyApp/Pages/Account/InvalidUser.razor b/MyApp/Pages/Account/InvalidUser.razor
@@ -4,7 +4,7 @@
 
 <div class="mt-8 mx-auto max-w-lg">
 
-    <h3 class="@Css.H3">Invalid user</h3>
+    <Heading3>Invalid user</Heading3>
 
     <div class="max-w-xl">
         <StatusMessage />

diff --git a/MyApp/Pages/Account/Lockout.razor b/MyApp/Pages/Account/Lockout.razor
@@ -5,7 +5,7 @@
 <div class="mt-8 mx-auto max-w-lg">
 
     <header>
-        <h1 class="@Css.H1">Locked out</h1>
+        <Heading1>Locked out</Heading1>
         <p class="my-4 text-danger">This account has been locked out, please try again later.</p>
     </header>
 

diff --git a/MyApp/Pages/Account/Login.razor b/MyApp/Pages/Account/Login.razor
@@ -17,52 +17,50 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <div class="max-w-xl">
-        <h1 class="mb-3 @Css.H1">
-            Use a local account to log in.
-        </h1>
+        <Heading1>Use a local account to log in.</Heading1>
         <StatusMessage class="mb-3" Message="@errorMessage" />
         <section class="mt-4 sm:shadow overflow-hidden sm:rounded-md">
             <EditForm id="account" Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
                 <div class="px-4 bg-white dark:bg-black sm:p-6">
-                    <ValidationSummary class="@Css.ValidationSummary" />
+                    <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                     <div class="flex flex-col gap-y-4">
                         <div>
                             <div>
-                                <label for="Email" class="@Css.InputLabel">Email</label>
+                                <label for="Email" class="@TextInput.LabelClasses">Email</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="[email protected]" />
+                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="[email protected]" />
                                 </div>
                             </div>
                         </div>
                         <div>
                             <div>
-                                <label for="UserName" class="@Css.InputLabel">Password</label>
+                                <label for="UserName" class="@TextInput.LabelClasses">Password</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="password" />
+                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="password" />
                                 </div>
                             </div>
                         </div>
 
                         <div class="flex items-center justify-between">
                             <div class="flex items-center">
-                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@Css.Checkbox" />
+                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@CheckboxInput.InputClasses" />
                                 <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">Remember Me</label>
                             </div>
                         </div>
 
                         <div>
-                            <button id="login-submit" type="submit" class="@Css.PrimaryButton">Log in</button>
+                            <PrimaryButton id="login-submit" type="submit">Log in</PrimaryButton>
                         </div>
 
                         <div class="mt-8 text-sm">
                             <p class="mb-3">
-                                <a class="@Css.Link" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</a>
+                                <HyperLink class="font-semibold" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a>
+                                <HyperLink class="font-semibold" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</a>
+                                <HyperLink class="font-semibold" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</HyperLink>
                             </p>
                         </div>
                     </div>
@@ -71,7 +69,7 @@
         </section>
         <div class="mt-8">
             <section>
-                <h3 class="@Css.H3">Use another service to log in.</h3>
+                <Heading3>Use another service to log in.</Heading3>
                 <ExternalLoginPicker />
             </section>
         </div>

diff --git a/MyApp/Pages/Account/LoginWith2fa.razor b/MyApp/Pages/Account/LoginWith2fa.razor
@@ -13,7 +13,7 @@
 <PageTitle>Two-factor authentication</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Two-factor authentication</h1>
+    <Heading1>Two-factor authentication</Heading1>
     <StatusMessage Message="@_message" />
     <p class="my-4">Your login is protected with an authenticator app. Enter your authenticator code below.</p>
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
@@ -22,27 +22,27 @@
                 <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
                 <input type="hidden" name="RememberMe" value="@RememberMe" />
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="two-factor-code" class="@Css.InputLabel">Authenticator code</label>
+                        <label for="two-factor-code" class="@TextInput.LabelClasses">Authenticator code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@Css.InputText" autocomplete="off" />
+                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@TextInput.InputClasses" autocomplete="off" />
                         </div>
-                        <ValidationMessage For="() => Input.TwoFactorCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.TwoFactorCode" class="mt-2 text-danger text-sm" />
                     </div>
 
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@Css.Checkbox" />
+                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@CheckboxInput.InputClasses" />
                             <label for="remember-machine" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">
                                 Remember this machine
                             </label>
                         </div>
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
@@ -51,7 +51,7 @@
 </div>
 <p class="mt-4">
     Don't have access to your authenticator device? You can
-    <a id="recovery-code-login" class="@Css.Link" href="/Account/LoginWithRecoveryCode?ReturnUrl=@ReturnUrl">log in with a recovery code</a>.
+    <HyperLink class="font-semibold" id="recovery-code-login" href=@($"/Account/LoginWithRecoveryCode?ReturnUrl={ReturnUrl}")>log in with a recovery code</HyperLink>.
 </p>
 
 @code {

diff --git a/MyApp/Pages/Account/LoginWithRecoveryCode.razor b/MyApp/Pages/Account/LoginWithRecoveryCode.razor
@@ -14,7 +14,7 @@
 <PageTitle>Recovery code verification</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Recovery code verification</h1>
+    <Heading1>Recovery code verification</Heading1>
 
     <StatusMessage Message="@_message" />
     <p class="my-4">
@@ -25,17 +25,17 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm Model="Input" FormName="login-with-recovery-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="recovery-code" class="@Css.InputLabel">Recovery Code</label>
+                        <label for="recovery-code" class="@TextInput.LabelClasses">Recovery Code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@Css.InputText" autocomplete="off" placeholder="RecoveryCode" />
+                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@TextInput.InputClasses" autocomplete="off" placeholder="RecoveryCode" />
                         </div>
-                        <ValidationMessage For="() => Input.RecoveryCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.RecoveryCode" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>