import { AccountModule } from './account';
import { CoreModule } from './core';
import { LoginModule } from './login';
+import { SignupModule } from './signup';
import { SharedModule } from './shared';
import { VideosModule } from './videos';
AccountModule,
CoreModule,
LoginModule,
+ SignupModule,
SharedModule,
VideosModule,
</span>
</div>
+ <div *ngIf="!isLoggedIn && isRegistrationEnabled()" id="panel-user-register" class="panel-button">
+ <span class="hidden-xs glyphicon glyphicon-user"></span>
+ <a [routerLink]="['/signup']">Signup</a>
+ </div>
+
<div *ngIf="isLoggedIn" id="panel-user-account" class="panel-button">
<span class="hidden-xs glyphicon glyphicon-user"></span>
<a [routerLink]="['/account']">My account</a>
import { Router } from '@angular/router';
import { AuthService, AuthStatus } from '../auth';
+import { ConfigService } from '../config';
@Component({
selector: 'my-menu',
constructor (
private authService: AuthService,
+ private configService: ConfigService,
private router: Router
) {}
);
}
+ isRegistrationEnabled() {
+ return this.configService.getConfig().signup.enabled;
+ }
+
isUserAdmin() {
return this.authService.isAdmin();
}
import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
static BASE_USERS_URL = '/api/v1/users/';
constructor(
+ private http: Http,
private authHttp: AuthHttp,
private authService: AuthService,
private restExtractor: RestExtractor
.map(this.restExtractor.extractDataBool)
.catch((res) => this.restExtractor.handleError(res));
}
+
+ signup(username: string, password: string, email: string) {
+ const body = {
+ username,
+ email,
+ password
+ };
+
+ return this.http.post(UserService.BASE_USERS_URL + 'register', body)
+ .map(this.restExtractor.extractDataBool)
+ .catch(this.restExtractor.handleError);
+ }
}
--- /dev/null
+export * from './signup-routing.module';
+export * from './signup.component';
+export * from './signup.module';
--- /dev/null
+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 {}
--- /dev/null
+<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>
--- /dev/null
+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
+ );
+ }
+}
--- /dev/null
+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 { }