Client: support signup

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 @@
+export * from './signup-routing.module';
+export * from './signup.component';
+export * 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 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SignupComponent } from './signup.component';
+
+const signupRoutes: Routes = [
+  {
+    path: 'signup',
+    component: SignupComponent,
+    data: {
+      meta: {
+        title: 'Signup'
+      }
+    }
+  }
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(signupRoutes) ],
+  exports: [ RouterModule ]
+})
+export 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 @@
+<h3>Signup</h3>
+
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+
+<form role="form" (ngSubmit)="signup()" [formGroup]="form">
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input
+      type="text" class="form-control" id="username" placeholder="Username"
+      formControlName="username"
+    >
+    <div *ngIf="formErrors.username" class="alert alert-danger">
+      {{ formErrors.username }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="email">Email</label>
+    <input
+      type="text" class="form-control" id="email" placeholder="Email"
+      formControlName="email"
+    >
+    <div *ngIf="formErrors.email" class="alert alert-danger">
+      {{ formErrors.email }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input
+      type="password" class="form-control" id="password" placeholder="Password"
+      formControlName="password"
+    >
+    <div *ngIf="formErrors.password" class="alert alert-danger">
+      {{ formErrors.password }}
+    </div>
+  </div>
+
+  <input type="submit" value="Signup" class="btn btn-default" [disabled]="!form.valid">
+</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 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { NotificationsService } from 'angular2-notifications';
+
+import { AuthService } from '../core';
+import {
+  FormReactive,
+  UserService,
+  USER_USERNAME,
+  USER_EMAIL,
+  USER_PASSWORD
+} from '../shared';
+
+@Component({
+  selector: 'my-signup',
+  templateUrl: './signup.component.html'
+})
+export class SignupComponent extends FormReactive implements OnInit {
+  error: string = null;
+
+  form: FormGroup;
+  formErrors = {
+    'username': '',
+    'email': '',
+    'password': ''
+  };
+  validationMessages = {
+    'username': USER_USERNAME.MESSAGES,
+    'email': USER_EMAIL.MESSAGES,
+    'password': USER_PASSWORD.MESSAGES,
+  };
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {
+    super();
+  }
+
+  buildForm() {
+    this.form = this.formBuilder.group({
+      username: [ '', USER_USERNAME.VALIDATORS ],
+      email:    [ '', USER_EMAIL.VALIDATORS ],
+      password: [ '', USER_PASSWORD.VALIDATORS ],
+    });
+
+    this.form.valueChanges.subscribe(data => this.onValueChanged(data));
+  }
+
+  ngOnInit() {
+    this.buildForm();
+  }
+
+  signup() {
+    this.error = null;
+
+    const { username, password, email } = this.form.value;
+
+    this.userService.signup(username, password, email).subscribe(
+      () => {
+        this.notificationsService.success('Success', `Registration for ${username} complete.`);
+        this.router.navigate([ '/videos/list' ]);
+      },
+
+      err => this.error = err.text
+    );
+  }
+}
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 @@
+import { NgModule } from '@angular/core';
+
+import { SignupRoutingModule } from './signup-routing.module';
+import { SignupComponent } from './signup.component';
+import { SharedModule } from '../shared';
+
+@NgModule({
+  imports: [
+    SignupRoutingModule,
+    SharedModule
+  ],
+
+  declarations: [
+    SignupComponent
+  ],
+
+  exports: [
+    SignupComponent
+  ],
+
+  providers: [
+  ]
+})
+export class SignupModule { }