diff --git a/client/package.json b/client/package.json index 46cbb9441..6fc48d11e 100644 --- a/client/package.json +++ b/client/package.json @@ -22,6 +22,7 @@ "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", + "@angular/forms": "^0.2.0", "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", @@ -42,7 +43,7 @@ "ie-shim": "^0.1.0", "intl": "^1.2.4", "json-loader": "^0.5.4", - "ng2-bootstrap": "1.0.16", + "ng2-bootstrap": "1.0.24", "ng2-file-upload": "^1.0.3", "node-sass": "^3.7.0", "normalize.css": "^4.1.1", 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 @@
{{ information }}
{{ error }}
-
+
-
+
The password should have more than 5 characters
@@ -19,7 +19,7 @@
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 @@ -import { Control, ControlGroup, Validators } from '@angular/common'; +import { Validators } from '@angular/common'; import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { AccountService } from './account.service'; @@ -7,11 +8,14 @@ import { AccountService } from './account.service'; @Component({ selector: 'my-account', template: require('./account.component.html'), - providers: [ AccountService ] + providers: [ AccountService ], + directives: [ REACTIVE_FORM_DIRECTIVES ] }) export class AccountComponent implements OnInit { - changePasswordForm: ControlGroup; + newPassword = ''; + newConfirmedPassword = ''; + changePasswordForm: FormGroup; information: string = null; error: string = null; @@ -21,22 +25,22 @@ export class AccountComponent implements OnInit { ) {} ngOnInit() { - this.changePasswordForm = new ControlGroup({ - newPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), - newConfirmedPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), + this.changePasswordForm = new FormGroup({ + 'new-password': new FormControl('', [ Validators.required, Validators.minLength(6) ]), + 'new-confirmed-password': new FormControl('', [ Validators.required, Validators.minLength(6) ]), }); } - changePassword(newPassword: string, newConfirmedPassword: string) { + changePassword() { this.information = null; this.error = null; - if (newPassword !== newConfirmedPassword) { + if (this.newPassword !== this.newConfirmedPassword) { this.error = 'The new password and the confirmed password do not correspond.'; return; } - this.accountService.changePassword(newPassword).subscribe( + this.accountService.changePassword(this.newPassword).subscribe( ok => this.information = 'Password updated.', 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 @@
{{ error }}
- +
- + 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 { return; } - const confirmMessage = 'Are you sure to make friends with:\n - ' + this.urls.join('\n - '); + const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyUrls.join('\n - '); if (!confirm(confirmMessage)) return; 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 @@
{{ error }}
- +
-
+
Username is required with a length >= 3 and <= 20
@@ -17,13 +17,13 @@
-
+
Password is required with a length >= 6
- + 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 @@ -import { Control, ControlGroup, Validators } from '@angular/common'; +import { Validators } from '@angular/common'; import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { UserService } from '../shared'; @@ -7,24 +8,27 @@ import { UserService } from '../shared'; @Component({ selector: 'my-user-add', template: require('./user-add.component.html'), + directives: [ REACTIVE_FORM_DIRECTIVES ] }) export class UserAddComponent implements OnInit { - userAddForm: ControlGroup; + userAddForm: FormGroup; error: string = null; + username = ''; + password = ''; constructor(private router: Router, private userService: UserService) {} ngOnInit() { - this.userAddForm = new ControlGroup({ - username: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(20) ])), - password: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])), + this.userAddForm = new FormGroup({ + username: new FormControl('', [ Validators.required, Validators.minLength(3), Validators.maxLength(20) ]), + password: new FormControl('', [ Validators.required, Validators.minLength(6) ]), }); } - addUser(username: string, password: string) { + addUser() { this.error = null; - this.userService.addUser(username, password).subscribe( + this.userService.addUser(this.username, this.password).subscribe( ok => this.router.navigate([ '/admin/users/list' ]), 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 @@

Login

-
{{ error }}
-
+
-
+
Username is required
@@ -18,13 +17,13 @@
-
+
Password is required
- + 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 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Validators } from '@angular/common'; +import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { AuthService } from '../shared'; @Component({ selector: 'my-login', - template: require('./login.component.html') + template: require('./login.component.html'), + directives: [ REACTIVE_FORM_DIRECTIVES ] }) -export class LoginComponent { +export class LoginComponent implements OnInit { error: string = null; + username = ''; + password: ''; + loginForm: FormGroup; constructor( private authService: AuthService, private router: Router ) {} - login(username: string, password: string) { - this.authService.login(username, password).subscribe( + ngOnInit() { + this.loginForm = new FormGroup({ + username: new FormControl('', [ Validators.required ]), + password: new FormControl('', [ Validators.required ]), + }); + } + + login() { + this.authService.login(this.username, this.password).subscribe( result => { this.error = null; 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 @@
{{ error }}
-
+
-
+
A name is required and should be between 3 and 50 characters long
@@ -18,9 +18,9 @@ -
+
A tag should be between 2 and 10 characters (alphanumeric) long
@@ -54,10 +54,10 @@ -
+
A description is required and should be between 3 and 250 characters long
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 @@ -import { Control, ControlGroup, Validators } from '@angular/common'; +import { Validators } from '@angular/common'; import { Component, ElementRef, OnInit } from '@angular/core'; +import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { Router } from '@angular/router'; import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; @@ -12,14 +13,14 @@ import { AuthService } from '../../shared'; selector: 'my-videos-add', styles: [ require('./video-add.component.scss') ], template: require('./video-add.component.html'), - directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ], + directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ], pipes: [ BytesPipe ] }) export class VideoAddComponent implements OnInit { currentTag: string; // Tag the user is writing in the input error: string = null; - videoForm: ControlGroup; + videoForm: FormGroup; uploader: FileUploader; video = { name: '', @@ -70,10 +71,10 @@ export class VideoAddComponent implements OnInit { } ngOnInit() { - this.videoForm = new ControlGroup({ - name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])), - description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])), - tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$')) + this.videoForm = new FormGroup({ + name: new FormControl('', [ Validators.required, Validators.minLength(3), Validators.maxLength(50) ]), + description: new FormControl('', [ Validators.required, Validators.minLength(3), Validators.maxLength(250) ]), + tags: new FormControl('', Validators.pattern('^[a-zA-Z0-9]{2,10}$')) }); diff --git a/client/src/main.ts b/client/src/main.ts index 41fc6e0c2..7c058e12f 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,4 +1,5 @@ import { enableProdMode, provide } from '@angular/core'; +import { disableDeprecatedForms, provideForms } from '@angular/forms'; import { HTTP_PROVIDERS, RequestOptions, @@ -23,6 +24,11 @@ bootstrap(AppComponent, [ }, deps: [ XHRBackend, RequestOptions, AuthService ] }), + AuthService, - provideRouter(routes) + + provideRouter(routes), + + disableDeprecatedForms(), + provideForms() ]); diff --git a/client/src/vendor.ts b/client/src/vendor.ts index 8f029191a..df03bc5f4 100644 --- a/client/src/vendor.ts +++ b/client/src/vendor.ts @@ -8,6 +8,7 @@ import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; +import '@angular/forms'; import '@angular/http'; import '@angular/router';