2020-11-25 08:59:48 +01:00
<!-- Begin page -->
< div class = "wrapper" >
< app-sidebar > < / app-sidebar >
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
< div id = "content" >
< app-topbar > < / app-topbar >
<!-- Start Content -->
< div class = "container-fluid" appMenuSelection >
2020-12-05 07:30:30 +01:00
< nav aria-label = "breadcrumb" >
< ol class = "breadcrumb" >
< li class = "breadcrumb-item" > < a routerLink = "/home" > Home< / a > < / li >
< li class = "breadcrumb-item active" aria-current = "page" > Settings< / li >
< / ol >
< / nav >
2020-11-25 08:59:48 +01:00
< div class = "row" >
< div class = "col-md-6 mb-2" >
< div class = "card" >
2020-12-05 07:30:30 +01:00
< mat-card-title class = "card-header text-center" >
2020-11-25 08:59:48 +01:00
SETTINGS
2020-12-05 07:30:30 +01:00
< / mat-card-title >
2020-11-25 08:59:48 +01:00
< div class = "card-body" >
< h4 > Kobo Toolbox Credentials< / h4 >
2020-12-05 07:30:30 +01:00
< span > < strong > Username: < / strong > admin_reserve < / span > < br >
< span > < strong > Password: < / strong > ******** < / span >
2020-11-25 08:59:48 +01:00
< / div >
< hr >
< div class = "card-body" >
< h4 > Organization Settings< / h4 >
2020-12-05 07:30:30 +01:00
< a routerLink = "/settings/organization" > < i > Update your organization settings< / i > < / a >
2020-11-25 08:59:48 +01:00
< / div >
< / div >
< / div >
< div class = "col-md-6 mb-2" >
< div class = "card" >
2020-12-05 07:30:30 +01:00
< mat-card-title class = "card-header text-center" >
2020-11-25 08:59:48 +01:00
ACCOUNT MANAGEMENT
2020-12-05 07:30:30 +01:00
< / mat-card-title >
2020-11-25 08:59:48 +01:00
< div class = "card-body" >
< h4 > Change Password< / h4 >
2020-12-05 07:30:30 +01:00
< a routerLink = "/settings" > < i > Change your account password< / i > < / a >
2020-11-25 08:59:48 +01:00
< / div >
< hr >
< div class = "card-body" >
< h4 > Two-step authentication< / h4 >
2020-12-05 07:30:30 +01:00
< a routerLink = "/settings" > < i > Secure your account with two step verification< / i > < / a >
2020-11-25 08:59:48 +01:00
< / div >
< hr >
< div class = "card-body" >
2020-12-05 07:30:30 +01:00
< button mat-raised-button color = "primary" type = "button" class = "btn btn-outline-primary" > LOGOUT ADMIN < / button >
2020-11-25 08:59:48 +01:00
< / div >
< / div >
< / div >
2020-12-05 07:30:30 +01:00
< div class = "col-12" >
< div class = "card mb-3" >
< mat-card-title class = "card-header" >
< div class = "row" >
USERS
< button mat-raised-button color = "primary" routerLink = "/settings/invite" type = "button" class = "btn btn-outline-primary ml-auto" > < i class = "fa fa-plus" > NEW USER < / i > < / button >
< / div >
< / mat-card-title >
< div class = "card-body" >
< mat-form-field appearance = "outline" >
< mat-label > Filter < / mat-label >
< input matInput type = "text" ( keyup ) = " doFilter ( $ event . target . value ) " placeholder = "Filter" >
< mat-icon matSuffix > search< / mat-icon >
< / mat-form-field >
< mat-table class = "mat-elevation-z10" [ dataSource ] = " dataSource " matSort matSortActive = "name"
matSortDirection="asc" matSortDisableClear>
< ng-container matColumnDef = "name" >
< mat-header-cell * matHeaderCellDef mat-sort-header > NAME < / mat-header-cell >
< mat-cell * matCellDef = "let user" > {{user.name}} < / mat-cell >
< / ng-container >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< ng-container matColumnDef = "accountType" >
< mat-header-cell * matHeaderCellDef mat-sort-header > ACCOUNT TYPE < / mat-header-cell >
< mat-cell * matCellDef = "let user" > {{user.accountType}} < / mat-cell >
< / ng-container >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< ng-container matColumnDef = "created" >
< mat-header-cell * matHeaderCellDef mat-sort-header > CREATED < / mat-header-cell >
< mat-cell * matCellDef = "let user" > {{user.created}} < / mat-cell >
< / ng-container >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< ng-container matColumnDef = "status" >
< mat-header-cell * matHeaderCellDef mat-sort-header > STATUS < / mat-header-cell >
< mat-cell * matCellDef = "let user" >
< span * ngIf = "user.status === 'activated'" class = "badge badge-success badge-pill" > {{user.status}} < / span >
< span * ngIf = "user.status === 'deactivated'" class = "badge badge-danger badge-pill" > {{user.status}} < / span >
< / mat-cell >
< / ng-container >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< ng-container matColumnDef = "options" >
< mat-header-cell * matHeaderCellDef > OPTIONS < / mat-header-cell >
< mat-cell * matCellDef = "let user" class = "dropdown" >
< button mat-raised-button color = "warn" [ matMenuTriggerFor ] = " menu " class = "btn btn-outline-danger ml-1" > < i class = "fa fa-ellipsis-h" > < / i > < / button >
< mat-menu # menu = 'matMenu' >
< button mat-menu-item ( click ) = " changeStaffType ( user . id , ' SuperAdmin ' ) " > Change to Super Admin< / button >
< button mat-menu-item ( click ) = " changeStaffType ( user . id , ' Admin ' ) " > Change to Admin< / button >
< button mat-menu-item ( click ) = " changeStaffType ( user . id , ' Enroller ' ) " > Change to Enroller< / button >
< button mat-menu-item ( click ) = " changeStaffType ( user . id , ' View ' ) " > Change to View Only< / button >
< button * ngIf = "user.status === 'activated'" mat-menu-item ( click ) = " deactivateStaff ( user . id ) " > Deactivate User< / button >
< button * ngIf = "user.status === 'deactivated'" mat-menu-item ( click ) = " activateStaff ( user . id ) " > Activate User< / button >
< / mat-menu >
< / mat-cell >
< / ng-container >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< mat-header-row * matHeaderRowDef = "displayedColumns" > < / mat-header-row >
< mat-row * matRowDef = "let transaction; columns: displayedColumns" > < / mat-row >
< / mat-table >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< mat-paginator [ pageSize ] = " 5 " [ pageSizeOptions ] = " [ 5 , 10 , 20 , 50 , 100 ] " showFirstLastButtons > < / mat-paginator >
2020-11-25 08:59:48 +01:00
2020-12-05 07:30:30 +01:00
< / div >
2020-11-25 08:59:48 +01:00
< / div >
< / div >
< / div >
< / div >
< app-footer appMenuSelection > < / app-footer >
< / div >
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
< / div >