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

   1 import { Component, OnInit, ViewChild } from '@angular/core'
   2 import { FormGroup } from '@angular/forms'
   3 import { ActivatedRoute } from '@angular/router'
   4 import { AuthService, Notifier, UserService } from '@app/core'
   5 import { HooksService } from '@app/core/plugins/hooks.service'
   6 import { InstanceService } from '@app/shared/shared-instance'
   7 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
   8 import { UserRegister } from '@shared/models'
   9 import { About, ServerConfig } from '@shared/models/server'
  10
  11 @Component({
  12   selector: 'my-register',
  13   templateUrl: './register.component.html',
  14   styleUrls: [ './register.component.scss' ]
  15 })
  16 export class RegisterComponent implements OnInit {
  17   @ViewChild('accordion', { static: true }) accordion: NgbAccordion
  18
  19   info: string = null
  20   error: string = null
  21   success: string = null
  22   signupDone = false
  23
  24   about: About
  25   aboutHtml = {
  26     description: '',
  27     terms: '',
  28     codeOfConduct: '',
  29     moderationInformation: '',
  30     administrator: ''
  31   }
  32
  33   videoUploadDisabled: boolean
  34
  35   formStepUser: FormGroup
  36   formStepChannel: FormGroup
  37
  38   private serverConfig: ServerConfig
  39
  40   constructor (
  41     private route: ActivatedRoute,
  42     private authService: AuthService,
  43     private notifier: Notifier,
  44     private userService: UserService,
  45     private instanceService: InstanceService,
  46     private hooks: HooksService
  47     ) {
  48   }
  49
  50   get requiresEmailVerification () {
  51     return this.serverConfig.signup.requiresEmailVerification
  52   }
  53
  54   ngOnInit (): void {
  55     this.serverConfig = this.route.snapshot.data.serverConfig
  56
  57     this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0
  58
  59     this.instanceService.getAbout()
  60       .subscribe(
  61         async about => {
  62           this.about = about
  63
  64           this.aboutHtml = await this.instanceService.buildHtml(about)
  65         },
  66
  67         err => this.notifier.error(err.message)
  68       )
  69
  70     this.hooks.runAction('action:signup.register.init', 'signup')
  71   }
  72
  73   hasSameChannelAndAccountNames () {
  74     return this.getUsername() === this.getChannelName()
  75   }
  76
  77   getUsername () {
  78     if (!this.formStepUser) return undefined
  79
  80     return this.formStepUser.value['username']
  81   }
  82
  83   getChannelName () {
  84     if (!this.formStepChannel) return undefined
  85
  86     return this.formStepChannel.value['name']
  87   }
  88
  89   onUserFormBuilt (form: FormGroup) {
  90     this.formStepUser = form
  91   }
  92
  93   onChannelFormBuilt (form: FormGroup) {
  94     this.formStepChannel = form
  95   }
  96
  97   onTermsClick () {
  98     if (this.accordion) this.accordion.toggle('terms')
  99   }
 100
 101   onCodeOfConductClick () {
 102     if (this.accordion) this.accordion.toggle('code-of-conduct')
 103   }
 104
 105   async signup () {
 106     this.error = null
 107
 108     const body: UserRegister = await this.hooks.wrapObject(
 109       Object.assign(this.formStepUser.value, { channel: this.videoUploadDisabled ? undefined : this.formStepChannel.value }),
 110       'signup',
 111       'filter:api.signup.registration.create.params'
 112     )
 113
 114     this.userService.signup(body).subscribe(
 115       () => {
 116         this.signupDone = true
 117
 118         if (this.requiresEmailVerification) {
 119           this.info = $localize`Now please check your emails to verify your account and complete signup.`
 120           return
 121         }
 122
 123         // Auto login
 124         this.authService.login(body.username, body.password)
 125             .subscribe(
 126               () => {
 127                 this.success = $localize`You are now logged in as ${body.username}!`
 128               },
 129
 130               err => this.error = err.message
 131             )
 132       },
 133
 134       err => this.error = err.message
 135     )
 136   }
 137 }