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