Client: update to new form api
authorChocobozzz <florian.bigard@gmail.com>
Tue, 23 Aug 2016 12:37:49 +0000 (14:37 +0200)
committerChocobozzz <florian.bigard@gmail.com>
Tue, 23 Aug 2016 12:37:49 +0000 (14:37 +0200)
13 files changed:
client/package.json
client/src/app/account/account.component.html
client/src/app/account/account.component.ts
client/src/app/admin/friends/friend-add/friend-add.component.html
client/src/app/admin/friends/friend-add/friend-add.component.ts
client/src/app/admin/users/user-add/user-add.component.html
client/src/app/admin/users/user-add/user-add.component.ts
client/src/app/login/login.component.html
client/src/app/login/login.component.ts
client/src/app/videos/video-add/video-add.component.html
client/src/app/videos/video-add/video-add.component.ts
client/src/main.ts
client/src/vendor.ts

index 46cbb9441975565960a075657853f2c0da4df4db..6fc48d11e6ea1afb989023c14286d00f5371a777 100644 (file)
@@ -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",
index ad8f690bd4906e0e20964b0383e2e6af28e88922..4797fa9149c3e39157b0319fcc516e29f20186ae 100644 (file)
@@ -3,14 +3,14 @@
 <div *ngIf="information" class="alert alert-success">{{ information }}</div>
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="changePassword(newPassword.value, newConfirmedPassword.value)" [ngFormModel]="changePasswordForm">
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="changePasswordForm">
   <div class="form-group">
     <label for="new-password">New password</label>
     <input
       type="password" class="form-control" name="new-password" id="new-password"
-      ngControl="newPassword" #newPassword="ngForm"
+      [(ngModel)]="newPassword" #newPasswordInput="ngModel"
     >
-    <div [hidden]="newPassword.valid || newPassword.pristine" class="alert alert-warning">
+    <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning">
       The password should have more than 5 characters
     </div>
   </div>
@@ -19,7 +19,7 @@
     <label for="name">Confirm new password</label>
     <input
       type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password"
