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

   1 import { Component, OnInit } from '@angular/core'
   2 import { FormGroup } from '@angular/forms'
   3 import { ActivatedRoute } from '@angular/router'
   4 import { AuthService, UserService } from '@app/core'
   5 import { HooksService } from '@app/core/plugins/hooks.service'
   6 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
   7 import { UserRegister } from '@shared/models'
   8 import { ServerConfig } from '@shared/models/server'
   9 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
  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   accordion: NgbAccordion
  18   info: string = null
  19   error: string = null
  20   success: string = null
  21   signupDone = false
  22
  23   videoUploadDisabled: boolean
  24
  25   formStepTerms: FormGroup
  26   formStepUser: FormGroup
  27   formStepChannel: FormGroup
  28
  29   aboutHtml = {
  30     codeOfConduct: ''
  31   }
  32
  33   instanceInformationPanels = {
  34     codeOfConduct: true,
  35     terms: true,
  36     administrators: false,
  37     features: false,
  38     moderation: false
  39   }
  40
  41   defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Back`
  42   defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Next`
  43   stepUserButtonLabel = this.defaultNextStepButtonLabel
  44
  45   private serverConfig: ServerConfig
  46
  47   constructor (
  48     private route: ActivatedRoute,
  49     private authService: AuthService,
  50     private userService: UserService,
  51     private hooks: HooksService
  52     ) {
  53   }
  54
  55   get requiresEmailVerification () {
  56     return this.serverConfig.signup.requiresEmailVerification
  57   }
  58
  59   ngOnInit (): void {
  60     this.serverConfig = this.route.snapshot.data.serverConfig
  61
  62     this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0
  63     this.stepUserButtonLabel = this.videoUploadDisabled
  64       ? $localize`:Button on the registration form to finalize the account and channel creation:Signup`
  65       : this.defaultNextStepButtonLabel
  66
  67     this.hooks.runAction('action:signup.register.init', 'signup')
  68
  69   }
  70
  71   hasSameChannelAndAccountNames () {
  72     return this.getUsername() === this.getChannelName()
  73   }
  74
  75   getUsername () {
  76     if (!this.formStepUser) return undefined
  77
  78     return this.formStepUser.value['username']
  79   }
  80
  81   getChannelName () {
  82     if (!this.formStepChannel) return undefined
  83
  84     return this.formStepChannel.value['name']
  85   }
  86
  87   onTermsFormBuilt (form: FormGroup) {
  88     this.formStepTerms = form
  89   }
  90
  91   onUserFormBuilt (form: FormGroup) {
  92     this.formStepUser = form
  93   }
  94
  95   onChannelFormBuilt (form: FormGroup) {
  96     this.formStepChannel = form
  97   }
  98
  99   onTermsClick () {
 100     if (this.accordion) this.accordion.toggle('terms')
 101   }
 102
 103   onCodeOfConductClick () {
 104     if (this.accordion) this.accordion.toggle('code-of-conduct')
 105   }
 106
 107   onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) {
 108     this.accordion = instanceAboutAccordion.accordion
 109     this.aboutHtml = instanceAboutAccordion.aboutHtml
 110   }
 111
 112   async signup () {
 113     this.error = null
 114
 115     const body: UserRegister = await this.hooks.wrapObject(
 116       Object.assign(this.formStepUser.value, { channel: this.videoUploadDisabled ? undefined : this.formStepChannel.value }),
 117       'signup',
 118       'filter:api.signup.registration.create.params'
 119     )
 120
 121     this.userService.signup(body).subscribe(
 122       () => {
 123         this.signupDone = true
 124
 125         if (this.requiresEmailVerification) {
 126           this.info = $localize`Now please check your emails to verify your account and complete signup.`
 127           return
 128         }
 129
 130         // Auto login
 131         this.authService.login(body.username, body.password)
 132             .subscribe(
 133               () => {
 134                 this.success = $localize`You are now logged in as ${body.username}!`
 135               },
 136
 137               err => this.error = err.message
 138             )
 139       },
 140
 141       err => this.error = err.message
 142     )
 143   }
 144 }