From b247a132709eb212fef4f77c4912dc0ec108f36b Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 29 May 2019 14:39:49 +0200 Subject: Add success icon on registration --- .../+register/custom-stepper.component.html | 25 ++++++ .../+register/custom-stepper.component.scss | 66 ++++++++++++++++ .../+signup/+register/custom-stepper.component.ts | 19 +++++ .../+signup/+register/register-routing.module.ts | 28 +++++++ .../+register/register-step-channel.component.html | 50 ++++++++++++ .../+register/register-step-channel.component.ts | 40 ++++++++++ .../+register/register-step-user.component.html | 54 +++++++++++++ .../+register/register-step-user.component.ts | 37 +++++++++ .../app/+signup/+register/register.component.html | 41 ++++++++++ .../app/+signup/+register/register.component.scss | 58 ++++++++++++++ .../app/+signup/+register/register.component.ts | 89 ++++++++++++++++++++++ .../src/app/+signup/+register/register.module.ts | 33 ++++++++ .../verify-account-ask-send-email.component.html | 22 ++++++ .../verify-account-ask-send-email.component.scss | 12 +++ .../verify-account-ask-send-email.component.ts | 57 ++++++++++++++ .../verify-account-email.component.html | 15 ++++ .../verify-account-email.component.ts | 50 ++++++++++++ .../verify-account-routing.module.ts | 38 +++++++++ .../+verify-account/verify-account.module.ts | 25 ++++++ .../src/app/+signup/shared/signup-shared.module.ts | 21 +++++ .../+signup/shared/signup-success.component.html | 16 ++++ .../+signup/shared/signup-success.component.scss | 76 ++++++++++++++++++ .../app/+signup/shared/signup-success.component.ts | 10 +++ client/src/app/+verify-account/index.ts | 2 - .../verify-account-ask-send-email.component.html | 22 ------ .../verify-account-ask-send-email.component.scss | 12 --- .../verify-account-ask-send-email.component.ts | 57 -------------- .../verify-account-email.component.html | 15 ---- .../verify-account-email.component.ts | 53 ------------- .../verify-account-routing.module.ts | 42 ---------- .../app/+verify-account/verify-account.module.ts | 27 ------- client/src/app/app-routing.module.ts | 6 +- client/src/app/app.module.ts | 2 - client/src/app/core/core.module.ts | 3 + client/src/app/core/routing/redirect.service.ts | 9 ++- .../src/app/core/routing/unlogged-guard.service.ts | 25 ++++++ .../src/app/signup/custom-stepper.component.html | 25 ------ .../src/app/signup/custom-stepper.component.scss | 66 ---------------- client/src/app/signup/custom-stepper.component.ts | 19 ----- client/src/app/signup/index.ts | 3 - client/src/app/signup/signup-routing.module.ts | 27 ------- .../app/signup/signup-step-channel.component.html | 50 ------------ .../app/signup/signup-step-channel.component.ts | 40 ---------- .../src/app/signup/signup-step-user.component.html | 54 ------------- .../src/app/signup/signup-step-user.component.ts | 37 --------- client/src/app/signup/signup.component.html | 43 ----------- client/src/app/signup/signup.component.scss | 58 -------------- client/src/app/signup/signup.component.ts | 89 ---------------------- client/src/app/signup/signup.module.ts | 33 -------- client/src/app/signup/success.component.html | 8 -- client/src/app/signup/success.component.scss | 74 ------------------ client/src/app/signup/success.component.ts | 10 --- 52 files changed, 923 insertions(+), 870 deletions(-) create mode 100644 client/src/app/+signup/+register/custom-stepper.component.html create mode 100644 client/src/app/+signup/+register/custom-stepper.component.scss create mode 100644 client/src/app/+signup/+register/custom-stepper.component.ts create mode 100644 client/src/app/+signup/+register/register-routing.module.ts create mode 100644 client/src/app/+signup/+register/register-step-channel.component.html create mode 100644 client/src/app/+signup/+register/register-step-channel.component.ts create mode 100644 client/src/app/+signup/+register/register-step-user.component.html create mode 100644 client/src/app/+signup/+register/register-step-user.component.ts create mode 100644 client/src/app/+signup/+register/register.component.html create mode 100644 client/src/app/+signup/+register/register.component.scss create mode 100644 client/src/app/+signup/+register/register.component.ts create mode 100644 client/src/app/+signup/+register/register.module.ts create mode 100644 client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html create mode 100644 client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss create mode 100644 client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts create mode 100644 client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html create mode 100644 client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts create mode 100644 client/src/app/+signup/+verify-account/verify-account-routing.module.ts create mode 100644 client/src/app/+signup/+verify-account/verify-account.module.ts create mode 100644 client/src/app/+signup/shared/signup-shared.module.ts create mode 100644 client/src/app/+signup/shared/signup-success.component.html create mode 100644 client/src/app/+signup/shared/signup-success.component.scss create mode 100644 client/src/app/+signup/shared/signup-success.component.ts delete mode 100644 client/src/app/+verify-account/index.ts delete mode 100644 client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html delete mode 100644 client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss delete mode 100644 client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts delete mode 100644 client/src/app/+verify-account/verify-account-email/verify-account-email.component.html delete mode 100644 client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts delete mode 100644 client/src/app/+verify-account/verify-account-routing.module.ts delete mode 100644 client/src/app/+verify-account/verify-account.module.ts create mode 100644 client/src/app/core/routing/unlogged-guard.service.ts delete mode 100644 client/src/app/signup/custom-stepper.component.html delete mode 100644 client/src/app/signup/custom-stepper.component.scss delete mode 100644 client/src/app/signup/custom-stepper.component.ts delete mode 100644 client/src/app/signup/index.ts delete mode 100644 client/src/app/signup/signup-routing.module.ts delete mode 100644 client/src/app/signup/signup-step-channel.component.html delete mode 100644 client/src/app/signup/signup-step-channel.component.ts delete mode 100644 client/src/app/signup/signup-step-user.component.html delete mode 100644 client/src/app/signup/signup-step-user.component.ts delete mode 100644 client/src/app/signup/signup.component.html delete mode 100644 client/src/app/signup/signup.component.scss delete mode 100644 client/src/app/signup/signup.component.ts delete mode 100644 client/src/app/signup/signup.module.ts delete mode 100644 client/src/app/signup/success.component.html delete mode 100644 client/src/app/signup/success.component.scss delete mode 100644 client/src/app/signup/success.component.ts diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html new file mode 100644 index 000000000..bf507fc4f --- /dev/null +++ b/client/src/app/+signup/+register/custom-stepper.component.html @@ -0,0 +1,25 @@ +
+
+ +
+
+ {{ i + 1 }} + +
+ +
{{ step.label }}
+
+ + +
+ +
+ +
+ +
+ +
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss new file mode 100644 index 000000000..2371c8ae5 --- /dev/null +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -0,0 +1,66 @@ +@import '_variables'; +@import '_mixins'; + +$grey-color: #9CA3AB; +$index-block-height: 32px; + +header { + display: flex; + justify-content: space-between; + font-size: 15px; + margin-bottom: 30px; + + .step-info { + color: $grey-color; + display: flex; + flex-direction: column; + align-items: center; + width: $index-block-height; + + .step-index { + display: flex; + justify-content: center; + align-items: center; + width: $index-block-height; + height: $index-block-height; + border-radius: 100px; + border: 2px solid $grey-color; + margin-bottom: 10px; + + my-global-icon { + @include apply-svg-color(var(--mainBackgroundColor)); + + width: 22px; + height: 22px; + } + } + + .step-label { + width: max-content; + } + + &.active, + &.completed { + .step-index { + border-color: var(--mainColor); + background-color: var(--mainColor); + color: var(--mainBackgroundColor); + } + + .step-label { + color: var(--mainColor); + } + } + + &.completed { + cursor: pointer; + } + } + + .connector { + flex: auto; + margin: $index-block-height/2 10px 0 10px; + height: 2px; + background-color: $grey-color; + } +} diff --git a/client/src/app/+signup/+register/custom-stepper.component.ts b/client/src/app/+signup/+register/custom-stepper.component.ts new file mode 100644 index 000000000..2ae40f3a9 --- /dev/null +++ b/client/src/app/+signup/+register/custom-stepper.component.ts @@ -0,0 +1,19 @@ +import { Component } from '@angular/core' +import { CdkStep, CdkStepper } from '@angular/cdk/stepper' + +@Component({ + selector: 'my-custom-stepper', + templateUrl: './custom-stepper.component.html', + styleUrls: [ './custom-stepper.component.scss' ], + providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ] +}) +export class CustomStepperComponent extends CdkStepper { + + onClick (index: number): void { + this.selectedIndex = index + } + + isCompleted (step: CdkStep) { + return step.stepControl && step.stepControl.dirty && step.stepControl.valid + } +} diff --git a/client/src/app/+signup/+register/register-routing.module.ts b/client/src/app/+signup/+register/register-routing.module.ts new file mode 100644 index 000000000..e3a5001dc --- /dev/null +++ b/client/src/app/+signup/+register/register-routing.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { MetaGuard } from '@ngx-meta/core' +import { RegisterComponent } from './register.component' +import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service' +import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service' + +const registerRoutes: Routes = [ + { + path: '', + component: RegisterComponent, + canActivate: [ MetaGuard, UnloggedGuard ], + data: { + meta: { + title: 'Register' + } + }, + resolve: { + serverConfigLoaded: ServerConfigResolver + } + } +] + +@NgModule({ + imports: [ RouterModule.forChild(registerRoutes) ], + exports: [ RouterModule ] +}) +export class RegisterRoutingModule {} diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html new file mode 100644 index 000000000..68ea4473a --- /dev/null +++ b/client/src/app/+signup/+register/register-step-channel.component.html @@ -0,0 +1,50 @@ +
+ +
+

