
<!DOCTYPE html>
<html lang="en" dir="ltr">
<!-- !IE will be true for all non-IE browsers and IE10 since it does not
 recognize conditional flags. -->
<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
  // Only IE10 has cc_on as false.
  document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
<head>
    <title>jujucharms.com</title>
    <!-- Disable backwards compatible mode for IE on an intranet.
         For an explanation see http://bit.ly/14VytlD
         Also note this must be the first <meta> to appear. -->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta charset="utf-8">
<!-- The license statement comes after the charset declaration so that the
     charset is delivered within the first 1024 characters. -->
<!--
This file is part of the Juju GUI, which lets users view and manage Juju
environments within a graphical interface (https://launchpad.net/juju-gui).
Copyright (C) 2012-2013 Canonical Ltd.

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License version 3, as published by
the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranties of MERCHANTABILITY,
SATISFACTORY QUALITY, or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero
General Public License for more details.

You should have received a copy of the GNU Affero General Public License along
with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="Juju team">
    <link rel="shortcut icon" href="../../static/favicon.ico">
    <link rel="stylesheet" href="../../static/css/style.css">

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="full-screen-mask">
      <div id="login-container">
        <div class="login">
          <div class="login__logo">
            <svg class="svg-icon" viewBox="0 0 75 30" style="width: 75px; height: 30px;"><svg viewBox="309.33 322.034 571.89 206.329" id="juju-logo"><circle fill="#E95420" cx="408.542" cy="421.246" r="99.212"></circle><g fill="#FFF"><circle cx="414.212" cy="415.576" r="6.142"></circle><path d="M419.88 404.237h-11.337v-45.354c0-10.94 8.902-19.842 19.842-19.842s19.842 8.903 19.842 19.843v11.34l-11.338-.002v-11.337a8.457 8.457 0 0 0-2.49-6.014 8.457 8.457 0 0 0-6.015-2.492c-4.688 0-8.504 3.816-8.504 8.505v45.354z"></path><path d="M456.73 424.08c-10.94 0-19.843-8.9-19.843-19.842v-28.345h11.34v28.345c0 4.69 3.813 8.505 8.503 8.505 4.688 0 8.503-3.814 8.503-8.505v-28.345h11.34v28.345c0 5.3-2.065 10.282-5.813 14.03a19.694 19.694 0 0 1-14.03 5.812z"></path><circle cx="357.52" cy="483.605" r="6.143"></circle><path d="M363.188 472.27H351.85v-62.362c0-10.94 8.9-19.842 19.844-19.842 10.94 0 19.842 8.9 19.842 19.842v11.34h-11.34v-11.34a8.445 8.445 0 0 0-2.49-6.014 8.457 8.457 0 0 0-6.013-2.49c-4.69 0-8.505 3.814-8.505 8.504v62.36z"></path><path d="M400.04 475.103c-10.942 0-19.844-8.9-19.844-19.844v-28.347h11.34v28.348c0 4.69 3.813 8.503 8.503 8.503s8.503-3.814 8.503-8.504v-28.347h11.338v28.348c0 5.298-2.062 10.28-5.81 14.03a19.71 19.71 0 0 1-14.03 5.813z"></path></g><path d="M620.714 446.453c0 6.744-.678 12.98-2.02 18.707-1.353 5.73-3.68 10.72-6.98 14.967-3.307 4.246-7.686 7.553-13.146 9.908-5.46 2.357-12.306 3.54-20.528 3.54-4.854 0-9.304-.438-13.35-1.313-4.042-.88-7.617-1.922-10.718-3.135-3.104-1.215-5.697-2.494-7.787-3.842-2.092-1.35-3.675-2.562-4.753-3.643l6.473-11.123c1.214 1.08 2.73 2.26 4.55 3.538 1.82 1.283 3.945 2.46 6.372 3.54 2.426 1.08 5.122 1.954 8.09 2.628 2.964.676 6.2 1.012 9.708 1.012 10.38 0 18.03-2.73 22.955-8.19 4.92-5.46 7.38-14.796 7.38-28.01v-94.653h13.755v96.068zm108.541 40.449c-3.91 1.08-9.17 2.293-15.773 3.64-6.607 1.347-14.697 2.02-24.27 2.02-7.822 0-14.36-1.144-19.62-3.437-5.257-2.29-9.503-5.525-12.74-9.707-3.235-4.178-5.56-9.234-6.978-15.17-1.416-5.93-2.123-12.47-2.123-19.615V385.98h13.146v54.402c0 7.418.54 13.69 1.62 18.81 1.077 5.128 2.83 9.272 5.257 12.44 2.43 3.17 5.562 5.46 9.404 6.874 3.844 1.418 8.527 2.125 14.057 2.125 6.2 0 11.594-.335 16.18-1.01 4.584-.673 7.482-1.28 8.697-1.82v-91.82h13.147v100.922h-.002zm9.93 41.461c-1.482 0-3.338-.203-5.562-.607-2.227-.404-3.873-.88-4.955-1.416l1.82-10.72c.945.27 2.225.538 3.842.81 1.62.27 3.17.404 4.652.404 7.953 0 13.246-2.225 15.875-6.674 2.63-4.45 3.945-11.125 3.945-20.023V385.98h13.146v103.55c0 13.214-2.498 22.985-7.484 29.325-4.99 6.336-13.418 9.508-25.28 9.508zm142.035-41.461c-3.912 1.08-9.17 2.293-15.773 3.64-6.607 1.347-14.697 2.02-24.27 2.02-7.822 0-14.36-1.144-19.62-3.437-5.257-2.29-9.505-5.525-12.74-9.707-3.235-4.178-5.56-9.234-6.978-15.17-1.417-5.93-2.124-12.47-2.124-19.615V385.98h13.146v54.402c0 7.418.533 13.69 1.615 18.81 1.078 5.128 2.832 9.272 5.26 12.44 2.428 3.17 5.56 5.46 9.402 6.874 3.845 1.418 8.526 2.125 14.058 2.125 6.197 0 11.594-.335 16.18-1.01 4.584-.673 7.482-1.28 8.697-1.82v-91.82h13.145v100.922z"></path></svg></svg>
          </div>
          <div class="login__full-form">
            <div class="login__env-name">User Registration</div>
{{if .Error}}            <div class="login__failure-message" style="">{{.Error}}</div>
{{end}}            <form class="login__form" method="post" action="register">
              <input type="hidden" name="state" value="{{.State}}" />
              <label class="login__label">
                Username
                <input type="text" class="login__input js_username_input" name="username" autocomplete="off" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" />
                <span class="login__label-decoration"><span class="js_username_output"></span>@{{.Domain}}</span>
              </label>
              <label class="login__label">
                Full name
                <input type="text" value="{{.FullName}}" class="login__input" name="fullname" autocomplete="off" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" />
              </label>
              <label class="login__label">
                Email address
                <input type="text" value="{{.Email}}" class="login__input" name="email" autocomplete="off" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" />
              </label>
              <div class="button-row">
                <button class="button--positive" type="submit">Register</button>
              </div>
            </form>
          </div>
          <div class="login__message">
          </div>
        </div>
      </div>
    </div>

    <script type="application/javascript">
      var username_input = document.querySelector('.js_username_input');
      var username_output = document.querySelector('.js_username_output');
    
      username_input.addEventListener('keyup', function(e) {
        var val = this.value;
        username_output.innerHTML = val;
      });
    </script>
  </body>
</html>
