From: nizamial09 <nia@redhat.com>
Date: Mon, 14 Sep 2020 20:59:21 +0000 (+0530)
Subject: mgr/dashboard: Creating Login Page Legal Links
X-Git-Tag: v17.0.0~1049^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=702f3f233759ff753d012a55de9367ad2c48a0fb;p=ceph.git

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>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index 72361ee7369f6..9ea2b29b2def7 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/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"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
index 24eac14a50608..81f1d56cfe3d8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.html
+++ b/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>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
index 686d02b8b424b..43645d73cac84 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts
index ef40fcf885655..69d591cd17b2b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.ts
+++ b/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` }
+  ];
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.ts
index 7bc2d3c8dd6d6..bbf4111f9d544 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/doc/doc.component.ts
+++ b/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;
+      });
+    }
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts
index db0825e6d1b86..09fab0c7e0523 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.spec.ts
+++ b/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'
     );
   });
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts
index bb9ad283945fd..09181f12b3c75 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/doc.service.ts
+++ b/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);
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index b00aaa0195cea..42adf5f02e991 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/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
 );