-      ngControl="newConfirmedPassword" #newConfirmedPassword="ngForm"
+      [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel"
     >
   </div>
 
index 5c42103f878643dc171e1daba7d6be22cc91d72a..54939f43bc4ef117804afa1300a59773c63e4cd3 100644 (file)
@@ -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('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
+      'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>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
index a52965e8ff0f7b66680981832606be4bafff1ca6..d8bb740b4677d5d58e0e9e53e8dd72634270deed 100644 (file)
@@ -2,11 +2,11 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="makeFriends()">
+<form (ngSubmit)="makeFriends()">
   <div class="form-group"  *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
     <label for="username">Url</label>
     <div class="input-group">
-      <input type="text" class="form-control" name="url" id="url" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
+      <input type="text" class="form-control" [name]="'url-' + id"  [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
       <span class="input-group-btn">
         <button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
         <button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button>
index 30dbf4d36ef75d203dd39891b7e9e6b408e4a3b3..07888a7819f9cb9b2697f9e6437489dbc73b4c7c 100644 (file)
@@ -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(
index aa102358ad0793827b0ed955622071b90ff4bfb9..09219893b882ab0824f36a4bc2500e88dd9ceb1c 100644 (file)
@@ -2,14 +2,14 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="addUser(username.value, password.value)" #addUserForm="ngForm">
+<form role="form" (ngSubmit)="addUser()" [formGroup]="userAddForm">
   <div class="form-group">
     <label for="username">Username</label>
     <input
-      type="text" class="form-control" name="username" id="username" placeholder="Username" required
-      ngControl="username" #username="ngForm"
+      type="text" class="form-control" name="username" id="username" placeholder="Username"
+      [(ngModel)]="username"
     >
-    <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+    <div [hidden]="userAddForm.controls.username.valid || userAddForm.controls.username.pristine" class="alert alert-danger">
       Username is required with a length >= 3 and <= 20
     </div>
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <input
-      type="password" class="form-control" name="password" id="password" placeholder="Password" required
-      ngControl="password" #password="ngForm"
+      type="password" class="form-control" name="password" id="password" placeholder="Password"
+      [(ngModel)]="password"
     >
-    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+    <div [hidden]="userAddForm.controls.password.valid || userAddForm.controls.password.pristine" class="alert alert-danger">
       Password is required with a length >= 6
     </div>
   </div>
 
-  <input type="submit" value="Add user" class="btn btn-default" [disabled]="!addUserForm.form.valid">
+  <input type="submit" value="Add user" class="btn btn-default" [disabled]="!userAddForm.valid">
 </form>
index 30ca947a0c7d2ec563783721ddfd0273db603345..b7efd3a8004c68a794c7d538a5f2ba3412747af8 100644 (file)
@@ -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('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(20) ]),
+      password: new FormControl('', [ <any>Validators.required, <any>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
index 5848fcba30d55f18f8e6f83867002af296c52768..6368729420f1464bcc7af21bdd44eed6c305da3b 100644 (file)
@@ -1,16 +1,15 @@
 <h3>Login</h3>
 
-
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form role="form" (ngSubmit)="login(username.value, password.value)" #loginForm="ngForm">
+<form role="form" (ngSubmit)="login()" [formGroup]="loginForm">
   <div class="form-group">
     <label for="username">Username</label>
     <input
-      type="text" class="form-control" name="username" id="username" placeholder="Username" required
-      ngControl="username" #username="ngForm"
+      type="text" class="form-control" name="username" id="username" placeholder="Username"
+      [(ngModel)]="username"
     >
-    <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+    <div [hidden]="loginForm.controls.username.valid || loginForm.controls.username.pristine" class="alert alert-danger">
       Username is required
     </div>
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <input
-      type="password" class="form-control" name="password" id="password" placeholder="Password" required
-      ngControl="password" #password="ngForm"
+      type="password" class="form-control" name="password" id="password" placeholder="Password"
+      [(ngModel)]="password"
     >
-    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+    <div [hidden]="loginForm.controls.password.valid || loginForm.controls.password.pristine" class="alert alert-danger">
       Password is required
     </div>
   </div>
 
-  <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.form.valid">
+  <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.valid">
 </form>
index ddd62462ebed68cbf100f00138c8f0d1e2cb6db1..fe867b7b435761dd4758c6a4a0df11ae9a64e30e 100644 (file)
@@ -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('', [ <any>Validators.required ]),
+      password: new FormControl('', [ <any>Validators.required ]),
+    });
+  }
+
+  login() {
+    this.authService.login(this.username, this.password).subscribe(
       result => {
         this.error = null;
 
index bcd78c7cb5dc96a1e47adddd3a1281e335267cb8..76bb61f7db63dedeb44121feef8fff7c90f6ff65 100644 (file)
@@ -2,14 +2,14 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm">
+<form novalidate (ngSubmit)="upload()" [formGroup]="videoForm">
   <div class="form-group">
     <label for="name">Name</label>
     <input
       type="text" class="form-control" name="name" id="name"
-      ngControl="name" #name="ngForm" [(ngModel)]="video.name"
+      [(ngModel)]="video.name"
     >
-    <div [hidden]="name.valid || name.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.name.valid || videoForm.controls.name.pristine" class="alert alert-warning">
       A name is required and should be between 3 and 50 characters long
     </div>
   </div>
@@ -18,9 +18,9 @@
     <label for="tags">Tags</label>
     <input
       type="text" class="form-control" name="tags" id="tags"
-      ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
+      [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
     >
-    <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.tags.valid || videoForm.controls.tags.pristine" class="alert alert-warning">
       A tag should be between 2 and 10 characters (alphanumeric) long
     </div>
   </div>
     <label for="description">Description</label>
     <textarea
       name="description" id="description" class="form-control" placeholder="Description..."
-      ngControl="description"  #description="ngForm" [(ngModel)]="video.description"
+      [(ngModel)]="video.description"
     >
     </textarea>
-    <div [hidden]="description.valid || description.pristine" class="alert alert-warning">
+    <div [hidden]="videoForm.controls.description.valid || videoForm.controls.description.pristine" class="alert alert-warning">
         A description is required and should be between 3 and 250 characters long
     </div>
   </div>
index c0f8cb9c437921f63bdbb22e8b409bb9dd18ce1d..900ef1da336f90687315bfd9322c6ce13e4a0c38 100644 (file)
@@ -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('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
+      description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
+      tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
     });
 
 
index 41fc6e0c2a464d1f9f7a9da45469a6de6ef8bb66..7c058e12fd165a77e993f602a1c23feb8f3857c0 100644 (file)
@@ -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()
 ]);
index 8f029191a1ff0c1c3b64065d2338ca037a2c7748..df03bc5f42dc2d358974fc52845d9f1a2c8ff1a5 100644 (file)
@@ -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';