!wip almost finished the add plex friend

src/Ombi/ClientApp/app/usermanagement/addplexuser.component.html

@@ -0,0 +1,59 @@
+<div class="modal-header">
+  <h3>Add A Friend!</h3>
+</div>
+<div class="modal-body">
+  <p>You can invite a user to share your Plex Library here. The invited user will be asked to confirm friendship.</p>
+
+
+  <div *ngIf="plexServers">
+    <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
+
+
+        <div class="form-group">
+            <label for="username" class="control-label">Username/Email</label>
+
+                <input type="text" class="form-control form-control-custom " id="username" name="username" p formControlName="username"  [ngClass]="{'form-error': form.get('username').hasError('required')}">
+                <small *ngIf="form.get('username').hasError('required')" class="error-text">The Username/Email is required</small>
+        </div>
+        
+
+      <div class="form-group">
+        <label for="select" class="control-label">Select a Server</label>
+        <div id="profiles">
+          <select formControlName="selectedServer" (change)="selected()" class="form-control form-control-custom" id="select" [ngClass]="{'form-error': form.get('selectedServer').hasError('required')}">
+            <option *ngFor="let server of plexServers" value="{{server.machineId}}">{{server.serverName}}</option>
+          </select>
+        </div>
+        <small *ngIf="form.get('selectedServer').hasError('required')" class="error-text">You need to select a server!</small>
+      </div>
+
+      <div *ngIf="plexLibs" class="form-group">
+          <label for="select" class="control-label">Libraries to share</label>
+
+          <div class="form-group">
+              <div class="checkbox">
+                  <input type="checkbox" id="selectAll" formControlName="allLibsSelected">
+                  <label for="selectAll">All</label>
+              </div>
+          </div>
+
+
+          <div *ngIf="!form.value.allLibsSelected">
+            <div *ngFor="let lib of plexLibs.mediaContainer.directory">
+              <div class="form-group">
+                  <div class="checkbox">
+                      <input type="checkbox" id="{{lib.key}}" value={{lib.key}} (change)="checkedLib($event.target.checked, $event.target.value)">
+                      <label for="{{lib.key}}">{{lib.title}}</label>
+                  </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="modal-footer">
+    <button type="submit" class="btn btn-primary-outline" (click)="onSubmit(form)" [disabled]="form.invalid">Add</button>
+  <button type="button" class="btn btn-danger-outline" (click)="activeModal.close('Close click')">Close</button>
+</div>

src/Ombi/ClientApp/app/usermanagement/addplexuser.component.ts

