Register and Login page

.gitignore

@@ -19,3 +19,4 @@ obj/
 # can be found in '/docs/defaults'.
 /.vs/
 /.vscode/
+*.user

src/Application/Application.csproj

@@ -7,7 +7,6 @@
 
     <ItemGroup>
         <ProjectReference Include="../Domain/Domain.csproj" />
-        <ProjectReference Include="../Infrastructure/Infrastructure.csproj" />
     </ItemGroup>
 
     <ItemGroup>

src/Application/Common/Interfaces/ICoreApiService.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Codidact.Authentication.Application.Common.Interfaces
+{
+    /// <summary>
+    /// A Service that connects to the Core Codidact API.
+    /// </summary>
+    public interface ICoreApiService
+    {
+        Task<bool> CreateMember(string displayName, long userId);
+    }
+}

src/Infrastructure/DependencyInjection.cs

@@ -9,6 +9,7 @@
 using Codidact.Authentication.Infrastructure.Common.Interfaces;
 using Codidact.Authentication.Infrastructure.Services;
 using Codidact.Authentication.Domain.Entities;
+using Codidact.Authentication.Application.Common.Interfaces;
 
 namespace Codidact.Authentication.Infrastructure
 {
@@ -22,14 +23,16 @@ public static IServiceCollection AddInfrastructure(
             if (environment.IsDevelopment())
             {
                 services.AddScoped<ISecretsService, DevelopmentSecretsService>();
+                services.AddScoped<ICoreApiService, DevelopmentCoreApiService>();
             }
 
             services
-                .AddDbContext<ApplicationDbContext>(async (provider, options) =>
+                .AddDbContext<ApplicationDbContext>((provider, options) =>
                 {
                     var secrets = provider.GetService<ISecretsService>();
-
-                    options.UseSqlite(await secrets.Get("ConnectionStrings:Authentication"));
+                    var connectionString = secrets.Get("ConnectionStrings:Authentication").GetAwaiter().GetResult();
+                    options.UseNpgsql(connectionString,
+                       b => b.MigrationsAssembly(typeof(ApplicationDbContext).Assembly.FullName));
                 });
 
             services

src/Infrastructure/Infrastructure.csproj

@@ -1,19 +1,20 @@
 <Project Sdk="Microsoft.NET.Sdk">
-    <PropertyGroup>
-        <TargetFramework>netcoreapp3.1</TargetFramework>
-        <RootNamespace>Codidact.Authentication.Infrastructure</RootNamespace>
-        <AssemblyName>Codidact.Authentication.Infrastructure</AssemblyName>
-    </PropertyGroup>
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <RootNamespace>Codidact.Authentication.Infrastructure</RootNamespace>
+    <AssemblyName>Codidact.Authentication.Infrastructure</AssemblyName>
+  </PropertyGroup>
 
-    <ItemGroup>
-        <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="3.1.2" />
-        <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.2" />
-        <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.2" />
-        <PackageReference Include="IdentityServer4" Version="3.1.2" />
-        <PackageReference Include="IdentityServer4.AspNetIdentity" Version="3.1.2" />
-    </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.Extensions.DependencyInjection.Abstractions" Version="3.1.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.2" />
+    <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="3.1.0" />
+    <PackageReference Include="IdentityServer4" Version="3.1.2" />
+    <PackageReference Include="IdentityServer4.AspNetIdentity" Version="3.1.2" />
+  </ItemGroup>
 
-    <ItemGroup>
-        <ProjectReference Include="../Domain/Domain.csproj" />
-    </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="../Domain/Domain.csproj" />
+    <ProjectReference Include="..\Application\Application.csproj" />
+  </ItemGroup>
 </Project>

src/Infrastructure/Services/DevelopmentCoreApiService.cs

@@ -0,0 +1,26 @@
+using Codidact.Authentication.Application.Common.Interfaces;
+using Microsoft.Extensions.Logging;
+using System.Threading.Tasks;
+
+namespace Codidact.Authentication.Infrastructure.Services
+{
+    public class DevelopmentCoreApiService : ICoreApiService
+    {
+        private readonly ILogger<DevelopmentCoreApiService> _logger;
+        public DevelopmentCoreApiService(ILogger<DevelopmentCoreApiService> logger)
+        {
+            _logger = logger;
+        }
+
+        public Task<bool> CreateMember(string displayName, long userId)
+        {
+            _logger.LogInformation("Create Member for the user id");
+
+            // TODO: Implement a real service that sends Core Codidact API a request
+
+            _logger.LogInformation("Member Created.");
+
+            return Task.FromResult(true);
+        }
+    }
+}

src/WebApp/Pages/Account/Login.cshtml

@@ -2,18 +2,34 @@
 @model LoginModel
 
 <form asp-page="/account/login" method="post">
+    <div class="has-padding-2">
+        <h1>Sign in</h1>
+        <p>Welcome to Codidact! You can login to your account here. Don't have an account? <a asp-page="Register">Sign up instead.</a></p>
+    </div>
     <input asp-for="ReturnUrl" type="hidden" />
 
-    <label asp-for="Email">Email:</label>
-    <input asp-for="Email" /><br>
+    <div class="widget">
+        <div class="widget--body">
+            <div class="has-padding-1">
+                <label asp-for="Email" class="form-element">E-Mail Address</label>
+                <input asp-for="Email" type="email" class="form-element" id="email">
+            </div>
 
-    <label asp-for="Password">Password:</label>
-    <input asp-for="Password" /><br>
 
-    <label>Remember Login</label>
-    <input asp-for="RememberLogin" /><br>
+            <div class="has-padding-1">
+                <label asp-for="Password" class="form-element">Password</label>
+                <input asp-for="Password" class="form-element" type="password">
+            </div>
 
-    <button>Login</button>
+            <div class="has-padding-1">
+                <label asp-for="RememberLogin" class="form-element">Remember Login</label>
+                <input asp-for="RememberLogin" class="form-checkbox-element" type="checkbox">
+            </div>
+        </div>
+        <div class="widget--footer">
+            <button type="submit" class="button is-filled">Log in</button>
+        </div>
+    </div>
 
     <partial name="_ValidationSummary" />
 </form>

src/WebApp/Pages/Account/Register.cshtml

@@ -0,0 +1,46 @@
+@page
+@model RegisterModel
+
+<form asp-page="/account/register" method="post">
+    <div class="has-padding-2">
+        <h1>Sign up</h1>
+        <p>Welcome to Codidact! You can create a new account here. Already have an account? <a asp-page="Login">Sign in instead.</a></p>
+    </div>
+    <input asp-for="ReturnUrl" type="hidden" />
+
+    <div class="widget">
+        <div class="widget--body">
+            <div class="has-padding-1">
+                <label asp-for="Email" class="form-element">E-Mail Address</label>
+                <input asp-for="Email" type="email" class="form-element" id="email">
+                <p class="has-font-size-caption has-color-tertiary-500">Don't worry. We'll never give your email to someone else or send you emails you don't want.</p>
+            </div>
+
+            <div class="has-padding-1">
+                <label asp-for="DisplayName" class="form-element">Display Name</label>
+                <input asp-for="DisplayName" class="form-element">
+                <p class="has-font-size-caption has-color-tertiary-500">Choose any name you want. It doesn't have to be unique and can be changed later.</p>
+            </div>
+
+            <div class="has-padding-1">
+                <label asp-for="Password" class="form-element">Password</label>
+                <input asp-for="Password" class="form-element" type="password">
+                <p class="has-font-size-caption has-color-tertiary-500">Choose a strong one. At least 8 characters are recommended. Don't choose common words or names.</p>
+            </div>
+
+            <div class="has-padding-1">
+                <label asp-for="ConfirmPassword" class="form-element">Repeat your password</label>
+                <input asp-for="ConfirmPassword" class="form-element" type="password">
+                <p class="has-font-size-caption has-color-tertiary-500">We want to make sure, that you don't accidentally misspell your password.</p>
+            </div>
+        </div>
+        <div class="widget--footer">
+            <button type="submit" class="button is-filled">Create account</button>
+        </div>
+    </div>
+    <p class="has-padding-4 has-font-size-caption">
+        By creating an account you agree to our <a href="#!">Terms of Service</a>
+        and to have read and understood our <a href="#!">Privacy Policy</a>.
+    </p>
+    <partial name="_ValidationSummary" />
+</form>

src/WebApp/Pages/Account/Register.cshtml.cs

@@ -0,0 +1,70 @@
+using System.ComponentModel.DataAnnotations;
+using System.Threading.Tasks;
+using Codidact.Authentication.Domain.Entities;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Codidact.Authentication.WebApp.Pages.Account
+{
+    [BindProperties]
+    public class RegisterModel : PageModel
+    {
+        private readonly UserManager<ApplicationUser> _userManager;
+
+        public RegisterModel(
+                          UserManager<ApplicationUser> userManager)
+        {
+            _userManager = userManager;
+        }
+
+        [Required, DataType(DataType.EmailAddress)]
+        public string Email { get; set; }
+
+
+        [Required, DataType(DataType.Text)]
+        public string DisplayName { get; set; }
+
+        [Required, DataType(DataType.Password)]
+        public string Password { get; set; }
+
+        [Required, DataType(DataType.Password)]
+        [Compare(nameof(Password), ErrorMessage = "Confirm password doesn't match")]
+        public string ConfirmPassword { get; set; }
+
+        [Required]
+        public string ReturnUrl { get; set; } = "/index";
+        public void OnGet([FromQuery] string returnUrl)
+        {
+            if (returnUrl != null)
+            {
+                ReturnUrl = returnUrl;
+            }
+        }
+
+        public async Task<IActionResult> OnPostAsync()
+        {
+            if (ModelState.IsValid)
+            {
+                var result = await _userManager.CreateAsync(new ApplicationUser
+                {
+                    Email = Email,
+                    UserName = DisplayName,
+                }, Password);
+                if (result.Succeeded)
+                {
+                    return LocalRedirect(ReturnUrl);
+                }
+                else
+                {
+                    foreach (var error in result.Errors)
+                    {
+                        ModelState.AddModelError(error.Code, error.Description);
+                    }
+                }
+            }
+
+            return Page();
+        }
+    }
+}

src/WebApp/Pages/Shared/_Layout.cshtml

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>@ViewData["Title"]</title>
+    <link rel="stylesheet" href="~/css/site.css" />
+    <link rel="stylesheet" href="~/lib/co-design/css/codidact.css" />
+</head>
+<body>
+    <main class="container has-padding-4">
+        @RenderBody()
+    </main>
+
+    <footer class="has-padding-4 has-border-top-style-solid has-border-top-width-1 has-border-color-tertiary-050">
+        <div class="container">
+            &copy; 2020 - Codidact
+        </div>
+    </footer>
+    <script src="~/js/site.js" asp-append-version="true" async></script>
+</body>
+</html>

src/WebApp/Pages/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

src/WebApp/Startup.cs

@@ -69,32 +69,6 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             {
                 endpoints.MapRazorPages();
             });
-
-            SeedDatabase(app);
-        }
-
-        private static void SeedDatabase(IApplicationBuilder app)
-        {
-            using (var scope = app.ApplicationServices.CreateScope())
-            {
-                var users = scope.ServiceProvider.GetService<UserManager<ApplicationUser>>();
-                var db = scope.ServiceProvider.GetService<ApplicationDbContext>();
-
-                // Todo. Use database migrations in the future.
-                db.Database.EnsureCreated();
-
-                // Todo. Remove this when we have a registration page.
-                if (!users.Users.Any())
-                {
-                    users.CreateAsync(new ApplicationUser
-                    {
-                        UserName = "admin@codidact",
-                        Email = "admin@codidact"
-                    }, "password");
-                }
-
-                db.SaveChanges();
-            }
         }
     }
 }

