saltukalakus/classic-mfa-page.html

## classic-mfa-page.html
<!DOCTYPE html>
<html>
<head>
  <title>2nd Factor Authentication</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style type="text/css">

    html, body { padding: 0; margin: 0; }

    .table {
      display: table;
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: {{ pageBackgroundColor | default: '#2b2b33' }};
    }

    .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 class="js-mfa-container mfa-container" id="container"></div>
      </div>
    </div>
  </div>

  <script src="//cdn.auth0.com/js/mfa-widget/mfa-widget-1.8.min.js"></script>

  <script>
    function getClientID(t) {
      let token = {};
      token.payload = JSON.parse(window.atob(t.split('.')[1]));
      return (token.payload.clientId)
    }

    (function() {

      //
      // You may use the activeClientID to customize the MFA view based on application.
      //
      let activeClientID = getClientID("{{ requestToken }}");
      console.log("activeClientID: ", activeClientID);

      return new Auth0MFAWidget({
        container: "container",

        theme: {
          icon: "{{ iconUrl | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png' }}",
          primaryColor: "{{ primaryColor | default: '#ea5323' }}"
        },

        requesterErrors: [
          {% for error in errors %}
            { message: "{{ error.message }}", errorCode: "{{ error.code }}" }
          {% endfor %}
        ],

        mfaServerUrl: "{{ mfaServerUrl }}",
        {% if ticket %}
        ticket: "{{ ticket }}",
        {% else %}
        requestToken: "{{ requestToken }}",
        {% endif %}
        postActionURL: "{{ postActionURL }}",

        userData: {
          userId: "{{ userData.userId }}",
          email: "{{ userData.email }}",
          friendlyUserId: "{{ userData.friendlyUserId }}",
          tenant: "{{ userData.tenant }}",
          {% if userData.tenantFriendlyName %}
          tenantFriendlyName: "{{ userData.tenantFriendlyName }}"
          {% endif %}
        },
        globalTrackingId: "{{ globalTrackingId }}",
        {% if allowRememberBrowser %}allowRememberBrowser: {{ allowRememberBrowser }}, {% endif %}
        {% if stateCheckingMechanism %}stateCheckingMechanism: "{{ stateCheckingMechanism }}", {% endif %}
      });
    })();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>2nd Factor Authentication</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<style type="text/css">

	html, body { padding: 0; margin: 0; }

	.table {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: {{ pageBackgroundColor \| default: '#2b2b33' }};
	}

	.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 class="js-mfa-container mfa-container" id="container"></div>
	</div>
	</div>
	</div>

	<script src="//cdn.auth0.com/js/mfa-widget/mfa-widget-1.8.min.js"></script>

	<script>
	function getClientID(t) {
	let token = {};
	token.payload = JSON.parse(window.atob(t.split('.')[1]));
	return (token.payload.clientId)
	}

	(function() {

	//
	// You may use the activeClientID to customize the MFA view based on application.
	//
	let activeClientID = getClientID("{{ requestToken }}");
	console.log("activeClientID: ", activeClientID);

	return new Auth0MFAWidget({
	container: "container",

	theme: {
	icon: "{{ iconUrl \| default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png' }}",
	primaryColor: "{{ primaryColor \| default: '#ea5323' }}"
	},

	requesterErrors: [
	{% for error in errors %}
	{ message: "{{ error.message }}", errorCode: "{{ error.code }}" }
	{% endfor %}
	],

	mfaServerUrl: "{{ mfaServerUrl }}",
	{% if ticket %}
	ticket: "{{ ticket }}",
	{% else %}
	requestToken: "{{ requestToken }}",
	{% endif %}
	postActionURL: "{{ postActionURL }}",

	userData: {
	userId: "{{ userData.userId }}",
	email: "{{ userData.email }}",
	friendlyUserId: "{{ userData.friendlyUserId }}",
	tenant: "{{ userData.tenant }}",
	{% if userData.tenantFriendlyName %}
	tenantFriendlyName: "{{ userData.tenantFriendlyName }}"
	{% endif %}
	},
	globalTrackingId: "{{ globalTrackingId }}",
	{% if allowRememberBrowser %}allowRememberBrowser: {{ allowRememberBrowser }}, {% endif %}
	{% if stateCheckingMechanism %}stateCheckingMechanism: "{{ stateCheckingMechanism }}", {% endif %}
	});
	})();
	</script>
	</body>
	</html>