Ombi/Ombi/Ombi/wwwroot/app/usermanagement/usermanagement.component.html

<h1>User Management</h1>


<!--Search-->
<div class="row">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">
                <i class="fa fa-search"></i>
            </div>

            <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchTerm">

        </div>
    </div>
</div>



<button type="button" class="btn btn-success-outline" (click)="showCreateDialogue=true">Add User</button>
<!-- Table -->
<table class="table table-striped table-hover table-responsive table-condensed">
    <thead>
    <tr>
        <th>
            <a>
                Username
                <!--<span ng-show="sortType == 'username' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'username' && sortReverse" class="fa fa-caret-up"></span>-->
            </a>
        </th>
        <th>
            <a>
                Alias
            </a>
        </th>
        <th>
            <a>
                Email
            </a>
        </th>
        <th>
            Roles
        </th>
        <th>
            <a>
                User Type
            </a>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let u of users">
        <td>
            {{u.username}}
        </td>
        <td>
            {{u.alias}}
        </td>
        <td>
            {{u.emailAddress}}
        </td>
        <td>
            <div *ngFor="let claim of u.claims"><span *ngIf="claim.enabled">{{claim.value}}</span></div>

        </td>
        <td ng-hide="hideColumns">
            <span *ngIf="u.userType === 1">Local User</span>
            <span *ngIf="u.userType === 2">Plex User</span>
            <span *ngIf="u.userType === 3">Emby User</span>
        </td>
        <td>
            <a (click)="edit(u)" class="btn btn-sm btn-info-outline">Details/Edit</a>
        </td>
    </tr>
    </tbody>
</table>



<div class="modal fade in" *ngIf="showEditDialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="showEditDialog=false">&times;</button>
                <h4 class="modal-title">Editing User {{selectedUser?.username}}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="username" class="control-label">Username</label>
                    <div>
                        <input type="text" [(ngModel)]="selectedUser.username" [readonly]="true" class="form-control form-control-custom " id="username" name="username" value="{{selectedUser?.username}}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="alias" class="control-label">Alias</label>
                    <div>
                        <input type="text" [(ngModel)]="selectedUser.alias" class="form-control form-control-custom " id="alias" name="alias" value="{{selectedUser?.alias}}">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="alias" class="control-label">Email Address</label>
                    <div>
                        <input type="text" [(ngModel)]="selectedUser.emailAddress" class="form-control form-control-custom " id="emailAddress" name="emailAddress" value="{{selectedUser?.emailAddress}}">
                    </div>
                </div>
                
                <div *ngFor="let c of selectedUser.claims">
                    <div class="form-group">
                        <div class="checkbox">
                            <label for="claim{{c.value}}">{{c.value}}</label>
                            <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" [checked]="c.value" id="claim{{c.value}}" name="claim{{c.value}}" ng-checked="c.enabled">

                        </div>
                    </div>

         
         
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger-outline" (click)="showEditDialog=false">Close</button>
                <button type="button" class="btn btn-primary-outline" (click)="updateUser()">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div id="lightbox">
    <div class="modal fade in " *ngIf="showCreateDialogue" style="display: block;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="showCreateDialogue=false">&times;</button>
                    <h4 class="modal-title">Create User</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="username" class="control-label">Username</label>
                        <div>
                            <input type="text" [(ngModel)]="createdUser.username" class="form-control form-control-custom " id="username" name="username" value="{{createdUser?.username}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="alias" class="control-label">Alias</label>
                        <div>
                            <input type="text" [(ngModel)]="createdUser.alias" class="form-control form-control-custom " id="alias" name="alias" value="{{createdUser?.alias}}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="emailAddress" class="control-label">Email Address</label>
                        <div>
                            <input type="text" [(ngModel)]="createdUser.emailAddress" class="form-control form-control-custom " id="emailAddress" name="emailAddress" value="{{createdUser?.emailAddress}}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="control-label">Password</label>
                        <div>
                            <input type="password" [(ngModel)]="createdUser.password" class="form-control form-control-custom " id="password" name="password" value="{{createdUser?.password}}">
                        </div>
                    </div>


                    <div *ngFor="let c of availableClaims">
                        <div class="form-group">
                            <div class="checkbox">
                                <label for="create{{c.value}}">{{c.value}}</label>
                                <input type="checkbox" [(ngModel)]="c.enabled" [value]="c.value" [checked]="c.value" id="create{{c.value}}" name="create{{c.value}}" ng-checked="c.enabled">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger-outline" (click)="showCreateDialogue=false">Close</button>
                    <button type="button" class="btn btn-primary-outline" (click)="create()">Add User</button>
                </div>
            </div>
        </div>
    </div>
</div>