aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-08-23 14:37:49 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-08-23 14:37:49 +0200
commit0f6da32b148c0f4146b2ae9ad1add9a9f00cc339 (patch)
tree1272a5892e357aa0a0d370545effa6800092d568 /client/src/app
parent39f87cb21689a912559d0498641db7d2de4a784d (diff)
downloadPeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.tar.gz
PeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.tar.zst
PeerTube-0f6da32b148c0f4146b2ae9ad1add9a9f00cc339.zip
Client: update to new form api
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/account/account.component.html8
-rw-r--r--client/src/app/account/account.component.ts22
-rw-r--r--client/src/app/admin/friends/friend-add/friend-add.component.html4
-rw-r--r--client/src/app/admin/friends/friend-add/friend-add.component.ts2
-rw-r--r--client/src/app/admin/users/user-add/user-add.component.html16
-rw-r--r--client/src/app/admin/users/user-add/user-add.component.ts18
-rw-r--r--client/src/app/login/login.component.html17
-rw-r--r--client/src/app/login/login.component.ts23
-rw-r--r--client/src/app/videos/video-add/video-add.component.html14
-rw-r--r--client/src/app/videos/video-add/video-add.component.ts15
10 files changed, 80 insertions, 59 deletions
diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html
index ad8f690bd..4797fa914 100644
--- a/client/src/app/account/account.component.html
+++ b/client/src/app/account/account.component.html
@@ -3,14 +3,14 @@
3<div *ngIf="information" class="alert alert-success">{{ information }}</div> 3<div *ngIf="information" class="alert alert-success">{{ information }}</div>
4<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 4<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
5 5
6<form role="form" (ngSubmit)="changePassword(newPassword.value, newConfirmedPassword.value)" [ngFormModel]="changePasswordForm"> 6<form role="form" (ngSubmit)="changePassword()" [formGroup]="changePasswordForm">
7 <div class="form-group"> 7 <div class="form-group">
8 <label for="new-password">New password</label> 8 <label for="new-password">New password</label>
9 <input 9 <input
10 type="password" class="form-control" name="new-password" id="new-password" 10 type="password" class="form-control" name="new-password" id="new-password"
11 ngControl="newPassword" #newPassword="ngForm" 11 [(ngModel)]="newPassword" #newPasswordInput="ngModel"
12 > 12 >
13 <div [hidden]="newPassword.valid || newPassword.pristine" class="alert alert-warning"> 13 <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning">
14 The password should have more than 5 characters 14 The password should have more than 5 characters
15 </div> 15 </div>
16 </div> 16 </div>
@@ -19,7 +19,7 @@
19 <label for="name">Confirm new password</label> 19 <label for="name">Confirm new password</label>
20 <input 20 <input
21 type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password" 21 type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password"
22 ngControl="newConfirmedPassword" #newConfirmedPassword="ngForm" 22 [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel"
23 > 23 >
24 </div> 24 </div>
25 25
diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts
index 5c42103f8..54939f43b 100644
--- a/client/src/app/account/account.component.ts
+++ b/client/src/app/account/account.component.ts
@@ -1,5 +1,6 @@
1import { Control, ControlGroup, Validators } from '@angular/common'; 1import { Validators } from '@angular/common';
2import { Component, OnInit } from '@angular/core'; 2import { Component, OnInit } from '@angular/core';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
3import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
4 5
5import { AccountService } from './account.service'; 6import { AccountService } from './account.service';
@@ -7,11 +8,14 @@ import { AccountService } from './account.service';
7@Component({ 8@Component({
8 selector: 'my-account', 9 selector: 'my-account',
9 template: require('./account.component.html'), 10 template: require('./account.component.html'),
10 providers: [ AccountService ] 11 providers: [ AccountService ],
12 directives: [ REACTIVE_FORM_DIRECTIVES ]
11}) 13})
12 14
13export class AccountComponent implements OnInit { 15export class AccountComponent implements OnInit {
14 changePasswordForm: ControlGroup; 16 newPassword = '';
17 newConfirmedPassword = '';
18 changePasswordForm: FormGroup;
15 information: string = null; 19 information: string = null;
16 error: string = null; 20 error: string = null;
17 21
@@ -21,22 +25,22 @@ export class AccountComponent implements OnInit {
21 ) {} 25 ) {}
22 26
23 ngOnInit() { 27 ngOnInit() {
24 this.changePasswordForm = new ControlGroup({ 28 this.changePasswordForm = new FormGroup({
25 newPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), 29 'new-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
26 newConfirmedPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), 30 'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
27 }); 31 });
28 } 32 }
29 33
30 changePassword(newPassword: string, newConfirmedPassword: string) { 34 changePassword() {
31 this.information = null; 35 this.information = null;
32 this.error = null; 36 this.error = null;
33 37
34 if (newPassword !== newConfirmedPassword) { 38 if (this.newPassword !== this.newConfirmedPassword) {
35 this.error = 'The new password and the confirmed password do not correspond.'; 39 this.error = 'The new password and the confirmed password do not correspond.';
36 return; 40 return;
37 } 41 }
38 42
39 this.accountService.changePassword(newPassword).subscribe( 43 this.accountService.changePassword(this.newPassword).subscribe(
40 ok => this.information = 'Password updated.', 44 ok => this.information = 'Password updated.',
41 45
42 err => this.error = err 46 err => this.error = err
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.html b/client/src/app/admin/friends/friend-add/friend-add.component.html
index a52965e8f..d8bb740b4 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.html
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.html
@@ -2,11 +2,11 @@
2 2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 4
5<form role="form" (ngSubmit)="makeFriends()"> 5<form (ngSubmit)="makeFriends()">
6 <div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy"> 6 <div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
7 <label for="username">Url</label> 7 <label for="username">Url</label>
8 <div class="input-group"> 8 <div class="input-group">
9 <input type="text" class="form-control" name="url" id="url" placeholder="http://domain.com" [(ngModel)]="urls[id]" /> 9 <input type="text" class="form-control" [name]="'url-' + id" [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
10 <span class="input-group-btn"> 10 <span class="input-group-btn">
11 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button> 11 <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
12 <button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button> 12 <button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button>
diff --git a/client/src/app/admin/friends/friend-add/friend-add.component.ts b/client/src/app/admin/friends/friend-add/friend-add.component.ts
index 30dbf4d36..07888a781 100644
--- a/client/src/app/admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/admin/friends/friend-add/friend-add.component.ts
@@ -53,7 +53,7 @@ export class FriendAddComponent {
53 return; 53 return;
54 } 54 }
55 55
56 const confirmMessage = 'Are you sure to make friends with:\n - ' + this.urls.join('\n - '); 56 const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyUrls.join('\n - ');
57 if (!confirm(confirmMessage)) return; 57 if (!confirm(confirmMessage)) return;
58 58
59 this.friendService.makeFriends(notEmptyUrls).subscribe( 59 this.friendService.makeFriends(notEmptyUrls).subscribe(
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
index aa102358a..09219893b 100644
--- a/client/src/app/admin/users/user-add/user-add.component.html
+++ b/client/src/app/admin/users/user-add/user-add.component.html
@@ -2,14 +2,14 @@
2 2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 4
5<form role="form" (ngSubmit)="addUser(username.value, password.value)" #addUserForm="ngForm"> 5<form role="form" (ngSubmit)="addUser()" [formGroup]="userAddForm">
6 <div class="form-group"> 6 <div class="form-group">
7 <label for="username">Username</label> 7 <label for="username">Username</label>
8 <input 8 <input
9 type="text" class="form-control" name="username" id="username" placeholder="Username" required 9 type="text" class="form-control" name="username" id="username" placeholder="Username"
10 ngControl="username" #username="ngForm" 10 [(ngModel)]="username"
11 > 11 >
12 <div [hidden]="username.valid || username.pristine" class="alert alert-danger"> 12 <div [hidden]="userAddForm.controls.username.valid || userAddForm.controls.username.pristine" class="alert alert-danger">
13 Username is required with a length >= 3 and <= 20 13 Username is required with a length >= 3 and <= 20
14 </div> 14 </div>
15 </div> 15 </div>
@@ -17,13 +17,13 @@
17 <div class="form-group"> 17 <div class="form-group">
18 <label for="password">Password</label> 18 <label for="password">Password</label>
19 <input 19 <input
20 type="password" class="form-control" name="password" id="password" placeholder="Password" required 20 type="password" class="form-control" name="password" id="password" placeholder="Password"
21 ngControl="password" #password="ngForm" 21 [(ngModel)]="password"
22 > 22 >
23 <div [hidden]="password.valid || password.pristine" class="alert alert-danger"> 23 <div [hidden]="userAddForm.controls.password.valid || userAddForm.controls.password.pristine" class="alert alert-danger">
24 Password is required with a length >= 6 24 Password is required with a length >= 6
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!addUserForm.form.valid"> 28 <input type="submit" value="Add user" class="btn btn-default" [disabled]="!userAddForm.valid">
29</form> 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
index 30ca947a0..b7efd3a80 100644
--- a/client/src/app/admin/users/user-add/user-add.component.ts
+++ b/client/src/app/admin/users/user-add/user-add.component.ts
@@ -1,5 +1,6 @@
1import { Control, ControlGroup, Validators } from '@angular/common'; 1import { Validators } from '@angular/common';
2import { Component, OnInit } from '@angular/core'; 2import { Component, OnInit } from '@angular/core';
3import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
3import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
4 5
5import { UserService } from '../shared'; 6import { UserService } from '../shared';
@@ -7,24 +8,27 @@ import { UserService } from '../shared';
7@Component({ 8@Component({
8 selector: 'my-user-add', 9 selector: 'my-user-add',
9 template: require('./user-add.component.html'), 10 template: require('./user-add.component.html'),
11 directives: [ REACTIVE_FORM_DIRECTIVES ]
10}) 12})
11export class UserAddComponent implements OnInit { 13export class UserAddComponent implements OnInit {
12 userAddForm: ControlGroup; 14 userAddForm: FormGroup;
13 error: string = null; 15 error: string = null;
16 username = '';
17 password = '';
14 18
15 constructor(private router: Router, private userService: UserService) {} 19 constructor(private router: Router, private userService: UserService) {}
16 20
17 ngOnInit() { 21 ngOnInit() {
18 this.userAddForm = new ControlGroup({ 22 this.userAddForm = new FormGroup({
19 username: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(20) ])), 23 username: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(20) ]),
20 password: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), 24 password: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
21 }); 25 });
22 } 26 }
23 27
24 addUser(username: string, password: string) { 28 addUser() {
25 this.error = null; 29 this.error = null;
26 30
27 this.userService.addUser(username, password).subscribe( 31 this.userService.addUser(this.username, this.password).subscribe(
28 ok => this.router.navigate([ '/admin/users/list' ]), 32 ok => this.router.navigate([ '/admin/users/list' ]),
29 33
30 err => this.error = err 34 err => this.error = err
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 5848fcba3..636872942 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,16 +1,15 @@
1<h3>Login</h3> 1<h3>Login</h3>
2 2
3
4<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
5 4
6<form role="form" (ngSubmit)="login(username.value, password.value)" #loginForm="ngForm"> 5<form role="form" (ngSubmit)="login()" [formGroup]="loginForm">
7 <div class="form-group"> 6 <div class="form-group">
8 <label for="username">Username</label> 7 <label for="username">Username</label>
9 <input 8 <input
10 type="text" class="form-control" name="username" id="username" placeholder="Username" required 9 type="text" class="form-control" name="username" id="username" placeholder="Username"
11 ngControl="username" #username="ngForm" 10 [(ngModel)]="username"
12 > 11 >
13 <div [hidden]="username.valid || username.pristine" class="alert alert-danger"> 12 <div [hidden]="loginForm.controls.username.valid || loginForm.controls.username.pristine" class="alert alert-danger">
14 Username is required 13 Username is required
15 </div> 14 </div>
16 </div> 15 </div>
@@ -18,13 +17,13 @@
18 <div class="form-group"> 17 <div class="form-group">
19 <label for="password">Password</label> 18 <label for="password">Password</label>
20 <input 19 <input
21 type="password" class="form-control" name="password" id="password" placeholder="Password" required 20 type="password" class="form-control" name="password" id="password" placeholder="Password"
22 ngControl="password" #password="ngForm" 21 [(ngModel)]="password"
23 > 22 >
24 <div [hidden]="password.valid || password.pristine" class="alert alert-danger"> 23 <div [hidden]="loginForm.controls.password.valid || loginForm.controls.password.pristine" class="alert alert-danger">
25 Password is required 24 Password is required
26 </div> 25 </div>
27 </div> 26 </div>
28 27
29 <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.form.valid"> 28 <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.valid">
30</form> 29</form>
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index ddd62462e..fe867b7b4 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -1,23 +1,36 @@
1import { Component } from '@angular/core'; 1import { Component, OnInit } from '@angular/core';
2import { Validators } from '@angular/common';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
2import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
3 5
4import { AuthService } from '../shared'; 6import { AuthService } from '../shared';
5 7
6@Component({ 8@Component({
7 selector: 'my-login', 9 selector: 'my-login',
8 template: require('./login.component.html') 10 template: require('./login.component.html'),
11 directives: [ REACTIVE_FORM_DIRECTIVES ]
9}) 12})
10 13
11export class LoginComponent { 14export class LoginComponent implements OnInit {
12 error: string = null; 15 error: string = null;
16 username = '';
17 password: '';
18 loginForm: FormGroup;
13 19
14 constructor( 20 constructor(
15 private authService: AuthService, 21 private authService: AuthService,
16 private router: Router 22 private router: Router
17 ) {} 23 ) {}
18 24
19 login(username: string, password: string) { 25 ngOnInit() {
20 this.authService.login(username, password).subscribe( 26 this.loginForm = new FormGroup({
27 username: new FormControl('', [ <any>Validators.required ]),
28 password: new FormControl('', [ <any>Validators.required ]),
29 });
30 }
31
32 login() {
33 this.authService.login(this.username, this.password).subscribe(
21 result => { 34 result => {
22 this.error = null; 35 this.error = null;
23 36
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index bcd78c7cb..76bb61f7d 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -2,14 +2,14 @@
2 2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4 4
5<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm"> 5<form novalidate (ngSubmit)="upload()" [formGroup]="videoForm">
6 <div class="form-group"> 6 <div class="form-group">
7 <label for="name">Name</label> 7 <label for="name">Name</label>
8 <input 8 <input
9 type="text" class="form-control" name="name" id="name" 9 type="text" class="form-control" name="name" id="name"
10 ngControl="name" #name="ngForm" [(ngModel)]="video.name" 10 [(ngModel)]="video.name"
11 > 11 >
12 <div [hidden]="name.valid || name.pristine" class="alert alert-warning"> 12 <div [hidden]="videoForm.controls.name.valid || videoForm.controls.name.pristine" class="alert alert-warning">
13 A name is required and should be between 3 and 50 characters long 13 A name is required and should be between 3 and 50 characters long
14 </div> 14 </div>
15 </div> 15 </div>
@@ -18,9 +18,9 @@
18 <label for="tags">Tags</label> 18 <label for="tags">Tags</label>
19 <input 19 <input
20 type="text" class="form-control" name="tags" id="tags" 20 type="text" class="form-control" name="tags" id="tags"
21 ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag" 21 [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
22 > 22 >
23 <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning"> 23 <div [hidden]="videoForm.controls.tags.valid || videoForm.controls.tags.pristine" class="alert alert-warning">
24 A tag should be between 2 and 10 characters (alphanumeric) long 24 A tag should be between 2 and 10 characters (alphanumeric) long
25 </div> 25 </div>
26 </div> 26 </div>
@@ -54,10 +54,10 @@
54 <label for="description">Description</label> 54 <label for="description">Description</label>
55 <textarea 55 <textarea
56 name="description" id="description" class="form-control" placeholder="Description..." 56 name="description" id="description" class="form-control" placeholder="Description..."
57 ngControl="description" #description="ngForm" [(ngModel)]="video.description" 57 [(ngModel)]="video.description"
58 > 58 >
59 </textarea> 59 </textarea>
60 <div [hidden]="description.valid || description.pristine" class="alert alert-warning"> 60 <div [hidden]="videoForm.controls.description.valid || videoForm.controls.description.pristine" class="alert alert-warning">
61 A description is required and should be between 3 and 250 characters long 61 A description is required and should be between 3 and 250 characters long
62 </div> 62 </div>
63 </div> 63 </div>
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index c0f8cb9c4..900ef1da3 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -1,5 +1,6 @@
1import { Control, ControlGroup, Validators } from '@angular/common'; 1import { Validators } from '@angular/common';
2import { Component, ElementRef, OnInit } from '@angular/core'; 2import { Component, ElementRef, OnInit } from '@angular/core';
3import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
3import { Router } from '@angular/router'; 4import { Router } from '@angular/router';
4 5
5import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; 6import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
@@ -12,14 +13,14 @@ import { AuthService } from '../../shared';
12 selector: 'my-videos-add', 13 selector: 'my-videos-add',
13 styles: [ require('./video-add.component.scss') ], 14 styles: [ require('./video-add.component.scss') ],
14 template: require('./video-add.component.html'), 15 template: require('./video-add.component.html'),
15 directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ], 16 directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
16 pipes: [ BytesPipe ] 17 pipes: [ BytesPipe ]
17}) 18})
18 19
19export class VideoAddComponent implements OnInit { 20export class VideoAddComponent implements OnInit {
20 currentTag: string; // Tag the user is writing in the input 21 currentTag: string; // Tag the user is writing in the input
21 error: string = null; 22 error: string = null;
22 videoForm: ControlGroup; 23 videoForm: FormGroup;
23 uploader: FileUploader; 24 uploader: FileUploader;
24 video = { 25 video = {
25 name: '', 26 name: '',
@@ -70,10 +71,10 @@ export class VideoAddComponent implements OnInit {
70 } 71 }
71 72
72 ngOnInit() { 73 ngOnInit() {
73 this.videoForm = new ControlGroup({ 74 this.videoForm = new FormGroup({
74 name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])), 75 name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
75 description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])), 76 description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
76 tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$')) 77 tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
77 }); 78 });
78 79
79 80