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

   1 import { Component, OnInit, ViewChild } from '@angular/core'
   2 import { FormGroup } from '@angular/forms'
   3 import { ActivatedRoute } from '@angular/router'
   4 import { AuthService, Notifier, UserService } from '@app/core'
   5 import { HooksService } from '@app/core/plugins/hooks.service'
   6 import { InstanceService } from '@app/shared/shared-instance'
   7 import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
   8 import { I18n } from '@ngx-translate/i18n-polyfill'
   9 import { UserRegister } from '@shared/models'
  10 import { About, ServerConfig } from '@shared/models/server'
  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('accordion', { static: true }) accordion: NgbAccordion
  19
  20   info: string = null
  21   error: string = null
  22   success: string = null
  23   signupDone = false
  24
  25   about: About
  26   aboutHtml = {
  27     description: '',
  28     terms: '',
  29     codeOfConduct: '',
  30     moderationInformation: '',
  31     administrator: ''
  32   }
  33
  34   formStepUser: FormGroup
  35   formStepChannel: FormGroup
  36
  37   private serverConfig: ServerConfig
  38
  39   constructor (
  40     private route: ActivatedRoute,
  41     private authService: AuthService,
  42     private notifier: Notifier,
  43     private userService: UserService,
  44     private instanceService: InstanceService,
  45     private hooks: HooksService,
  46     private i18n: I18n
  47   ) {
  48   }
  49
  50   get requiresEmailVerification () {
  51     return this.serverConfig.signup.requiresEmailVerification
  52   }
  53
  54   ngOnInit (): void {
  55     this.serverConfig = this.route.snapshot.data.serverConfig
  56
  57     this.instanceService.getAbout()
  58       .subscribe(
  59         async about => {
  60           this.about = about
  61
  62           this.aboutHtml = await this.instanceService.buildHtml(about)
  63         },
  64
  65         err => this.notifier.error(err.message)
  66       )
  67
  68     this.hooks.runAction('action:signup.register.init', 'signup')
  69   }
  70
  71   hasSameChannelAndAccountNames () {
  72     return this.getUsername() === this.getChannelName()
  73   }
  74
  75   getUsername () {
  76     if (!this.formStepUser) return undefined
  77
  78     return this.formStepUser.value['username']
  79   }
  80
  81   getChannelName () {
  82     if (!this.formStepChannel) return undefined
  83
  84     return this.formStepChannel.value['name']
  85   }
  86
  87   onUserFormBuilt (form: FormGroup) {
  88     this.formStepUser = form
  89   }
  90
  91   onChannelFormBuilt (form: FormGroup) {
  92     this.formStepChannel = form
  93   }
  94
  95   onTermsClick () {
  96     if (this.accordion) this.accordion.toggle('terms')
  97   }
  98
  99   onCodeOfConductClick () {
 100     if (this.accordion) this.accordion.toggle('code-of-conduct')
 101   }
 102
 103   async signup () {
 104     this.error = null
 105
 106     const body: UserRegister = await this.hooks.wrapObject(
 107       Object.assign(this.formStepUser.value, { channel: this.formStepChannel.value }),
 108       'signup',
 109       'filter:api.signup.registration.create.params'
 110     )
 111
 112     this.userService.signup(body).subscribe(
 113       () => {
 114         this.signupDone = true
 115
 116         if (this.requiresEmailVerification) {
 117           this.info = this.i18n('Now please check your emails to verify your account and complete signup.')
 118           return
 119         }
 120
 121         // Auto login
 122         this.authService.login(body.username, body.password)
 123             .subscribe(
 124               () => {
 125                 this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username })
 126               },
 127
 128               err => this.error = err.message
 129             )
 130       },
 131
 132       err => this.error = err.message
 133     )
 134   }
 135 }