aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/admin/users
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-08-09 21:45:21 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-08-09 21:45:21 +0200
commit7da18e4420c4b71a8ecfda07f39324fbfec081c3 (patch)
tree2755feedd730a78cdc407e7a79bcbfce3ebe71c8 /client/src/app/admin/users
parent68a3b9f2aacb0225ae8b883b561b144bac339cbd (diff)
downloadPeerTube-7da18e4420c4b71a8ecfda07f39324fbfec081c3.tar.gz
PeerTube-7da18e4420c4b71a8ecfda07f39324fbfec081c3.tar.zst
PeerTube-7da18e4420c4b71a8ecfda07f39324fbfec081c3.zip
Client: add user management
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.ts49
-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.ts33
-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.html24
-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.ts44
-rw-r--r--client/src/app/admin/users/users.component.ts13
-rw-r--r--client/src/app/admin/users/users.routes.ts27
12 files changed, 234 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..be433f0a1
--- /dev/null
+++ b/client/src/app/admin/users/shared/user.service.ts
@@ -0,0 +1,49 @@
1import { Injectable } from '@angular/core';
2import { Response } from '@angular/http';
3import { Observable } from 'rxjs/Observable';
4
5import { AuthHttp, User } from '../../../shared';
6
7@Injectable()
8export class UserService {
9 // TODO: merge this constant with account
10 private static BASE_USERS_URL = '/api/v1/users/';
11
12 constructor(private authHttp: AuthHttp) {}
13
14 addUser(username: string, password: string) {
15 const body = {
16 username,
17 password
18 };
19
20 return this.authHttp.post(UserService.BASE_USERS_URL, body);
21 }
22
23 getUsers() {
24 return this.authHttp.get(UserService.BASE_USERS_URL)
25 .map(res => res.json())
26 .map(this.extractUsers)
27 .catch(this.handleError);
28 }
29
30 removeUser(user: User) {
31 return this.authHttp.delete(UserService.BASE_USERS_URL + user.id);
32 }
33
34 private extractUsers(body: any) {
35 const usersJson = body.data;
36 const totalUsers = body.total;
37 const users = [];
38 for (const userJson of usersJson) {
39 users.push(new User(userJson));
40 }
41
42 return { users, totalUsers };
43 }
44
45 private handleError(error: Response) {
46 console.error(error);
47 return Observable.throw(error.json().error || 'Server error');
48 }
49}
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..aa102358a
--- /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(username.value, password.value)" #addUserForm="ngForm">
6 <div class="form-group">
7 <label for="username">Username</label>
8 <input
9 type="text" class="form-control" name="username" id="username" placeholder="Username" required
10 ngControl="username" #username="ngForm"
11 >
12 <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
13 Username is required with a length >= 3 and <= 20
14 </div>
15 </div>
16
17 <div class="form-group">
18 <label for="password">Password</label>
19 <input
20 type="password" class="form-control" name="password" id="password" placeholder="Password" required
21 ngControl="password" #password="ngForm"
22 >
23 <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
24 Password is required with a length >= 6
25 </div>
26 </div>
27
28 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!addUserForm.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..30ca947a0
--- /dev/null
+++ b/client/src/app/admin/users/user-add/user-add.component.ts
@@ -0,0 +1,33 @@
1import { Control, ControlGroup, Validators } from '@angular/common';
2import { Component, OnInit } from '@angular/core';
3import { Router } from '@angular/router';
4
5import { UserService } from '../shared';
6
7@Component({
8 selector: 'my-user-add',
9 template: require('./user-add.component.html'),
10})
11export class UserAddComponent implements OnInit {
12 userAddForm: ControlGroup;
13 error: string = null;
14
15 constructor(private router: Router, private userService: UserService) {}
16
17 ngOnInit() {
18 this.userAddForm = new ControlGroup({
19 username: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(20) ])),
20 password: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
21 });
22 }
23
24 addUser(username: string, password: string) {
25 this.error = null;
26
27 this.userService.addUser(username, password).subscribe(
28 ok => this.router.navigate([ '/admin/users/list' ]),
29
30 err => this.error = err
31 );
32 }
33}
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..2aca05f2b
--- /dev/null
+++ b/client/src/app/admin/users/user-list/user-list.component.html
@@ -0,0 +1,24 @@
1<table class="table table-hover">
2 <thead>
3 <tr>
4 <th>Id</th>
5 <th>Username</th>
6 <th class="text-right">Remove</th>
7 </tr>
8 </thead>
9
10 <tbody>
11 <tr *ngFor="let user of users">
12 <td>{{ user.id }}</td>
13 <td>{{ user.username }}</td>
14 <td class="text-right">
15 <span class="glyphicon glyphicon-remove" *ngIf="!user.isAdmin()" (click)="removeUser(user)"></span>
16 </td>
17 </tr>
18 </tbody>
19</table>
20
21<a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']">
22 <span class="glyphicon glyphicon-plus"></span>
23 Add user
24</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..598daa42a
--- /dev/null
+++ b/client/src/app/admin/users/user-list/user-list.component.ts
@@ -0,0 +1,44 @@
1import { Component, OnInit } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3
4import { User } from '../../../shared';
5import { UserService } from '../shared';
6
7@Component({
8 selector: 'my-user-list',
9 template: require('./user-list.component.html'),
10 styles: [ require('./user-list.component.scss') ],
11 directives: [ ROUTER_DIRECTIVES ]
12})
13export class UserListComponent implements OnInit {
14 totalUsers: number;
15 users: User[];
16
17 constructor(private userService: UserService) {}
18
19 ngOnInit() {
20 this.getUsers();
21 }
22
23 getUsers() {
24 this.userService.getUsers().subscribe(
25 ({ users, totalUsers }) => {
26 this.users = users;
27 this.totalUsers = totalUsers;
28 },
29
30 err => alert(err)
31 );
32 }
33
34
35 removeUser(user: User) {
36 if (confirm('Are you sure?')) {
37 this.userService.removeUser(user).subscribe(
38 () => this.getUsers(),
39
40 err => alert(err)
41 );
42 }
43 }
44}
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..46aa0862f
--- /dev/null
+++ b/client/src/app/admin/users/users.component.ts
@@ -0,0 +1,13 @@
1import { Component } from '@angular/core';
2import { ROUTER_DIRECTIVES } from '@angular/router';
3
4import { UserService } from './shared';
5
6@Component({
7 template: '<router-outlet></router-outlet>',
8 directives: [ ROUTER_DIRECTIVES ],
9 providers: [ UserService ]
10})
11
12export class UsersComponent {
13}
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..0457c3843
--- /dev/null
+++ b/client/src/app/admin/users/users.routes.ts
@@ -0,0 +1,27 @@
1import { RouterConfig } from '@angular/router';
2
3import { UsersComponent } from './users.component';
4import { UserAddComponent } from './user-add';
5import { UserListComponent } from './user-list';
6
7export const UsersRoutes: RouterConfig = [
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];