From 9589907c89d29a6c0acd52c8cb789af9f93ce9af Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 19 Jan 2023 09:29:47 +0100 Subject: Implement signup approval in client --- .../app/+signup/+register/register.component.html | 35 +++++++----- .../app/+signup/+register/register.component.ts | 62 +++++++++++++++------- client/src/app/+signup/+register/shared/index.ts | 1 + .../+register/shared/register-validators.ts | 18 +++++++ .../steps/register-step-about.component.html | 4 ++ .../steps/register-step-about.component.ts | 1 + .../steps/register-step-channel.component.ts | 6 +-- .../steps/register-step-terms.component.html | 14 ++++- .../steps/register-step-terms.component.ts | 10 +++- .../steps/register-step-user.component.ts | 6 +-- 10 files changed, 116 insertions(+), 41 deletions(-) create mode 100644 client/src/app/+signup/+register/shared/index.ts create mode 100644 client/src/app/+signup/+register/shared/register-validators.ts (limited to 'client/src/app/+signup/+register') diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html index bafb96a49..86763e801 100644 --- a/client/src/app/+signup/+register/register.component.html +++ b/client/src/app/+signup/+register/register.component.html @@ -5,29 +5,34 @@ -

+

{{ instanceName }} > - Create an account +

- - Create an account -
on {{ instanceName }}
+ + + + + +
on {{ instanceName }}
 - +
