#218 - Visual state of <LoginInfo while not authenticated or loading …

…profile.
maraf · Mar 8, 2019 · 0353dc9 · 0353dc9
1 parent 55fded0
commit 0353dc9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/src/Money.UI.Blazor/Components/Loading.cshtml b/src/Money.UI.Blazor/Components/Loading.cshtml
@@ -2,16 +2,16 @@
 
 @if (IsOverlay)
 {
-<div class="loading @(IsLoading ? "loading-active" : "")">
-    @ChildContent
-    <div class="mask"></div>
-</div>
+    <div class="loading @(IsLoading ? "loading-active" : "")">
+        @ChildContent
+        <div class="mask"></div>
+    </div>
 }
 else
 {
     if (IsLoading)
     {
-        <i>Loading...</i>
+        @LoadingContent
     }
     else
     {

diff --git a/src/Money.UI.Blazor/Components/Loading.cshtml.cs b/src/Money.UI.Blazor/Components/Loading.cshtml.cs
@@ -26,6 +26,9 @@ public class LoadingBase : BlazorComponent
         [Parameter]
         protected RenderFragment ChildContent { get; set; }
 
+        [Parameter]
+        protected RenderFragment LoadingContent { get; set; } = r => r.AddMarkupContent(1, "<i>Loading...</i>");
+
         public override void SetParameters(ParameterCollection parameters)
         {
             if (Context != null)

diff --git a/src/Money.UI.Blazor/Layouts/LoginInfo.cshtml b/src/Money.UI.Blazor/Layouts/LoginInfo.cshtml
@@ -1,17 +1,33 @@
 @using Money.Layouts
 @inherits LoginInfoBase
 
-<form class="navbar-right" onsubmit="@OnLogoutAsync">
-    <ul class="nav navbar-nav navbar-right">
-        <li>
-            <a href="@Navigator.UrlUserManage()">
-                <Loading Context="@Loading">
-                    User: @(Profile?.UserName ?? "---")
-                </Loading>
-            </a>
-        </li>
-        <li>
-            <button type="button" class="btn btn-link navbar-btn navbar-link" onclick="@OnLogoutAsync">Log out</button>
-        </li>
-    </ul>
-</form>
+@if (IsAuthenticated || Loading.IsLoading)
+{
+    <form class="navbar-right" onsubmit="@OnLogoutAsync">
+        <ul class="nav navbar-nav navbar-right">
+            <Loading Context="@Loading">
+                <LoadingContent>
+                    <li>
+                        <span class="navbar-text">
+                            Loading...
+                        </span>
+                    </li>
+                </LoadingContent>
+                <ChildContent>
+                    @if (Profile != null)
+                    {
+                        <li>
+                            <a href="@Navigator.UrlUserManage()">
+                                <Icon Identifier="user" />
+                                @Profile.UserName
+                            </a>
+                        </li>
+                        <li>
+                            <button type="button" class="btn btn-link navbar-btn navbar-link" onclick="@OnLogoutAsync">Log out</button>
+                        </li>
+                    }
+                </ChildContent>
+            </Loading>
+        </ul>
+    </form>
+}
diff --git a/src/Money.UI.Blazor/Layouts/LoginInfo.cshtml.cs b/src/Money.UI.Blazor/Layouts/LoginInfo.cshtml.cs
@@ -29,7 +29,9 @@ public class LoginInfoBase : BlazorComponent, IDisposable, IEventHandler<UserSig
         [Inject]
         public ApiClient ApiClient { get; set; }
 
-        public ProfileModel Profile { get; private set; }
+        protected ProfileModel Profile { get; private set; }
+        protected bool IsAuthenticated => Profile != null;
+
         protected LoadingContext Loading { get; } = new LoadingContext();
 
         protected async override Task OnInitAsync()