RCUE Branding 4.0

src/pybind/mgr/dashboard/frontend/angular.json

@@ -18,7 +18,8 @@
             "polyfills": "src/polyfills.ts",
             "assets": [
               "src/assets",
-              "src/favicon.ico"
+              "src/favicon.ico",
+	            "src/branding/assets"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
@@ -28,6 +29,8 @@
               "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
               "src/styles.scss",
               "src/vendor.overrides.scss",
+              "node_modules/rcue/dist/css/rcue.min.css",
+              "node_modules/rcue/dist/css/rcue-additions.min.css",
               "node_modules/ng2-tree/styles.css"
             ],
             "scripts": [

src/pybind/mgr/dashboard/frontend/package.json

@@ -77,6 +77,7 @@
     "ng2-toastr": "zzakir/ng2-toastr#0eafd72",
     "ng2-tree": "2.0.0-rc.11",
     "ngx-bootstrap": "3.2.0",
+    "rcue": "^3.48.1",
     "rxjs": "6.4.0",
     "rxjs-compat": "6.4.0",
     "tslib": "1.9.3",

src/pybind/mgr/dashboard/frontend/src/app/app.component.html

@@ -1,7 +1,7 @@
 <block-ui>
   <cd-navigation *ngIf="!isLoginActive()"></cd-navigation>
   <div class="container-fluid"
-       [ngClass]="{'full-height':isLoginActive(), 'dashboard':isDashboardPage()} ">
+       [ngClass]="{'dashboard':isDashboardPage()} ">
     <cd-breadcrumbs></cd-breadcrumbs>
     <router-outlet></router-outlet>
   </div>

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

@@ -1,69 +1,95 @@
-<div class="login"
-     *ngIf="isLoginActive">
-  <div class="row full-height vertical-align">
-    <div class="col-sm-6 hidden-xs">
-      <img src="assets/Ceph_Logo_Stacked_RGB_White_120411_fa_256x256.png"
-           alt="Ceph"
-           class="pull-right">
-    </div>
-    <div class="col-xs-10 col-sm-4 col-lg-3 col-xs-offset-1 col-sm-offset-0 col-md-offset-0 col-lg-offset-0">
-      <h1 i18n="The welcome message on the login page">Welcome to Ceph!</h1>
-      <form name="loginForm"
-            (ngSubmit)="login()"
-            #loginForm="ngForm"
-            novalidate>
-
-        <!-- I18N -->
-        <div class="form-group has-feedback">
-          <cd-language-selector [isDropdown]="false"></cd-language-selector>
-        </div>
-
-        <!-- Username -->
-        <div class="form-group has-feedback"
-             [ngClass]="{'has-error': (loginForm.submitted || username.dirty) && username.invalid}">
-          <input name="username"
-                 [(ngModel)]="model.username"
-                 #username="ngModel"
-                 type="text"
-                 placeholder="Enter your username..."
-                 class="form-control"
-                 required
-                 autofocus>
-          <div class="help-block"
-               *ngIf="(loginForm.submitted || username.dirty) && username.invalid"
-               i18n>Username is required</div>
-        </div>
-
-        <!-- Password -->
-        <div class="form-group has-feedback"
-             [ngClass]="{'has-error': (loginForm.submitted || password.dirty) && password.invalid}">
-          <div class="input-group">
-            <input id="password"
-                   name="password"
-                   [(ngModel)]="model.password"
-                   #password="ngModel"
-                   type="password"
-                   placeholder="Enter your password..."
-                   class="form-control"
-                   required>
-            <span class="input-group-btn">
-              <button type="button"
-                      class="btn btn-default btn-password"
-                      cdPasswordButton="password">
-              </button>
-            </span>
+<div class="login" *ngIf="isLoginActive">
+  <div class="login-pf-page">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
+          <header class="login-pf-page-header">
+            <img class="login-pf-brand" src="branding/assets/RHCSD-Login-Logo.svg" alt="RHCS" />
+          </header>
+          <div class="row">
+            <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
+              <div class="card-pf">
+                <form name="loginForm"
+                      (ngSubmit)="login()"
+                      #loginForm="ngForm"
+                      novalidate>
+                  <header class="login-pf-header">
+                    <div class="form-group has-feedback selectpicker">
+                      <cd-language-selector [isDropdown]="false"></cd-language-selector>
+                    </div>
+                    <h1 i18n="The welcome message on the login page">Log In to Your Account</h1>
+                  </header>
+                  <div class="form-group form-group has-feedback"
+                       [ngClass]="{'has-error': (loginForm.submitted || username.dirty) && username.invalid}">
+                    <label class="sr-only" for="email">Email address</label>
+                    <input name="username"
+                           [(ngModel)]="model.username"
+                           #username="ngModel"
+                           type="text"
+                           placeholder="Username"
+                           class="form-control"
+                           required
+                           autofocus>
+                    <div class="help-block" *ngIf="(loginForm.submitted || username.dirty) && username.invalid">
+                      Username is required
+                    </div>
+                  </div>
+                  <div class="form-group has-feedback"
+                       [ngClass]="{'has-error': (loginForm.submitted || password.dirty) && password.invalid}">
+                    <label class="sr-only" for="password">Password
+                    </label>
+                    <input id="password"
+                           name="password"
+                           [(ngModel)]="model.password"
+                           #password="ngModel"
+                           type="password"
+                           placeholder="Password"
+                           class="form-control"
+                           required>
+                    <div class="help-block"
+                         *ngIf="(loginForm.submitted || password.dirty) && password.invalid">
+                      Password is required
+                    </div>
+                  </div>
+                  <button type="submit" class="btn btn-primary btn-block btn-lg" value="Login">Login</button>
+                </form>
+                <p class="login-pf-signup"></p>
+              </div>
+              <div class="login-logo">
+                <img src="branding/assets/Logo_RH_RGB_Reverse.png" class="redhat_logo" alt="Redhat">
+              </div>
+            </div>
+            <footer class="login-pf-page-footer">
+              <ul class="login-pf-page-footer-links list-unstyled">
+                <li>
+                  <a class="login-pf-page-footer-link"
+                     href="https://www.redhat.com/en/about/all-policies-guidelines">
+                    Terms of Use
+                  </a>
+                </li>
+                <li>
+                  <a class="login-pf-page-footer-link"
+                     href="https://access.redhat.com/documentation/en-us/red_hat_ceph_storage/">
+                   Help
+                  </a>
+                </li>
+                <li>
+                  <a class="login-pf-page-footer-link"
+                     href="https://www.redhat.com/en/about/privacy-policy">
+                  Privacy Policy
+                  </a>
+                </li>
+              </ul>
+            </footer>
           </div>
-          <div class="help-block"
-               *ngIf="(loginForm.submitted || password.dirty) && password.invalid"
-               i18n>Password is required</div>
+          <!-- row -->
         </div>
-
-        <input type="submit"
-               class="btn btn-primary btn-block"
-               [disabled]="loginForm.invalid"
-               value="Login"
-               i18n-value>
-      </form>
+        <!-- col -->
+      </div>
+      <!-- row -->
     </div>
+    <!-- container -->
   </div>
+  <!-- login-pf-page -->
+  <!-- login-pf-page -->
 </div>

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

@@ -3,29 +3,17 @@
 ::ng-deep .login {
   height: 100%;
 
-  .row {
-    color: $color-login-row-text;
-    background-color: $color-login-row-bg;
+  .login-logo > img {
+    display: block;
+    width: 125px;
+    margin: 30px auto;
   }
 
-  h1 {
-    margin-top: 0;
-    margin-bottom: 30px;
+  .login-pf-page-footer {
+    width: 100%;
   }
 
-  .btn-password,
-  .form-control {
-    color: $color-password-toggle-text;
-    background-color: $color-password-toggle-bg;
-  }
-
-  .btn-password:focus {
-    outline-color: $color-password-toggle-focus;
-  }
-
-  .checkbox-primary input[type='checkbox']:checked + label::before,
-  .checkbox-primary input[type='radio']:checked + label::before {
-    background-color: $color-login-checkbox-bg;
-    border-color: $color-login-checkbox-border;
+  .login-pf-page .container-fluid {
+    margin-top: 100px;
   }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -12,16 +12,19 @@ import { AuthStorageService } from '../../../shared/services/auth-storage.servic
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
   model = new Credentials();
   isLoginActive = false;
 
   constructor(
     private authService: AuthService,
     private authStorageService: AuthStorageService,
     private bsModalService: BsModalService,
+    private renderer: Renderer2,
     private router: Router
-  ) {}
+  ) {
+    this.renderer.addClass(document.documentElement, 'login-pf');
+  }
 
   ngOnInit() {
     if (this.authStorageService.isLoggedIn()) {
@@ -55,6 +58,10 @@ export class LoginComponent implements OnInit {
     }
   }
 
+  ngOnDestroy() {
+    this.renderer.removeClass(document.documentElement, 'login-pf');
+  }
+
   login() {
     this.authService.login(this.model).then(() => {
       this.router.navigate(['']);

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.html

@@ -1,60 +1,61 @@
-<div class="modal-header">
-  <button type="button"
-          class="close pull-right"
-          aria-label="Close"
-          (click)="modalRef.hide()">
-    <span aria-hidden="true">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
-  <h2>
-    <img src="assets/Ceph_Logo_Stacked_RGB_120411_fa_348x348.png"
-         class="ceph-logo"
-         alt="{{ projectConstants.organization }}">
-    {{ projectConstants.organization }}
-  </h2>
-  <h3>
-    <strong>{{ projectConstants.projectName }}</strong>
-  </h3>
-  <div class="product-versions">
-    <strong>Version</strong>
-    <br>
-    {{ versionNumber }}
-    {{ versionHash }}
+<div class="about-modal-pf">
+  <div class="modal-header">
+    <button type="button"
+            class="close pull-right"
+            aria-label="Close"
+            (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <h2>
+      <img src="branding/assets/RHCSD-Login-Logo.svg"
+           class="ceph-logo"
+           alt="{{ projectConstants.projectName }}">
+    </h2>
     <br>
-    {{ versionName }}
+    <ul class="list-unstyled">
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Version</strong>
+        <span class="col-xs-4 col-sm-4">{{ projectConstants.version }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Ceph Manager</strong>
+        <span class="col-xs-4 col-sm-4">{{ hostAddr }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">User</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.user }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">User Role</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.role }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserName }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser Version</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserVersion }}</span>
+      </li>
+      <li class="row">
+        <strong class="col-xs-6 col-sm-4">Browser OS</strong>
+        <span class="col-xs-4 col-sm-4">{{ modalVariables.browserOS }}</span>
+      </li>
+    </ul>
+    <div class="trademark-pf">
+      <div class="text-left">
+        {{ copyright }}
+        <br>
+        {{ projectConstants.license }}
+        <br>
+        {{ projectConstants.licenseNumber }}
+      </div>
+    </div>
   </div>
-  <br>
-  <ul class="list-unstyled">
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Ceph Manager</strong>
-      <span class="col-xs-4 col-sm-4">{{ hostAddr }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">User</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.user }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">User Role</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.role }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.browserName }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser Version</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.browserVersion }}</span>
-    </li>
-    <li class="row">
-      <strong class="col-xs-6 col-sm-4">Browser OS</strong>
-      <span class="col-xs-4 col-sm-4">{{ modalVariables.browserOS }}</span>
-    </li>
-  </ul>
-</div>
-<div class="modal-footer">
-  <div class="text-left">
-    {{ copyright }}
-    {{ projectConstants.license }}
+  <div class="modal-footer">
+    <img class="redhat_logo" src="branding/assets/Logo_RH_RGB_Reverse.png" alt="{{ projectConstants.organization }}">
+    <img src="branding/assets/RHCSD-About-Corner.png" alt="{{ projectConstants.organization }}">
   </div>
 </div>