Skip to content
This repository has been archived by the owner on May 12, 2021. It is now read-only.

Commit

Permalink
Merge pull request #2205 from anthonydillon/simple-beta-sign-up
Browse files Browse the repository at this point in the history 
Update the sign up copy and add a button to sign up
  • Loading branch information
@jujugui
jujugui authored Nov 18, 2016
2 parents 931c029 + f9c8834 commit bda69b5
Show file tree
Hide file tree
Showing 5 changed files with 267 additions and 113 deletions.
5 changes: 3 additions & 2 deletions jujugui/static/gui/src/app/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1131,7 +1131,7 @@ YUI.add('juju-gui', function(Y) {
// The beta sign-up component is displayed in sandbox mode at the
// beginning of the deployment flow.
const flowDisplayed = metadata && metadata.activeComponent === 'flow';
const cookieExists =
const cookieExists =
document.cookie.indexOf('beta-signup-seen=true') > -1;
if (!flowDisplayed && this.get('sandbox') && !cookieExists) {
ReactDOM.render(
Expand All @@ -1140,7 +1140,8 @@ YUI.add('juju-gui', function(Y) {
exportEnvironmentFile={
utils.exportEnvironmentFile.bind(utils, db,
env.findFacadeVersion('Application') === null)}
modelName={modelName} />,
modelName={modelName}
staticURL={window.juju_config.staticURL} />,
document.getElementById('deployment-container'));
return;
}
Expand Down
Binary file added jujugui/static/gui/src/app/assets/images/non-sprites/list-tick.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 74 additions & 3 deletions jujugui/static/gui/src/app/components/deployment-flow/signup/_signup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,84 @@
width: 50%;
}

.button--inline-positive {
height: 52px;
vertical-align: top;
.border-bottom {
border-bottom: 1px solid $mid-grey;
padding-top: 20px;
}

.button--inline-neutral {
margin-left: 10px;
}

.button--base {
width: auto;
padding: 0;
}

&__numbered-list {
list-style: none;
margin-left: 0;

&-item {
counter-increment: step-counter;
margin: 40px 0;
}

&-item:before {
content: counter(step-counter);
background: $light-grey;
border-radius: 50%;
border: 1px solid $mid-grey;
padding: 4px 8px;
margin-right: 20px;
}
}

.inline-logos {
float: left;
margin-left: 0;
padding: 0;
text-align: center;
width: 100%;

&__item {
display: inline-block;
height: 56px;
line-height: 60px;
margin: 0 30px 30px;
width: 150px;
}

&__image {
float: none;
height: auto;
max-height: 56px;
max-width: 150px;
vertical-align: middle;
}
}

@media only screen and (min-width: $breakpoint-medium) {
.inline-logos__image {
min-height: 30px;
max-width: none;
}

.inline-logos__item {
height: auto;
width: auto;

&:first-of-type {
.inline-logos__image {
min-height: 70px;
}
}

&:nth-child(2n) {
.inline-logos__image {
min-height: 45px;
}
}
}
}
}
153 changes: 99 additions & 54 deletions jujugui/static/gui/src/app/components/deployment-flow/signup/signup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ YUI.add('deployment-signup', function() {
propTypes: {
changeState: React.PropTypes.func.isRequired,
exportEnvironmentFile: React.PropTypes.func.isRequired,
modelName: React.PropTypes.string.isRequired
modelName: React.PropTypes.string.isRequired,
staticURL: React.PropTypes.string
},

/**
Expand Down Expand Up @@ -70,7 +71,14 @@ YUI.add('deployment-signup', function() {
*/
_handleSignup: function() {
this._setBetaCookie(true);
console.error('Not implemented.');
this.props.changeState({
sectionC: {
component: 'deploy',
metadata: {
activeComponent: 'flow'
}
}
});
},

render: function() {
Expand All @@ -79,59 +87,96 @@ YUI.add('deployment-signup', function() {
changeState={this.props.changeState}
title={this.props.modelName}>
<div className="deployment-signup">
<div className="six-col">
<h2>Deploy your model using Juju</h2>
<p>
By deploying your model, all of your services will be deployed
to the cloud provider of your choice, using the configuration
values you provided. In the next step, you will be able to
sign up and choose your cloud provider.
</p>
<p>
Continue to the&nbsp;
<juju.components.GenericButton
action={this._displayFlow}
type="inline-neutral"
title="deployment demo of Juju" />
</p>
</div>
<div className="twelve-col">
<h2>Lorem ipsum dolor sit</h2>
<p className="six-col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<ul>
<li className="six-col">
Lorem ipsum
</li>
<li className="six-col last-col">
Onsectetur adipisicing elit
</li>
<li className="six-col">
Sed do eiusmod
</li>
<li className="six-col last-col">
Tempor incididunt ut
</li>
<li className="six-col">Labore et dolore magna aliqua</li>
</ul>
<form className="twelve-col">
<juju.components.GenericInput
label="Lorem ipsum dolor"
required={true}
ref="email"
validate={[{
regex: /\S+/,
error: 'This field is required.'
}]}
value="" />
<div className="row border-bottom">
<h2>Install Juju to deploy locally</h2>
<div className="six-col">
<p className="intro">
Local deployment uses LXD containers, allowing you to
recreate your production environment on your own machine.
This minimises portability issues when deploying to a public
cloud, OpenStack or bare metal.
</p>
<p className="intro">To deploy locally:</p>
<ol className="deployment-signup__numbered-list">
<li className="deployment-signup__numbered-list-item">
Download your model
</li>
<li className="deployment-signup__numbered-list-item">
<a href="https://jujucharms.com/docs">
Install Juju&nbsp;&rsaquo;
</a>
</li>
<li className="deployment-signup__numbered-list-item">
Add your model to deploy
</li>
</ol>
<p>
Continue to the&nbsp;
<juju.components.GenericButton
action={this._handleSignup}
type="inline-positive"
submit={true}
title="Lorem ipsum" />
</form>
action={this._displayFlow}
type="inline-neutral"
title="Deployment demo of Juju" />
</p>
</div>
<div className="prepend-one four-col last-col">
<juju.components.SvgIcon
className="juju-logo"
name="juju-logo"
size="100%" />
</div>
</div>
<div className="row">
<h2>A new way to deploy</h2>
<div className="six-col">
<p>
Coming soon: deploy from hosted Juju direct to public clouds.
For early access to this feature, sign up for the beta.
</p>
<ul>
<li>
Deploy to all major public clouds directly from your browser
</li>
<li>
Hosted and managed Juju controllers
</li>
<li>
Identity management across all models
</li>
<li>
Reusable shareable models with unlimited users
</li>
</ul>
<p>
<a href="https://jujucharms.com/beta"
target="_blank"
className="button--inline-positive"
onClick={this._handleSignup}>
Sign up for early access
</a>
</p>
</div>
<div className="six-col last-col">
<ul className="inline-logos no-bullets">
<li className="inline-logos__item">
<juju.components.SvgIcon
className="inline-logos__image"
name="aws"
size="100%" />
</li>
<li className="inline-logos__item">
<juju.components.SvgIcon
className="inline-logos__image"
name="google"
size="100%" />
</li>
<li className="inline-logos__item">
<juju.components.SvgIcon
className="inline-logos__image"
name="azure"
size="100%" />
</li>
</ul>
</div>
</div>
</div>
</juju.components.DeploymentPanel>
Expand Down
Loading

0 comments on commit bda69b5

Please sign in to comment.