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 --- .../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 --- 16 files changed, 636 deletions(-) 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 (limited to 'client/src/app/signup') 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