Initial modal component work

src/app/settings/user-admin/user-admin.component.html

@@ -20,10 +20,12 @@
                     <td>{{ user.default_board_name }}</td>
                     <td>
                         <span *ngIf="user.can_admin">
-                            <a (click)="editUser(user)">
+                            <a href="javascript:" title="Edit User"
+                                (click)="editUser(user)">
                                 <i class="icon icon-edit color-primary"></i>
                             </a>
-                            <a (click)="removeUser(user)">
+                            <a href="javascript:" title="Remove User"
+                                (click)="removeUser(user)">
                                 <i class="icon icon-trash-empty color-secondary"></i>
                             </a>
                         </span>
@@ -35,7 +37,62 @@
             <div class="spinner"></div>
         </div>
 
-        <button (click)="addUser()">Add User</button>
+        <button (click)="addUser()">
+            <i class="icon icon-plus"></i> Add User
+        </button>
     </div>
 </section>
 
+<tb-modal modal-title="Add User"
+    [is-open]="isModalOpen" (onClose)="modalClosed()">
+    <label>
+        Username
+        <input type="text" name="new-username" placeholder="Username" autofocus
+            [(ngModel)]="newUser.username">
+    </label>
+
+    <label>
+        Password
+        <input type="password" name="new-password" placeholder="Password"
+            [(ngModel)]="newUser.password">
+    </label>
+    <input type="password" name="new-password-verify"
+        placeholder="Verify Password"
+        [(ngModel)]="newUser.verifyPassword">
+
+    <label>
+        Email
+        <input type="text" name="new-email" placeholder="email"
+            [(ngModel)]="newUser.email">
+    </label>
+
+    <label>
+        Default Board <i class="icon icon-help-circled"></i>
+        <select>
+            <option>TODO</option>
+        </select>
+    </label>
+
+    <label>
+        Board Access
+        <select multiple>
+            <option>TODO</option>
+        </select>
+    </label>
+
+    <label>
+        Security Level
+        <select name="new-security"
+            [(ngModel)]="newUser.security_level">
+            <option value="3">User</option>
+            <option value="2">Board Admin</option>
+            <option value="1">Admin</option>
+        </select>
+    </label>
+
+    <div class="buttons">
+        <button><i class="icon icon-plus"></i> Add User</button>
+        <button class="flat" (click)="isModalOpen = false">Cancel</button>
+    </div>
+</tb-modal>
+

src/app/settings/user-admin/user-admin.component.ts

@@ -4,7 +4,8 @@ import { UserAdminService } from './user-admin.service';
 import {
     AuthService,
     User,
-    ApiResponse
+    ApiResponse,
+    Modal
 } from '../../shared/index';
 
 interface UserDisplay extends User {
@@ -13,18 +14,28 @@ interface UserDisplay extends User {
     can_admin: boolean;
 }
 
+class NewUser extends User {
+    public password: string = '';
+    public verifyPassword: string = '';
+}
+
 @Component({
     selector: 'tb-user-admin',
     templateUrl: 'app/settings/user-admin/user-admin.component.html',
-    providers: [ UserAdminService ]
+    providers: [ UserAdminService, Modal ],
+    directives: [ Modal ]
 })
 export class UserAdmin {
     private activeUser: User = null;
     private users: Array<UserDisplay>;
     private loading: boolean = true;
+    private isModalOpen: boolean = false;
+    private newUser: NewUser;
 
     constructor(private userService: UserAdminService,
             private auth: AuthService) {
+        this.newUser = new NewUser();
+
         auth.userChanged.subscribe(user => this.activeUser = user);
 
         this.userService.getUsers()
@@ -36,6 +47,8 @@ export class UserAdmin {
     }
 
     addUser(): void {
+        this.newUser = new NewUser();
+        this.isModalOpen = true;
     }
 
     editUser(user: UserDisplay): void {
@@ -44,6 +57,10 @@ export class UserAdmin {
     removeUser(user: UserDisplay): void {
     }
 
+    private modalClosed(): void {
+        this.isModalOpen = false;
+    }
+
     private updateUserList(): void {
         for (var user of this.users) {
             if (user.default_board_id === 0) {

src/app/shared/index.ts

@@ -3,4 +3,5 @@ export * from './auth/index';
 export * from './models/index';
 export * from './notifications/index';
 export * from './constants';
+export * from './modal/modal.component'
 

src/app/shared/modal/modal.component.html

@@ -0,0 +1,19 @@
+<div *ngIf="isOpen">
+    <div class="modal-overlay" (click)="close(true)"></div>
+
+    <div class="modal">
+        <div class="title">
+            <h2>
+                {{ modalTitle }}
+                <span class="right" (click)="close()">
+                    <i class="icon icon-cancel"></i>
+                </span>
+            </h2>
+        </div>
+
+        <div class="body">
+            <ng-content></ng-content>
+        </div>
+    </div>
+</div>
+

src/app/shared/modal/modal.component.ts

@@ -0,0 +1,40 @@
+import {
+    Component,
+    Input,
+    Output,
+    EventEmitter
+} from '@angular/core';
+
+@Component({
+    selector: 'tb-modal',
+    templateUrl: 'app/shared/modal/modal.component.html',
+    host: { '(document:keyup)': 'keyup($event)' }
+})
+export class Modal {
+    @Input('modal-title') modalTitle: string;
+    @Input() blocking = false;
+    @Input('is-open') isOpen = false;
+    @Output() onClose = new EventEmitter<boolean>();
+
+    open() {
+        this.isOpen = true;
+    }
+
+    close(checkBlocking = false) {
+        if (checkBlocking && this.blocking) {
+            return;
+        }
+
+        this.isOpen = false;
+        this.onClose.next(false);
+    }
+
+    keyup(event: KeyboardEvent) {
+        if (event.keyCode === 27) {
+            if (!this.blocking) {
+                this.close();
+            }
+        }
+    }
+}
+

src/scss/_modal.scss

@@ -0,0 +1,60 @@
+.modal-overlay {
+    background-color: rgba(0, 0, 0, .4);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+}
+
+.modal {
+    @include shadow-float();
+
+    background-color: $white;
+    left: calc(50vw - 200px);
+    max-height: calc(100vh - 10em);
+    min-height: 10em;
+    overflow-y: auto;
+    position: fixed;
+    top: 5em;
+    width: 400px;
+    z-index: 1100;
+
+    .title {
+        background-color: $color-heading-bg;
+
+        .right {
+            color: $color-text;
+            cursor: pointer;
+        }
+
+        .right:hover {
+            color: lighten($color-text, 10%);
+        }
+    }
+
+    .title,
+    .body {
+        padding: .75em;
+    }
+
+    input,
+    select {
+        height: auto;
+        margin-bottom: 7px;
+    }
+
+    .buttons {
+        float: right;
+        margin: 1em;
+        margin-right: 0;
+
+        .flat {
+            background-color: $white;
+            color: $color-text;
+            line-height: 1.1em;
+        }
+    }
+}
+

src/scss/main.scss

@@ -20,4 +20,5 @@
 @import 'dashboard';
 @import 'icons';
 @import 'notifications';
+@import 'modal';