From 7cfc7e2a70e1d0ead5b99c0ab849ac9baf93d941 Mon Sep 17 00:00:00 2001
From: Will Gordon <wgordon@redhat.com>
Date: Mon, 27 Aug 2018 15:40:49 -0400
Subject: [PATCH] Update Quay enterprise trial page

Signed-off-by: Will Gordon <wgordon@redhat.com>
---
 static/css/pages/plans.css               | 51 +++++++++++---
 static/directives/plans-display.html     | 88 +++++++++++++++++++++---
 static/js/directives/ui/plans-display.js |  4 +-
 3 files changed, 119 insertions(+), 24 deletions(-)

diff --git a/static/css/pages/plans.css b/static/css/pages/plans.css
index d1a96d2c2..e50bfefa5 100644
--- a/static/css/pages/plans.css
+++ b/static/css/pages/plans.css
@@ -571,28 +571,28 @@
     display: block;
 }
 
-#tectonicManagerDialog .modal-body {
+#redhatManagerDialog .modal-body {
   text-align: center;
   padding: 40px;
 }
 
-#tectonicManagerDialog .qe-logo {
+#redhatManagerDialog .qe-logo {
   max-height: 50px;
   margin-bottom: 30px;
   max-width: 100%;
 }
 
-#tectonicManagerDialog b {
+#redhatManagerDialog b {
   display: block;
   margin-bottom: 15px;
 }
 
-#tectonicManagerDialog .buttons {
+#redhatManagerDialog .buttons {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-#tectonicManagerDialog .buttons .btn {
+#redhatManagerDialog .buttons .btn {
   margin-left: 30px;
   font-size: 14px;
   padding-left: 20px;
@@ -600,17 +600,17 @@
 }
 
 @media (max-width: 767px) {
-  #tectonicManagerDialog .buttons .btn {
+  #redhatManagerDialog .buttons .btn {
     margin: 0px;
     margin-top: 20px;
   }
 }
 
-#tectonicManagerDialog .buttons .btn:first-child {
+#redhatManagerDialog .buttons .btn:first-child {
   margin-left: 0px;
 }
 
-#tectonicManagerDialog .shoutout {
+#redhatManagerDialog .shoutout {
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 4px;
@@ -623,12 +623,41 @@
   margin-bottom: 10px;
 }
 
-#tectonicManagerDialog .shoutout img {
+#redhatManagerDialog .shoutout img {
   max-width: 260px;
   max-height: 20px;
   margin-top: 20px;
 }
 
-#tectonicManagerDialog .modal-dialog {
-  max-width: 650px;
+#redhatManagerDialog h1 {
+  margin-bottom: 30px;
+}
+
+#redhatManagerDialog .plan-box .step-text {
+  font-size: 18px;
+  margin: 15px 0 5px;
+}
+
+#redhatManagerDialog .plan-box p {
+  margin-left: 10px;
+}
+
+#redhatManagerDialog a {
+  color: #44a2f3;
+}
+
+#redhatManagerDialog a:focus, #redhatManagerDialog a:hover {
+  color: #b2daff;
+}
+
+@media screen and (min-width: 992px) {
+  #redhatManagerDialog .plan-box.same-height {
+    min-height: 938px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  #redhatManagerDialog .plan-box.same-height {
+    min-height: 767px;
+  }
 }
diff --git a/static/directives/plans-display.html b/static/directives/plans-display.html
index f9c7efc6a..95b9d4f60 100644
--- a/static/directives/plans-display.html
+++ b/static/directives/plans-display.html
@@ -544,23 +544,89 @@
 
 
   <!-- Modal message dialog -->
-  <div class="co-dialog modal fade" id="tectonicManagerDialog">
+  <div class="co-dialog wider modal fade" id="redhatManagerDialog">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
-          <img class="qe-logo" src="/static/img/tectonic-bycoreos-color-sidebyside.svg">
-          <p>
-          Quay Enterprise is powered by <strong>Tectonic</strong>, a collection of enterprise container products.
+          <h1>
+          Thank you for your interest in trying Red Hat&reg; Quay!
+          </h1>
+
+          <p class="text-left">
+          To get started, download the Red Hat&reg; Quay Enterprise container image. Red Hat&reg; Quay is distributed via container images only.
+          In previous versions of Quay a license file has been required to run Quay. This license file got deprecated with Quay v2.9.0
+          and is no longer required. To pull the Quay images from Quay.io a secret is provided inside the Red Hat&reg; Customer Portal.
           </p>
 