+ A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.
+ For example, you could decide to have a channel to publish your piano concerts, and another channel in which you publish your videos talking about ecology. +

+ +

+ Other users can decide to subscribe any channel they want, to be notified when you publish a new video. +

+
+ +
+ + +
+ +
+ @{{ instanceHost }} +
+
+ +
+ {{ formErrors.name }} +
+ +
+ Channel name cannot be the same than your account name. You can click on the first step to update your account name. +
+
+ +
+ + +
+ +
+ +
+ {{ formErrors.displayName }} +
+
+
diff --git a/client/src/app/+signup/+register/register-step-channel.component.ts b/client/src/app/+signup/+register/register-step-channel.component.ts new file mode 100644 index 000000000..9e13f75b3 --- /dev/null +++ b/client/src/app/+signup/+register/register-step-channel.component.ts @@ -0,0 +1,40 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { AuthService } from '@app/core' +import { FormReactive, VideoChannelValidatorsService } from '@app/shared' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { FormGroup } from '@angular/forms' + +@Component({ + selector: 'my-register-step-channel', + templateUrl: './register-step-channel.component.html', + styleUrls: [ './register.component.scss' ] +}) +export class RegisterStepChannelComponent extends FormReactive implements OnInit { + @Input() username: string + @Output() formBuilt = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService, + private authService: AuthService, + private videoChannelValidatorsService: VideoChannelValidatorsService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + isSameThanUsername () { + return this.username && this.username === this.form.value['name'] + } + + ngOnInit () { + this.buildForm({ + name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME, + displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + } +} diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html new file mode 100644 index 000000000..cd0c78bfa --- /dev/null +++ b/client/src/app/+signup/+register/register-step-user.component.html @@ -0,0 +1,54 @@ +
+ +
+ + +
+ +
+ @{{ instanceHost }} +
+
+ +
+ {{ formErrors.username }} +
+
+ +
+ + +
+ {{ formErrors.email }} +
+
+ +
+ + +
+ {{ formErrors.password }} +
+
+ +
+ + +
+ {{ formErrors.terms }} +
+
+
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/register-step-user.component.ts new file mode 100644 index 000000000..3825ae371 --- /dev/null +++ b/client/src/app/+signup/+register/register-step-user.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core' +import { AuthService } from '@app/core' +import { FormReactive, UserValidatorsService } from '@app/shared' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { FormGroup } from '@angular/forms' + +@Component({ + selector: 'my-register-step-user', + templateUrl: './register-step-user.component.html', + styleUrls: [ './register.component.scss' ] +}) +export class RegisterStepUserComponent extends FormReactive implements OnInit { + @Output() formBuilt = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService, + private authService: AuthService, + private userValidatorsService: UserValidatorsService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + ngOnInit () { + this.buildForm({ + username: this.userValidatorsService.USER_USERNAME, + password: this.userValidatorsService.USER_PASSWORD, + email: this.userValidatorsService.USER_EMAIL, + terms: this.userValidatorsService.USER_TERMS + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + } +} diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html new file mode 100644 index 000000000..24def68c1 --- /dev/null +++ b/client/src/app/+signup/+register/register.component.html @@ -0,0 +1,41 @@ +
+ +
+ Create an account +
+ + +
{{ info }}
+ +
+
+ + + + + + + + + + + + + + +
{{ error }}
+ + +
+ +
+ + +
+
+ +
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss new file mode 100644 index 000000000..6f61b78f7 --- /dev/null +++ b/client/src/app/+signup/+register/register.component.scss @@ -0,0 +1,58 @@ +@import '_variables'; +@import '_mixins'; + +.alert { + font-size: 15px; + text-align: center; +} + +.wrapper { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + & > div { + margin-bottom: 40px; + width: 450px; + + @media screen and (max-width: 500px) { + width: auto; + } + } +} + +my-instance-features-table { + display: block; + + margin-bottom: 40px; +} + +.form-group-terms { + margin: 30px 0; +} + +.input-group { + @include peertube-input-group(400px); +} + +.input-group-append { + height: 30px; +} + +input:not([type=submit]) { + @include peertube-input-text(400px); + + display: block; + + &#username, + &#name { + width: auto !important; + flex-grow: 1; + } +} + +input[type=submit], +button { + @include peertube-button; + @include orange-button; +} diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts new file mode 100644 index 000000000..cd6059728 --- /dev/null +++ b/client/src/app/+signup/+register/register.component.ts @@ -0,0 +1,89 @@ +import { Component } from '@angular/core' +import { AuthService, Notifier, RedirectService, ServerService } from '@app/core' +import { UserService, UserValidatorsService } from '@app/shared' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { UserRegister } from '@shared/models/users/user-register.model' +import { FormGroup } from '@angular/forms' + +@Component({ + selector: 'my-register', + templateUrl: './register.component.html', + styleUrls: [ './register.component.scss' ] +}) +export class RegisterComponent { + info: string = null + error: string = null + success: string = null + signupDone = false + + formStepUser: FormGroup + formStepChannel: FormGroup + + constructor ( + private authService: AuthService, + private userValidatorsService: UserValidatorsService, + private notifier: Notifier, + private userService: UserService, + private serverService: ServerService, + private redirectService: RedirectService, + private i18n: I18n + ) { + } + + get requiresEmailVerification () { + return this.serverService.getConfig().signup.requiresEmailVerification + } + + hasSameChannelAndAccountNames () { + return this.getUsername() === this.getChannelName() + } + + getUsername () { + if (!this.formStepUser) return undefined + + return this.formStepUser.value['username'] + } + + getChannelName () { + if (!this.formStepChannel) return undefined + + return this.formStepChannel.value['name'] + } + + onUserFormBuilt (form: FormGroup) { + this.formStepUser = form + } + + onChannelFormBuilt (form: FormGroup) { + this.formStepChannel = form + } + + signup () { + this.error = null + + const body: UserRegister = Object.assign(this.formStepUser.value, { channel: this.formStepChannel.value }) + + this.userService.signup(body).subscribe( + () => { + this.signupDone = true + + if (this.requiresEmailVerification) { + this.info = this.i18n('Now please check your emails to verify your account and complete signup.') + return + } + + // Auto login + this.authService.login(body.username, body.password) + .subscribe( + () => { + this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username }) + }, + + err => this.error = err.message + ) + }, + + err => this.error = err.message + ) + } +} diff --git a/client/src/app/+signup/+register/register.module.ts b/client/src/app/+signup/+register/register.module.ts new file mode 100644 index 000000000..46336cbd0 --- /dev/null +++ b/client/src/app/+signup/+register/register.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core' +import { RegisterRoutingModule } from './register-routing.module' +import { RegisterComponent } from './register.component' +import { SharedModule } from '@app/shared' +import { CdkStepperModule } from '@angular/cdk/stepper' +import { RegisterStepChannelComponent } from './register-step-channel.component' +import { RegisterStepUserComponent } from './register-step-user.component' +import { CustomStepperComponent } from './custom-stepper.component' +import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module' + +@NgModule({ + imports: [ + RegisterRoutingModule, + SharedModule, + CdkStepperModule, + SignupSharedModule + ], + + declarations: [ + RegisterComponent, + CustomStepperComponent, + RegisterStepChannelComponent, + RegisterStepUserComponent + ], + + exports: [ + RegisterComponent + ], + + providers: [ + ] +}) +export class RegisterModule { } diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html new file mode 100644 index 000000000..2e4180632 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html @@ -0,0 +1,22 @@ +
+
+ Request email for account verification +
+ +
+
+ + +
+ {{ formErrors['verify-email-email'] }} +
+
+ +
+ +
This instance does not require email verification.
+ +
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss new file mode 100644 index 000000000..efec6b706 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss @@ -0,0 +1,12 @@ +@import '_variables'; +@import '_mixins'; + +input:not([type=submit]) { + @include peertube-input-text(340px); + display: block; +} + +input[type=submit] { + @include peertube-button; + @include orange-button; +} diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts new file mode 100644 index 000000000..cfd471fa4 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit } from '@angular/core' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Notifier, RedirectService } from '@app/core' +import { ServerService } from '@app/core/server' +import { FormReactive, UserService } from '@app/shared' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' + +@Component({ + selector: 'my-verify-account-ask-send-email', + templateUrl: './verify-account-ask-send-email.component.html', + styleUrls: [ './verify-account-ask-send-email.component.scss' ] +}) + +export class VerifyAccountAskSendEmailComponent extends FormReactive implements OnInit { + + constructor ( + protected formValidatorService: FormValidatorService, + private userValidatorsService: UserValidatorsService, + private userService: UserService, + private serverService: ServerService, + private notifier: Notifier, + private redirectService: RedirectService, + private i18n: I18n + ) { + super() + } + + get requiresEmailVerification () { + return this.serverService.getConfig().signup.requiresEmailVerification + } + + ngOnInit () { + this.buildForm({ + 'verify-email-email': this.userValidatorsService.USER_EMAIL + }) + } + + askSendVerifyEmail () { + const email = this.form.value['verify-email-email'] + this.userService.askSendVerifyEmail(email) + .subscribe( + () => { + const message = this.i18n( + 'An email with verification link will be sent to {{email}}.', + { email } + ) + this.notifier.success(message) + this.redirectService.redirectToHomepage() + }, + + err => { + this.notifier.error(err.message) + } + ) + } +} diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html new file mode 100644 index 000000000..728709ca6 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html @@ -0,0 +1,15 @@ +
+
+ Verify account email confirmation +
+ + + + + +
+ An error occurred. + Request new verification email. +
+ +
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts new file mode 100644 index 000000000..3fb2d1cd8 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts @@ -0,0 +1,50 @@ +import { Component, OnInit } from '@angular/core' +import { ActivatedRoute, Router } from '@angular/router' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Notifier } from '@app/core' +import { UserService } from '@app/shared' + +@Component({ + selector: 'my-verify-account-email', + templateUrl: './verify-account-email.component.html' +}) + +export class VerifyAccountEmailComponent implements OnInit { + success = false + + private userId: number + private verificationString: string + + constructor ( + private userService: UserService, + private notifier: Notifier, + private router: Router, + private route: ActivatedRoute, + private i18n: I18n + ) { + } + + ngOnInit () { + this.userId = this.route.snapshot.queryParams['userId'] + this.verificationString = this.route.snapshot.queryParams['verificationString'] + + if (!this.userId || !this.verificationString) { + this.notifier.error(this.i18n('Unable to find user id or verification string.')) + } else { + this.verifyEmail() + } + } + + verifyEmail () { + this.userService.verifyEmail(this.userId, this.verificationString) + .subscribe( + () => { + this.success = true + }, + + err => { + this.notifier.error(err.message) + } + ) + } +} diff --git a/client/src/app/+signup/+verify-account/verify-account-routing.module.ts b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts new file mode 100644 index 000000000..16d5fe0d0 --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core' +import { RouterModule, Routes } from '@angular/router' +import { MetaGuard } from '@ngx-meta/core' +import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component' +import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component' + +const verifyAccountRoutes: Routes = [ + { + path: '', + canActivateChild: [ MetaGuard ], + children: [ + { + path: 'email', + component: VerifyAccountEmailComponent, + data: { + meta: { + title: 'Verify account email' + } + } + }, + { + path: 'ask-send-email', + component: VerifyAccountAskSendEmailComponent, + data: { + meta: { + title: 'Verify account ask send email' + } + } + } + ] + } +] + +@NgModule({ + imports: [ RouterModule.forChild(verifyAccountRoutes) ], + exports: [ RouterModule ] +}) +export class VerifyAccountRoutingModule {} diff --git a/client/src/app/+signup/+verify-account/verify-account.module.ts b/client/src/app/+signup/+verify-account/verify-account.module.ts new file mode 100644 index 000000000..9fe14e81e --- /dev/null +++ b/client/src/app/+signup/+verify-account/verify-account.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core' +import { VerifyAccountRoutingModule } from './verify-account-routing.module' +import { VerifyAccountEmailComponent } from './verify-account-email/verify-account-email.component' +import { VerifyAccountAskSendEmailComponent } from './verify-account-ask-send-email/verify-account-ask-send-email.component' +import { SharedModule } from '@app/shared' +import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module' + +@NgModule({ + imports: [ + VerifyAccountRoutingModule, + SharedModule, + SignupSharedModule + ], + + declarations: [ + VerifyAccountEmailComponent, + VerifyAccountAskSendEmailComponent + ], + + exports: [], + + providers: [] +}) +export class VerifyAccountModule { +} diff --git a/client/src/app/+signup/shared/signup-shared.module.ts b/client/src/app/+signup/shared/signup-shared.module.ts new file mode 100644 index 000000000..cd21fdef3 --- /dev/null +++ b/client/src/app/+signup/shared/signup-shared.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core' +import { SignupSuccessComponent } from '../shared/signup-success.component' +import { SharedModule } from '@app/shared' + +@NgModule({ + imports: [ + SharedModule + ], + + declarations: [ + SignupSuccessComponent + ], + + exports: [ + SignupSuccessComponent + ], + + providers: [ + ] +}) +export class SignupSharedModule { } diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html new file mode 100644 index 000000000..e35f858c6 --- /dev/null +++ b/client/src/app/+signup/shared/signup-success.component.html @@ -0,0 +1,16 @@ + + + + + + + +

