forks
/
peertube
1
0
Fork 0
Code Releases Activity

Client: update to new form api

This commit is contained in:
Chocobozzz 2016-08-23 14:37:49 +02:00
parent 39f87cb216
commit 0f6da32b14
13 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/package.json
View 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",

8
client/src/app/account/account.component.html
View 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>

22
client/src/app/account/account.component.ts
View 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

4
client/src/app/admin/friends/friend-add/friend-add.component.html
View 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>

2
client/src/app/admin/friends/friend-add/friend-add.component.ts
View 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(

16
client/src/app/admin/users/user-add/user-add.component.html
View 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>
@ -17,13 +17,13 @@
<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>

18
client/src/app/admin/users/user-add/user-add.component.ts
View 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

17
client/src/app/login/login.component.html
View 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>
@ -18,13 +17,13 @@
<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>

23
client/src/app/login/login.component.ts
View 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;

14
client/src/app/videos/video-add/video-add.component.html
View 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>
@ -54,10 +54,10 @@
<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>

15
client/src/app/videos/video-add/video-add.component.ts
View 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}$'))
});

8
client/src/main.ts
View 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()
]);

1
client/src/vendor.ts
View 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';