From 549d9d7e99084906aa027c278a6438ebe0ba28fd Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Sun, 23 May 2021 14:15:38 -0500
Subject: [PATCH] Updated some UI.

Updated app loading UI.

Updated UI for various authentication states.

Updated authentication buttons in the client.
---
 src/MultiShop/Client/App.razor                | 11 +++++-
 .../Client/Pages/Authentication.razor         | 20 ++++++-----
 src/MultiShop/Client/Shared/NavMenu.razor     | 36 ++++++++++++-------
 src/MultiShop/Client/wwwroot/index.html       | 13 ++++++-
 4 files changed, 57 insertions(+), 23 deletions(-)

diff --git a/src/MultiShop/Client/App.razor b/src/MultiShop/Client/App.razor
index 8ec7b44..826065d 100644
--- a/src/MultiShop/Client/App.razor
+++ b/src/MultiShop/Client/App.razor
@@ -25,7 +25,16 @@
             }
             else
             {
-                <p>Loading modules...</p>
+                <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100vw; height: 100vh;">
+                    <div class="my-1">
+                        <div class="spinner-border text-success" role="status">
+                            <span class="sr-only">Loading...</span>
+                        </div>
+                    </div>
+                    <div class="my-1">
+                        Downloading shop modules...
+                    </div>
+                </div>
             }
         </Found>
         <NotFound>
diff --git a/src/MultiShop/Client/Pages/Authentication.razor b/src/MultiShop/Client/Pages/Authentication.razor
index 9f262c7..d201654 100644
--- a/src/MultiShop/Client/Pages/Authentication.razor
+++ b/src/MultiShop/Client/Pages/Authentication.razor
@@ -5,21 +5,25 @@
 
 <RemoteAuthenticatorView Action="@Action">
     <LoggingIn>
-        <div class="d-flex justify-content-center flex-column" style="width: 100%;">
-            <div class="spinner-border text-primary mx-auto my-2" role="status">
-                <span class="sr-only">Loading...</span>
+        <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100%;">
+            <div class="my-1">
+                <div class="spinner-grow text-primary" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
             </div>
-            <div class="mx-auto my-2">
+            <div class="my-1 text-muted">
                 Hang on just a sec. We're sending you to go login!
             </div>
         </div>
     </LoggingIn>
     <Registering>
-        <div class="d-flex justify-content-center flex-column" style="width: 100%;">
-            <div class="spinner-border text-primary mx-auto my-2" role="status">
-                <span class="sr-only">Loading...</span>
+        <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100%;">
+            <div class="my-1">
+                <div class="spinner-grow text-primary" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
             </div>
-            <div class="mx-auto my-2">
+            <div class="my-1 text-muted">
                 Hang on just a sec. We're sending you to go sign up!
             </div>
         </div>
diff --git a/src/MultiShop/Client/Shared/NavMenu.razor b/src/MultiShop/Client/Shared/NavMenu.razor
index eca03cc..28c1761 100644
--- a/src/MultiShop/Client/Shared/NavMenu.razor
+++ b/src/MultiShop/Client/Shared/NavMenu.razor
@@ -29,19 +29,29 @@
                 </NavLink>
             </li>
         </ul>
-        <AuthorizeView Context="auth">
-            <Authorized>
-                <a href="authentication/profile">Hello, @auth.User.Identity.Name!</a>
-                <button class="nav-link btn btn-link" @onclick="BeginSignOut">Log out</button>
-            </Authorized>
-            <NotAuthorized>
-                @if (Configuration["IdentityServer:Registration"].Equals("enabled"))
-                {
-                    <a class="mx-1" href="authentication/register">Register</a>
-                }
-                <a class="mx-1" href="authentication/login">Log in</a>
-            </NotAuthorized>
-        </AuthorizeView>
+        <ul class="navbar-nav ml-auto">
+            <AuthorizeView Context="auth">
+                <Authorized>
+                    <li class="nav-item">
+                        <a class="nav-link" href="authentication/profile">Hello, @auth.User.Identity.Name!</a>
+                    </li>
+                    <li class="nav-item">
+                        <button class="nav-link btn btn-outline-primary" @onclick="BeginSignOut">Log out</button>
+                    </li>
+                </Authorized>
+                <NotAuthorized>
+                    @if (Configuration["IdentityServer:Registration"].Equals("enabled"))
+                    {
+                        <li class="nav-item">
+                            <a class="nav-link" href="authentication/register">Register</a>
+                        </li>
+                    }
+                    <li class="nav-item">
+                        <a class="nav-link" href="authentication/login">Log in</a>
+                    </li>
+                </NotAuthorized>
+            </AuthorizeView>
+        </ul>
     </div>
 </nav>
 
diff --git a/src/MultiShop/Client/wwwroot/index.html b/src/MultiShop/Client/wwwroot/index.html
index a0a0847..cfb0c45 100644
--- a/src/MultiShop/Client/wwwroot/index.html
+++ b/src/MultiShop/Client/wwwroot/index.html
@@ -12,7 +12,18 @@
 </head>
 
 <body>
-    <div id="app">Loading...</div>
+    <div id="app">
+        <div class="d-flex flex-column align-items-center justify-content-center" style="width: 100vw; height: 100vh;">
+            <div class="my-1">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+            <div class="my-1 text-muted">
+                Loading app...
+            </div>
+        </div>
+    </div>
 
     <div id="blazor-error-ui">
         An unhandled error has occurred.