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/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.html

@@ -0,0 +1,55 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Account Migration</h4>
+    <button type="button" class="close" aria-label="Close" (click)="close()">
+    <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    <p>Your account does not have an email on file. This is a one-time migration. Please add your email to the account. A verficiation link will be sent to your email for you 
+        to confirm and will then be allowed to authenticate with this server. This is required.
+    </p>
+    <form [formGroup]="registerForm">
+        <div class="form-group">
+            <label for="username">Username</label>
+            <input id="username" class="form-control" formControlName="username" type="text">
+            <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                <div *ngIf="registerForm.get('username')?.errors?.required">
+                    This field is required
+                </div>
+            </div>
+        </div>
+
+        <div class="form-group" style="width:100%">
+            <label for="email">Email</label>
+            <input class="form-control" type="email" id="email" formControlName="email" required>
+            <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                <div *ngIf="registerForm.get('email')?.errors?.required">
+                    This field is required
+                </div>
+                <div *ngIf="registerForm.get('email')?.errors?.email">
+                    This must be a valid email address
+                </div>
+            </div>
+        </div>
+        
+        <div class="form-group">
+            <label for="password">Password</label>
+            <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+            <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                <div *ngIf="registerForm.get('password')?.errors?.required">
+                    This field is required
+                </div>
+            </div>
+        </div>
+    </form>
+
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-secondary" (click)="close()">
+        Cancel
+    </button>
+    <button type="button" class="btn btn-primary" (click)="save()" [disabled]="isSaving || !registerForm.valid">
+        <span *ngIf="isSaving" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        <span>Submit</span>
+    </button>
+</div>

UI/Web/src/app/registration/add-email-to-account-migration-modal/add-email-to-account-migration-modal.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { SafeUrl } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+import { ConfirmService } from 'src/app/shared/confirm.service';
+import { AccountService } from 'src/app/_services/account.service';
+import { MemberService } from 'src/app/_services/member.service';
+import { ServerService } from 'src/app/_services/server.service';
+
+@Component({
+  selector: 'app-add-email-to-account-migration-modal',
+  templateUrl: './add-email-to-account-migration-modal.component.html',
+  styleUrls: ['./add-email-to-account-migration-modal.component.scss']
+})
+export class AddEmailToAccountMigrationModalComponent implements OnInit {
+
+  @Input() username!: string;
+  @Input() password!: string;
+
+  isSaving: boolean = false;
+  registerForm: FormGroup = new FormGroup({});
+  emailLink: string = '';
+  emailLinkUrl: SafeUrl | undefined;
+
+  constructor(private accountService: AccountService, private modal: NgbActiveModal, 
+    private serverService: ServerService, private confirmService: ConfirmService) {
+  }
+
+  ngOnInit(): void {
+    this.registerForm.addControl('username', new FormControl(this.username, [Validators.required]));
+    this.registerForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));
+    this.registerForm.addControl('password', new FormControl(this.password, [Validators.required]));
+  }
+
+  close() {
+    this.modal.close(false);
+  }
+
+  save() {
+    this.serverService.isServerAccessible().subscribe(canAccess => {
+      const model = this.registerForm.getRawValue();
+      model.sendEmail = canAccess;
+      this.accountService.migrateUser(model).subscribe(async (email) => {
+        if (!canAccess) {
+          // Display the email to the user
+          this.emailLink = email;
+          await this.confirmService.alert('Please click this link to confirm your email. You must confirm to be able to login. You may need to log out of the current account before clicking. <br/> <a href="' + this.emailLink + '" target="_blank">' + this.emailLink + '</a>');
+        } else {
+          await this.confirmService.alert('Please check your email for the confirmation link. You must confirm to be able to login.');
+        }
+      });
+    });
+    
+  }
+
+  
+
+}

UI/Web/src/app/registration/confirm-email/confirm-email.component.html

