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>

client/src/app/shared/shared-instance/index.ts

@@ -1,4 +1,5 @@
 export * from './feature-boolean.component'
+export * from './instance-about-accordion.component'
 export * from './instance-features-table.component'
 export * from './instance-follow.service'
 export * from './instance-statistics.component'

client/src/app/shared/shared-instance/instance-about-accordion.component.html

@@ -0,0 +1,53 @@
+<h2 class="instance-name">{{ about?.instance.name }}</h2>
+
+<div class="instance-short-description">{{ about?.instance.shortDescription }}</div>
+
+<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
+  <ngb-panel *ngIf="panels.features" 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="getAdministratorsPanel()"
+      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="termsPanel" id="terms" i18n-title title="Terms">
+      <ng-template ngbPanelContent>
+        <div class="block" [innerHTML]="aboutHtml.terms"></div>
+      </ng-template>
+    </ngb-panel>
+
+    <ngb-panel *ngIf="moderationPanel" 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="codeOfConductPanel" id="code-of-conduct" i18n-title title="Code of conduct">
+      <ng-template ngbPanelContent>
+        <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
+      </ng-template>
+    </ngb-panel>
+  </ng-container>
+</ngb-accordion>

client/src/app/shared/shared-instance/instance-about-accordion.component.scss

@@ -0,0 +1,46 @@
+@import '_variables';
+@import '_mixins';
+@import "./_bootstrap-variables";
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+.instance-name {
+  line-height: 1.7rem;
+}
+
+.instance-short-description {
+  @include ellipsis-multiline(1rem, 3);
+
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.block {
+  font-size: 15px;
+  margin-bottom: 15px;
+  padding: 0 $btn-padding-x;
+}
+
+ngb-accordion ::ng-deep {
+  .card {
+    border-color: var(--mainBackgroundColor);
+
+    .card-header {
+      background-color: unset;
+      padding: 0;
+
+      & + .collapse.show {
+        background-color: var(--submenuColor);
+      }
+    }
+  }
+
+  .btn {
+    @include peertube-button;
+    @include grey-button;
+
+    border-radius: unset;
+    width: 100%;
+  }
+}

client/src/app/shared/shared-instance/instance-about-accordion.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap'
+import { InstanceService } from './instance.service'
+import { Notifier } from '@app/core'
+import { About } from '@shared/models/server'
+
+@Component({
+  selector: 'my-instance-about-accordion',
+  templateUrl: './instance-about-accordion.component.html',
+  styleUrls: ['./instance-about-accordion.component.scss']
+})
+export class InstanceAboutAccordionComponent implements OnInit {
+  @ViewChild('accordion', { static: true }) accordion: NgbAccordion
+  @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
+
+  @Input() panels = {
+    features: true,
+    administrators: true,
+    moderation: true,
+    codeOfConduct: true,
+    terms: true
+  }
+
+  about: About
+  aboutHtml = {
+    description: '',
+    terms: '',
+    codeOfConduct: '',
+    moderationInformation: '',
+    administrator: ''
+  }
+
+  constructor (
+    private instanceService: InstanceService,
+    private notifier: Notifier
+  ) { }
+
+  ngOnInit (): void {
+    this.instanceService.getAbout()
+      .subscribe(
+        async about => {
+          this.about = about
+
+          this.aboutHtml = await this.instanceService.buildHtml(about)
+
+          this.init.emit(this)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  getAdministratorsPanel () {
+    if (!this.about) return false
+    if (!this.panels.administrators) return false
+
+    return !!(this.aboutHtml?.administrator || this.about?.instance.maintenanceLifetime || this.about?.instance.businessModel)
+  }
+
+  get moderationPanel () {
+    return this.panels.moderation && !!this.aboutHtml.moderationInformation
+  }
+
+  get codeOfConductPanel () {
+    return this.panels.codeOfConduct && !!this.aboutHtml.codeOfConduct
+  }
+
+  get termsPanel () {
+    return this.panels.terms && !!this.aboutHtml.terms
+  }
+}

client/src/app/shared/shared-instance/shared-instance.module.ts

@@ -1,7 +1,9 @@
 
 import { NgModule } from '@angular/core'
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
+import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
 import { InstanceFeaturesTableComponent } from './instance-features-table.component'
 import { InstanceFollowService } from './instance-follow.service'
 import { InstanceStatisticsComponent } from './instance-statistics.component'
@@ -9,17 +11,20 @@ import { InstanceService } from './instance.service'
 
 @NgModule({
   imports: [
-    SharedMainModule
+    SharedMainModule,
+    NgbAccordionModule
   ],
 
   declarations: [
     FeatureBooleanComponent,
+    InstanceAboutAccordionComponent,
     InstanceFeaturesTableComponent,
     InstanceStatisticsComponent
   ],
 
   exports: [
     FeatureBooleanComponent,
+    InstanceAboutAccordionComponent,
     InstanceFeaturesTableComponent,
     InstanceStatisticsComponent
   ],