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