From dcb493570650c4bb0b1850c4944da67051cdcb85 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Fri, 30 Oct 2015 15:11:45 -0400
Subject: [PATCH] QE login dialog and flow
Fixes #560
---
static/css/pages/plans.css | 64 ++++++++++++++++-
.../tectonic-bycoreos-color-sidebyside.svg | 69 +++++++++++++++++++
static/js/pages/plans.js | 4 +-
static/partials/plans.html | 26 ++++++-
4 files changed, 159 insertions(+), 4 deletions(-)
create mode 100644 static/img/tectonic-bycoreos-color-sidebyside.svg
diff --git a/static/css/pages/plans.css b/static/css/pages/plans.css
index fae3568c2..03de7d554 100644
--- a/static/css/pages/plans.css
+++ b/static/css/pages/plans.css
@@ -367,4 +367,66 @@
margin-bottom: 20px;
text-align: center;
display: block;
-}
\ No newline at end of file
+}
+
+#tectonicManagerDialog .modal-body {
+ text-align: center;
+ padding: 40px;
+}
+
+#tectonicManagerDialog .qe-logo {
+ max-height: 50px;
+ margin-bottom: 30px;
+ max-width: 100%;
+}
+
+#tectonicManagerDialog b {
+ display: block;
+ margin-bottom: 15px;
+}
+
+#tectonicManagerDialog .buttons {
+ margin-top: 10px;
+ margin-bottom: 30px;
+}
+
+#tectonicManagerDialog .buttons .btn {
+ margin-left: 30px;
+ font-size: 14px;
+ padding-left: 20px;
+ padding-right: 20px
+}
+
+@media (max-width: 767px) {
+ #tectonicManagerDialog .buttons .btn {
+ margin: 0px;
+ margin-top: 20px;
+ }
+}
+
+#tectonicManagerDialog .buttons .btn:first-child {
+ margin-left: 0px;
+}
+
+#tectonicManagerDialog .shoutout {
+ padding: 20px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ max-width: 300px;
+ display: inline-block;
+ color: #1d304f;
+
+ font-size: 13px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+}
+
+#tectonicManagerDialog .shoutout img {
+ max-width: 260px;
+ max-height: 20px;
+ margin-top: 20px;
+}
+
+#tectonicManagerDialog .modal-dialog {
+ max-width: 650px;
+}
diff --git a/static/img/tectonic-bycoreos-color-sidebyside.svg b/static/img/tectonic-bycoreos-color-sidebyside.svg
new file mode 100644
index 000000000..fcef6c503
--- /dev/null
+++ b/static/img/tectonic-bycoreos-color-sidebyside.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="288px" height="34.202px" viewBox="0 126.976 288 34.202" enable-background="new 0 126.976 288 34.202"
+ xml:space="preserve">
+<g>
+ <g>
+ <path fill="#003764" d="M42.105,136.14h-6.512v-4.491h18.414v4.491h-6.512v19.2h-5.389V136.14z"/>
+ <path fill="#003764" d="M55.242,131.537h14.933v4.491h-9.544v4.828h8.084v4.491h-8.084v5.502h9.881v4.491h-15.27V131.537z"/>
+ <path fill="#003764" d="M81.628,131.2c2.919,0,5.389,1.46,7.074,3.144l-2.919,3.368c-1.235-1.123-2.358-1.796-4.042-1.796
+ c-3.368,0-5.951,2.919-5.951,7.635c0,4.94,2.246,7.747,5.726,7.747c2.021,0,3.368-0.786,4.491-2.133l2.919,3.256
+ c-2.021,2.246-4.604,3.481-7.523,3.481c-6.175,0-11.228-4.154-11.228-12.126C70.288,135.691,75.453,131.2,81.628,131.2z"/>
+ <path fill="#003764" d="M95.663,136.14h-6.512v-4.491h18.414v4.491h-6.512v19.2h-5.389V136.14z"/>
+ <path fill="#003764" d="M106.218,143.326c0-7.747,4.379-12.239,10.779-12.239c6.4,0,10.779,4.491,10.779,12.239
+ c0,7.747-4.379,12.463-10.779,12.463C110.709,155.789,106.218,151.074,106.218,143.326z M122.386,143.326
+ c0-4.716-2.021-7.635-5.277-7.635c-3.256,0-5.277,2.807-5.277,7.635c0,4.828,2.133,7.747,5.277,7.747
+ C120.253,151.186,122.386,148.154,122.386,143.326z"/>
+ <path fill="#003764" d="M149.67,131.537h5.389v23.804h-5.389V131.537z"/>
+ <path fill="#003764" d="M167.635,131.2c2.919,0,5.389,1.46,7.074,3.144l-2.919,3.368c-1.235-1.123-2.358-1.796-4.042-1.796
+ c-3.368,0-5.951,2.919-5.951,7.635c0,4.94,2.246,7.747,5.726,7.747c2.021,0,3.368-0.786,4.491-2.133l2.919,3.256
+ c-2.021,2.246-4.604,3.481-7.523,3.481c-6.175,0-11.228-4.154-11.228-12.126C156.407,135.691,161.572,131.2,167.635,131.2z"/>
+ <polygon fill="#003764" points="142.821,131.537 142.821,146.807 134.737,131.537 134.4,131.537 129.235,131.537 129.235,155.34
+ 134.4,155.34 134.4,140.182 142.372,155.34 147.874,155.34 147.874,131.537 "/>
+ </g>
+</g>
+<path fill="#003764" d="M184.365,137.375h1.123v5.277v2.358c1.235-1.011,2.695-1.909,4.154-1.909c3.256,0,4.828,2.47,4.828,6.175
+ c0,4.154-2.47,6.512-5.389,6.512c-1.123,0-2.47-0.561-3.593-1.46l0,0l-0.112,1.123h-0.898v-18.077H184.365z M189.081,154.891
+ c2.47,0,4.267-2.246,4.267-5.614c0-3.032-1.011-5.165-3.818-5.165c-1.235,0-2.582,0.674-3.93,2.021v7.186
+ C186.835,154.442,188.182,154.891,189.081,154.891z"/>
+<path fill="#003764" d="M197.726,160.056c1.46,0,2.47-1.347,3.144-3.256l0.337-1.011l-4.94-12.351h1.235l2.919,7.635
+ c0.337,1.011,0.898,2.358,1.347,3.368h0.112c0.337-1.011,0.786-2.358,1.123-3.368l2.582-7.635h1.123l-4.828,13.698
+ c-0.674,2.021-1.909,4.042-4.042,4.042c-0.449,0-0.898-0.112-1.235-0.225l0.225-1.011
+ C196.94,159.944,197.389,160.056,197.726,160.056z"/>
+<path fill="#003764" d="M220.407,138.611c1.909,0,3.481,1.011,4.379,2.021l-0.674,0.786c-0.898-1.011-2.133-1.684-3.593-1.684
+ c-3.593,0-5.951,2.919-5.951,7.523c0,4.604,2.246,7.635,5.839,7.635c1.684,0,3.032-0.674,4.267-2.021l0.674,0.786
+ c-1.235,1.46-2.807,2.358-4.94,2.358c-4.154,0-6.961-3.368-6.961-8.646C213.221,141.867,216.14,138.611,220.407,138.611z"/>
+<path fill="#003764" d="M232.758,143.102c2.919,0,5.502,2.358,5.502,6.4s-2.582,6.4-5.502,6.4c-2.919,0-5.389-2.358-5.389-6.4
+ S229.951,143.102,232.758,143.102z M232.758,154.891c2.47,0,4.267-2.133,4.267-5.389c0-3.256-1.796-5.389-4.267-5.389
+ s-4.267,2.246-4.267,5.389S230.4,154.891,232.758,154.891z"/>
+<path fill="#003764" d="M241.965,143.439h1.011l0.112,2.246h0.112c0.786-1.46,2.021-2.582,3.481-2.582c0.449,0,0.786,0,1.235,0.225
+ l-0.225,1.011c-0.449-0.112-0.674-0.225-1.123-0.225c-1.123,0-2.358,0.786-3.368,3.144v8.309h-1.123v-12.126H241.965z"/>
+<path fill="#003764" d="M253.979,143.102c2.919,0,4.716,2.021,4.716,5.614c0,0.337,0,0.561,0,0.898h-8.758
+ c0,3.032,1.797,5.277,4.604,5.277c1.347,0,2.358-0.449,3.256-1.123l0.449,0.898c-1.011,0.561-2.021,1.235-3.818,1.235
+ c-3.144,0-5.614-2.358-5.614-6.4C248.702,145.572,251.284,143.102,253.979,143.102z M257.572,148.716
+ c0-3.144-1.347-4.716-3.593-4.716c-2.021,0-3.93,1.796-4.154,4.716H257.572z"/>
+<path fill="#003764" d="M260.94,147.144c0-5.277,2.807-8.533,6.849-8.533c4.042,0,6.849,3.368,6.849,8.533
+ c0,5.277-2.807,8.758-6.849,8.758C263.747,155.902,260.94,152.421,260.94,147.144z M273.404,147.144
+ c0-4.604-2.246-7.523-5.614-7.523c-3.368,0-5.726,2.919-5.726,7.523s2.246,7.635,5.726,7.635
+ C271.158,154.779,273.404,151.747,273.404,147.144z"/>
+<path fill="#003764" d="M277.782,152.533c1.235,1.347,2.919,2.246,4.94,2.246c2.582,0,4.154-1.347,4.154-3.368
+ c0-2.021-1.347-2.807-3.032-3.481l-2.582-1.123c-1.46-0.674-3.368-1.684-3.368-4.154c0-2.358,2.021-4.154,4.828-4.154
+ c2.021,0,3.593,0.898,4.604,2.021l-0.674,0.786c-1.011-1.011-2.358-1.684-3.93-1.684c-2.246,0-3.705,1.123-3.705,3.032
+ s1.684,2.695,2.919,3.256l2.582,1.123c1.797,0.786,3.481,1.909,3.481,4.379c0,2.582-2.133,4.491-5.389,4.491
+ c-2.47,0-4.267-1.011-5.614-2.47L277.782,152.533z"/>
+<g>
+ <polygon fill="#FFFFFF" points="21.735,139.117 15.43,136.309 9.126,139.115 15.43,142.757 15.43,150.038 21.015,145.98 "/>
+ <g>
+ <polygon fill="#68C28D" points="4.545,136.47 9.126,139.115 15.43,136.309 21.735,139.117 21.015,145.98 15.43,150.038
+ 15.43,155.327 25.073,148.322 26.318,136.47 15.43,131.623 "/>
+ </g>
+ <g>
+ <g>
+ <path fill="#003764" d="M15.43,126.976L0,133.847l1.766,16.8l13.664,9.928l13.666-9.928l1.766-16.799L15.43,126.976z
+ M25.072,148.323l-9.642,7.005v-12.57L4.545,136.47l10.885-4.847l10.888,4.847L25.072,148.323z"/>
+ </g>
+ </g>
+</g>
+</svg>
diff --git a/static/js/pages/plans.js b/static/js/pages/plans.js
index 5bc0d12ed..6d301d286 100644
--- a/static/js/pages/plans.js
+++ b/static/js/pages/plans.js
@@ -25,8 +25,8 @@
};
$scope.qeStartTrial = function(plan) {
- // TODO(jschorr): Implement.
- alert('Not yet implemented!')
+ $scope.currentQEPlan = plan;
+ $('#tectonicManagerDialog').modal('show');
};
$scope.buyNow = function(plan) {
diff --git a/static/partials/plans.html b/static/partials/plans.html
index 167df9e84..487fe604b 100644
--- a/static/partials/plans.html
+++ b/static/partials/plans.html
@@ -601,7 +601,7 @@
</div>
<!-- Modal message dialog -->
-<div class="modal fade" id="signinModal">
+<div class="co-dialog modal fade" id="signinModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
@@ -613,3 +613,27 @@
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
+
+
+<!-- Modal message dialog -->
+<div class="co-dialog modal fade" id="tectonicManagerDialog">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-body">
+ <img class="qe-logo" src="/static/img/QuayEnterprise_horizontal_color.svg">
+ <b>To start your trial, please choose an option:</b>
+ <div class="buttons">
+ <a class="btn btn-primary" href="https://account.tectonic.com/signup/summary/quay-enterprise">Create a new Tectonic account</a>
+ <a class="btn btn-default" href="https://account.tectonic.com/signup/summary/quay-enterprise">Log in to your Tectonic account</a>
+ </div>
+ <div class="shoutout">
+ <div>
+ Quay Enterprise is powered by Tectonic,
+ a collection of enterprise container products.
+ </div>
+ <img src="/static/img/tectonic-bycoreos-color-sidebyside.svg">
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->