Fix terms/code of conduct link toggle

client/src/app/+login/login.component.html

@@ -105,6 +105,7 @@
 
       <div #instanceInformation class="instance-information">
         <my-instance-about-accordion
+          #instanceAboutAccordion
           [displayInstanceName]="false"
           (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
           pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"

client/src/app/+login/login.component.ts

@@ -22,6 +22,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
 
   @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
   @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent
+  @ViewChild('instanceAboutAccordion') instanceAboutAccordion: InstanceAboutAccordionComponent
 
   accordion: NgbAccordionDirective
   error: string = null
@@ -70,8 +71,8 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
   onTermsClick (event: Event, instanceInformation: HTMLElement) {
     event.preventDefault()
 
-    if (this.accordion) {
+    if (this.instanceAboutAccordion) {
-      this.accordion.expand('terms')
+      this.instanceAboutAccordion.expandTerms()
       instanceInformation.scrollIntoView({ behavior: 'smooth' })
     }
   }

client/src/app/+signup/+register/register.component.html

@@ -43,6 +43,7 @@
           </my-signup-step-title>
 
           <my-instance-about-accordion
+            #instanceAboutAccordion
             [displayInstanceName]="false"
             (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
             pluginScope="signup" pluginHook="filter:signup.instance-about-plugin-panels.create.result"

client/src/app/+signup/+register/register.component.ts

@@ -5,7 +5,6 @@ import { ActivatedRoute } from '@angular/router'
 import { AuthService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
-import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
 import { UserRegister } from '@shared/models'
 import { ServerConfig } from '@shared/models/server'
 import { SignupService } from '../shared/signup.service'
@@ -17,8 +16,7 @@ import { SignupService } from '../shared/signup.service'
 })
 export class RegisterComponent implements OnInit {
   @ViewChild('lastStep') lastStep: CdkStep
-
+  @ViewChild('instanceAboutAccordion') instanceAboutAccordion: InstanceAboutAccordionComponent
-  accordion: NgbAccordionDirective
 
   signupError: string
   signupSuccess = false
@@ -121,15 +119,14 @@ export class RegisterComponent implements OnInit {
   }
 
   onTermsClick () {
-    if (this.accordion) this.accordion.toggle('terms')
+    this.instanceAboutAccordion.expandTerms()
   }
 
   onCodeOfConductClick () {
-    if (this.accordion) this.accordion.toggle('code-of-conduct')
+    this.instanceAboutAccordion.expandCodeOfConduct()
   }
 
   onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) {
-    this.accordion = instanceAboutAccordion.accordion
     this.aboutHtml = instanceAboutAccordion.aboutHtml
   }
 

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

@@ -3,7 +3,7 @@
 <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
 
 <div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true">
-  <div ngbAccordionItem *ngIf="panels.features" id="instance-features">
+  <div ngbAccordionItem="instance-features" *ngIf="panels.features">
     <div ngbAccordionHeader>
       <button ngbAccordionButton>
         <my-global-icon iconName="playlists"></my-global-icon>
@@ -53,7 +53,7 @@
       </div>
     </div>
 
-    <div ngbAccordionItem *ngIf="termsPanel" id="terms">
+    <div ngbAccordionItem="terms" *ngIf="termsPanel">
       <div ngbAccordionHeader>
         <button ngbAccordionButton>
           <my-global-icon iconName="playlists"></my-global-icon>
@@ -71,7 +71,7 @@
       </div>
     </div>
 
-    <div ngbAccordionItem *ngIf="moderationPanel" id="moderation-information">
+    <div ngbAccordionItem="moderation-information" *ngIf="moderationPanel">
       <div ngbAccordionHeader>
         <button ngbAccordionButton>
           <my-global-icon iconName="playlists"></my-global-icon>
@@ -89,7 +89,7 @@
       </div>
     </div>
 
-    <div ngbAccordionItem *ngIf="codeOfConductPanel" id="code-of-conduct">
+    <div ngbAccordionItem="code-of-conduct" *ngIf="codeOfConductPanel">
       <div ngbAccordionHeader>
         <button ngbAccordionButton>
           <my-global-icon iconName="playlists"></my-global-icon>

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

@@ -62,6 +62,14 @@ export class InstanceAboutAccordionComponent implements OnInit {
     this.pluginPanels = await this.hookService.wrapObject([], this.pluginScope, this.pluginHook)
   }
 
+  expandTerms () {
+    this.accordion.expand('terms')
+  }
+
+  expandCodeOfConduct () {
+    this.accordion.expand('code-of-conduct')
+  }
+
   getAdministratorsPanel () {
     if (!this.about) return false
     if (!this.panels.administrators) return false