Merge pull request #6 from markoceri/master

Add create user for admin page
IoT-Makers · Sep 3, 2018 · e95754d · e95754d
2 parents d35c367 + c2361b4
commit e95754d
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 2 deletions.
diff --git a/webapp/src/app/pages/admin/admin.component.html b/webapp/src/app/pages/admin/admin.component.html
@@ -194,7 +194,7 @@ <h4 class="text-center">Users</h4>
           </div>
           <div class="card-block">
 
-            <button class="mb-1 btn btn-success" (click)="editUser()"><i class="fa fa-plus-circle"></i> Add a new user
+            <button class="mb-1 btn btn-success" (click)="openAddUserModal()"><i class="fa fa-plus-circle"></i> Add a new user
             </button>
 
             <ng-container *ngIf="!usersReady">
@@ -379,6 +379,52 @@ <h4 class="text-center">Organizations</h4>
 
 </div>
 
+<div bsModal #addOrEditUserModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
+     aria-labelledby="addOrEditUserModal" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <form *ngIf="addUserFlag" (ngSubmit)="addUser()" class="form-horizontal" #addOrEditForm="ngForm">
+        <div class="modal-header">
+          <h4 class="modal-title">Create an user</h4>
+          <button type="button" class="close" (click)="addOrEditUserModal.hide()" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <div class="input-group mb-1">
+            <span class="input-group-addon">@</span>
+            <input [(ngModel)]="userToAddOrEdit.email" type="text" class="form-control" name="username" placeholder="Email">
+          </div>
+
+          <div class="input-group mb-1">
+            <span class="input-group-addon"><i class="icon-lock"></i></span>
+            <input [(ngModel)]="userToAddOrEdit.password" type="password" class="form-control" name="password"
+                    placeholder="Password">
+          </div>
+
+          <div class="input-group mb-2">
+            <span class="input-group-addon"><i class="icon-lock"></i></span>
+            <input [(ngModel)]="verifyPassword" type="password" class="form-control" name="verifyPassword"
+                    (ngModelChange)="verify()" placeholder="Repeat password">
+          </div>
+
+          <div *ngIf="errorMessage != ''">
+            <div class="mb-3 bg-danger text-center">
+              {{errorMessage}}
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" (click)="addOrEditUserModal.hide()">Close</button>
+          <button [disabled]="errorMessage!= ''" type="button" class="btn btn-user" (click)="addUser()">Create</button>
+        </div>
+      </form>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+
 <div bsModal #confirmModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModal"
      aria-hidden="true">
   <div class="modal-dialog" role="document">

diff --git a/webapp/src/app/pages/admin/admin.component.ts b/webapp/src/app/pages/admin/admin.component.ts
@@ -21,6 +21,8 @@ import {
 })
 export class AdminComponent implements OnInit, OnDestroy {
 
+  @ViewChild('addOrEditUserModal') addOrEditUserModal: any
+
   private myUser: User;
   private userToRemove: User;
   public users: User[] = [];
@@ -45,6 +47,11 @@ export class AdminComponent implements OnInit, OnDestroy {
   private organization: Organization;
   public organizations: Organization[] = [];
 
+  public addUserFlag = true;
+  private userToAddOrEdit: User = new User();
+  public verifyPassword = '';
+  public errorMessage = '';
+
   private userRef: FireLoopRef<User>;
   private userSub: Subscription;
 
@@ -230,8 +237,50 @@ export class AdminComponent implements OnInit, OnDestroy {
     });
   }
 
-  editUser() {
+  openAddUserModal(): void {
+    this.userToAddOrEdit = new User();
+    this.verifyPassword = '';
+    this.addUserFlag = true;
+
+    this.addOrEditUserModal.show();
+  }
+
+  verify(): void {
+    if (this.userToAddOrEdit.password !== this.verifyPassword) {
+      this.errorMessage = 'Passwords do not match';
+    } else {
+      this.errorMessage = '';
+    }
+  }
+
+  addUser(): void {
+    console.log('Admin | Try to create user...', this.userToAddOrEdit);
+
+    this.userToAddOrEdit.email = this.userToAddOrEdit.email.toLocaleLowerCase();
+    this.userToAddOrEdit.id = null;
+    this.userToAddOrEdit.createdAt = new Date();
+
+    this.userRef.create(this.userToAddOrEdit).subscribe((user: User) => {
+      console.log('Admin | User created', user);
+      this.getUsers();
+      if (this.toast)
+        this.toasterService.clear(this.toast.toastId, this.toast.toastContainerId);
+      this.toast = this.toasterService.pop('success', 'Success', 'Account was created successfully.');
+    }, (err) => {
+      if (err.error.statusCode === 422) {
+        if (this.toast)
+          this.toasterService.clear(this.toast.toastId, this.toast.toastContainerId);
+        this.toast = this.toasterService.pop('error', 'Error', 'Email exists.');
+        console.log('Admin | Error 422 | Email already taken');
+      } else {
+        if (this.toast)
+          this.toasterService.clear(this.toast.toastId, this.toast.toastContainerId);
+        this.toast = this.toasterService.pop('error', 'Error', 'Invalid username or password');
+        console.log('Admin | Error | Invalid username or password ', err);
+      }
+    });
 
+    this.addOrEditUserModal.hide();
   }
 
   deleteOrganization(organization: Organization): void {