mgr/dashboard: Creating Login Page Legal Links

Some of the doc links that can be shown in the login page like security, trademarks etc and can add new links easily.

Fixes: https://tracker.ceph.com/issues/47454
Signed-off-by: Nizamudeen A <nia@redhat.com>

src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="isLoginActive">
+<div class="container"
+     *ngIf="isLoginActive">
   <form name="loginForm"
         (ngSubmit)="login()"
         #loginForm="ngForm"

src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html

@@ -10,11 +10,22 @@
   <section>
     <div class="container">
       <div class="row full-height vertical-align">
+        <div class="col-sm-12 col-md-6 d-sm-block">
+          <router-outlet></router-outlet>
+        </div>
         <div class="col-sm-12 col-md-6 d-sm-block">
           <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
                alt="Ceph"
-               class="img-fluid mb-5">
-          <router-outlet></router-outlet>
+               class="img-fluid">
+          <ul class="list-inline">
+            <li class="list-inline-item p-3"
+                *ngFor="let docItem of docItems">
+              <cd-doc section="{{ docItem.section }}"
+                      docText="{{ docItem.text }}"
+                      noSubscribe="true"
+                      i18n-docText></cd-doc>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss

@@ -29,4 +29,17 @@
     min-height: 100vh;
     width: 100vw;
   }
+
+  .list-inline {
+    margin-bottom: 20%;
+    margin-left: 20%;
+  }
+
+  a {
+    color: bd.$fg-color-over-dark-bg;
+
+    &:hover {
+      color: bd.$fg-hover-color-over-dark-bg;
+    }
+  }
 }

src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts

@@ -5,4 +5,10 @@ import { Component } from '@angular/core';
   templateUrl: './login-layout.component.html',
   styleUrls: ['./login-layout.component.scss']
 })
-export class LoginLayoutComponent {}
+export class LoginLayoutComponent {
+  docItems: any[] = [
+    { section: 'help', text: $localize`Help` },
+    { section: 'security', text: $localize`Security` },
+    { section: 'trademarks', text: $localize`Trademarks` }
+  ];
+}

src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.ts

@@ -10,14 +10,19 @@ import { DocService } from '../../../shared/services/doc.service';
 export class DocComponent implements OnInit {
   @Input() section: string;
   @Input() docText = $localize`documentation`;
+  @Input() noSubscribe: boolean;
 
   docUrl: string;
 
   constructor(private docService: DocService) {}
 
   ngOnInit() {
-    this.docService.subscribeOnce(this.section, (url: string) => {
-      this.docUrl = url;
-    });
+    if (this.noSubscribe) {
+      this.docUrl = this.docService.urlGenerator(this.section);
+    } else {
+      this.docService.subscribeOnce(this.section, (url: string) => {
+        this.docUrl = url;
+      });
+    }
   }
 }

src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts

@@ -21,7 +21,7 @@ describe('DocService', () => {
   });
 
   it('should return full URL', () => {
-    expect(service.urlGenerator('foo', 'iscsi')).toBe(
+    expect(service.urlGenerator('iscsi', 'foo')).toBe(
       'http://docs.ceph.com/docs/foo/mgr/dashboard/#enabling-iscsi-management'
     );
   });

src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts

@@ -23,8 +23,9 @@ export class DocService {
     });
   }
 
-  urlGenerator(release: string, section: string): string {
+  urlGenerator(section: string, release = 'master'): string {
     const domain = `http://docs.ceph.com/docs/${release}/`;
+    const domainCeph = `https://ceph.io/`;
 
     const sections = {
       iscsi: `${domain}mgr/dashboard/#enabling-iscsi-management`,
@@ -35,7 +36,10 @@ export class DocService {
       dashboard: `${domain}mgr/dashboard`,
       grafana: `${domain}mgr/dashboard/#enabling-the-embedding-of-grafana-dashboards`,
       orch: `${domain}mgr/orchestrator`,
-      pgs: `http://ceph.com/pgcalc`,
+      pgs: `${domainCeph}pgcalc`,
+      help: `${domainCeph}help/`,
+      security: `${domainCeph}security/`,
+      trademarks: `${domainCeph}legal-page/trademarks/`,
       'dashboard-landing-page-status': `${domain}mgr/dashboard/#dashboard-landing-page-status`,
       'dashboard-landing-page-performance': `${domain}mgr/dashboard/#dashboard-landing-page-performance`,
       'dashboard-landing-page-capacity': `${domain}mgr/dashboard/#dashboard-landing-page-capacity`
@@ -52,7 +56,7 @@ export class DocService {
     return this.releaseData$
       .pipe(
         filter((value) => !!value),
-        map((release) => this.urlGenerator(release, section)),
+        map((release) => this.urlGenerator(section, release)),
         first()
       )
       .subscribe(next, error);

src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss

@@ -34,6 +34,9 @@ $danger: $red;
 $light: $gray-100;
 $dark: #777;
 
+$fg-color-over-dark-bg: $white;
+$fg-hover-color-over-dark-bg: $gray-500;
+
 $theme-colors: (
   'accent': #ef5c55
 );