From 40360c17d82b33accb34ea974c275e17880c37aa Mon Sep 17 00:00:00 2001 From: Kimsible <1877318+kimsible@users.noreply.github.com> Date: Mon, 7 Dec 2020 16:34:07 +0100 Subject: improvements to login and sign-up pages (#3357) * New login form ui * Move InstanceAboutAccordion to shared components * Update closed registration alert text * Add alert for opened registration and move them bellow login form * Adjust flex block on signup and login views * Replace toggle accordion with expand on links in signup and login + scrollTo * Improve display of login alerts * Fix missing Component suffix * Define min-width instance-information block sign-up and login for mobile screens * Add ability to select specific panels in instanceAboutAccorddion * Add instance title and short-description to common instanceAboutAccordion * Clarify title alert in login page * Add step terms for signup Co-authored-by: kimsible Co-authored-by: Rigel Kent --- .../+register/custom-stepper.component.html | 2 +- .../+register/custom-stepper.component.scss | 10 +++ .../+signup/+register/custom-stepper.component.ts | 7 ++ .../+register/register-step-terms.component.html | 18 +++++ .../+register/register-step-terms.component.ts | 47 +++++++++++++ .../+register/register-step-user.component.html | 16 ----- .../+register/register-step-user.component.ts | 17 +---- .../app/+signup/+register/register.component.html | 77 +++++----------------- .../app/+signup/+register/register.component.scss | 67 +++++-------------- .../app/+signup/+register/register.component.ts | 62 +++++++++-------- .../src/app/+signup/+register/register.module.ts | 4 +- 11 files changed, 153 insertions(+), 174 deletions(-) create mode 100644 client/src/app/+signup/+register/register-step-terms.component.html create mode 100644 client/src/app/+signup/+register/register-step-terms.component.ts (limited to 'client/src/app/+signup/+register') diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html index 4cfe54152..aad2f31d3 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.html +++ b/client/src/app/+signup/+register/custom-stepper.component.html @@ -2,7 +2,7 @@
diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss index cc1591ee8..3b4791d08 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.scss +++ b/client/src/app/+signup/+register/custom-stepper.component.scss @@ -4,6 +4,12 @@ $grey-color: #9CA3AB; $index-block-height: 32px; +.container { + padding-left: 0; + padding-right: 0; + max-width: unset !important; +} + header { display: flex; justify-content: space-between; @@ -17,6 +23,10 @@ header { align-items: center; width: $index-block-height; + &:not(.c-hand) { + cursor: default; + } + .step-index { display: flex; justify-content: center; diff --git a/client/src/app/+signup/+register/custom-stepper.component.ts b/client/src/app/+signup/+register/custom-stepper.component.ts index 2ae40f3a9..5a80895f9 100644 --- a/client/src/app/+signup/+register/custom-stepper.component.ts +++ b/client/src/app/+signup/+register/custom-stepper.component.ts @@ -16,4 +16,11 @@ export class CustomStepperComponent extends CdkStepper { isCompleted (step: CdkStep) { return step.stepControl && step.stepControl.dirty && step.stepControl.valid } + + isAccessible (index: number) { + const stepsCompletedMap = this.steps.map(step => this.isCompleted(step)) + return index === 0 + ? true + : stepsCompletedMap[ index - 1 ] + } } diff --git a/client/src/app/+signup/+register/register-step-terms.component.html b/client/src/app/+signup/+register/register-step-terms.component.html new file mode 100644 index 000000000..1cfdc0a3a --- /dev/null +++ b/client/src/app/+signup/+register/register-step-terms.component.html @@ -0,0 +1,18 @@ +
+
+ + + + I am at least 16 years old and agree + to the Terms + and to the Code of Conduct + of this instance + + + + +
+ {{ formErrors.terms }} +
+
+
diff --git a/client/src/app/+signup/+register/register-step-terms.component.ts b/client/src/app/+signup/+register/register-step-terms.component.ts new file mode 100644 index 000000000..db834c68d --- /dev/null +++ b/client/src/app/+signup/+register/register-step-terms.component.ts @@ -0,0 +1,47 @@ +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, FormValidatorService } from '@app/shared/shared-forms' + +@Component({ + selector: 'my-register-step-terms', + templateUrl: './register-step-terms.component.html', + styleUrls: [ './register.component.scss' ] +}) +export class RegisterStepTermsComponent extends FormReactive implements OnInit { + @Input() hasCodeOfConduct = false + + @Output() formBuilt = new EventEmitter() + @Output() termsClick = new EventEmitter() + @Output() codeOfConductClick = new EventEmitter() + + constructor ( + protected formValidatorService: FormValidatorService + ) { + super() + } + + get instanceHost () { + return window.location.host + } + + ngOnInit () { + this.buildForm({ + terms: USER_TERMS_VALIDATOR + }) + + setTimeout(() => this.formBuilt.emit(this.form)) + } + + onTermsClick (event: Event) { + event.preventDefault() + this.termsClick.emit() + } + + onCodeOfConductClick (event: Event) { + event.preventDefault() + this.codeOfConductClick.emit() + } +} diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html index 6eab4df0c..ac341666b 100644 --- a/client/src/app/+signup/+register/register-step-user.component.html +++ b/client/src/app/+signup/+register/register-step-user.component.html @@ -63,20 +63,4 @@
-
- - - - I am at least 16 years old and agree - to the Terms - and to the Code of Conduct - of this instance - - - - -
- {{ 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 index 9193540b4..716cd8c78 100644 --- a/client/src/app/+signup/+register/register-step-user.component.ts +++ b/client/src/app/+signup/+register/register-step-user.component.ts @@ -7,7 +7,6 @@ import { USER_DISPLAY_NAME_REQUIRED_VALIDATOR, USER_EMAIL_VALIDATOR, USER_PASSWORD_VALIDATOR, - USER_TERMS_VALIDATOR, USER_USERNAME_VALIDATOR } from '@app/shared/form-validators/user-validators' import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' @@ -18,12 +17,9 @@ import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' styleUrls: [ './register.component.scss' ] }) export class RegisterStepUserComponent extends FormReactive implements OnInit { - @Input() hasCodeOfConduct = false @Input() videoUploadDisabled = false @Output() formBuilt = new EventEmitter() - @Output() termsClick = new EventEmitter() - @Output() codeOfConductClick = new EventEmitter() constructor ( protected formValidatorService: FormValidatorService, @@ -41,8 +37,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit { displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR, username: USER_USERNAME_VALIDATOR, password: USER_PASSWORD_VALIDATOR, - email: USER_EMAIL_VALIDATOR, - terms: USER_TERMS_VALIDATOR + email: USER_EMAIL_VALIDATOR }) setTimeout(() => this.formBuilt.emit(this.form)) @@ -54,16 +49,6 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit { .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue)) } - onTermsClick (event: Event) { - event.preventDefault() - this.termsClick.emit() - } - - onCodeOfConductClick (event: Event) { - event.preventDefault() - this.codeOfConductClick.emit() - } - private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { const username = this.form.value['username'] || '' diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html index 7e3704124..bebc5d926 100644 --- a/client/src/app/+signup/+register/register.component.html +++ b/client/src/app/+signup/+register/register.component.html @@ -10,19 +10,26 @@
- - +
+ +
+ + - + (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()" + > + + + + + + - + - +
- -
- - - - - - - - - - -
- Who are we? -
-
- -
- How long do we plan to maintain this instance? -
-
- -
- How will we finance this instance? -
-
- - - - - -
- - - - - -
- - - - - -
- - - - -
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss index 4221354ee..d22d58c4a 100644 --- a/client/src/app/+signup/+register/register.component.scss +++ b/client/src/app/+signup/+register/register.component.scss @@ -1,9 +1,5 @@ @import '_variables'; @import '_mixins'; -@import "./_bootstrap-variables"; - -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; .alert { font-size: 15px; @@ -12,44 +8,20 @@ .wrapper { display: flex; - justify-content: space-between; - flex-wrap: wrap; - - & > div { - margin-bottom: 40px; + flex-direction: column; - &.register-form { - width: 450px; + .register-form { + max-width: 600px; + align-self: center; + } - @media screen and (max-width: $mobile-view) { - width: 100%; - } - } + .register-form, + .instance-information { + width: 100%; + } - &.instance-information { - width: 600px; - margin-bottom: 40px; - - .block { - font-size: 15px; - margin-bottom: 15px; - padding: 0 $btn-padding-x; - } - - @media screen and (max-width: 1500px) { - width: 450px; - } - @media screen and (max-width: $mobile-view) { - width: 100%; - } - - ngb-accordion ::ng-deep { - .btn { - font-weight: $font-semibold !important; - color: pvar(--mainForegroundColor) !important; - } - } - } + .instance-information { + margin-bottom: 15px; } } @@ -58,15 +30,19 @@ } .input-group { - @include peertube-input-group(400px); + @include peertube-input-group(100%); } .input-group-append { height: 30px; } +.form-group-terms { + width: 100% !important; +} + input:not([type=submit]) { - @include peertube-input-text(400px); + @include peertube-input-text(100%); display: block; &#username, @@ -76,19 +52,10 @@ input:not([type=submit]) { } } -@media screen and (max-width: $mobile-view) { - .form-group-terms, - .input-group, - input:not([type=submit]) { - width: 100%; - } -} - input[type=submit], button { @include peertube-button; @include orange-button; - } .name-information { diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts index 5b6762631..b1f5d8e93 100644 --- a/client/src/app/+signup/+register/register.component.ts +++ b/client/src/app/+signup/+register/register.component.ts @@ -1,12 +1,12 @@ -import { Component, OnInit, ViewChild } from '@angular/core' +import { Component, OnInit } from '@angular/core' import { FormGroup } from '@angular/forms' import { ActivatedRoute } from '@angular/router' -import { AuthService, Notifier, UserService } from '@app/core' +import { AuthService, UserService } from '@app/core' import { HooksService } from '@app/core/plugins/hooks.service' -import { InstanceService } from '@app/shared/shared-instance' import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' import { UserRegister } from '@shared/models' -import { About, ServerConfig } from '@shared/models/server' +import { ServerConfig } from '@shared/models/server' +import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' @Component({ selector: 'my-register', @@ -14,35 +14,39 @@ import { About, ServerConfig } from '@shared/models/server' styleUrls: [ './register.component.scss' ] }) export class RegisterComponent implements OnInit { - @ViewChild('accordion', { static: true }) accordion: NgbAccordion - + accordion: NgbAccordion info: string = null error: string = null success: string = null signupDone = false - about: About - aboutHtml = { - description: '', - terms: '', - codeOfConduct: '', - moderationInformation: '', - administrator: '' - } - videoUploadDisabled: boolean + formStepTerms: FormGroup formStepUser: FormGroup formStepChannel: FormGroup + aboutHtml = { + codeOfConduct: '' + } + + instanceInformationPanels = { + codeOfConduct: true, + terms: true, + administrators: false, + features: false, + moderation: false + } + + defaultNextStepButtonLabel = $localize`Next` + stepUserButtonLabel = this.defaultNextStepButtonLabel + private serverConfig: ServerConfig constructor ( private route: ActivatedRoute, private authService: AuthService, - private notifier: Notifier, private userService: UserService, - private instanceService: InstanceService, private hooks: HooksService ) { } @@ -55,19 +59,12 @@ export class RegisterComponent implements OnInit { this.serverConfig = this.route.snapshot.data.serverConfig this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0 - - this.instanceService.getAbout() - .subscribe( - async about => { - this.about = about - - this.aboutHtml = await this.instanceService.buildHtml(about) - }, - - err => this.notifier.error(err.message) - ) + this.stepUserButtonLabel = this.videoUploadDisabled + ? $localize`Signup` + : this.defaultNextStepButtonLabel this.hooks.runAction('action:signup.register.init', 'signup') + } hasSameChannelAndAccountNames () { @@ -86,6 +83,10 @@ export class RegisterComponent implements OnInit { return this.formStepChannel.value['name'] } + onTermsFormBuilt (form: FormGroup) { + this.formStepTerms = form + } + onUserFormBuilt (form: FormGroup) { this.formStepUser = form } @@ -102,6 +103,11 @@ export class RegisterComponent implements OnInit { if (this.accordion) this.accordion.toggle('code-of-conduct') } + onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) { + this.accordion = instanceAboutAccordion.accordion + this.aboutHtml = instanceAboutAccordion.aboutHtml + } + async signup () { this.error = null diff --git a/client/src/app/+signup/+register/register.module.ts b/client/src/app/+signup/+register/register.module.ts index 608045f58..c36da53d5 100644 --- a/client/src/app/+signup/+register/register.module.ts +++ b/client/src/app/+signup/+register/register.module.ts @@ -2,10 +2,10 @@ import { CdkStepperModule } from '@angular/cdk/stepper' import { NgModule } from '@angular/core' import { SignupSharedModule } from '@app/+signup/shared/signup-shared.module' import { SharedInstanceModule } from '@app/shared/shared-instance' -import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap' import { CustomStepperComponent } from './custom-stepper.component' import { RegisterRoutingModule } from './register-routing.module' import { RegisterStepChannelComponent } from './register-step-channel.component' +import { RegisterStepTermsComponent } from './register-step-terms.component' import { RegisterStepUserComponent } from './register-step-user.component' import { RegisterComponent } from './register.component' @@ -14,7 +14,6 @@ import { RegisterComponent } from './register.component' RegisterRoutingModule, CdkStepperModule, - NgbAccordionModule, SignupSharedModule, @@ -25,6 +24,7 @@ import { RegisterComponent } from './register.component' RegisterComponent, CustomStepperComponent, RegisterStepChannelComponent, + RegisterStepTermsComponent, RegisterStepUserComponent ], -- cgit v1.2.3