All new accounts created on Gitlab now require administrator approval. If you invite any collaborators, please let Flux staff know so they can approve the accounts.

Commit e1ea92bc authored by Jonathon Duerig's avatar Jonathon Duerig

Refactor signup.php, embed Jacks into instantiate.php

parent 77d2a702
......@@ -153,6 +153,7 @@ APTUIFILES += $(wildcard $(SRCDIR)/aptui/*.gif)
APTUIFILES += $(wildcard $(SRCDIR)/aptui/.htaccess)
APTJSFILES = $(wildcard $(SRCDIR)/aptui/js/*.js)
APTLIBFILES = $(wildcard $(SRCDIR)/aptui/js/lib/*.js)
APTTEMPLATES = $(wildcard $(SRCDIR)/aptui/template/*.html)
UIKITFILES = $(wildcard $(SRCDIR)/aptui/uikit/fonts/*)
BOOTSTFONTS = $(wildcard $(SRCDIR)/aptui/bootstrap/fonts/*)
BOOTSTCSS = $(wildcard $(SRCDIR)/aptui/bootstrap/css/*)
......@@ -219,6 +220,7 @@ ALLBLOB = $(notdir $(BLOBFILES))
ALLAPTUI = $(notdir $(APTUIFILES))
ALLAPTJS = $(notdir $(APTJSFILES))
ALLAPTLIB = $(notdir $(APTLIBFILES))
ALLAPTTEMPLATES = $(notdir $(APTTEMPLATES))
ALLUIKITFONTS = $(notdir $(UIKITFILES))
ALLBOOTSTFONTS = $(notdir $(BOOTSTFONTS))
ALLBOOTSTCSS = $(notdir $(BOOTSTCSS))
......@@ -269,6 +271,7 @@ endif
apt-install: $(addprefix $(INSTALL_WWWDIR)/apt/, $(ALLAPTUI)) \
$(addprefix $(INSTALL_WWWDIR)/apt/js/, $(ALLAPTJS)) \
$(addprefix $(INSTALL_WWWDIR)/apt/js/lib/, $(ALLAPTLIB)) \
$(addprefix $(INSTALL_WWWDIR)/apt/template/, $(ALLAPTTEMPLATES)) \
$(addprefix $(INSTALL_WWWDIR)/apt/bootstrap/css/, $(ALLBOOTSTCSS)) \
$(addprefix $(INSTALL_WWWDIR)/apt/bootstrap/js/, $(ALLBOOTSTJS)) \
$(addprefix $(INSTALL_WWWDIR)/apt/bootstrap/fonts/, $(ALLBOOTSTFONTS)) \
......
......@@ -17,6 +17,8 @@ window.APT_OPTIONS.config = function ()
'tablesorterwidgets': 'js/lib/jquery.tablesorter.widgets.min',
'marked': 'js/lib/marked',
'moment': 'js/lib/moment',
'underscore': 'js/lib/underscore-min',
'jacks': 'https://www.emulab.net/protogeni/jacks-stable/js/jacks'
},
shim: {
'bootstrap': { deps: ['jquery'] },
......@@ -29,6 +31,7 @@ window.APT_OPTIONS.config = function ()
'tablesorter': { deps: ['jquery'] },
'tablesorterwidgets': { deps: ['tablesorter'] },
'marked' : { exports: 'marked' },
'underscore': { exports: '_' }
},
});
}
......
......@@ -2,11 +2,14 @@ window.APT_OPTIONS.config();
require(['jquery', 'js/quickvm_sup',
// jQuery modules
'bootstrap', 'formhelpers', 'filestyle', 'marked'],
'bootstrap', 'formhelpers', 'filestyle', 'marked', 'jacks'],
function ($, sup)
{
'use strict';
var jacksInstance;
var jacksUpdate;
function initialize()
{
window.APT_OPTIONS.initialize(sup);
......@@ -89,7 +92,7 @@ function ($, sup)
var xmlDoc = $.parseXML(json.value.rspec);
var xml = $(xmlDoc);
var topo = sup.ConvertManifestToJSON(profile, xml);
// var topo = sup.ConvertManifestToJSON(profile, xml);
$('#showtopo_title').html("<h3>" + json.value.name + "</h3>");
......@@ -117,9 +120,32 @@ function ($, sup)
$('#showtopo_description').html(description);
$('#selected_profile_description').html(description);
if (! jacksInstance)
{
jacksInstance = new window.Jacks({
mode: 'viewer',
source: 'rspec',
root: '#showtopo_div',
size: { x: 643, y: 300 },
nodeSelect: false,
readyCallback: function (input, output) {
jacksUpdate = input;
jacksUpdate.trigger('change-topology',
[{ rspec: json.value.rspec }]);
}
});
}
else if (jacksUpdate)
{
jacksUpdate.trigger('change-topology',
[{ rspec: json.value.rspec }]);
}
/*
sup.maketopmap("#showtopo_div",
($("#showtopo_div").outerWidth()),
300, topo, null);
*/
}
var $xmlthing = sup.CallMethod("getprofile", null, 0, profile);
$xmlthing.done(callback);
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
window.APT_OPTIONS.config();
require(['jquery', 'js/quickvm_sup',
require(['jquery', 'underscore', 'js/quickvm_sup',
'js/lib/text!template/about-account.html',
'js/lib/text!template/verify-modal.html',
'js/lib/text!template/signup-personal.html',
'js/lib/text!template/signup-project.html',
'js/lib/text!template/signup.html',
// jQuery modules
'bootstrap', 'formhelpers'],
function ($, sup)
function ($, _, sup,
aboutString, verifyString, personalString,
projectString, signupString)
{
'use strict';
var aboutTemplate = _.template(aboutString);
var verifyTemplate = _.template(verifyString);
var personalTemplate = _.template(personalString);
var projectTemplate = _.template(projectString);
var signupTemplate = _.template(signupString);
function initialize()
{
window.APT_OPTIONS.initialize(sup);
$('button#reset-form').click(function (event) {
event.preventDefault();
resetForm($('#quickvm_signup_form'));
clearForm($('#quickvm_signup_form'));
});
var fields = JSON.parse(_.unescape($('#form-json')[0].textContent));
var errors = JSON.parse(_.unescape($('#error-json')[0].textContent));
renderForm(fields, errors,
window.APT_OPTIONS.joinproject,
window.APT_OPTIONS.ShowVerifyModal,
window.APT_OPTIONS.this_user);
}
function renderForm(formfields, errors, joinproject, showVerify, thisUser)
{
var buttonLabel = calculateButtonLabel(joinproject, thisUser);
var about = aboutTemplate({});
var verify = verifyTemplate({
id: 'verify_modal',
label: buttonLabel
});
if (window.APT_OPTIONS.ShowVerifyModal)
var personal = formatter(personalTemplate({
formfields: formfields
}), errors);
var project = formatter(projectTemplate({
joinproject: joinproject,
formfields: formfields
}), errors);
var signup = signupTemplate({
button_label: buttonLabel,
general_error: (errors.error || ''),
about_account: about,
this_user: thisUser,
joinproject: joinproject,
verify_modal: verify,
pubkey: formfields.pubkey,
personal_fields: personal.html(),
project_fields: project.html()
});
$('#signup-body').html(signup);
if (showVerify)
{
sup.ShowModal('#verify_modal');
}
$('#signup_countries').bfhcountries({ country: formfields.country,
blank: false, ask: true });
$('#signup_states').bfhstates({ country: 'signup_countries',
state: formfields.state,
blank: false, ask: true });
}
function resetForm($form) {
function clearForm($form)
{
$form.find('input:text, input:password, select, textarea').val('');
}
function calculateButtonLabel(joinproject, thisUser)
{
var result = 'Create Account';
if (thisUser)
{
if (joinproject)
{
result = 'Join Project';
}
else
{
result = 'Create Project';
}
}
return result;
}
function formatter(fieldString, errors)
{
var result = $('<div/>');
var fields = $(fieldString);
fields.each(function (index, item) {
if (item.dataset)
{
var key = item.dataset['key'];
var wrapper = $('<div>');
wrapper.addClass('sidebyside-form');
wrapper.addClass('form-group');
wrapper.append(item);
if (_.has(errors, key))
{
wrapper.addClass('has-error');
wrapper.append('<label class="control-label" ' +
'for="inputError">' + _.escape(errors[key]) +
'</label>');
}
result.append(wrapper);
}
});
return result;
}
$(document).ready(initialize);
});
......@@ -142,6 +142,7 @@ body {
#showtopo_description,
#showtopo_div {
width: 643px;
height: 300px;
}
#showtopo_nopicker {
width: 850px;
......@@ -252,11 +253,11 @@ body {
#showtopo_buttons {
margin-bottom: 10px;
}
/*
#showtopo_div {
border: 1px solid #000;
}
*/
.nospaceafter {
margin-bottom: 5px;
}
......
......@@ -378,7 +378,7 @@ function SpitTopologyViewModal($modal_name, $profile_array)
<div class='pull-right'>
<span id='showtopo_title'></span>
<div class='panel-body'>
<div id='showtopo_div'></div>
<div id='showtopo_div' class='jacks'></div>
<span class='pull-left' id='showtopo_description'></span>
</div>
</div>
......
This diff is collapsed.
<div class="panel panel-info">
<div class="panel-heading">
<h5>
<a data-toggle="collapse" href="#aboutacct">
Do I need an account?
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
</h5>
</div>
<div id="aboutacct" class="panel-collapse collapse">
<div class="panel-body">
<p>
You don't need an account to give Apt a try! Many of the
public profiles can be used without one - check out the list
on the <a href="/">home page</a>.
</p>
<p>
For accountability reasons, however, you will be limited in
certain ways if you don't have an account. Users with a full
account (free!) can use a larger set of profiles, can hold
resources for longer, may request larger virtual machines and
bare metal machines, and more. You will also need an account
if you want to create profiles of your own.
</p>
<p>
If you already have an account on Emulab.net, you may log in
using that same acount on Aptlab.net.
</p>
</div>
</div>
</div>
<input name="formfields[uid]" value="<%- formfields.uid %>"
class="form-control" data-key="uid"
placeholder="Username" autofocus type="text">
<input name="formfields[fullname]" value="<%- formfields.fullname %>"
class="form-control" data-key="fullname"
placeholder="Full Name" type="text">
<input name="formfields[email]" value="<%- formfields.email %>"
class="form-control" data-key="email"
placeholder="Email" type="text">
<input name="formfields[affiliation]" value="<%- formfields.affiliation %>"
class="form-control" data-key="affiliation"
placeholder="Institutional Affiliation" type="text">
<select id="signup_countries" name="formfields[country]"
class="form-control bfh-countries"
data-country="<%- formfields.country %>"
data-blank="false" data-ask="true" data-key="country">
</select>
<select id="signup_states" name="formfields[state]"
class="form-control bfh-states"
data-state="<%- formfields.state %>"
data-country="signup_countries" data-ask="true"
placeholder="State" data-blank="false" data-key="state">
</select>
<input name="formfields[city]" value="<%- formfields.city %>"
class="form-control" data-key="city"
placeholder="City" type="text">
<div data-key="keyfile">
<span class="help-block">SSH Public Key file</span>
<input type="file" name="keyfile"
placeholder="SSH Public Key File">
</div>
<input name="formfields[password1]" value="<%- formfields.password1 %>"
class="form-control" data-key="password1"
placeholder="Password" type="password">
<input name="formfields[password2]" value="<%- formfields.password2 %>"
class="form-control" data-key="password2"
placeholder="Confirm Password" type="password">
<input name="formfields[pid]" value="<%- formfields.pid %>"
class="form-control" data-key="pid"
placeholder="Project Name" type="text">
<% if (! joinproject) { %>
<!-- Creating a new project. -->
<input name="formfields[proj_title]" value="<%- formfields.proj_title %>"
class="form-control" data-key="proj_title"
placeholder="Project Title (short sentence)" type="text">
<input name="formfields[proj_url]" value="<%- formfields.proj_url %>"
class="form-control" data-key="proj_url"
placeholder="Project Page URL" type="text">
<textarea name="formfields[proj_why]" rows="8"
class="form-control" data-key="proj_why"
placeholder="projectDescription (details)" type="textarea">
<%- formfields.proj_why %>
</textarea>
<% } %>
<div class='row'>
<div class='col-lg-8 col-lg-offset-2
col-md-10 col-md-offset-1
col-sm-10 col-sm-offset-1
col-xs-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
<%- button_label %>
</h3>
</div>
<div class='panel-body'>
<% if (general_error) { %>
<font color=red><%- general_error %></font>
<% } %>
<%= about_account %>
<form id='quickvm_signup_form'
class='form-horizontal' role='form'
enctype='multipart/form-data'
method='post' action='signup.php'>
<div class='row'>
<div class='<% if (this_user) { %>col-sm-12<% } else { %>col-sm-6<% } %>'>
<% if (joinproject) { %>
<input type='hidden' name='joinproject' value=1>
<% } %>
<%= verify_modal %>
<input type='hidden' name='formfields[pubkey]'
value='<%- pubkey %>'>
<% if (! this_user) { %>
<fieldset>
<legend>Personal Information</legend>
<%= personal_fields %>
</fieldset>
</div>
<div class='col-sm-6'>
<% } %>
<fieldset>
<legend>
<% if (joinproject) { %>
Project Name
<% } else { %>
Project Information
<% } %>
</legend>
<%= project_fields %>
</fieldset>
</div>
</div>
<div class='row sidebyside-form'>
<button class='btn btn-primary btn-xs pull-left'
type='button' name='reset' id='reset-form'>
Reset Form
</button>
<button class='btn btn-primary btm-sm pull-right'
type='submit' name='create'><%- button_label %></button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- This is the user verify modal -->
<div id='<%- id %>' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<h3>Important</h3>
</div>
<div class='modal-body'>
<p>Check your email for a verification code, and
enter it here:</p>
<div class='form-group'>
<input name='verify' class='form-control'
placeholder='Verification code'
autofocus type='text' />
</div>
<div class='form-group'>
<button class='btn btn-primary form-control'
id='verify_modal_submit'
type='submit' name='create'>
<%- label %>
</button>
</div>
</div>
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment