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