@@ -0,0 +1,58 @@
+<!-- 
+<div class="text-danger" *ngIf="errors.length > 0">
+    <p>Errors:</p>
+    <ul>
+        <li *ngFor="let error of errors">{{error}}</li>
+    </ul>
+</div> -->
+<app-splash-container>
+    <ng-container title><h2>Register</h2></ng-container>
+    <ng-container body>
+        <p>Complete the form to complete your registration</p>
+        <form [formGroup]="registerForm" (ngSubmit)="submit()">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input id="username" class="form-control" formControlName="username" type="text">
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('username')?.errors?.required">
+                        This field is required
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group" style="width:100%">
+                <label for="email">Email</label>
+                <input class="form-control" type="email" id="email" formControlName="email" required>
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('email')?.errors?.required">
+                        This field is required
+                    </div>
+                    <div *ngIf="registerForm.get('email')?.errors?.email">
+                        This must be a valid email address
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label for="password">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
+                <ng-template #passwordTooltip>
+                    Password must be between 6 and 32 characters in length
+                </ng-template>
+                <span class="sr-only" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
+                <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('password')?.errors?.required">
+                        This field is required
+                    </div>
+                    <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength">
+                        Password must be between 6 and 32 characters in length
+                    </div>
+                </div>
+            </div>
+        
+            <div class="float-right">
+                <button class="btn btn-secondary alt" type="submit">Register</button>
+            </div>
+        </form>
+    </ng-container>
+</app-splash-container>

UI/Web/src/app/registration/confirm-email/confirm-email.component.scss

@@ -0,0 +1,4 @@
+input {
+    background-color: #fff !important;
+    color: black;
+}

UI/Web/src/app/registration/confirm-email/confirm-email.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { AccountService } from 'src/app/_services/account.service';
+
+@Component({
+  selector: 'app-confirm-email',
+  templateUrl: './confirm-email.component.html',
+  styleUrls: ['./confirm-email.component.scss']
+})
+export class ConfirmEmailComponent implements OnInit {
+
+
+  /**
+   * Email token used for validating
+   */
+  token: string = '';
+
+  registerForm: FormGroup = new FormGroup({
+    email: new FormControl('', [Validators.required, Validators.email]),
+    username: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+  });
+
+  /**
+   * Validation errors from API
+   */
+  errors: Array<string> = [];
+
+
+  constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService, private toastr: ToastrService) {
+
+    const token = this.route.snapshot.queryParamMap.get('token');
+    const email = this.route.snapshot.queryParamMap.get('email');
+    if (token == undefined || token === '' || token === null) {
+      // This is not a valid url, redirect to login
+      this.toastr.error('Invalid confirmation email');
+      this.router.navigateByUrl('login');
+      return;
+    }
+    this.token = token;
+    this.registerForm.get('email')?.setValue(email || '');
+  }
+
+  ngOnInit(): void {
+  }
+
+  submit() {
+    let model = this.registerForm.getRawValue();
+    model.token = this.token;
+    this.accountService.confirmEmail(model).subscribe((user) => {
+      this.toastr.success('Account registration complete');
+      this.router.navigateByUrl('login');
+    }, err => {
+      this.errors = err;
+    });
+  }
+
+}

UI/Web/src/app/registration/confirm-migration-email/confirm-migration-email.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { AccountService } from 'src/app/_services/account.service';
+
+@Component({
+  selector: 'app-confirm-migration-email',
+  templateUrl: './confirm-migration-email.component.html',
+  styleUrls: ['./confirm-migration-email.component.scss']
+})
+export class ConfirmMigrationEmailComponent implements OnInit {
+
+  constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService, private toastr: ToastrService) {
+
+    const token = this.route.snapshot.queryParamMap.get('token');
+    const email = this.route.snapshot.queryParamMap.get('email');
+    if (token === undefined || token === '' || token === null || email === undefined || email === '' || email === null) {
+      // This is not a valid url, redirect to login
+      this.toastr.error('Invalid confirmation email');
+      this.router.navigateByUrl('login');
+      return;
+    }
+    this.accountService.confirmMigrationEmail({token: token, email}).subscribe((user) => {
+      this.toastr.success('Account migration complete');
+      this.router.navigateByUrl('login');
+    });
+    
+  }
+    
+
+  ngOnInit(): void {
+  }
+
+}

UI/Web/src/app/registration/register/register.component.html

