Lots of changes and reorganization around user management. Fixed a bug where after registering a person, they would be logged in automatically.

src/app/_services/account.service.ts

@@ -40,15 +40,15 @@ export class AccountService {
     this.currentUserSource.next(undefined);
   }
 
-  register(model: {username: string, password: string, isAdmin?: boolean}) {
+  register(model: {username: string, password: string, isAdmin?: boolean}, login = false) {
     if (model?.isAdmin) {
       model.isAdmin = false;
     }
     
     return this.httpClient.post<User>(this.baseUrl + 'account/register', model).pipe(
       map((user: User) => {
-        if (user) {
+        if (user && login) {
-          this.setCurrentUser(user);
+          //this.setCurrentUser(user); // Register should not act as if a user has logged in
         }
 
         return user;

src/app/admin/_modals/library-editor-modal/library-editor-modal.component.html

@@ -0,0 +1 @@
+<p>library-editor-modal works!</p>

src/app/admin/_modals/library-editor-modal/library-editor-modal.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibraryEditorModalComponent } from './library-editor-modal.component';
+
+describe('LibraryEditorModalComponent', () => {
+  let component: LibraryEditorModalComponent;
+  let fixture: ComponentFixture<LibraryEditorModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibraryEditorModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibraryEditorModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/_modals/library-editor-modal/library-editor-modal.component.ts

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

src/app/admin/admin.module.ts

@@ -5,15 +5,18 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { ManageLibraryComponent } from './manage-library/manage-library.component';
 import { ManageUsersComponent } from './manage-users/manage-users.component';
+import { LibraryEditorModalComponent } from './_modals/library-editor-modal/library-editor-modal.component';
+import { SharedModule } from '../shared/shared.module';
 
 
 
 @NgModule({
-  declarations: [ManageUsersComponent, DashboardComponent, ManageLibraryComponent],
+  declarations: [ManageUsersComponent, DashboardComponent, ManageLibraryComponent, LibraryEditorModalComponent],
   imports: [
     CommonModule,
     AdminRoutingModule,
-    NgbNavModule
+    NgbNavModule,
+    SharedModule
   ],
   providers: []
 })

src/app/admin/manage-library/manage-library.component.ts

@@ -3,6 +3,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
 import { Library } from 'src/app/_models/library';
 import { LibraryService } from 'src/app/_services/library.service';
+import { LibraryEditorModalComponent } from '../_modals/library-editor-modal/library-editor-modal.component';
 
 @Component({
   selector: 'app-manage-library',
@@ -23,6 +24,10 @@ export class ManageLibraryComponent implements OnInit {
 
   }
 
+  addLibrary() {
+    const modalRef = this.modalService.open(LibraryEditorModalComponent);
+  }
+
   addFolder(library: string) {
 
     const modalRef = this.modalService.open(DirectoryPickerComponent);

src/app/admin/manage-users/manage-users.component.html

@@ -3,18 +3,22 @@
 <div class="container">
     <div class="row mb-2">
         <div class="col-8"><h3>Members</h3></div>
-        <div class="col-4"><button class="btn btn-primary pull-right">New User</button></div>
+        <div class="col-4"><button class="btn btn-primary pull-right" (click)="createMember()">New Member</button></div>
     </div>
-    <ul class="list-group">
+    <ul class="list-group" *ngIf="!createMemberToggle; else createUser">
         <li *ngFor="let member of members" class="list-group-item">
+            <!-- We can move this into a view-member component -->
             <div>
-                <div>Name: {{member.username | titlecase}}</div>
+                <div>Name: {{member.username | titlecase}} <span *ngIf="member.isAdmin">(Admin)</span></div>
-                <div>Sharing: {{member?.libraries ? member?.libraries : 'None'}}</div>
+                <div *ngIf="!member.isAdmin">Sharing: {{member?.libraries ? member?.libraries : 'None'}}</div>
                 <div>Last Active: {{member.lastActive | date}}</div>
+
             </div>
 
-            <button class="btn btn-primary pull-right">Edit</button>
+            <button class="btn btn-primary pull-right" [disabled]="canEditMember(member)">Edit</button>
-
         </li>
     </ul>
+    <ng-template #createUser>
+        <app-register-member (created)="onMemberCreated($event)"></app-register-member>
+    </ng-template>
 </div>

src/app/admin/manage-users/manage-users.component.ts

@@ -1,8 +1,11 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { take } from 'rxjs/operators';
 import { DirectoryPickerComponent, DirectoryPickerResult } from 'src/app/directory-picker/directory-picker.component';
 import { MemberService } from 'src/app/member.service';
 import { Member } from 'src/app/_models/member';
+import { User } from 'src/app/_models/user';
+import { AccountService } from 'src/app/_services/account.service';
 
 @Component({
   selector: 'app-manage-users',
@@ -12,17 +15,38 @@ import { Member } from 'src/app/_models/member';
 export class ManageUsersComponent implements OnInit {
 
   members: Member[] = [];
-  closeResult = ''; // Debug code
+  loggedInUsername = '';
-  @ViewChild('content') content: any;
 
-  constructor(private memberService: MemberService) { }
+  // Create User functionality
+  createMemberToggle = false;
+
+  constructor(private memberService: MemberService, public accountService: AccountService) {
+    this.accountService.currentUser$.pipe(take(1)).subscribe((user: User) => {
+      this.loggedInUsername = user.username;
+    });
+  }
 
   ngOnInit(): void {
     console.log('User Component');
+    this.loadMembers();
+  }
+
+  loadMembers() {
     this.memberService.getMembers().subscribe(members => {
       this.members = members;
     });
   }
 
-  
+  canEditMember(member: Member): boolean {
+    return this.loggedInUsername !== member.username;
+  }
+
+  createMember() {
+    this.createMemberToggle = true;
+  }
+
+  onMemberCreated(success: boolean) {
+    this.createMemberToggle = false;
+    this.loadMembers();
+  }
 }

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { ErrorInterceptor } from './_interceptors/error.interceptor';
 import { LibraryComponent } from './library/library.component';
 import { DirectoryPickerComponent } from './directory-picker/directory-picker.component';
+import { SharedModule } from './shared/shared.module';
 
 
 
@@ -25,7 +26,7 @@ import { DirectoryPickerComponent } from './directory-picker/directory-picker.co
     NavHeaderComponent,
     UserLoginComponent,
     LibraryComponent,
-    DirectoryPickerComponent
+    DirectoryPickerComponent,
   ],
   imports: [
     HttpClientModule,
@@ -34,6 +35,7 @@ import { DirectoryPickerComponent } from './directory-picker/directory-picker.co
     BrowserAnimationsModule,
     ReactiveFormsModule,
     NgbModule,
+    SharedModule,
     ToastrModule.forRoot({
       positionClass: 'toast-bottom-right'
     }),

src/app/home/home.component.html

@@ -1,30 +1,9 @@
 
-<h1>Welcome to Kativa</h1>
 <div class="container">
     <ng-container *ngIf="firstTimeFlow">
         <!-- NOTE: We don't need a first time user flow. We just need a simple component to register a new admin. Once registered, we can put them on admin/ route -->
         <p>Please create an admin account for yourself to start your reading journey.</p>
-        <div class="text-warning">
+        <app-register-member (created)="onAdminCreated($event)"></app-register-member>
-            <p>Error:</p>
-            <ul>
-                <!-- <li *ngFor="let error of errors">
-                    {{error}}
-                </li> -->
-            </ul>
-        </div>
-        <form [formGroup]="registerForm" (ngSubmit)="register()">
-            <div class="form-group">
-                <label>Username</label>
-                <input class="form-control" formControlName="username" type="text">
-            </div>
-            
-            <div class="form-group">
-                <label>Password</label>
-                <input class="form-control" formControlName="password" type="password">
-            </div>
-        
-            <button class="btn btn-primary" type="submit">Register</button>
-        </form>
     </ng-container>
 
     <ng-container *ngIf="!firstTimeFlow && (this.accountService.currentUser$ | async) == null">

src/app/home/home.component.ts

@@ -38,19 +38,13 @@ export class HomeComponent implements OnInit {
         });
       }
     });
-
   }
 
-  register() {
-    this.model.isAdmin = this.firstTimeFlow;
 
-    console.log('Registering: ', this.model);
+  onAdminCreated(success: boolean) {
-    this.accountService.register(this.model).subscribe(resp => {
+    if (success) {
       this.router.navigateByUrl('/library');
-    }, err => {
+    }
-      console.log('validation errors from interceptor', err);
-      //this.errors = err;
-    });
   }
 
 }

src/app/library/library.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { take } from 'rxjs/operators';
+import { MemberService } from '../member.service';
+import { Library } from '../_models/library';
 import { User } from '../_models/user';
 import { AccountService } from '../_services/account.service';
+import { LibraryService } from '../_services/library.service';
 
 @Component({
   selector: 'app-library',
@@ -11,12 +14,16 @@ import { AccountService } from '../_services/account.service';
 export class LibraryComponent implements OnInit {
 
   user: User | undefined;
+  libraries: Library[] = [];
 
-  constructor(public accountService: AccountService) { }
+  constructor(public accountService: AccountService, private memberService: MemberService, private libraryService: LibraryService) { }
 
   ngOnInit(): void {
     this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
       this.user = user;
+      // this.libraryService.getLibrariesForUser(this.user.username).subscribe(libraries => {
+      //   this.libraries = libraries;
+      // });
     });
   }
 

src/app/nav-header/nav-header.component.html

@@ -5,9 +5,6 @@
         <!-- <li class="nav-item">
           <input type="text" placeholder="Search bar">
         </li> -->
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/errors" routerLinkActive="active">Errors</a>
-        </li>
 
       </ul>
 
@@ -16,8 +13,8 @@
       <div ngbDropdown class=" nav-item dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
         <button class="btn btn-outline-primary" ngbDropdownToggle>{{user.username | titlecase}}</button>
         <div ngbDropdownMenu >
-          <button ngbDropdownItem routerLink="/admin/users">Server Settings</button>
+          <button ngbDropdownItem routerLink="/admin/dashboard" *ngIf="user.isAdmin">Server Settings</button>
-          <button ngbDropdownItem *ngIf="user.isAdmin"(click)="logout()">Logout</button>
+          <button ngbDropdownItem (click)="logout()">Logout</button>
         </div>
       </div>
   

src/app/nav-header/nav-header.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { AccountService } from '../_services/account.service';
 
 @Component({
@@ -8,13 +9,14 @@ import { AccountService } from '../_services/account.service';
 })
 export class NavHeaderComponent implements OnInit {
 
-  constructor(public accountService: AccountService) { }
+  constructor(public accountService: AccountService, private router: Router) { }
 
   ngOnInit(): void {
   }
 
   logout() {
     this.accountService.logout();
+    this.router.navigateByUrl('/home');
   }
 
 }

src/app/shared/register-member/register-member.component.html

@@ -0,0 +1,26 @@
+<div class="text-warning">
+    <!-- <p>Error:</p>
+    <ul>
+    </ul> -->
+</div>
+<form [formGroup]="registerForm" (ngSubmit)="register()">
+    <div class="form-group">
+        <label for="username">Username</label>
+        <input id="username" class="form-control" formControlName="username" type="text">
+    </div>
+    
+    <div class="form-group">
+        <label for="password">Password</label>
+        <input id="password" class="form-control" formControlName="password" type="password">
+    </div>
+
+    <div class="form-check" *ngIf="adminExists">
+        <input id="admin" type="checkbox" aria-label="Admin" class="form-check-input" formControlName="isAdmin">
+        <label for="admin" class="form-check-label">Admin</label>
+    </div>
+
+    <div class="pull-right">
+        <button class="btn btn-secondary mr-2" type="button" (click)="cancel()">Cancel</button>
+        <button class="btn btn-primary" type="submit">Register</button>
+    </div>
+</form>

src/app/shared/register-member/register-member.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MemberService } from 'src/app/member.service';
+import { Member } from 'src/app/_models/member';
+import { AccountService } from 'src/app/_services/account.service';
+
+@Component({
+  selector: 'app-register-member',
+  templateUrl: './register-member.component.html',
+  styleUrls: ['./register-member.component.scss']
+})
+export class RegisterMemberComponent implements OnInit {
+
+  @Output() created = new EventEmitter<boolean>();
+
+  adminExists = false;
+  model: any = {};
+  registerForm: FormGroup = new FormGroup({
+      username: new FormControl('', [Validators.required]),
+      password: new FormControl('', [Validators.required]),
+      isAdmin: new FormControl(false, [])
+  });
+
+  constructor(private accountService: AccountService, private memberService: MemberService) { 
+    this.memberService.getMembers().subscribe(members => {
+      this.adminExists = members.filter(m => m.isAdmin).length > 0;
+      if (!this.adminExists) {
+        this.registerForm.get('isAdmin')?.setValue(true);
+        this.model.isAdmin = true;
+      }
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  register() {
+    this.model.username = this.registerForm.get('username')?.value;
+    this.model.password = this.registerForm.get('password')?.value;
+    this.model.isAdmin = this.registerForm.get('isAdmin')?.value;
+
+    this.accountService.register(this.model).subscribe(resp => {
+      this.created.emit(true);
+    }, err => {
+      console.log('validation errors from interceptor', err);
+    });
+  }
+
+  cancel() {
+    this.created.emit(false);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RegisterMemberComponent } from './register-member/register-member.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [RegisterMemberComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  exports: [
+    RegisterMemberComponent
+  ]
+})
+export class SharedModule { }

src/app/user-login/user-login.component.ts

@@ -23,11 +23,9 @@ export class UserLoginComponent implements OnInit {
 
   login() {
     this.model = {username: this.loginForm.get('username')?.value, password: this.loginForm.get('password')?.value};
-    this.accountService.login(this.model).subscribe(user => {
+    this.accountService.login(this.model).subscribe(() => {
-      if (user) {
       this.loginForm.reset();
       this.router.navigateByUrl('/library');
-      }
     });
   }