Account Email Support (#1000)

* Moved the Server Settings out into a button on nav header

* Refactored Mange Users page to the new design (skeleton). Implemented skeleton code for Invite User.

* Hashed out more of the code, but need to move all the email code to a Kavita controlled API server due to password credentials.

* Cleaned up some warnings

* When no user exists for an api key in Plugin controller, throw 401.

* Hooked in the ability to check if the Kavita instance can be accessed externally so we can determine if the user can invite or not.

* Hooked up some logic if the user's server isn't accessible, then default to old flow

* Basic flow is working for confirm email. Needs validation, error handling, etc.

* Refactored Password validation to account service

* Cleaned up the code in confirm-email to work much better.

* Refactored the login page to have a container functionality, so we can reuse the styles on multiple pages (registration pages). Hooked up the code for confirm email.

* Messy code, but making progress. Refactored Register to be used only for first time user registration. Added a new register component to handle first time flow only.

* Invite works much better, still needs a bit of work for non-accessible server setup. Started work on underlying manage users page to meet new design.

* Changed (you) to a star to indicate who you're logged in as.

* Inviting a user is now working and tested fully.

* Removed the register member component as we now have invite and confirm components.

* Editing a user is now working. Username change and Role/Library access from within one screen. Email changing is on hold.

* Cleaned up code for edit user and disabled email field for now.

* Cleaned up the code to indicate changing a user's email is not possible.

* Implemented a migration for existing accounts so they can validate their emails and still login.

* Change url for email server

* Implemented the ability to resend an email confirmation code (or regenerate for non accessible servers). Fixed an overflow on the confirm dialog.

* Took care of some code cleanup

* Removed 3 db calls from cover refresh and some misc cleanup

* Fixed a broken test

UI/Web/src/app/registration/splash-container/splash-container.component.html

@@ -0,0 +1,20 @@
+<div class="mx-auto login">
+    
+    <div class="row row-cols-4 row-cols-md-4 row-cols-sm-2 row-cols-xs-2">
+        <div class="col align-self-center card p-3 m-3" style="max-width: 12rem;">
+            <span>
+                <div class="logo-container">
+                    <h3 class="card-title text-center">
+                        <ng-content select="[title]"></ng-content>
+                    </h3>
+                </div>
+            </span>
+
+            <div class="card-text">
+                <ng-content select="[body]"></ng-content>
+            </div>
+        </div>
+
+    </div>
+
+</div>

UI/Web/src/app/registration/splash-container/splash-container.component.scss

@@ -0,0 +1,85 @@
+@use "../../../theme/colors";
+
+.login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -61px; // To offset the navbar
+    height: calc(100vh);
+    min-height: 289px;
+    position: relative;
+    width: 100vw;
+    max-width: 100vw;
+
+
+    &::before {
+        content: "";
+        background-image: url('../../../assets/images/login-bg.jpg');
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0.1;
+        width: 100%;
+    }
+
+    .logo-container {
+        .logo {
+            display:inline-block;
+            height: 50px;
+        }
+    }
+
+    .row {
+        margin-top: 10vh;
+    }
+
+    .card {
+        background-color: colors.$primary-color;
+        color: #fff;
+        min-width: 300px;
+
+        &:focus {
+            border: 2px solid white;
+
+        }
+
+
+        .card-title {
+            font-family: 'Spartan', sans-serif;
+            font-weight: bold;
+            display: inline-block;
+            vertical-align: middle;
+            width: 280px;
+        }
+
+        .card-text {
+            font-family: "EBGaramond", "Helvetica Neue", sans-serif;
+        }
+
+        .alt {
+            background-color: #424c72;
+            border-color: #444f75;
+        }
+
+        .alt:hover {
+            background-color: #3b4466;
+        }
+
+        .alt:focus {
+            background-color: #343c59;
+            box-shadow: 0 0 0 0.2rem rgb(68 79 117 / 50%);
+        }
+    }
+}
+
+.invalid-feedback {
+    display: inline-block;
+    color: #343c59;
+}
+
+input {
+    background-color: #fff !important;
+    color: black;
+}

UI/Web/src/app/registration/splash-container/splash-container.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-splash-container',
+  templateUrl: './splash-container.component.html',
+  styleUrls: ['./splash-container.component.scss']
+})
+export class SplashContainerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}