#218 - UI preparation for managing actions at client.

src/Money.UI.Backend/wwwroot/css/site.scss

@@ -449,6 +449,7 @@ h4 {
 
 /* ------ PAGING ------------------------------------------------------------------------------- */
 
+
 .pager {
     margin: 20px 0 40px 0;
 
@@ -464,3 +465,9 @@ h4 {
         margin: 0 16px;
     }
 }
+
+/* ------ USER --------------------------------------------------------------------------------- */
+
+.user {
+    margin: 20px 15px;
+}

src/Money.UI.Blazor/Pages/User/ChangePassword.cshtml

@@ -0,0 +1,28 @@
+@page "/user/changepassword"
+
+<UserHead />
+
+<div class="user">
+    <div class="row">
+        <div class="col-md-6">
+            <form method="post">
+                <div class="form-group">
+                    <label for="OldPassword">Current password</label>
+                    <input class="form-control" autofocus="" type="password" data-val="true" data-val-required="The Current password field is required." id="OldPassword" name="OldPassword">
+                    <span class="text-danger field-validation-valid" data-valmsg-for="OldPassword" data-valmsg-replace="true"></span>
+                </div>
+                <div class="form-group">
+                    <label for="NewPassword">New password</label>
+                    <input class="form-control" type="password" data-val="true" data-val-length="The New password must be at least 4 and at max 100 characters long." data-val-length-max="100" data-val-length-min="4" data-val-required="The New password field is required." id="NewPassword" name="NewPassword">
+                    <span class="text-danger field-validation-valid" data-valmsg-for="NewPassword" data-valmsg-replace="true"></span>
+                </div>
+                <div class="form-group">
+                    <label for="ConfirmPassword">Confirm new password</label>
+                    <input class="form-control" type="password" data-val="true" data-val-equalto="The new password and confirmation password do not match." data-val-equalto-other="*.NewPassword" id="ConfirmPassword" name="ConfirmPassword">
+                    <span class="text-danger field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
+                </div>
+                <button type="submit" class="btn btn-default">Update password</button>
+            </form>
+        </div>
+    </div>
+</div>

src/Money.UI.Blazor/Pages/User/Profile.cshtml

@@ -0,0 +1,25 @@
+@page "/user"
+
+<UserHead />
+
+<div class="user">
+    <div class="row">
+        <div class="col-md-6">
+            <form method="post">
+                <div class="form-group">
+                    <label for="UserName">UserName</label>
+                    <input class="form-control" disabled="" type="text" id="UserName" name="UserName" value="maraf">
+                </div>
+                <div class="form-group">
+                    <label for="Email">Email</label>
+                    <div class="input-group">
+                        <input class="form-control" autofocus="" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" value="">
+                        <span class="input-group-addon" aria-hidden="true"><span class="glyphicon glyphicon-ok text-success"></span></span>
+                    </div>
+                    <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
+                </div>
+                <button type="submit" class="btn btn-default">Save</button>
+            </form>
+        </div>
+    </div>
+</div>

src/Money.UI.Blazor/Pages/User/UserHead.cshtml

@@ -0,0 +1,23 @@
+@inject Navigator Navigator
+@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
+
+<Title Icon="user" Main="User Account" Sub="Change your account settings" />
+
+<TabSet>
+    <Tab Url="@Navigator.UrlUserManage()" CssClass="@GetActiveCssClass(Navigator.UrlUserManage())">
+        Profile
+    </Tab>
+    <Tab Url="@Navigator.UrlUserPassword()" CssClass="@GetActiveCssClass(Navigator.UrlUserPassword())">
+        Password
+    </Tab>
+</TabSet>
+
+@functions
+{
+    string GetActiveCssClass(string url)
+    {
+        string absolute = UriHelper.GetAbsoluteUri();
+        string relative = "/" + UriHelper.ToBaseRelativePath(UriHelper.GetBaseUri(), absolute);
+        return relative == url ? "active" : null;
+    }
+}

src/Money.UI.Blazor/Services/Navigator.cs

@@ -61,6 +61,6 @@ public void OpenAbout()
             => uri.NavigateTo(UrlAbout());
 
         public void OpenUserManage()
-            => OpenExternal(UrlUserManage());
+            => uri.NavigateTo(UrlUserManage());
     }
 }

src/Money.UI.Blazor/Services/NavigatorUrl.cs

@@ -40,7 +40,10 @@ public string UrlAbout()
             => "/about";
 
         public string UrlUserManage()
-            => "/manage";
+            => "/user";
+
+        public string UrlUserPassword()
+            => "/user/changepassword";
 
         #region External