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 72361ee7369f6c6e8d0c5957cb9ec702ccd533b9..9ea2b29b2def74eea137bad8be5d43587b590fb5 100644 (file)
--- 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 24eac14a50608fe11fe6e1dc933d136f7dd90566..81f1d56cfe3d84c2e635e6f2da3ba64f11fd9f4a 100644 (file)
--- 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 686d02b8b424b7076920c3deb3f503f7993d3a0b..43645d73cac840521f00c73527f957920bb07da2 100644 (file)
--- 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 ef40fcf885655fa739929411d859bb1f173b71a3..69d591cd17b2becb6a8713972ae03291c156fe7d 100644 (file)
--- 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 7bc2d3c8dd6d6020fce36480503eab5ad157e162..bbf4111f9d544505dc96c752f7f76ec9de547d33 100644 (file)
--- 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 db0825e6d1b86e528beb8f6902d3ea3ecc74e176..09fab0c7e0523fb0117b1c2da9d3f780a9ba7018 100644 (file)
--- 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 bb9ad283945fdf06068a3f41d6e78e55317cb478..09181f12b3c75c80619421c24139e5a131ed6e73 100644 (file)
--- 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 b00aaa0195cea5a6138fa858b673d11148319802..42adf5f02e99148d4d1487f1ba78ee45f4ada475 100644 (file)
--- 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
 );