-          <p>
-          Click below to continue to the CoreOS Tectonic Accounts system and sign up for your free Quay Enterprise trial.
-          </p>
+          <div class="row-container">
+            <div class="row">
+              <!-- create a free account -->
+              <div class="col-md-6 plan-col">
+                <div class="plan-box same-height text-left">
+                  <div class="plan-header text-center">
+                    <h3>Create a free Red Hat&reg; account</h3>
+                    <h5>Sign up for Red Hat&reg; Developer Program</h5>
+                  </div>
+                  <div class="step-text">Step 1: Sign up</div>
+                  <p>
+                    <a href="https://developers.redhat.com/register/" target="_blank">
+                      Sign up
+                    </a> for a free Red Hat&reg; Developer Program account and accept the terms and conditions. With this account, developers can
+                    also access various Red Hat&reg; products and their documentation. For more information about the Red Hat&reg; Developer Program,
+                    check out the <a href="https://developers.redhat.com/articles/red-hat-developer-program-benefits/" target="_blank">benefits page</a>.
+                  </p>
+                  <div class="step-text">Step 2: Verify your email</div>
+                  <p>
+                    Verify the email that you used to register the account by clicking on the link in the confirmation email that will be
+                    sent shortly after you create the developer account.
+                  </p>
+                  <div class="step-text">Step 3: Log in to the customer portal</div>
+                  <p>
+                    Go to the <a href="https://access.redhat.com/login" target="_blank">Red Hat&reg; customer portal</a> and log in using your
+                    Red Hat Developer account credentials.
+                  </p>
+                  <div class="step-text">Step 4: Update your account</div>
+                  <p>
+                    Update your account information and accept the terms and conditions for the customer portal.
+                  </p>
+                  <div class="step-text">Step 5: Get the Red Hat&reg; Quay container image</div>
+                  <p>
+                    Visit the <a href="https://access.redhat.com/solutions/3533201" target="_blank">"Accessing Quay Enterprise without a
+                    CoreOS login"</a> page in the customer portal. Follow the directions listed on that page for pulling the Red Hat&reg;
+                    Quay container image.
+                  </p>
+                  <div class="step-text">Step 6: Install and configure quay</div>
+                  <p>
+                    Follow the <a href="https://access.redhat.com/documentation/en-us/red_hat_quay/2.9/html/getting_started_with_red_hat_quay/" target="_blank">
+                    Red Hat&reg; Quay install documentation</a> to install and configure Quay.
+                  </p>
+                </div>
+              </div>
 
-          <div class="buttons">
-            <a class="btn btn-primary" href="https://account.tectonic.com/signup/summary/quay-enterprise">Sign up for free trial via Tectonic</a>
-          </div>
-        </div>
+              <!-- already have an account -->
+              <div class="col-md-6 plan-col">
+                <div class="plan-box same-height text-left">
+                  <div class="plan-header text-center">
+                    <h3>Already have a Red Hat&reg; account?</h3>
+                    <h5>Access Quay in Red Hat&reg; Customer Portal</h5>
+                  </div>
+                  <div class="step-text">Step 1: <a href="https://access.redhat.com/login" target="_blank">Log in</a> to the customer portal</div>
+                  <div class="step-text">Step 2: Get the Red Hat&reg; Quay container image</div>
+                  <p>
+                    Visit the <a href="https://access.redhat.com/solutions/3533201" target="_blank">"Accessing Quay Enterprise without a
+                    CoreOS login"</a> page in the customer portal. Follow the directions listed on that page for pulling the Red Hat&reg;
+                    Quay container image.
+                  </p>
+                  <div class="step-text">Step 3: Install and configure quay</div>
+                  <p>
+                    Follow the <a href="https://access.redhat.com/documentation/en-us/red_hat_quay/2.9/html/getting_started_with_red_hat_quay/" target="_blank">
+                    Red Hat&reg; Quay install documentation</a> to install and configure Quay.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div><!-- /.row-container -->
+        </div><!-- /.modal-body -->
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
diff --git a/static/js/directives/ui/plans-display.js b/static/js/directives/ui/plans-display.js
index 8fc927f90..48a394c74 100644
--- a/static/js/directives/ui/plans-display.js
+++ b/static/js/directives/ui/plans-display.js
@@ -24,7 +24,7 @@ angular.module('quay').directive('plansDisplay', function () {
       };
 
       $scope.qeStartTrial = function() {
-        $('#tectonicManagerDialog').modal('show');
+        $('#redhatManagerDialog').modal('show');
       };
 
       $scope.buyNow = function(plan) {
@@ -57,4 +57,4 @@ angular.module('quay').directive('plansDisplay', function () {
     }
   };
   return directiveDefinitionObject;
-});
\ No newline at end of file
+});