src/WebApp/WebApp.csproj

@@ -3,6 +3,7 @@
         <TargetFramework>netcoreapp3.1</TargetFramework>
         <RootNamespace>Codidact.Authentication.WebApp</RootNamespace>
         <AssemblyName>Codidact.Authentication.WebApp</AssemblyName>
+        <UserSecretsId>ee41df6e-804d-41e7-b680-4ba0dc65407c</UserSecretsId>
     </PropertyGroup>
 
     <ItemGroup>
@@ -14,4 +15,8 @@
         <ProjectReference Include="../Domain/Domain.csproj" />
         <ProjectReference Include="../Infrastructure/Infrastructure.csproj" />
     </ItemGroup>
+
+    <ItemGroup>
+      <Folder Include="wwwroot\" />
+    </ItemGroup>
 </Project>

src/WebApp/wwwroot/css/site.css

@@ -0,0 +1 @@
+

src/WebApp/wwwroot/js/site.js

@@ -0,0 +1,25 @@
+/*
+ * Header slides
+ ----------------
+ * This code powers the "header slides", which are at the core of mobile nav
+*/
+
+const headerSlideTriggers = document.querySelectorAll("[data-trigger-header-slide]");
+
+for (let i = 0; i < headerSlideTriggers.length; i++) {
+    headerSlideTriggers[i].addEventListener("click", function (e) {
+        const headerSlide = document.querySelector(this.getAttribute("data-trigger-header-slide"));
+
+        headerSlide.classList.toggle("is-active");
+        this.classList.toggle("is-active");
+
+        // Position header slide appropriately relative to
+        // trigger.
+        const rect = this.getBoundingClientRect();
+        hs.style.top = (rect.top + rect.height) + "px";
+        hs.style.right = (document.body.clientWidth - rect.right) + "px";
+
+        // Prevent navigation
+        e.preventDefault();
+    });
+}