I already have an account, I log in - +
@@ -44,8 +49,8 @@ > @@ -94,14 +99,15 @@
You will be able to create a channel later
- -
+ +
PeerTube is creating your account...
@@ -109,7 +115,10 @@
{{ signupError }}
- +
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts index 958770ebf..9259d902c 100644 --- a/client/src/app/+signup/+register/register.component.ts +++ b/client/src/app/+signup/+register/register.component.ts @@ -5,10 +5,10 @@ import { ActivatedRoute } from '@angular/router' import { AuthService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' -import { UserSignupService } from '@app/shared/shared-users' import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' import { UserRegister } from '@shared/models' import { ServerConfig } from '@shared/models/server' +import { SignupService } from '../shared/signup.service' @Component({ selector: 'my-register', @@ -53,7 +53,7 @@ export class RegisterComponent implements OnInit { constructor ( private route: ActivatedRoute, private authService: AuthService, - private userSignupService: UserSignupService, + private signupService: SignupService, private hooks: HooksService ) { } @@ -61,6 +61,10 @@ export class RegisterComponent implements OnInit { return this.serverConfig.signup.requiresEmailVerification } + get requiresApproval () { + return this.serverConfig.signup.requiresApproval + } + get minimumAge () { return this.serverConfig.signup.minimumAge } @@ -132,42 +136,49 @@ export class RegisterComponent implements OnInit { skipChannelCreation () { this.formStepChannel.reset() this.lastStep.select() + this.signup() } async signup () { this.signupError = undefined - const body: UserRegister = await this.hooks.wrapObject( + const termsForm = this.formStepTerms.value + const userForm = this.formStepUser.value + const channelForm = this.formStepChannel?.value + + const channel = this.formStepChannel?.value?.name + ? { name: channelForm?.name, displayName: channelForm?.displayName } + : undefined + + const body = await this.hooks.wrapObject( { - ...this.formStepUser.value, + username: userForm.username, + password: userForm.password, + email: userForm.email, + displayName: userForm.displayName, + + registrationReason: termsForm.registrationReason, - channel: this.formStepChannel?.value?.name - ? this.formStepChannel.value - : undefined + channel }, 'signup', 'filter:api.signup.registration.create.params' ) - this.userSignupService.signup(body).subscribe({ + const obs = this.requiresApproval + ? this.signupService.requestSignup(body) + : this.signupService.directSignup(body) + + obs.subscribe({ next: () => { - if (this.requiresEmailVerification) { + if (this.requiresEmailVerification || this.requiresApproval) { this.signupSuccess = true return } // Auto login - this.authService.login({ username: body.username, password: body.password }) - .subscribe({ - next: () => { - this.signupSuccess = true - }, - - error: err => { - this.signupError = err.message - } - }) + this.autoLogin(body) }, error: err => { @@ -175,4 +186,17 @@ export class RegisterComponent implements OnInit { } }) } + + private autoLogin (body: UserRegister) { + this.authService.login({ username: body.username, password: body.password }) + .subscribe({ + next: () => { + this.signupSuccess = true + }, + + error: err => { + this.signupError = err.message + } + }) + } } diff --git a/client/src/app/+signup/+register/shared/index.ts b/client/src/app/+signup/+register/shared/index.ts new file mode 100644 index 000000000..affb54bf4 --- /dev/null +++ b/client/src/app/+signup/+register/shared/index.ts @@ -0,0 +1 @@ +export * from './register-validators' diff --git a/client/src/app/+signup/+register/shared/register-validators.ts b/client/src/app/+signup/+register/shared/register-validators.ts new file mode 100644 index 000000000..f14803b68 --- /dev/null +++ b/client/src/app/+signup/+register/shared/register-validators.ts @@ -0,0 +1,18 @@ +import { Validators } from '@angular/forms' +import { BuildFormValidator } from '@app/shared/form-validators' + +export const REGISTER_TERMS_VALIDATOR: BuildFormValidator = { + VALIDATORS: [ Validators.requiredTrue ], + MESSAGES: { + required: $localize`You must agree with the instance terms in order to register on it.` + } +} + +export const REGISTER_REASON_VALIDATOR: BuildFormValidator = { + VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ], + MESSAGES: { + required: $localize`Registration reason is required.`, + minlength: $localize`Registration reason must be at least 2 characters long.`, + maxlength: $localize`Registration reason cannot be more than 3000 characters long.` + } +} diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.html b/client/src/app/+signup/+register/steps/register-step-about.component.html index 769fe3127..580e8a92c 100644 --- a/client/src/app/+signup/+register/steps/register-step-about.component.html +++ b/client/src/app/+signup/+register/steps/register-step-about.component.html @@ -13,6 +13,10 @@
  • Have access to your watch history
  • Create your channel to publish videos
    • + +

    + Moderators of {{ instanceName }} will have to approve your registration request once you have finished to fill the form. +

    diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.ts b/client/src/app/+signup/+register/steps/register-step-about.component.ts index 9a0941016..b176ffa59 100644 --- a/client/src/app/+signup/+register/steps/register-step-about.component.ts +++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts @@ -7,6 +7,7 @@ import { ServerService } from '@app/core' styleUrls: [ './register-step-about.component.scss' ] }) export class RegisterStepAboutComponent { + @Input() requiresApproval: boolean @Input() videoUploadDisabled: boolean constructor (private serverService: ServerService) { diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts index df92c5145..478ca0177 100644 --- a/client/src/app/+signup/+register/steps/register-step-channel.component.ts +++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts @@ -2,9 +2,9 @@ import { concat, of } from 'rxjs' import { pairwise } from 'rxjs/operators' import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { FormGroup } from '@angular/forms' +import { SignupService } from '@app/+signup/shared/signup.service' import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators' import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' -import { UserSignupService } from '@app/shared/shared-users' @Component({ selector: 'my-register-step-channel', @@ -20,7 +20,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit constructor ( protected formReactiveService: FormReactiveService, - private userSignupService: UserSignupService + private signupService: SignupService ) { super() } @@ -51,7 +51,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { const name = this.form.value['name'] || '' - const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name) + const newName = this.signupService.getNewUsername(oldDisplayName, newDisplayName, name) this.form.patchValue({ name: newName }) } } diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html index cbfb32518..1d753a3f2 100644 --- a/client/src/app/+signup/+register/steps/register-step-terms.component.html +++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html @@ -1,4 +1,16 @@
    + +
    + + + + +
    {{ formErrors.registrationReason }}
    +
    +
    @@ -6,7 +18,7 @@ I am at least {{ minimumAge }} years old and agree to the Terms and to the Code of Conduct - of this instance + of {{ instanceName }} diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts index 2df963b30..1b1fb49ee 100644 --- a/client/src/app/+signup/+register/steps/register-step-terms.component.ts +++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { FormGroup } from '@angular/forms' -import { USER_TERMS_VALIDATOR } from '@app/shared/form-validators/user-validators' import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' +import { REGISTER_REASON_VALIDATOR, REGISTER_TERMS_VALIDATOR } from '../shared' @Component({ selector: 'my-register-step-terms', @@ -10,7 +10,9 @@ import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' }) export class RegisterStepTermsComponent extends FormReactive implements OnInit { @Input() hasCodeOfConduct = false + @Input() requiresApproval: boolean @Input() minimumAge = 16 + @Input() instanceName: string @Output() formBuilt = new EventEmitter() @Output() termsClick = new EventEmitter() @@ -28,7 +30,11 @@ export class RegisterStepTermsComponent extends FormReactive implements OnInit { ngOnInit () { this.buildForm({ - terms: USER_TERMS_VALIDATOR + terms: REGISTER_TERMS_VALIDATOR, + + registrationReason: this.requiresApproval + ? REGISTER_REASON_VALIDATOR + : null }) setTimeout(() => this.formBuilt.emit(this.form)) diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts index 822f8f5c5..0a5d2e437 100644 --- a/client/src/app/+signup/+register/steps/register-step-user.component.ts +++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts @@ -2,6 +2,7 @@ import { concat, of } from 'rxjs' import { pairwise } from 'rxjs/operators' import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { FormGroup } from '@angular/forms' +import { SignupService } from '@app/+signup/shared/signup.service' import { USER_DISPLAY_NAME_REQUIRED_VALIDATOR, USER_EMAIL_VALIDATOR, @@ -9,7 +10,6 @@ import { USER_USERNAME_VALIDATOR } from '@app/shared/form-validators/user-validators' import { FormReactive, FormReactiveService } from '@app/shared/shared-forms' -import { UserSignupService } from '@app/shared/shared-users' @Component({ selector: 'my-register-step-user', @@ -24,7 +24,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit { constructor ( protected formReactiveService: FormReactiveService, - private userSignupService: UserSignupService + private signupService: SignupService ) { super() } @@ -57,7 +57,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit { private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { const username = this.form.value['username'] || '' - const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username) + const newUsername = this.signupService.getNewUsername(oldDisplayName, newDisplayName, username) this.form.patchValue({ username: newUsername }) } } -- cgit v1.2.3