@@ -1,25 +1,84 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 
-@Component({
+import { NotificationService, PlexService } from "../services";
-    selector: "ngbd-modal-content",
-template: `
-  <div class="modal-header">
-  </div>
-  <div class="modal-body">
-    <p>Hello, {{name}}!</p>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-danger-outline" (click)="activeModal.close('Close click')">Close</button>
-  </div>
-`,
-})
-export class AddPlexUserComponent  {
-   
-    @Input() public name: string;
 
-  constructor(public activeModal: NgbActiveModal) {
+import { IPlexLibraries, IPlexServersAdd } from "../interfaces";
-      console.log("called");
+
+@Component({
+  selector: "ngbd-modal-content",
+  templateUrl: "./addplexuser.component.html",
+})
+export class AddPlexUserComponent implements OnInit {
+
+  @Input() public name: string;
+
+  public plexServers: IPlexServersAdd[];
+  public plexLibs: IPlexLibraries;
+
+  public libsSelected: number[] = [];
+
+  public form: FormGroup;
+
+  constructor(public activeModal: NgbActiveModal,
+              private plexService: PlexService,
+              private notificationService: NotificationService,
+              private fb: FormBuilder) {
   }
 
+  public ngOnInit(): void {
+    this.form = this.fb.group({
+      selectedServer: [null, Validators.required],
+      allLibsSelected: [true],
+      username:[null, Validators.required],
+    });
+    this.getServers();
+  }
+
+  public getServers() {
+    this.plexService.getServersFromSettings().subscribe(x => {
+      if (x.success) {
+        this.plexServers = x.servers;
+      }
+    });
+  }
+
+  public getPlexLibs(machineId: string) {
+    this.plexService.getLibrariesFromSettings(machineId).subscribe(x => {
+      if (x.successful) {
+        this.plexLibs = x.data;
+      }
+    });
+  }
+
+  public selected() {
+    this.getPlexLibs(this.form.value.selectedServer);
+  }
+
+  public checkedLib(checked: boolean, value: number) {
+    if(checked) {
+      this.libsSelected.push(value);
+    } else {
+      this.libsSelected = this.libsSelected.filter(v => v !== value);
+    }
+  }
+
+  public onSubmit(form: FormGroup) {
+    debugger;
+    if (form.invalid) {
+        this.notificationService.error("Please check your entered values");
+        return;
+    }
+    const libs = form.value.allLibsSelected ? this.plexLibs.mediaContainer.directory.map(x => +x.key) : this.libsSelected;
+
+    this.plexService.addUserToServer({ username: form.value.username, machineIdentifier: form.value.selectedServer, libsSelected: libs }).subscribe(x => {
+      if (x.success) {
+        this.notificationService.success("User added to Plex");
+      } else {
+        this.notificationService.error(x.error);
+      }
+    });
+
+  }
 }

src/Ombi/ClientApp/app/usermanagement/usermanagement.component.html

@@ -2,7 +2,7 @@
 
 
 <div *ngIf="plexEnabled">
-<button type="button" class="btn btn-success-outline" (click)="open()">Add User To Plex</button>
+<button type="button"  style="float:right;"  class="btn btn-success-outline" (click)="open()">Add Plex Friend</button>
 <hr>
 </div>
 <button type="button" class="btn btn-success-outline" [routerLink]="['/usermanagement/add']">Add User To Ombi</button>

src/Ombi/ClientApp/app/usermanagement/usermanagement.component.ts

@@ -1,28 +1,12 @@
 import { Component, OnInit } from "@angular/core";
 
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings,  IPlexLibraries, IPlexServersAdd, IUser } from "../interfaces";
+import { ICheckbox, ICustomizationSettings, IEmailNotificationSettings, IUser } from "../interfaces";
-import { IdentityService, NotificationService, PlexService, SettingsService } from "../services";
+import { IdentityService, NotificationService, SettingsService } from "../services";
 import { AddPlexUserComponent } from "./addplexuser.component";
 
 @Component({
     templateUrl: "./usermanagement.component.html",
-    styles:[`.modal-backdrop.fade{opacity:0.5}
-    .fade {
-        opacity:1 !important;
-    }
-    .modal {
-        display: none;
-        overflow: hidden;
-        position: fixed;
-        top: 100px;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1050;
-        -webkit-overflow-scrolling: touch;
-        outline: 0;
-    }`],
 })
 export class UserManagementComponent implements OnInit {
 
@@ -39,18 +23,11 @@ export class UserManagementComponent implements OnInit {
     public bulkMovieLimit?: number;
     public bulkEpisodeLimit?: number;
     public plexEnabled: boolean;
-    public plexServers: IPlexServersAdd[];
-    public plexLibs: IPlexLibraries;
-
-    public plexUsername: string;
-    public libsSelected: number[];
-    public machineId: string;
 
     constructor(private identityService: IdentityService,
                 private settingsService: SettingsService,
                 private notificationService: NotificationService,
                 private plexSettings: SettingsService,
-                private plexService: PlexService,
                 private modalService: NgbModal) { }
 
     public ngOnInit() {
@@ -67,7 +44,7 @@ export class UserManagementComponent implements OnInit {
     }
 
     public open() {
-        const modalRef = this.modalService.open(AddPlexUserComponent, {container:"ombi"});
+        const modalRef = this.modalService.open(AddPlexUserComponent, {container:"ombi", backdropClass:"custom-modal-backdrop", windowClass:"window"});
         modalRef.componentInstance.name = "World";
       }
 
@@ -153,34 +130,4 @@ export class UserManagementComponent implements OnInit {
 
         this.order = value;
     }
-
-    public getServers() {
-        if(!this.plexEnabled) {
-            return this.notificationService.error("Plex is not enabled");
-        }
-
-        this.plexService.getServersFromSettings().subscribe(x => {
-            if(x.success) {
-                this.plexServers = x.servers;
-            }
-        });
-    }
-
-    public getPlexLibs(machineId: string) {
-        this.plexService.getLibrariesFromSettings(machineId).subscribe(x => {
-            if(x.successful) {
-                this.plexLibs = x.data;
-            }
-        });
-    }
-
-    public addUser() {
-        this.plexService.addUserToServer({ username: this.plexUsername, machineIdentifier: this.machineId, libsSelected: this.libsSelected}).subscribe(x => {
-            if(x.success) {
-                this.notificationService.success("User added to Plex");
-            } else {
-                this.notificationService.error(x.error);
-            }
-        });
-    }
 }

src/Ombi/ClientApp/styles/base.scss

@@ -966,3 +966,18 @@ a > h4:hover {
 .subject {
     display: inline-block;
 }
+
+.custom-modal-backdrop {
+    opacity: 0.5 !important;
+    filter: alpha(opacity=0.5);
+}
+
+.window {
+    opacity: 1 !important;
+    top: 7%;
+}
+
+.modal-header {
+    background-color: #282828;
+    padding-top:75px;
+}