aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/admin/users
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/admin/users')
-rw-r--r--client/src/app/admin/users/index.ts5
-rw-r--r--client/src/app/admin/users/shared/index.ts1
-rw-r--r--client/src/app/admin/users/shared/user.service.ts47
-rw-r--r--client/src/app/admin/users/user-add/index.ts1
-rw-r--r--client/src/app/admin/users/user-add/user-add.component.html29
-rw-r--r--client/src/app/admin/users/user-add/user-add.component.ts57
-rw-r--r--client/src/app/admin/users/user-list/index.ts1
-rw-r--r--client/src/app/admin/users/user-list/user-list.component.html28
-rw-r--r--client/src/app/admin/users/user-list/user-list.component.scss7
-rw-r--r--client/src/app/admin/users/user-list/user-list.component.ts42
-rw-r--r--client/src/app/admin/users/users.component.ts8
-rw-r--r--client/src/app/admin/users/users.routes.ts27
12 files changed, 253 insertions, 0 deletions
diff --git a/client/src/app/admin/users/index.ts b/client/src/app/admin/users/index.ts
new file mode 100644
index 000000000..e98a81f62
--- /dev/null
+++ b/client/src/app/admin/users/index.ts
@@ -0,0 +1,5 @@
1export * from './shared';
2export * from './user-add';
3export * from './user-list';
4export * from './users.component';
5export * from './users.routes';
diff --git a/client/src/app/admin/users/shared/index.ts b/client/src/app/admin/users/shared/index.ts
new file mode 100644
index 000000000..e17ee5c7a
--- /dev/null
+++ b/client/src/app/admin/users/shared/index.ts
@@ -0,0 +1 @@
export * from './user.service';
diff --git a/client/src/app/admin/users/shared/user.service.ts b/client/src/app/admin/users/shared/user.service.ts
new file mode 100644
index 000000000..13be553c0
--- /dev/null
+++ b/client/src/app/admin/users/shared/user.service.ts
@@ -0,0 +1,47 @@
1import { Injectable } from '@angular/core';
2
3import { AuthHttp, RestExtractor, ResultList, User } from '../../../shared';
4
5@Injectable()
6export class UserService {
7 // TODO: merge this constant with account
8 private static BASE_USERS_URL = '/api/v1/users/';
9
10 constructor(
11 private authHttp: AuthHttp,
12 private restExtractor: RestExtractor
13 ) {}
14
15 addUser(username: string, password: string) {
16 const body = {
17 username,
18 password
19 };
20
21 return this.authHttp.post(UserService.BASE_USERS_URL, body)
22 .map(this.restExtractor.extractDataBool)
23 .catch(this.restExtractor.handleError);
24 }
25
26 getUsers() {
27 return this.authHttp.get(UserService.BASE_USERS_URL)
28 .map(this.restExtractor.extractDataList)
29 .map(this.extractUsers)
30 .catch((res) => this.restExtractor.handleError(res));
31 }
32
33 removeUser(user: User) {
34 return this.authHttp.delete(UserService.BASE_USERS_URL + user.id);
35 }
36
37 private extractUsers(result: ResultList) {
38 const usersJson = result.data;
39 const totalUsers = result.total;
40 const users = [];
41 for (const userJson of usersJson) {
42 users.push(new User(userJson));
43 }
44
45 return { users, totalUsers };
46 }
47}
diff --git a/client/src/app/admin/users/user-add/index.ts b/client/src/app/admin/users/user-add/index.ts
new file mode 100644
index 000000000..66d5ca04f
--- /dev/null
+++ b/client/src/app/admin/users/user-add/index.ts
@@ -0,0 +1 @@
export * from './user-add.component';
diff --git a/client/src/app/admin/users/user-add/user-add.component.html b/client/src/app/admin/users/user-add/user-add.component.html
new file mode 100644
index 000000000..9b76c7c1b
--- /dev/null
+++ b/client/src/app/admin/users/user-add/user-add.component.html
@@ -0,0 +1,29 @@
1<h3>Add user</h3>
2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4
5<form role="form" (ngSubmit)="addUser()" [formGroup]="form">
6 <div class="form-group">
7 <label for="username">Username</label>
8 <input
9 type="text" class="form-control" id="username" placeholder="Username"
10 formControlName="username"
11 >
12 <div *ngIf="formErrors.username" class="alert alert-danger">
13 {{ formErrors.username }}
14 </div>
15 </div>
16
17 <div class="form-group">
18 <label for="password">Password</label>
19 <input
20 type="password" class="form-control" id="password" placeholder="Password"
21 formControlName="password"
22 >
23 <div *ngIf="formErrors.password" class="alert alert-danger">
24 {{ formErrors.password }}
25 </div>
26 </div>
27
28 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid">
29</form>
diff --git a/client/src/app/admin/users/user-add/user-add.component.ts b/client/src/app/admin/users/user-add/user-add.component.ts
new file mode 100644
index 000000000..ab96fb01d
--- /dev/null
+++ b/client/src/app/admin/users/user-add/user-add.component.ts
@@ -0,0 +1,57 @@
1import { Component, OnInit } from '@angular/core';
2import { FormBuilder, FormGroup } from '@angular/forms';
3import { Router } from '@angular/router';
4
5import { UserService } from '../shared';
6import { FormReactive, USER_USERNAME, USER_PASSWORD } from '../../../shared';
7
8@Component({
9 selector: 'my-user-add',
10 templateUrl: './user-add.component.html'
11})
12export class UserAddComponent extends FormReactive implements OnInit {
13 error: string = null;
14
15 form: FormGroup;
16 formErrors = {
17 'username': '',
18 'password': ''
19 };
20 validationMessages = {
21 'username': USER_USERNAME.MESSAGES,
22 'password': USER_PASSWORD.MESSAGES,
23 };
24
25 constructor(
26 private formBuilder: FormBuilder,
27 private router: Router,
28 private userService: UserService
29 ) {
30 super();
31 }
32
33 buildForm() {
34 this.form = this.formBuilder.group({
35 username: [ '', USER_USERNAME.VALIDATORS ],
36 password: [ '', USER_PASSWORD.VALIDATORS ],
37 });
38
39 this.form.valueChanges.subscribe(data => this.onValueChanged(data));
40 }
41
42 ngOnInit() {
43 this.buildForm();
44 }
45
46 addUser() {
47 this.error = null;
48
49 const { username, password } = this.form.value;
50
51 this.userService.addUser(username, password).subscribe(
52 ok => this.router.navigate([ '/admin/users/list' ]),
53
54 err => this.error = err.text
55 );
56 }
57}
diff --git a/client/src/app/admin/users/user-list/index.ts b/client/src/app/admin/users/user-list/index.ts
new file mode 100644
index 000000000..51fbefa80
--- /dev/null
+++ b/client/src/app/admin/users/user-list/index.ts
@@ -0,0 +1 @@
export * from './user-list.component';
diff --git a/client/src/app/admin/users/user-list/user-list.component.html b/client/src/app/admin/users/user-list/user-list.component.html
new file mode 100644
index 000000000..328b1be77
--- /dev/null
+++ b/client/src/app/admin/users/user-list/user-list.component.html
@@ -0,0 +1,28 @@
1<h3>Users list</h3>
2
3<table class="table table-hover">
4 <thead>
5 <tr>
6 <th class="table-column-id">ID</th>
7 <th>Username</th>
8 <th>Created Date</th>
9 <th class="text-right">Remove</th>
10 </tr>
11 </thead>
12
13 <tbody>
14 <tr *ngFor="let user of users">
15 <td>{{ user.id }}</td>
16 <td>{{ user.username }}</td>
17 <td>{{ user.createdDate | date: 'medium' }}</td>
18 <td class="text-right">
19 <span class="glyphicon glyphicon-remove" *ngIf="!user.isAdmin()" (click)="removeUser(user)"></span>
20 </td>
21 </tr>
22 </tbody>
23</table>
24
25<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
26 <span class="glyphicon glyphicon-plus"></span>
27 Add user
28</a>
diff --git a/client/src/app/admin/users/user-list/user-list.component.scss b/client/src/app/admin/users/user-list/user-list.component.scss
new file mode 100644
index 000000000..e9f61e900
--- /dev/null
+++ b/client/src/app/admin/users/user-list/user-list.component.scss
@@ -0,0 +1,7 @@
1.glyphicon-remove {
2 cursor: pointer;
3}
4
5.add-user {
6 margin-top: 10px;
7}
diff --git a/client/src/app/admin/users/user-list/user-list.component.ts b/client/src/app/admin/users/user-list/user-list.component.ts
new file mode 100644
index 000000000..03f4e5c0a
--- /dev/null
+++ b/client/src/app/admin/users/user-list/user-list.component.ts
@@ -0,0 +1,42 @@
1import { Component, OnInit } from '@angular/core';
2
3import { User } from '../../../shared';
4import { UserService } from '../shared';
5
6@Component({
7 selector: 'my-user-list',
8 templateUrl: './user-list.component.html',
9 styleUrls: [ './user-list.component.scss' ]
10})
11export class UserListComponent implements OnInit {
12 totalUsers: number;
13 users: User[];
14
15 constructor(private userService: UserService) {}
16
17 ngOnInit() {
18 this.getUsers();
19 }
20
21 getUsers() {
22 this.userService.getUsers().subscribe(
23 ({ users, totalUsers }) => {
24 this.users = users;
25 this.totalUsers = totalUsers;
26 },
27
28 err => alert(err.text)
29 );
30 }
31
32
33 removeUser(user: User) {
34 if (confirm('Are you sure?')) {
35 this.userService.removeUser(user).subscribe(
36 () => this.getUsers(),
37
38 err => alert(err.text)
39 );
40 }
41 }
42}
diff --git a/client/src/app/admin/users/users.component.ts b/client/src/app/admin/users/users.component.ts
new file mode 100644
index 000000000..37e3b158d
--- /dev/null
+++ b/client/src/app/admin/users/users.component.ts
@@ -0,0 +1,8 @@
1import { Component } from '@angular/core';
2
3@Component({
4 template: '<router-outlet></router-outlet>'
5})
6
7export class UsersComponent {
8}
diff --git a/client/src/app/admin/users/users.routes.ts b/client/src/app/admin/users/users.routes.ts
new file mode 100644
index 000000000..eb71bd0ae
--- /dev/null
+++ b/client/src/app/admin/users/users.routes.ts
@@ -0,0 +1,27 @@
1import { Routes } from '@angular/router';
2
3import { UsersComponent } from './users.component';
4import { UserAddComponent } from './user-add';
5import { UserListComponent } from './user-list';
6
7export const UsersRoutes: Routes = [
8 {
9 path: 'users',
10 component: UsersComponent,
11 children: [
12 {
13 path: '',
14 redirectTo: 'list',
15 pathMatch: 'full'
16 },
17 {
18 path: 'list',
19 component: UserListComponent
20 },
21 {
22 path: 'add',
23 component: UserAddComponent
24 }
25 ]
26 }
27];