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 <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>

11 files changed, 153 insertions, 174 deletions

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 @@
   <header *ngIf="steps.length > 2">
     <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
       <div
-        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }" [attr.aria-current]="selectedIndex === i"
+        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step), 'c-hand': isAccessible(i) }" [attr.aria-current]="selectedIndex === i"
         (click)="onClick(i)"
       >
         <div class="step-index">
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 @@
+<form role="form" [formGroup]="form">
+  <div class="form-group form-group-terms">
+    <my-peertube-checkbox inputName="terms" formControlName="terms">
+      <ng-template ptTemplate="label">
+        <ng-container i18n>
+          I am at least 16 years old and agree
+          to the <a class="terms-anchor" (click)="onTermsClick($event)" href='#'>Terms</a>
+          <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
+          of this instance
+        </ng-container>
+      </ng-template>
+    </my-peertube-checkbox>
+
+    <div *ngIf="formErrors.terms" class="form-error">
+      {{ formErrors.terms }}
+    </div>
+  </div>
+</form>
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<FormGroup>()
+  @Output() termsClick = new EventEmitter<void>()
+  @Output() codeOfConductClick = new EventEmitter<void>()
+
+  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 @@
     </div>
   </div>
 
-  <div class="form-group form-group-terms">
-    <my-peertube-checkbox inputName="terms" formControlName="terms">
-      <ng-template ptTemplate="label">
-        <ng-container i18n>
-          I am at least 16 years old and agree
-          to the <a (click)="onTermsClick($event)" href='#'>Terms</a>
-          <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
-          of this instance
-        </ng-container>
-      </ng-template>
-    </my-peertube-checkbox>
-
-    <div *ngIf="formErrors.terms" class="form-error">
-      {{ formErrors.terms }}
-    </div>
-  </div>
 </form>
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<FormGroup>()
-  @Output() termsClick = new EventEmitter<void>()
-  @Output() codeOfConductClick = new EventEmitter<void>()
 
   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 @@
   <div class="wrapper" [hidden]="signupDone">
     <div class="register-form">
       <my-custom-stepper linear *ngIf="!signupDone">
-        <cdk-step [stepControl]="formStepUser" i18n-label label="User">
-          <my-register-step-user
+        <cdk-step [stepControl]="formStepTerms" i18n-label="Stepper label for the registration page describing terms of service" label="Terms">
+          <div class="instance-information">
+            <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion>
+          </div>
+
+          <my-register-step-terms
             [hasCodeOfConduct]="!!aboutHtml.codeOfConduct"
-            [videoUploadDisabled]="videoUploadDisabled"
-            (formBuilt)="onUserFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
-          >
-          </my-register-step-user>
+            (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()"
+          ></my-register-step-terms>
+
+          <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button>
+        </cdk-step>
+
+        <cdk-step [stepControl]="formStepUser" i18n-label="Stepper label for the registration page asking user informations" label="User">
+          <my-register-step-user (formBuilt)="onUserFormBuilt($event)" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-user>
 
-          <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid"
-            (click)="signup()">{{ videoUploadDisabled ? 'Signup' : 'Next' }}</button>
+          <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
         </cdk-step>
 
-        <cdk-step [stepControl]="formStepChannel" i18n-label label="Channel" *ngIf="!videoUploadDisabled">
+        <cdk-step [stepControl]="formStepChannel" i18n-label="Stepper label for the registration page asking information about the default channel" label="Channel" *ngIf="!videoUploadDisabled">
           <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel>
 
           <button i18n cdkStepperNext (click)="signup()"
@@ -43,58 +50,6 @@
         </cdk-step>
       </my-custom-stepper>
     </div>
-
-    <div class="instance-information">
-      <ngb-accordion [closeOthers]="true" #accordion="ngbAccordion">
-        <ngb-panel id="instance-features" i18n-title title="Features found on this instance">
-          <ng-template ngbPanelContent>
-            <my-instance-features-table></my-instance-features-table>
-          </ng-template>
-        </ngb-panel>
-
-        <ng-container *ngIf="about">
-          <ngb-panel
-            *ngIf="aboutHtml.administrator || about.instance.maintenanceLifetime || about.instance.businessModel"
-            id="admin-sustainability" i18n-title title="Administrators & Sustainability"
-          >
-            <ng-template ngbPanelContent>
-              <div class="block">
-                <strong i18n>Who are we?</strong>
-                <div [innerHTML]="aboutHtml.administrator"></div>
-              </div>
-
-              <div class="block">
-                <strong i18n>How long do we plan to maintain this instance?</strong>
-                <div [innerHTML]="about.instance.maintenanceLifetime"></div>
-              </div>
-
-              <div class="block">
-                <strong i18n>How will we finance this instance?</strong>
-                <div [innerHTML]="about.instance.businessModel"></div>
-              </div>
-            </ng-template>
-          </ngb-panel>
-
-          <ngb-panel *ngIf="aboutHtml.moderationInformation" id="moderation-information" i18n-title title="Moderation information">
-            <ng-template ngbPanelContent>
-              <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
-            </ng-template>
-          </ngb-panel>
-
-          <ngb-panel *ngIf="aboutHtml.codeOfConduct" id="code-of-conduct" i18n-title title="Code of conduct">
-            <ng-template ngbPanelContent>
-              <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
-            </ng-template>
-          </ngb-panel>
-
-          <ngb-panel *ngIf="aboutHtml.terms" id="terms" i18n-title title="Terms">
-            <ng-template ngbPanelContent>
-              <div class="block" [innerHTML]="aboutHtml.terms"></div>
-            </ng-template>
-          </ngb-panel>
-        </ng-container>
-      </ngb-accordion>
-    </div>
   </div>
 
 </div>
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
   ],