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   defaultNextStepButtonLabel = $localize`Next`
  42   stepUserButtonLabel = this.defaultNextStepButtonLabel
  43
  44   private serverConfig: ServerConfig
  45
  46   constructor (
  47     private route: ActivatedRoute,
  48     private authService: AuthService,
  49     private userService: UserService,
  50     private hooks: HooksService
  51     ) {
  52   }
  53
  54   get requiresEmailVerification () {
  55     return this.serverConfig.signup.requiresEmailVerification
  56   }
  57
  58   ngOnInit (): void {
  59     this.serverConfig = this.route.snapshot.data.serverConfig
  60
  61     this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0
  62     this.stepUserButtonLabel = this.videoUploadDisabled
  63       ? $localize`Signup`
  64       : this.defaultNextStepButtonLabel
  65
  66     this.hooks.runAction('action:signup.register.init', 'signup')
  67
  68   }
  69
  70   hasSameChannelAndAccountNames () {
  71     return this.getUsername() === this.getChannelName()
  72   }
  73
  74   getUsername () {
  75     if (!this.formStepUser) return undefined
  76
  77     return this.formStepUser.value['username']
  78   }
  79
  80   getChannelName () {
  81     if (!this.formStepChannel) return undefined
  82
  83     return this.formStepChannel.value['name']
  84   }
  85
  86   onTermsFormBuilt (form: FormGroup) {
  87     this.formStepTerms = form
  88   }
  89
  90   onUserFormBuilt (form: FormGroup) {
  91     this.formStepUser = form
  92   }
  93
  94   onChannelFormBuilt (form: FormGroup) {
  95     this.formStepChannel = form
  96   }
  97
  98   onTermsClick () {
  99     if (this.accordion) this.accordion.toggle('terms')
 100   }
 101
 102   onCodeOfConductClick () {
 103     if (this.accordion) this.accordion.toggle('code-of-conduct')
 104   }
 105
 106   onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) {
 107     this.accordion = instanceAboutAccordion.accordion
 108     this.aboutHtml = instanceAboutAccordion.aboutHtml
 109   }
 110
 111   async signup () {
 112     this.error = null
 113
 114     const body: UserRegister = await this.hooks.wrapObject(
 115       Object.assign(this.formStepUser.value, { channel: this.videoUploadDisabled ? undefined : this.formStepChannel.value }),
 116       'signup',
 117       'filter:api.signup.registration.create.params'
 118     )
 119
 120     this.userService.signup(body).subscribe(
 121       () => {
 122         this.signupDone = true
 123
 124         if (this.requiresEmailVerification) {
 125           this.info = $localize`Now please check your emails to verify your account and complete signup.`
 126           return
 127         }
 128
 129         // Auto login
 130         this.authService.login(body.username, body.password)
 131             .subscribe(
 132               () => {
 133                 this.success = $localize`You are now logged in as ${body.username}!`
 134               },
 135
 136               err => this.error = err.message
 137             )
 138       },
 139
 140       err => this.error = err.message
 141     )
 142   }
 143 }