aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/signup
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/signup')
-rw-r--r--client/src/app/signup/index.ts3
-rw-r--r--client/src/app/signup/signup-routing.module.ts22
-rw-r--r--client/src/app/signup/signup.component.html40
-rw-r--r--client/src/app/signup/signup.component.ts72
-rw-r--r--client/src/app/signup/signup.module.ts24
5 files changed, 161 insertions, 0 deletions
diff --git a/client/src/app/signup/index.ts b/client/src/app/signup/index.ts
new file mode 100644
index 000000000..1f4290ab5
--- /dev/null
+++ b/client/src/app/signup/index.ts
@@ -0,0 +1,3 @@
1export * from './signup-routing.module';
2export * from './signup.component';
3export * from './signup.module';
diff --git a/client/src/app/signup/signup-routing.module.ts b/client/src/app/signup/signup-routing.module.ts
new file mode 100644
index 000000000..367eed90c
--- /dev/null
+++ b/client/src/app/signup/signup-routing.module.ts
@@ -0,0 +1,22 @@
1import { NgModule } from '@angular/core';
2import { RouterModule, Routes } from '@angular/router';
3
4import { SignupComponent } from './signup.component';
5
6const signupRoutes: Routes = [
7 {
8 path: 'signup',
9 component: SignupComponent,
10 data: {
11 meta: {
12 title: 'Signup'
13 }
14 }
15 }
16];
17
18@NgModule({
19 imports: [ RouterModule.forChild(signupRoutes) ],
20 exports: [ RouterModule ]
21})
22export class SignupRoutingModule {}
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html
new file mode 100644
index 000000000..6c9c60e8b
--- /dev/null
+++ b/client/src/app/signup/signup.component.html
@@ -0,0 +1,40 @@
1<h3>Signup</h3>
2
3<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
4
5<form role="form" (ngSubmit)="signup()" [formGroup]="form">
6 <div class="form-group">
7 <label for="username">Username</label>
8 <input
9 type="text" class="form-control" id="username" placeholder="Username"
10 formControlName="username"
11 >
12 <div *ngIf="formErrors.username" class="alert alert-danger">
13 {{ formErrors.username }}
14 </div>
15 </div>
16
17 <div class="form-group">
18 <label for="email">Email</label>
19 <input
20 type="text" class="form-control" id="email" placeholder="Email"
21 formControlName="email"
22 >
23 <div *ngIf="formErrors.email" class="alert alert-danger">
24 {{ formErrors.email }}
25 </div>
26 </div>
27
28 <div class="form-group">
29 <label for="password">Password</label>
30 <input
31 type="password" class="form-control" id="password" placeholder="Password"
32 formControlName="password"
33 >
34 <div *ngIf="formErrors.password" class="alert alert-danger">
35 {{ formErrors.password }}
36 </div>
37 </div>
38
39 <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
40</form>
diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts
new file mode 100644
index 000000000..85f93793b
--- /dev/null
+++ b/client/src/app/signup/signup.component.ts
@@ -0,0 +1,72 @@
1import { Component, OnInit } from '@angular/core';
2import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3import { Router } from '@angular/router';
4
5import { NotificationsService } from 'angular2-notifications';
6
7import { AuthService } from '../core';
8import {
9 FormReactive,
10 UserService,
11 USER_USERNAME,
12 USER_EMAIL,
13 USER_PASSWORD
14} from '../shared';
15
16@Component({
17 selector: 'my-signup',
18 templateUrl: './signup.component.html'
19})
20export class SignupComponent extends FormReactive implements OnInit {
21 error: string = null;
22
23 form: FormGroup;
24 formErrors = {
25 'username': '',
26 'email': '',
27 'password': ''
28 };
29 validationMessages = {
30 'username': USER_USERNAME.MESSAGES,
31 'email': USER_EMAIL.MESSAGES,
32 'password': USER_PASSWORD.MESSAGES,
33 };
34
35 constructor(
36 private formBuilder: FormBuilder,
37 private router: Router,
38 private notificationsService: NotificationsService,
39 private userService: UserService
40 ) {
41 super();
42 }
43
44 buildForm() {
45 this.form = this.formBuilder.group({
46 username: [ '', USER_USERNAME.VALIDATORS ],
47 email: [ '', USER_EMAIL.VALIDATORS ],
48 password: [ '', USER_PASSWORD.VALIDATORS ],
49 });
50
51 this.form.valueChanges.subscribe(data => this.onValueChanged(data));
52 }
53
54 ngOnInit() {
55 this.buildForm();
56 }
57
58 signup() {
59 this.error = null;
60
61 const { username, password, email } = this.form.value;
62
63 this.userService.signup(username, password, email).subscribe(
64 () => {
65 this.notificationsService.success('Success', `Registration for ${username} complete.`);
66 this.router.navigate([ '/videos/list' ]);
67 },
68
69 err => this.error = err.text
70 );
71 }
72}
diff --git a/client/src/app/signup/signup.module.ts b/client/src/app/signup/signup.module.ts
new file mode 100644
index 000000000..acb7e5515
--- /dev/null
+++ b/client/src/app/signup/signup.module.ts
@@ -0,0 +1,24 @@
1import { NgModule } from '@angular/core';
2
3import { SignupRoutingModule } from './signup-routing.module';
4import { SignupComponent } from './signup.component';
5import { SharedModule } from '../shared';
6
7@NgModule({
8 imports: [
9 SignupRoutingModule,
10 SharedModule
11 ],
12
13 declarations: [
14 SignupComponent
15 ],
16
17 exports: [
18 SignupComponent
19 ],
20
21 providers: [
22 ]
23})
24export class SignupModule { }