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

   1 import { CdkStep } from '@angular/cdk/stepper'
   2 import { Component, OnInit, ViewChild } from '@angular/core'
   3 import { FormGroup } from '@angular/forms'
   4 import { ActivatedRoute } from '@angular/router'
   5 import { AuthService } from '@app/core'
   6 import { HooksService } from '@app/core/plugins/hooks.service'
   7 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
   8 import { UserSignupService } from '@app/shared/shared-users'
   9 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
  10 import { UserRegister } from '@shared/models'
  11 import { ServerConfig } from '@shared/models/server'
  12
  13 @Component({
  14   selector: 'my-register',
  15   templateUrl: './register.component.html',
  16   styleUrls: [ './register.component.scss' ]
  17 })
  18 export class RegisterComponent implements OnInit {
  19   @ViewChild('lastStep') lastStep: CdkStep
  20
  21   accordion: NgbAccordion
  22
  23   signupError: string
  24   signupSuccess = false
  25
  26   videoUploadDisabled: boolean
  27   videoQuota: number
  28
  29   formStepTerms: FormGroup
  30   formStepUser: FormGroup
  31   formStepChannel: FormGroup
  32
  33   aboutHtml = {
  34     codeOfConduct: ''
  35   }
  36
  37   instanceInformationPanels = {
  38     codeOfConduct: true,
  39     terms: true,
  40     administrators: false,
  41     features: false,
  42     moderation: false
  43   }
  44
  45   defaultPreviousStepButtonLabel = $localize`Go to the previous step`
  46   defaultNextStepButtonLabel = $localize`Go to the next step`
  47   stepUserButtonLabel = this.defaultNextStepButtonLabel
  48
  49   signupDisabled = false
  50
  51   private serverConfig: ServerConfig
  52
  53   constructor (
  54     private route: ActivatedRoute,
  55     private authService: AuthService,
  56     private userSignupService: UserSignupService,
  57     private hooks: HooksService
  58   ) { }
  59
  60   get requiresEmailVerification () {
  61     return this.serverConfig.signup.requiresEmailVerification
  62   }
  63
  64   get minimumAge () {
  65     return this.serverConfig.signup.minimumAge
  66   }
  67
  68   get instanceName () {
  69     return this.serverConfig.instance.name
  70   }
  71
  72   ngOnInit () {
  73     this.serverConfig = this.route.snapshot.data.serverConfig
  74
  75     if (this.serverConfig.signup.allowed === false || this.serverConfig.signup.allowedForCurrentIP === false) {
  76       this.signupDisabled = true
  77       return
  78     }
  79
  80     this.videoQuota = this.serverConfig.user.videoQuota
  81     this.videoUploadDisabled = this.videoQuota === 0
  82
  83     this.stepUserButtonLabel = this.videoUploadDisabled
  84       ? $localize`:Button on the registration form to finalize the account and channel creation:Signup`
  85       : this.defaultNextStepButtonLabel
  86
  87     this.hooks.runAction('action:signup.register.init', 'signup')
  88
  89   }
  90
  91   hasSameChannelAndAccountNames () {
  92     return this.getUsername() === this.getChannelName()
  93   }
  94
  95   getUsername () {
  96     if (!this.formStepUser) return undefined
  97
  98     return this.formStepUser.value['username']
  99   }
 100
 101   getChannelName () {
 102     if (!this.formStepChannel) return undefined
 103
 104     return this.formStepChannel.value['name']
 105   }
 106
 107   onTermsFormBuilt (form: FormGroup) {
 108     this.formStepTerms = form
 109   }
 110
 111   onUserFormBuilt (form: FormGroup) {
 112     this.formStepUser = form
 113   }
 114
 115   onChannelFormBuilt (form: FormGroup) {
 116     this.formStepChannel = form
 117   }
 118
 119   onTermsClick () {
 120     if (this.accordion) this.accordion.toggle('terms')
 121   }
 122
 123   onCodeOfConductClick () {
 124     if (this.accordion) this.accordion.toggle('code-of-conduct')
 125   }
 126
 127   onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) {
 128     this.accordion = instanceAboutAccordion.accordion
 129     this.aboutHtml = instanceAboutAccordion.aboutHtml
 130   }
 131
 132   skipChannelCreation () {
 133     this.formStepChannel.reset()
 134     this.lastStep.select()
 135     this.signup()
 136   }
 137
 138   async signup () {
 139     this.signupError = undefined
 140
 141     const body: UserRegister = await this.hooks.wrapObject(
 142       {
 143         ...this.formStepUser.value,
 144
 145         channel: this.formStepChannel?.value?.name
 146           ? this.formStepChannel.value
 147           : undefined
 148       },
 149       'signup',
 150       'filter:api.signup.registration.create.params'
 151     )
 152
 153     this.userSignupService.signup(body).subscribe({
 154       next: () => {
 155         if (this.requiresEmailVerification) {
 156           this.signupSuccess = true
 157           return
 158         }
 159
 160         // Auto login
 161         this.authService.login(body.username, body.password)
 162           .subscribe({
 163             next: () => {
 164               this.signupSuccess = true
 165             },
 166
 167             error: err => {
 168               this.signupError = err.message
 169             }
 170           })
 171       },
 172
 173       error: err => {
 174         this.signupError = err.message
 175       }
 176     })
 177   }
 178 }