sgmeyer · February 2, 2017 22:52
diff --git a/hosted-page-login.html b/hosted-page-login.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" />
  <link rel="stylesheet" href="https://rawgit.com/sgmeyer/6293f7dbeef2f5ceb528efeed704ae30/raw/34cc4bad22f00deef29c881dadea5518ab091ac2/iafc-demo.css" />  
 </head>
 <body>

  <div class="form">
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up for Free</h1>
          <div class="input-form">
            <div class="top-row">
              <div class="field-wrap">
                <label>
                  First Name<span class="req">*</span>
                </label>
                <input type="text" required autocomplete="off" />
              </div>
        
              <div class="field-wrap">
                <label>
                  Last Name<span class="req">*</span>
                </label>
                <input type="text"required autocomplete="off"/>
              </div>
            </div>

            <div class="field-wrap">
              <label>
                Email Address<span class="req">*</span>
              </label>
              <input type="email"required autocomplete="off"/>
            </div>
          
            <div class="field-wrap">
              <label>
                Set A Password<span class="req">*</span>
              </label>
              <input type="password"required autocomplete="off"/>
            </div>
            <button id="register" class="button button-block"/>Get Started</button>
            </div>
          </div>
        
          <div id="login">   
            <h1>Welcome Back!</h1>
            <div class="input-form">
              <div class="field-wrap">
                <label>
                  Email Address<span class="req">*</span>
                </label>
                <input id="login-username" type="email"required autocomplete="off"/>
              </div>
              <div class="field-wrap">
                <label>
                  Password<span class="req">*</span>
                </label>
                <input id='login-password' type="password"required autocomplete="off"/>
              </div>
              <p class="forgot"><a href="#">Forgot Password?</a></p>
              <button id="login-button" class="button button-block"/>Log In</button>
            </div>
          </div>
       </div><!-- tab-content -->
    </div> <!-- /form -->
  
  <!--[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="//cdn.auth0.com/js/auth0/8.2.0/auth0.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    /**
     * Displays a login and signup form.  This does not get called right away.
     * First, we'll check to see if SSO needs to happen.  If SSO fails then
     * we'll display the login page after trySso(). 
     */
    var displayLoginForm = function() {
      $('.form').find('input, textarea').on('keyup blur focus', function (e) {
        // These classes just setup the behavior around the UI.  
        // you can ignore these.
        var $this = $(this);
        var label = $this.prev('label');

 	      if (e.type === 'keyup') {
 			    if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.addClass('active highlight');
          }
        } else if (e.type === 'blur') {
    	    if( $this.val() === '' ) {
    		    label.removeClass('active highlight'); 
 			    } else {
 		        label.removeClass('highlight');   
 			    }   
        } else if (e.type === 'focus') {
          if( $this.val() === '' ) {
    		    label.removeClass('highlight'); 
 			    } 
          else if( $this.val() !== '' ) {
 		        label.addClass('highlight');
 			    }
        }
      });
      
      // This is the $ code for switching Sign Up <> Login tabs
      // on the login form.  This is can also be ignored.
      $('.tab a').on('click', function (e) {
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
  
        target = $(this).attr('href');
        $('.tab-content > div').not(target).hide();
        $(target).fadeIn(600);
      });
    
      // This is what gets initiated when a user clicks login.
      // I didn't implement using the `Enter` key for clicking this
      // button.  For now you'll need to click/tap it.
      $('#login-button').on('click', function (e) {
        var username = $('#login-username').val();
        var password = $('#login-password').val();
        var options = {
          connection: 'Username-Password-Authentication',
          audience: config.extraParams.audience,
          scope: config.extraParams.scope || 'openid',
          responseType: config.callbackOnLocationHash ? 'token' : 'code',
          redirectUri: config.callbackURL,
          username: username,
          password: password,
          state: config.extraParams.state
        };
        
        if (config.prompt) { options.prompt = 'none'; }
      
        webAuth.redirect.loginWithCredentials(options);
      });
    
      // This is what gets initiated when a user clicks sign up/register.
      // I didn't implement using the `Enter` key for clicking this
      // button.  For now you'll need to click/tap it.
      $('#register').on('click', function (e) {
        // TODO: implement
      });
    };
   
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    var webAuth = new auth0.WebAuth({
      domain:       config.auth0Domain,
      clientID:     config.clientID,
      callbackURL:  config.callbackURL
    });
    
    displayLoginForm();
  </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" />
	<link rel="stylesheet" href="https://rawgit.com/sgmeyer/6293f7dbeef2f5ceb528efeed704ae30/raw/34cc4bad22f00deef29c881dadea5518ab091ac2/iafc-demo.css" />
	</head>
	<body>

	<div class="form">
	<ul class="tab-group">
	<li class="tab active"><a href="#signup">Sign Up</a></li>
	<li class="tab"><a href="#login">Log In</a></li>
	</ul>
	<div class="tab-content">
	<div id="signup">
	<h1>Sign Up for Free</h1>
	<div class="input-form">
	<div class="top-row">
	<div class="field-wrap">
	<label>
	First Name<span class="req">*</span>
	</label>
	<input type="text" required autocomplete="off" />
	</div>

	<div class="field-wrap">
	<label>
	Last Name<span class="req">*</span>
	</label>
	<input type="text"required autocomplete="off"/>
	</div>
	</div>

	<div class="field-wrap">
	<label>
	Email Address<span class="req">*</span>
	</label>
	<input type="email"required autocomplete="off"/>
	</div>

	<div class="field-wrap">
	<label>
	Set A Password<span class="req">*</span>
	</label>
	<input type="password"required autocomplete="off"/>
	</div>
	<button id="register" class="button button-block"/>Get Started</button>
	</div>
	</div>

	<div id="login">
	<h1>Welcome Back!</h1>
	<div class="input-form">
	<div class="field-wrap">
	<label>
	Email Address<span class="req">*</span>
	</label>
	<input id="login-username" type="email"required autocomplete="off"/>
	</div>
	<div class="field-wrap">
	<label>
	Password<span class="req">*</span>
	</label>
	<input id='login-password' type="password"required autocomplete="off"/>
	</div>
	<p class="forgot"><a href="#">Forgot Password?</a></p>
	<button id="login-button" class="button button-block"/>Log In</button>
	</div>
	</div>
	</div><!-- tab-content -->
	</div> <!-- /form -->

	<!--[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="//cdn.auth0.com/js/auth0/8.2.0/auth0.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	/**
	* Displays a login and signup form. This does not get called right away.
	* First, we'll check to see if SSO needs to happen. If SSO fails then
	* we'll display the login page after trySso().
	*/
	var displayLoginForm = function() {
	$('.form').find('input, textarea').on('keyup blur focus', function (e) {
	// These classes just setup the behavior around the UI.
	// you can ignore these.
	var $this = $(this);
	var label = $this.prev('label');

	if (e.type === 'keyup') {
	if ($this.val() === '') {
	label.removeClass('active highlight');
	} else {
	label.addClass('active highlight');
	}
	} else if (e.type === 'blur') {
	if( $this.val() === '' ) {
	label.removeClass('active highlight');
	} else {
	label.removeClass('highlight');
	}
	} else if (e.type === 'focus') {
	if( $this.val() === '' ) {
	label.removeClass('highlight');
	}
	else if( $this.val() !== '' ) {
	label.addClass('highlight');
	}
	}
	});

	// This is the $ code for switching Sign Up <> Login tabs
	// on the login form. This is can also be ignored.
	$('.tab a').on('click', function (e) {
	$(this).parent().addClass('active');
	$(this).parent().siblings().removeClass('active');

	target = $(this).attr('href');
	$('.tab-content > div').not(target).hide();
	$(target).fadeIn(600);
	});

	// This is what gets initiated when a user clicks login.
	// I didn't implement using the `Enter` key for clicking this
	// button. For now you'll need to click/tap it.
	$('#login-button').on('click', function (e) {
	var username = $('#login-username').val();
	var password = $('#login-password').val();
	var options = {
	connection: 'Username-Password-Authentication',
	audience: config.extraParams.audience,
	scope: config.extraParams.scope \|\| 'openid',
	responseType: config.callbackOnLocationHash ? 'token' : 'code',
	redirectUri: config.callbackURL,
	username: username,
	password: password,
	state: config.extraParams.state
	};

	if (config.prompt) { options.prompt = 'none'; }

	webAuth.redirect.loginWithCredentials(options);
	});

	// This is what gets initiated when a user clicks sign up/register.
	// I didn't implement using the `Enter` key for clicking this
	// button. For now you'll need to click/tap it.
	$('#register').on('click', function (e) {
	// TODO: implement
	});
	};

	// Decode utf8 characters properly
	var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
	var webAuth = new auth0.WebAuth({
	domain: config.auth0Domain,
	clientID: config.clientID,
	callbackURL: config.callbackURL
	});

	displayLoginForm();
	</script>
	</body>
	</html>
No results found