JBDS-4444 Move Account page after Confirmation page (#791)

Author: dgolovin

browser/app.css

@@ -103,7 +103,7 @@ footer {
         }
 
       .login-title {
-        margin-top: 100px;
+        margin-top: 60px;
         margin-left: 25px;
       }
 
@@ -149,7 +149,7 @@ footer {
           float: left;
           text-align: center;
           color: #d1d1d1;
-          width: 25%;
+          width: 19.5%;
           position: relative;
           padding-top: 15px;
         }
@@ -175,9 +175,37 @@ footer {
             background: #0088ce;
           }
 
+  .about-section {
+    width:100%;
+    padding: 2% 5% 0% 5%;
+    position: relative;
+  }
+
+    .about-subsection {
+      width: 33%;
+      float: left;
+      padding: 12px;
+      position: relative;
+    }
+
+    .about-name {
+      color: #c00;
+      text-align: center;
+      text-transform: uppercase;
+      font-weight: bold;
+      font-size: 14px;
+      padding: 5% 0% 5% 0%;
+    }
+
+    .about-img {
+      display: block;
+      margin: 0 auto;
+    }
+
   #login-section {
     float: left;
     width: 50%;
+    margin-top: 12%;
   }
 
     #accountForm {
@@ -194,8 +222,9 @@ footer {
       }
 
       .login-form-error-container {
-        float: right;
+        float: left;
         width: 296px;
+        margin-left: 116px;
       }
 
       .login-form-label {
@@ -234,7 +263,7 @@ footer {
 
           #account-form-btn-text {
             vertical-align: super;
-            margin-right: 11px;
+            margin-right: 13px;
           }
 
             .spinner {
@@ -274,14 +303,23 @@ footer {
               /* width: auto;  /* This doesn't work, just fix for unknown width elements */
             }
 
-            .has-spinner.btn.active .spinner {
-              width: 24px;
+            .forgot-password {
+              margin-right: 121px;
+            }
+
+            .last-field {
+              margin-bottom: 5px;
             }
 
     #welcome-text {
-      padding-right: 2.5%;
+      padding-right: 7%;
+      margin-top: 12%;
     }
 
+    #welcome-text > p {
+      line-height: 16px;
+      margin-bottom: 16px;
+    }
 
   .product-container {
     padding-left: 10px;
@@ -292,7 +330,7 @@ footer {
     color: #c00;
     text-transform: uppercase;
     font-weight: bold;
-    font-size: 22px;
+    font-size: x-large;
   }
 
   .product-version {
@@ -318,10 +356,6 @@ footer {
     cursor: pointer;
   }
 
-  #loginButton {
-    margin-bottom: 3px;
-  }
-
   .btn-rightside {
     float: right;
   }
@@ -374,6 +408,10 @@ footer {
     right: 150px;
   }
 
+  .back-btn-spacer-account {
+    right: 320px;
+  }
+
   .back-btn-spacer {
     right: 210px;
   }
@@ -590,7 +628,7 @@ footer {
 
   .verticalLine {
     border-right: 2px solid #dddddd;
-    margin-right: 5px;
+    margin-right: 6%;
   }
 
   .checkbox-container {

browser/images/RHDP_logo_RGB_default.svg

@@ -4,6 +4,8 @@ import angular from 'angular';
 import '@uirouter/angularjs';
 import 'angular-base64';
 import 'angular-messages';
+import 'ng-focus-if';
+import aboutCtrl from './pages/about/controller';
 import acctCtrl from './pages/account/controller';
 import locCtrl from './pages/location/controller';
 import confCtrl from './pages/confirm/controller';
@@ -20,7 +22,8 @@ import Electron from 'electron';
 import request from 'request';
 
 let mainModule =
-  angular.module('devPlatInstaller', ['ui.router', 'base64', 'ngMessages'])
+  angular.module('devPlatInstaller', ['ui.router', 'base64', 'ngMessages', 'focus-if'])
+    .controller(aboutCtrl.name, aboutCtrl)
     .controller(acctCtrl.name, acctCtrl)
     .controller(locCtrl.name, locCtrl)
     .controller(confCtrl.name, confCtrl)
@@ -35,12 +38,12 @@ let mainModule =
     .directive(breadcrumb.name, breadcrumb)
     .directive(pathValidator.name, pathValidator)
     .config( ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
-      $urlRouterProvider.otherwise('/account');
+      $urlRouterProvider.otherwise('/about');
       $stateProvider
-        .state('account', {
-          url: '/account',
-          controller: 'AccountController as acctCtrl',
-          templateUrl: 'pages/account/account.html'
+        .state('about', {
+          url: '/about',
+          controller: 'AboutController as aboutCtrl',
+          templateUrl: 'pages/about/about.html'
         })
         .state('location', {
           url: '/location',
@@ -58,6 +61,14 @@ let mainModule =
             displayName: 'Confirmation'
           }
         })
+        .state('account', {
+          url: '/account',
+          controller: 'AccountController as acctCtrl',
+          templateUrl: 'pages/account/account.html',
+          data: {
+            displayName: 'Account'
+          }
+        })
         .state('install', {
           url: '/install',
           controller: 'InstallController as instCtrl',

browser/images/static_enterprisecontainerdev.png

@@ -0,0 +1,59 @@
+<header>
+  <div class="login-title">
+    <img class="branding-title" src="images/RHDSP.svg"/><span class="login-title-post-text"></span>
+  </div>
+</header>
+
+<main>
+  <form name="accountForm" id="aboutForm">
+  <div class="about-section">
+    <p>Welcome to Red Hat Development Suite! The best of Red Hat development tools,
+      integrated together, in one easy to install bundle.
+    </p>
+    <p>This installer will help
+      you install Red Hat JBoss Developer Studio with a full development environment
+      for container based development using Red Hat Enterprise Linux and OpenShift.
+    </p>
+    <div class="about-subsection">
+      <div>
+        <img class="about-img" src="images/static_startinminutes.png" width="160" height="160">
+      </div>
+      <div class="about-name">START DEVELOPING IN MINUTES</div>
+      <div>
+        <p>A single installer handles all of the prerequisites and interdependencies
+          for you, so that with just a few clicks you can have a world-class development environment.</p>
+      </div>
+    </div>
+    <div class="about-subsection">
+      <div>
+        <img class="about-img" src="images/static_enterprisecontainerdev.png" width="160" height="160">
+      </div>
+      <div class="about-name">ENTERPRISE READY CONTAINER DEVELOPMENT</div>
+      <div>
+        <p>Easily create enterprise-ready containerized solutions and microservices,
+          powered by Kubernetes and OpenShift 3 and running on Red Hat Enterprise Linux.</p>
+      </div>
+    </div>
+    <div class="about-subsection">
+      <div>
+        <img class="about-img" src="images/static_powerwithchoice.png" width="160" height="160">
+      </div>
+      <div class="about-name">POWER WITH CHOICE</div>
+      <div>
+        <p>Pick and choose the tools and technologies you want, confident that the necessary integrations and dependencies will be handled and resolved for you.</p>
+      </div>
+    </div>
+  </div>
+
+</form>
+</main>
+
+<footer id="footer-navigation" class="no-background-color">
+  <div class="form-group pull-right form-buttons">
+    <button id="aboutNextButton" type="button" id="confirm-install-btn" class="go-btn footer-btns btn btn-primary btn-med-size btn-lg" form="aboutForm"
+        ng-click="aboutCtrl.next()" autofocus>
+      <span id="about-form-btn-text">Next</span>
+    </button>
+  </div>
+  <span class="footer-version">Version: {{version}}</span>
+</footer>

browser/images/static_powerwithchoice.png

@@ -0,0 +1,24 @@
+'use strict';
+
+class AboutController {
+
+  constructor($state, $scope, electron) {
+    this.router = $state;
+    this.scope = $scope;
+    this.electron = electron;
+    $scope.version = electron.remote.app.getVersion();
+  }
+
+  next() {
+    this.router.go('location');
+  }
+
+  openDevSuiteOverview() {
+    this.electron.shell.openExternal('https://developers.redhat.com');
+  }
+
+}
+
+AboutController.$inject = ['$state', '$scope', 'electron'];
+
+export default AboutController;