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>

1 files changed, 71 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts
new file mode 100644
index 000000000..ab75c31ae
--- /dev/null
+++ b/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
+  }
+}