Merge pull request #30 from rhcs-dashboard/branding-4.0-login

Adds branding for login screen

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

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

@@ -1,6 +1,6 @@
 <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/shared/components/language-selector/language-selector.component.scss

@@ -0,0 +1,15 @@
+@import '../../../../branding/branding.scss';
+
+.form-control {
+  width: 22%;
+  float: right;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+  color: $color-selected-language;
+  font-weight: lighter;
+}
+
+.form-control option {
+  color: $color-languages;
+}