obonyojimmy/lock-switch-to-signup.html

## lock-switch-to-signup.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Sign In with Auth0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
      html, body { padding: 0; margin: 0; }

      .table {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
        background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
        background-color: #e8ebef;
      }

      .cell {
        display: table-cell;
        vertical-align: middle;
      }

      .content {
        padding: 25px 0px 25px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 280px; /* login widget width */
      }
    </style>
  </head>
  <body>

    <div class="table">
      <div class="cell">
        <div class="content">
          <!-- WIDGET -->
          <div id="widget-container"></div>
        </div>
      </div>
    </div>

    <!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->

    <!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/base64.js"></script>
<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
<![endif]-->

    <script src="https://cdn.auth0.com/js/lock-9.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>
      // Decode utf8 characters properly
      var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

      var connection = config.connection;
      var prompt = config.prompt;

      var initializationOptions = {
        assetsUrl:  config.assetsUrl,
        cdn:        config.cdn
      };

      var options = {
        // icon:            '{YOUR_LOGO_URL}',
        callbackURL:        config.callbackURL,
        responseType:       config.callbackOnLocationHash ? 'token' : 'code',
        dict:               config.dict,
        connections:        connection ? [connection] : null,
        rememberLastLogin:  !prompt,
        container:          'widget-container',
        authParams:         config.internalOptions
      };

      var currentUsername = null;

      var lock = new Auth0Lock(config.clientID, config.auth0Domain,
                               initializationOptions);
      lock.once('signin ready', function(options) {
        var emailField = $(lock.$container)
        .find('input[name=email]').change(function() {

          currentUsername = $(this).val();
          if (currentUsername === 'jon@fabrikamcorp.com') {
            lock.showSignup(options);
          }
        });
      });
      lock.on('signup ready', function(options) {
        if (currentUsername) {
          $(lock.$container)
            .find('input[name=email]')
            .val(currentUsername);
          $(lock.$container)
            .find('input[name=password]')
            .focus();
        }
      });
      lock.show(options);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sign In with Auth0</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<style>
	html, body { padding: 0; margin: 0; }

	.table {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
	background-color: #e8ebef;
	}

	.cell {
	display: table-cell;
	vertical-align: middle;
	}

	.content {
	padding: 25px 0px 25px 0px;
	margin-left: auto;
	margin-right: auto;
	width: 280px; /* login widget width */
	}
	</style>
	</head>
	<body>

	<div class="table">
	<div class="cell">
	<div class="content">
	<!-- WIDGET -->
	<div id="widget-container"></div>
	</div>
	</div>
	</div>

	<!--[if IE 8]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
	<![endif]-->

	<!--[if lte IE 9]>
	<script src="https://cdn.auth0.com/js/base64.js"></script>
	<script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
	<![endif]-->

	<script src="https://cdn.auth0.com/js/lock-9.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

	<script>
	// Decode utf8 characters properly
	var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));

	var connection = config.connection;
	var prompt = config.prompt;

	var initializationOptions = {
	assetsUrl: config.assetsUrl,
	cdn: config.cdn
	};

	var options = {
	// icon: '{YOUR_LOGO_URL}',
	callbackURL: config.callbackURL,
	responseType: config.callbackOnLocationHash ? 'token' : 'code',
	dict: config.dict,
	connections: connection ? [connection] : null,
	rememberLastLogin: !prompt,
	container: 'widget-container',
	authParams: config.internalOptions
	};

	var currentUsername = null;

	var lock = new Auth0Lock(config.clientID, config.auth0Domain,
	initializationOptions);
	lock.once('signin ready', function(options) {
	var emailField = $(lock.$container)
	.find('input[name=email]').change(function() {

	currentUsername = $(this).val();
	if (currentUsername === 'jon@fabrikamcorp.com') {
	lock.showSignup(options);
	}
	});
	});
	lock.on('signup ready', function(options) {
	if (currentUsername) {
	$(lock.$container)
	.find('input[name=email]')
	.val(currentUsername);
	$(lock.$container)
	.find('input[name=password]')
	.focus();
	}
	});
	lock.show(options);
	</script>
	</body>
	</html>