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