client/src/app/signup/signup.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup } from '@angular/forms'
   3 import { Router } from '@angular/router'
   4 import { ServerService } from '@app/core/server'
   5
   6 import { NotificationsService } from 'angular2-notifications'
   7 import { UserCreate } from '../../../../shared'
   8 import { FormReactive, USER_EMAIL, USER_PASSWORD, USER_USERNAME, UserService } from '../shared'
   9
  10 @Component({
  11   selector: 'my-signup',
  12   templateUrl: './signup.component.html',
  13   styleUrls: [ './signup.component.scss' ]
  14 })
  15 export class SignupComponent extends FormReactive implements OnInit {
  16   error: string = null
  17   quotaHelpIndication = ''
  18
  19   form: FormGroup
  20   formErrors = {
  21     'username': '',
  22     'email': '',
  23     'password': ''
  24   }
  25   validationMessages = {
  26     'username': USER_USERNAME.MESSAGES,
  27     'email': USER_EMAIL.MESSAGES,
  28     'password': USER_PASSWORD.MESSAGES
  29   }
  30
  31   private static getApproximateTime (seconds: number) {
  32     const hours = Math.floor(seconds / 3600)
  33     let pluralSuffix = ''
  34     if (hours > 1) pluralSuffix = 's'
  35     if (hours > 0) return `~ ${hours} hour${pluralSuffix}`
  36
  37     const minutes = Math.floor(seconds % 3600 / 60)
  38     if (minutes > 1) pluralSuffix = 's'
  39
  40     return `~ ${minutes} minute${pluralSuffix}`
  41   }
  42
  43   constructor (
  44     private formBuilder: FormBuilder,
  45     private router: Router,
  46     private notificationsService: NotificationsService,
  47     private userService: UserService,
  48     private serverService: ServerService
  49   ) {
  50     super()
  51   }
  52
  53   get initialUserVideoQuota () {
  54     return this.serverService.getConfig().user.videoQuota
  55   }
  56
  57   buildForm () {
  58     this.form = this.formBuilder.group({
  59       username: [ '', USER_USERNAME.VALIDATORS ],
  60       email:    [ '', USER_EMAIL.VALIDATORS ],
  61       password: [ '', USER_PASSWORD.VALIDATORS ]
  62     })
  63
  64     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  65   }
  66
  67   ngOnInit () {
  68     this.buildForm()
  69
  70     this.serverService.configLoaded
  71       .subscribe(() => this.buildQuotaHelpIndication())
  72   }
  73
  74   signup () {
  75     this.error = null
  76
  77     const userCreate: UserCreate = this.form.value
  78
  79     this.userService.signup(userCreate).subscribe(
  80       () => {
  81         this.notificationsService.success('Success', `Registration for ${userCreate.username} complete.`)
  82         this.router.navigate([ '/videos/list' ])
  83       },
  84
  85       err => this.error = err.message
  86     )
  87   }
  88
  89   private buildQuotaHelpIndication () {
  90     if (this.initialUserVideoQuota === -1) return
  91
  92     const initialUserVideoQuotaBit = this.initialUserVideoQuota * 8
  93
  94     // 1080p: ~ 6Mbps
  95     // 720p: ~ 4Mbps
  96     // 360p: ~ 1.5Mbps
  97     const fullHdSeconds = initialUserVideoQuotaBit / (6 * 1000 * 1000)
  98     const hdSeconds = initialUserVideoQuotaBit / (4 * 1000 * 1000)
  99     const normalSeconds = initialUserVideoQuotaBit / (1.5 * 1000 * 1000)
 100
 101     const lines = [
 102       SignupComponent.getApproximateTime(fullHdSeconds) + ' of full HD videos',
 103       SignupComponent.getApproximateTime(hdSeconds) + ' of HD videos',
 104       SignupComponent.getApproximateTime(normalSeconds) + ' of average quality videos'
 105     ]
 106
 107     this.quotaHelpIndication = lines.join('<br />')
 108   }
 109 }