Welcome on PeerTube!

+ +
+

{{ message }}

+ +

+ If you need help to use PeerTube, you can take a look to the documentation. +

+
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss new file mode 100644 index 000000000..fbc27c8bc --- /dev/null +++ b/client/src/app/+signup/shared/signup-success.component.scss @@ -0,0 +1,76 @@ +svg { + width: 100px; + display: block; + margin: 40px auto 0; +} + +.path { + stroke-dasharray: 1000; + stroke-dashoffset: 0; + + &.circle { + -webkit-animation: dash .9s ease-in-out; + animation: dash .9s ease-in-out; + } + + &.line { + stroke-dashoffset: 1000; + -webkit-animation: dash .9s .35s ease-in-out forwards; + animation: dash .9s .35s ease-in-out forwards; + } + + &.check { + stroke-dashoffset: -100; + -webkit-animation: dash-check .9s .35s ease-in-out forwards; + animation: dash-check .9s .35s ease-in-out forwards; + } +} + +.bottom-message { + text-align: center; + margin: 20px 0 60px; + font-size: 1.25em; + color: #73AF55; +} + +.alert { + font-size: 15px; + text-align: center; +} + + +@-webkit-keyframes dash { + 0% { + stroke-dashoffset: 1000; + } + 100% { + stroke-dashoffset: 0; + } +} + +@keyframes dash { + 0% { + stroke-dashoffset: 1000; + } + 100% { + stroke-dashoffset: 0; + } +} + +@-webkit-keyframes dash-check { + 0% { + stroke-dashoffset: -100; + } + 100% { + stroke-dashoffset: 900; + } +} + +@keyframes dash-check { + 0% { + stroke-dashoffset: -100; + } + 100% { + stroke-dashoffset: 900; + } +} diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts new file mode 100644 index 000000000..19fb5922a --- /dev/null +++ b/client/src/app/+signup/shared/signup-success.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core' + +@Component({ + selector: 'my-signup-success', + templateUrl: './signup-success.component.html', + styleUrls: [ './signup-success.component.scss' ] +}) +export class SignupSuccessComponent { + @Input() message: string +} diff --git a/client/src/app/+verify-account/index.ts b/client/src/app/+verify-account/index.ts deleted file mode 100644 index 733f5ba77..000000000 --- a/client/src/app/+verify-account/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from '@app/+verify-account/verify-account-routing.module' -export * from '@app/+verify-account/verify-account.module' diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html b/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html deleted file mode 100644 index 2e4180632..000000000 --- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
- Request email for account verification -
- -
-
- - -
- {{ formErrors['verify-email-email'] }} -
-
- -
- -
This instance does not require email verification.
- -
diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss b/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss deleted file mode 100644 index efec6b706..000000000 --- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -input:not([type=submit]) { - @include peertube-input-text(340px); - display: block; -} - -input[type=submit] { - @include peertube-button; - @include orange-button; -} diff --git a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts deleted file mode 100644 index cfd471fa4..000000000 --- a/client/src/app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { Component, OnInit } from '@angular/core' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { Notifier, RedirectService } from '@app/core' -import { ServerService } from '@app/core/server' -import { FormReactive, UserService } from '@app/shared' -import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service' - -@Component({ - selector: 'my-verify-account-ask-send-email', - templateUrl: './verify-account-ask-send-email.component.html', - styleUrls: [ './verify-account-ask-send-email.component.scss' ] -}) - -export class VerifyAccountAskSendEmailComponent extends FormReactive implements OnInit { - - constructor ( - protected formValidatorService: FormValidatorService, - private userValidatorsService: UserValidatorsService, - private userService: UserService, - private serverService: ServerService, - private notifier: Notifier, - private redirectService: RedirectService, - private i18n: I18n - ) { - super() - } - - get requiresEmailVerification () { - return this.serverService.getConfig().signup.requiresEmailVerification - } - - ngOnInit () { - this.buildForm({ - 'verify-email-email': this.userValidatorsService.USER_EMAIL - }) - } - - askSendVerifyEmail () { - const email = this.form.value['verify-email-email'] - this.userService.askSendVerifyEmail(email) - .subscribe( - () => { - const message = this.i18n( - 'An email with verification link will be sent to {{email}}.', - { email } - ) - this.notifier.success(message) - this.redirectService.redirectToHomepage() - }, - - err => { - this.notifier.error(err.message) - } - ) - } -} diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html deleted file mode 100644 index a83d4a3c2..000000000 --- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
-
- Verify account email confirmation -
- -
- Your email has been verified and you may now login. Redirecting... -
- -
- An error occurred. - Request new verification email. -
- -
diff --git a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts deleted file mode 100644 index f9ecf664b..000000000 --- a/client/src/app/+verify-account/verify-account-email/verify-account-email.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Component, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { Notifier } from '@app/core' -import { UserService } from '@app/shared' - -@Component({ - selector: 'my-verify-account-email', - templateUrl: './verify-account-email.component.html' -}) - -export class VerifyAccountEmailComponent implements OnInit { - success = false - - private userId: number - private verificationString: string - - constructor ( - private userService: UserService, - private notifier: Notifier, - private router: Router, - private route: ActivatedRoute, - private i18n: I18n - ) { - } - - ngOnInit () { - this.userId = this.route.snapshot.queryParams['userId'] - this.verificationString = this.route.snapshot.queryParams['verificationString'] - - if (!this.userId || !this.verificationString) { - this.notifier.error(this.i18n('Unable to find user id or verification string.')) - } else { - this.verifyEmail() - } - } - - verifyEmail () { - this.userService.verifyEmail(this.userId, this.verificationString) - .subscribe( - () => { - this.success = true - setTimeout(() => { - this.router.navigate([ '/login' ]) - }, 2000) - }, - - err => { - this.notifier.error(err.message) - } - ) - } -} diff --git a/client/src/app/+verify-account/verify-account-routing.module.ts b/client/src/app/+verify-account/verify-account-routing.module.ts deleted file mode 100644 index a038f0336..000000000 --- a/client/src/app/+verify-account/verify-account-routing.module.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { NgModule } from '@angular/core' -import { RouterModule, Routes } from '@angular/router' - -import { MetaGuard } from '@ngx-meta/core' - -import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component' -import { - VerifyAccountAskSendEmailComponent -} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component' - -const verifyAccountRoutes: Routes = [ - { - path: '', - canActivateChild: [ MetaGuard ], - children: [ - { - path: 'email', - component: VerifyAccountEmailComponent, - data: { - meta: { - title: 'Verify account email' - } - } - }, - { - path: 'ask-send-email', - component: VerifyAccountAskSendEmailComponent, - data: { - meta: { - title: 'Verify account ask send email' - } - } - } - ] - } -] - -@NgModule({ - imports: [ RouterModule.forChild(verifyAccountRoutes) ], - exports: [ RouterModule ] -}) -export class VerifyAccountRoutingModule {} diff --git a/client/src/app/+verify-account/verify-account.module.ts b/client/src/app/+verify-account/verify-account.module.ts deleted file mode 100644 index 9092c6b4f..000000000 --- a/client/src/app/+verify-account/verify-account.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core' - -import { VerifyAccountRoutingModule } from '@app/+verify-account/verify-account-routing.module' -import { VerifyAccountEmailComponent } from '@app/+verify-account/verify-account-email/verify-account-email.component' -import { - VerifyAccountAskSendEmailComponent -} from '@app/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component' -import { SharedModule } from '@app/shared' - -@NgModule({ - imports: [ - VerifyAccountRoutingModule, - SharedModule - ], - - declarations: [ - VerifyAccountEmailComponent, - VerifyAccountAskSendEmailComponent - ], - - exports: [ - ], - - providers: [ - ] -}) -export class VerifyAccountModule { } diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index db8888dba..7ca51f226 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -16,7 +16,7 @@ const routes: Routes = [ }, { path: 'verify-account', - loadChildren: './+verify-account/verify-account.module#VerifyAccountModule' + loadChildren: './+signup/+verify-account/verify-account.module#VerifyAccountModule' }, { path: 'accounts', @@ -30,6 +30,10 @@ const routes: Routes = [ path: 'about', loadChildren: './+about/about.module#AboutModule' }, + { + path: 'signup', + loadChildren: './+signup/+register/register.module#RegisterModule' + }, { path: '', component: AppComponent // Avoid 404, app component will redirect dynamically diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 0bbc2e08b..1e2936a37 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -14,7 +14,6 @@ import { HeaderComponent } from './header' import { LoginModule } from './login' import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu' import { SharedModule } from './shared' -import { SignupModule } from './signup' import { VideosModule } from './videos' import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n' import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils' @@ -53,7 +52,6 @@ export function metaFactory (serverService: ServerService): MetaLoader { CoreModule, LoginModule, ResetPasswordModule, - SignupModule, SearchModule, SharedModule, VideosModule, diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index d3e72afb4..06fa8fcf1 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -20,6 +20,7 @@ import { Notifier } from './notification' import { MessageService } from 'primeng/api' import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service' import { ServerConfigResolver } from './routing/server-config-resolver.service' +import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service' @NgModule({ imports: [ @@ -58,6 +59,8 @@ import { ServerConfigResolver } from './routing/server-config-resolver.service' ThemeService, LoginGuard, UserRightGuard, + UnloggedGuard, + RedirectService, Notifier, MessageService, diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts index e1db4097b..571822b76 100644 --- a/client/src/app/core/routing/redirect.service.ts +++ b/client/src/app/core/routing/redirect.service.ts @@ -42,7 +42,14 @@ export class RedirectService { } redirectToPreviousRoute () { - if (this.previousUrl) return this.router.navigateByUrl(this.previousUrl) + const exceptions = [ + '/verify-account' + ] + + if (this.previousUrl) { + const isException = exceptions.find(e => this.previousUrl.startsWith(e)) + if (!isException) return this.router.navigateByUrl(this.previousUrl) + } return this.redirectToHomepage() } diff --git a/client/src/app/core/routing/unlogged-guard.service.ts b/client/src/app/core/routing/unlogged-guard.service.ts new file mode 100644 index 000000000..3132a1a77 --- /dev/null +++ b/client/src/app/core/routing/unlogged-guard.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core' +import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Router, RouterStateSnapshot } from '@angular/router' +import { AuthService } from '../auth/auth.service' +import { RedirectService } from './redirect.service' + +@Injectable() +export class UnloggedGuard implements CanActivate, CanActivateChild { + + constructor ( + private router: Router, + private auth: AuthService, + private redirectService: RedirectService + ) {} + + canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + if (this.auth.isLoggedIn() === false) return true + + this.redirectService.redirectToHomepage() + return false + } + + canActivateChild (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + return this.canActivate(route, state) + } +} diff --git a/client/src/app/signup/custom-stepper.component.html b/client/src/app/signup/custom-stepper.component.html deleted file mode 100644 index bf507fc4f..000000000 --- a/client/src/app/signup/custom-stepper.component.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
- -
-
- {{ i + 1 }} - -
- -
{{ step.label }}
-
- - -
- -
- -
- -
- -
diff --git a/client/src/app/signup/custom-stepper.component.scss b/client/src/app/signup/custom-stepper.component.scss deleted file mode 100644 index 2371c8ae5..000000000 --- a/client/src/app/signup/custom-stepper.component.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -$grey-color: #9CA3AB; -$index-block-height: 32px; - -header { - display: flex; - justify-content: space-between; - font-size: 15px; - margin-bottom: 30px; - - .step-info { - color: $grey-color; - display: flex; - flex-direction: column; - align-items: center; - width: $index-block-height; - - .step-index { - display: flex; - justify-content: center; - align-items: center; - width: $index-block-height; - height: $index-block-height; - border-radius: 100px; - border: 2px solid $grey-color; - margin-bottom: 10px; - - my-global-icon { - @include apply-svg-color(var(--mainBackgroundColor)); - - width: 22px; - height: 22px; - } - } - - .step-label { - width: max-content; - } - - &.active, - &.completed { - .step-index { - border-color: var(--mainColor); - background-color: var(--mainColor); - color: var(--mainBackgroundColor); - } - - .step-label { - color: var(--mainColor); - } - } - - &.completed { - cursor: pointer; - } - } - - .connector { - flex: auto; - margin: $index-block-height/2 10px 0 10px; - height: 2px; - background-color: $grey-color; - } -} diff --git a/client/src/app/signup/custom-stepper.component.ts b/client/src/app/signup/custom-stepper.component.ts deleted file mode 100644 index 2ae40f3a9..000000000 --- a/client/src/app/signup/custom-stepper.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core' -import { CdkStep, CdkStepper } from '@angular/cdk/stepper' - -@Component({ - selector: 'my-custom-stepper', - templateUrl: './custom-stepper.component.html', - styleUrls: [ './custom-stepper.component.scss' ], - providers: [ { provide: CdkStepper, useExisting: CustomStepperComponent } ] -}) -export class CustomStepperComponent extends CdkStepper { - - onClick (index: number): void { - this.selectedIndex = index - } - - isCompleted (step: CdkStep) { - return step.stepControl && step.stepControl.dirty && step.stepControl.valid - } -} diff --git a/client/src/app/signup/index.ts b/client/src/app/signup/index.ts deleted file mode 100644 index b0aca9723..000000000 --- a/client/src/app/signup/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './signup-routing.module' -export * from './signup.component' -export * from './signup.module' diff --git a/client/src/app/signup/signup-routing.module.ts b/client/src/app/signup/signup-routing.module.ts deleted file mode 100644 index 820d16d4d..000000000 --- a/client/src/app/signup/signup-routing.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core' -import { RouterModule, Routes } from '@angular/router' -import { MetaGuard } from '@ngx-meta/core' -import { SignupComponent } from './signup.component' -import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service' - -const signupRoutes: Routes = [ - { - path: 'signup', - component: SignupComponent, - canActivate: [ MetaGuard ], - data: { - meta: { - title: 'Signup' - } - }, - resolve: { - serverConfigLoaded: ServerConfigResolver - } - } -] - -@NgModule({ - imports: [ RouterModule.forChild(signupRoutes) ], - exports: [ RouterModule ] -}) -export class SignupRoutingModule {} diff --git a/client/src/app/signup/signup-step-channel.component.html b/client/src/app/signup/signup-step-channel.component.html deleted file mode 100644 index 68ea4473a..000000000 --- a/client/src/app/signup/signup-step-channel.component.html +++ /dev/null @@ -1,50 +0,0 @@ -
- -
-

- A channel is an entity in which you upload your videos. Creating several of them helps you to organize and separate your content.
- For example, you could decide to have a channel to publish your piano concerts, and another channel in which you publish your videos talking about ecology. -

- -

- Other users can decide to subscribe any channel they want, to be notified when you publish a new video. -

-
- -
- - -
- -
- @{{ instanceHost }} -
-
- -
- {{ formErrors.name }} -
- -
- Channel name cannot be the same than your account name. You can click on the first step to update your account name. -
-
- -
- - -
- -
- -
- {{ formErrors.displayName }} -
-
-
diff --git a/client/src/app/signup/signup-step-channel.component.ts b/client/src/app/signup/signup-step-channel.component.ts deleted file mode 100644 index a49b7f36f..000000000 --- a/client/src/app/signup/signup-step-channel.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' -import { AuthService } from '@app/core' -import { FormReactive, VideoChannelValidatorsService } from '../shared' -import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { FormGroup } from '@angular/forms' - -@Component({ - selector: 'my-signup-step-channel', - templateUrl: './signup-step-channel.component.html', - styleUrls: [ './signup.component.scss' ] -}) -export class SignupStepChannelComponent extends FormReactive implements OnInit { - @Input() username: string - @Output() formBuilt = new EventEmitter() - - constructor ( - protected formValidatorService: FormValidatorService, - private authService: AuthService, - private videoChannelValidatorsService: VideoChannelValidatorsService - ) { - super() - } - - get instanceHost () { - return window.location.host - } - - isSameThanUsername () { - return this.username && this.username === this.form.value['name'] - } - - ngOnInit () { - this.buildForm({ - name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME, - displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME - }) - - setTimeout(() => this.formBuilt.emit(this.form)) - } -} diff --git a/client/src/app/signup/signup-step-user.component.html b/client/src/app/signup/signup-step-user.component.html deleted file mode 100644 index cd0c78bfa..000000000 --- a/client/src/app/signup/signup-step-user.component.html +++ /dev/null @@ -1,54 +0,0 @@ -
- -
- - -
- -
- @{{ instanceHost }} -
-
- -
- {{ formErrors.username }} -
-
- -
- - -
- {{ formErrors.email }} -
-
- -
- - -
- {{ formErrors.password }} -
-
- -
- - -
- {{ formErrors.terms }} -
-
-
diff --git a/client/src/app/signup/signup-step-user.component.ts b/client/src/app/signup/signup-step-user.component.ts deleted file mode 100644 index 54855d8a7..000000000 --- a/client/src/app/signup/signup-step-user.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core' -import { AuthService } from '@app/core' -import { FormReactive, UserValidatorsService } from '../shared' -import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -import { FormGroup } from '@angular/forms' - -@Component({ - selector: 'my-signup-step-user', - templateUrl: './signup-step-user.component.html', - styleUrls: [ './signup.component.scss' ] -}) -export class SignupStepUserComponent extends FormReactive implements OnInit { - @Output() formBuilt = new EventEmitter() - - constructor ( - protected formValidatorService: FormValidatorService, - private authService: AuthService, - private userValidatorsService: UserValidatorsService - ) { - super() - } - - get instanceHost () { - return window.location.host - } - - ngOnInit () { - this.buildForm({ - username: this.userValidatorsService.USER_USERNAME, - password: this.userValidatorsService.USER_PASSWORD, - email: this.userValidatorsService.USER_EMAIL, - terms: this.userValidatorsService.USER_TERMS - }) - - setTimeout(() => this.formBuilt.emit(this.form)) - } -} diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html deleted file mode 100644 index ae3a595e9..000000000 --- a/client/src/app/signup/signup.component.html +++ /dev/null @@ -1,43 +0,0 @@ -
- -
- Create an account -
- - - -
{{ info }}
-
{{ success }}
- -
-
- - - - - - - - - - - - - - -
{{ error }}
- - -
- -
- - -
-
- -
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss deleted file mode 100644 index 6f61b78f7..000000000 --- a/client/src/app/signup/signup.component.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.alert { - font-size: 15px; - text-align: center; -} - -.wrapper { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - - & > div { - margin-bottom: 40px; - width: 450px; - - @media screen and (max-width: 500px) { - width: auto; - } - } -} - -my-instance-features-table { - display: block; - - margin-bottom: 40px; -} - -.form-group-terms { - margin: 30px 0; -} - -.input-group { - @include peertube-input-group(400px); -} - -.input-group-append { - height: 30px; -} - -input:not([type=submit]) { - @include peertube-input-text(400px); - - display: block; - - &#username, - &#name { - width: auto !important; - flex-grow: 1; - } -} - -input[type=submit], -button { - @include peertube-button; - @include orange-button; -} diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts deleted file mode 100644 index 11eaa8521..000000000 --- a/client/src/app/signup/signup.component.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { Component } from '@angular/core' -import { AuthService, Notifier, RedirectService, ServerService } from '@app/core' -import { UserService, UserValidatorsService } from '../shared' -import { I18n } from '@ngx-translate/i18n-polyfill' -import { UserRegister } from '@shared/models/users/user-register.model' -import { FormGroup } from '@angular/forms' - -@Component({ - selector: 'my-signup', - templateUrl: './signup.component.html', - styleUrls: [ './signup.component.scss' ] -}) -export class SignupComponent { - info: string = null - error: string = null - success: string = null - signupDone = false - - formStepUser: FormGroup - formStepChannel: FormGroup - - constructor ( - private authService: AuthService, - private userValidatorsService: UserValidatorsService, - private notifier: Notifier, - private userService: UserService, - private serverService: ServerService, - private redirectService: RedirectService, - private i18n: I18n - ) { - } - - get requiresEmailVerification () { - return this.serverService.getConfig().signup.requiresEmailVerification - } - - hasSameChannelAndAccountNames () { - return this.getUsername() === this.getChannelName() - } - - getUsername () { - if (!this.formStepUser) return undefined - - return this.formStepUser.value['username'] - } - - getChannelName () { - if (!this.formStepChannel) return undefined - - return this.formStepChannel.value['name'] - } - - onUserFormBuilt (form: FormGroup) { - this.formStepUser = form - } - - onChannelFormBuilt (form: FormGroup) { - this.formStepChannel = form - } - - signup () { - this.error = null - - const body: UserRegister = Object.assign(this.formStepUser.value, this.formStepChannel.value) - - this.userService.signup(body).subscribe( - () => { - this.signupDone = true - - if (this.requiresEmailVerification) { - this.info = this.i18n('Now please check your emails to verify your account and complete signup.') - return - } - - // Auto login - this.authService.login(body.username, body.password) - .subscribe( - () => { - this.success = this.i18n('You are now logged in as {{username}}!', { username: body.username }) - }, - - err => this.error = err.message - ) - }, - - err => this.error = err.message - ) - } -} diff --git a/client/src/app/signup/signup.module.ts b/client/src/app/signup/signup.module.ts deleted file mode 100644 index fccaf7ce1..000000000 --- a/client/src/app/signup/signup.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NgModule } from '@angular/core' -import { SignupRoutingModule } from './signup-routing.module' -import { SignupComponent } from './signup.component' -import { SharedModule } from '../shared' -import { CdkStepperModule } from '@angular/cdk/stepper' -import { SignupStepChannelComponent } from '@app/signup/signup-step-channel.component' -import { SignupStepUserComponent } from '@app/signup/signup-step-user.component' -import { CustomStepperComponent } from '@app/signup/custom-stepper.component' -import { SuccessComponent } from '@app/signup/success.component' - -@NgModule({ - imports: [ - SignupRoutingModule, - SharedModule, - CdkStepperModule - ], - - declarations: [ - SignupComponent, - CustomStepperComponent, - SuccessComponent, - SignupStepChannelComponent, - SignupStepUserComponent - ], - - exports: [ - SignupComponent - ], - - providers: [ - ] -}) -export class SignupModule { } diff --git a/client/src/app/signup/success.component.html b/client/src/app/signup/success.component.html deleted file mode 100644 index 68eb72b61..000000000 --- a/client/src/app/signup/success.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - -

Welcome on PeerTube!

diff --git a/client/src/app/signup/success.component.scss b/client/src/app/signup/success.component.scss deleted file mode 100644 index 7c66e08cf..000000000 --- a/client/src/app/signup/success.component.scss +++ /dev/null @@ -1,74 +0,0 @@ -svg { - width: 100px; - display: block; - margin: 40px auto 0; -} - -.path { - stroke-dasharray: 1000; - stroke-dashoffset: 0; - - &.circle { - -webkit-animation: dash .9s ease-in-out; - animation: dash .9s ease-in-out; - } - - &.line { - stroke-dashoffset: 1000; - -webkit-animation: dash .9s .35s ease-in-out forwards; - animation: dash .9s .35s ease-in-out forwards; - } - - &.check { - stroke-dashoffset: -100; - -webkit-animation: dash-check .9s .35s ease-in-out forwards; - animation: dash-check .9s .35s ease-in-out forwards; - } -} - -p { - text-align: center; - margin: 20px 0 60px; - font-size: 1.25em; - - &.success { - color: #73AF55; - } -} - - -@-webkit-keyframes dash { - 0% { - stroke-dashoffset: 1000; - } - 100% { - stroke-dashoffset: 0; - } -} - -@keyframes dash { - 0% { - stroke-dashoffset: 1000; - } - 100% { - stroke-dashoffset: 0; - } -} - -@-webkit-keyframes dash-check { - 0% { - stroke-dashoffset: -100; - } - 100% { - stroke-dashoffset: 900; - } -} - -@keyframes dash-check { - 0% { - stroke-dashoffset: -100; - } - 100% { - stroke-dashoffset: 900; - } -} diff --git a/client/src/app/signup/success.component.ts b/client/src/app/signup/success.component.ts deleted file mode 100644 index 2674e1e30..000000000 --- a/client/src/app/signup/success.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core' - -@Component({ - selector: 'my-success', - templateUrl: './success.component.html', - styleUrls: [ './success.component.scss' ] -}) -export class SuccessComponent { - -} -- cgit v1.2.3