@@ -0,0 +1,58 @@
+<!-- 
+<div class="text-danger" *ngIf="errors.length > 0">
+    <p>Errors:</p>
+    <ul>
+        <li *ngFor="let error of errors">{{error}}</li>
+    </ul>
+</div> -->
+<app-splash-container>
+    <ng-container title><h2>Register</h2></ng-container>
+    <ng-container body>
+        <p>Complete the form to register an admin account</p>
+        <form [formGroup]="registerForm" (ngSubmit)="submit()">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input id="username" class="form-control" formControlName="username" type="text">
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('username')?.errors?.required">
+                        This field is required
+                    </div>
+                </div>
+            </div>
+
+            <div class="form-group" style="width:100%">
+                <label for="email">Email</label>
+                <input class="form-control" type="email" id="email" formControlName="email" required>
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('email')?.errors?.required">
+                        This field is required
+                    </div>
+                    <div *ngIf="registerForm.get('email')?.errors?.email">
+                        This must be a valid email address
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-group">
+                <label for="password">Password</label>&nbsp;<i class="fa fa-info-circle" placement="right" [ngbTooltip]="passwordTooltip" role="button" tabindex="0"></i>
+                <ng-template #passwordTooltip>
+                    Password must be between 6 and 32 characters in length
+                </ng-template>
+                <span class="sr-only" id="password-help"><ng-container [ngTemplateOutlet]="passwordTooltip"></ng-container></span>
+                <input id="password" class="form-control" maxlength="32" minlength="6" formControlName="password" type="password" aria-describedby="password-help">
+                <div id="inviteForm-validations" class="invalid-feedback" *ngIf="registerForm.dirty || registerForm.touched">
+                    <div *ngIf="registerForm.get('password')?.errors?.required">
+                        This field is required
+                    </div>
+                    <div *ngIf="registerForm.get('password')?.errors?.minlength || registerForm.get('password')?.errors?.maxLength">
+                        Password must be between 6 and 32 characters in length
+                    </div>
+                </div>
+            </div>
+        
+            <div class="float-right">
+                <button class="btn btn-secondary alt" type="submit">Register</button>
+            </div>
+        </form>
+    </ng-container>
+</app-splash-container>

UI/Web/src/app/registration/register/register.component.scss

@@ -0,0 +1,4 @@
+input {
+    background-color: #fff !important;
+    color: black;
+}

UI/Web/src/app/registration/register/register.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { take } from 'rxjs/operators';
+import { AccountService } from 'src/app/_services/account.service';
+import { MemberService } from 'src/app/_services/member.service';
+
+/**
+ * This is exclusivly used to register the first user on the server and nothing else
+ */
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+
+  registerForm: FormGroup = new FormGroup({
+    email: new FormControl('', [Validators.required, Validators.email]),
+    username: new FormControl('', [Validators.required]),
+    password: new FormControl('', [Validators.required, Validators.maxLength(32), Validators.minLength(6)]),
+  });
+
+  constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService, private toastr: ToastrService, private memberService: MemberService) {
+    this.memberService.adminExists().pipe(take(1)).subscribe(adminExists => {
+      if (adminExists) {
+        this.router.navigateByUrl('login');
+      }
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  submit() {
+    const model = this.registerForm.getRawValue();
+    this.accountService.register(model).subscribe((user) => {
+      this.toastr.success('Account registration complete');
+      this.router.navigateByUrl('login');
+    }, err => {
+      // TODO: Handle errors
+    });
+  }
+
+}

UI/Web/src/app/registration/registration.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';
+import { RegistrationRoutingModule } from './registration.router.module';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SplashContainerComponent } from './splash-container/splash-container.component';
+import { RegisterComponent } from './register/register.component';
+import { AddEmailToAccountMigrationModalComponent } from './add-email-to-account-migration-modal/add-email-to-account-migration-modal.component';
+import { ConfirmMigrationEmailComponent } from './confirm-migration-email/confirm-migration-email.component';
+
+
+
+@NgModule({
+  declarations: [
+    ConfirmEmailComponent,
+    SplashContainerComponent,
+    RegisterComponent,
+    AddEmailToAccountMigrationModalComponent,
+    ConfirmMigrationEmailComponent
+  ],
+  imports: [
+    CommonModule,
+    RegistrationRoutingModule,
+    NgbTooltipModule,
+    ReactiveFormsModule
+  ]
+})
+export class RegistrationModule { }

UI/Web/src/app/registration/registration.router.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';
+import { ConfirmMigrationEmailComponent } from './confirm-migration-email/confirm-migration-email.component';
+import { RegisterComponent } from './register/register.component';
+
+const routes: Routes = [
+  {
+      path: 'confirm-email',
+      component: ConfirmEmailComponent,
+  },
+  {
+      path: 'confirm-migration-email',
+      component: ConfirmMigrationEmailComponent,
+  },
+  {
+    path: 'register',
+    component: RegisterComponent,
+  }
+];
+
+
+@NgModule({
+    imports: [RouterModule.forChild(routes), ],
+    exports: [RouterModule]
+})
+export class RegistrationRoutingModule { }

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 {
+  }
+
+}