#218 - UI for login screen.

src/Money.UI.Blazor/Pages/Account/Login.cshtml

@@ -1 +1,48 @@
-@page "/account/login"
+@page "/account/login"
+@inherits LoginBase
+
+<div class="login">
+    <div class="alert alert-info">
+        You can sign in as <strong>demo</strong> user with <strong>demo</strong> password or register your own account.
+    </div>
+
+    <div class="row">
+        <div class="col-md-4">
+            <section>
+                @if (IsError)
+                {
+                    <Alert Title="Error" Message="User name and password don't match." Mode="AlertMode.Error" />
+                }
+
+                <form onsubmit="@OnSubmitAsync">
+                    <div asp-validation-summary="All" class="text-danger"></div>
+                    <div class="form-group">
+                        <label for="UserName">User name</label>
+                        <input id="UserName" class="form-control" type="text" autofocus bind="@UserName" />
+                    </div>
+                    <div class="form-group">
+                        <label for="Password">Password</label>
+                        <input id="Password" class="form-control" type="password" bind="@Password" />
+                    </div>
+                    <div class="form-group">
+                        <div class="checkbox">
+                            <label for="RememberMe">
+                                <input id="RememberMe" type="checkbox" bind="@IsPermanent" />
+                                Remember me?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button type="submit" class="btn btn-primary">Log in</button>
+                        <button type="submit" class="btn btn-default" onclick="@OnDemoSubmitAsync">Login with <strong>demo</strong> user</button>
+                    </div>
+                    <div class="form-group">
+                        <p>
+                            <a href="@Navigator.UrlAccountRegister()">Register as a new user?</a>
+                        </p>
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+</div>

src/Money.UI.Blazor/Pages/Account/Login.cshtml.cs

@@ -0,0 +1,43 @@
+using Microsoft.AspNetCore.Blazor.Components;
+using Money.Services;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Pages
+{
+    public class LoginBase : BlazorComponent
+    {
+        [Inject]
+        internal Navigator Navigator { get; set; }
+
+        [Inject]
+        internal ApiClient ApiClient { get; set; }
+
+        protected string UserName { get; set; }
+        protected string Password { get; set; }
+        protected bool IsPermanent { get; set; }
+
+        protected bool IsError { get; set; }
+
+        protected Task OnSubmitAsync()
+            => LoginAsync(UserName, Password, IsPermanent);
+
+        protected Task OnDemoSubmitAsync()
+            => LoginAsync("demo", "demo", false);
+
+        private async Task LoginAsync(string userName, string password, bool isPermanent)
+        {
+            IsError = false;
+
+            string token = await ApiClient.LoginAsync(userName, password, isPermanent);
+            if (string.IsNullOrEmpty(token))
+            {
+                IsError = true;
+                return;
+            }
+        }
+    }
+}

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

@@ -34,6 +34,11 @@ public ApiClient(HttpClient http, CommandMapper commandMapper, QueryMapper query
             //http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiZGVtbyIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWVpZGVudGlmaWVyIjoiMjhmNGQxNzYtNjg5ZS00ZDRkLTlhMzgtYTg3MGQ5NzFhZDc5IiwiZXhwIjoxNTUyNzI2NDU2LCJpc3MiOiJodHRwczovL2xvY2FsaG9zdCIsImF1ZCI6Imh0dHBzOi8vbG9jYWxob3N0In0.4tSJlngLynld3Ul_HuicpO4zUERjYZ4FFjTrJxfE8Po");
         }
 
+        public Task<string> LoginAsync(string userName, string password, bool isPermanent)
+        {
+            throw new NotImplementedException();
+        }
+
         private Request CreateRequest(Type type, string payload)
             => new Request() { Type = type.AssemblyQualifiedName, Payload = payload };
 

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

@@ -67,6 +67,9 @@ public void OpenUserPassword()
             => uri.NavigateTo(UrlUserPassword());
 
         public void OpenLogin()
-            => uri.NavigateTo("/account/login");
+            => uri.NavigateTo(UrlAccountLogin());
+
+        public void OpenRegister()
+            => uri.NavigateTo(UrlAccountRegister());
     }
 }

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

@@ -45,6 +45,12 @@ public string UrlUserManage()
         public string UrlUserPassword()
             => "/user/changepassword";
 
+        public string UrlAccountLogin()
+            => "/account/login";
+
+        public string UrlAccountRegister()
+            => "/account/register";
+
         #region External
 
         public string UrlMoneyProject()

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

@@ -470,4 +470,8 @@ h4 {
 
 .user {
     margin: 20px 15px;
+}
+
+.login {
+    margin-top: 20px;
 }