Skip to content

Instantly share code, notes, and snippets.

@forenheith

forenheith/example

Created April 7, 2020 16:52
Show Gist options
  • Save forenheith/58c7079bb4f3a0b0abf84a50de771309 to your computer and use it in GitHub Desktop.
Save forenheith/58c7079bb4f3a0b0abf84a50de771309 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>Sign In with Auth0</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
</head>
<body>
<!--[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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script src="https://cdn.auth0.com/js/lock/11.22/lock.min.js"></script>
<script>
// Decode utf8 characters properly
var config = JSON.parse(decodeURIComponent(escape(window.atob('eyAgICJpY29uIjogImh0dHBzOi8vcDk3ZGV2LmJsb2IuY29yZS53aW5kb3dzLm5l dC9hdXRoMC9wNjYucG5nIiwgICAiYXV0aDBEb21haW4iOiAicDk3LXFhLXA2Ni5h dXRoMC5jb20iLCAgICJhdXRoMFRlbmFudCI6ICJwOTctcWEtcDY2IiwgICAiY2xp ZW50Q29uZmlndXJhdGlvbkJhc2VVcmwiOiAiaHR0cHM6Ly9jZG4uYXV0aDAuY29t LyIsICAgImNhbGxiYWNrT25Mb2NhdGlvbkhhc2giOiBmYWxzZSwgICAiY2FsbGJh Y2tVUkwiOiAiaHR0cHM6Ly9wOTcuY29tIiwgICAiY2RuIjogImh0dHBzOi8vc2Rr LmF1dGgwLmNvbS8iLCAgICJjbGllbnRJRCI6ICJaTktmNWR3UTBOV1JjUFNWckhh SUk4SWxhOXo4ZkxCYSIsICAgImRpY3QiOiB7ICAgICAic2lnbmluIjogeyAgICAg ICAidGl0bGUiOiAiRGVmYXVsdCBBcHAiICAgICB9ICAgfSwgICAiZXh0cmFQYXJh bXMiOiB7ICAgICAidGVuYW50IjogInA5Ny1xYS1wNjYiLCAgICAgIl9pbnRzdGF0 ZSI6ICJkZXByZWNhdGVkIiAgIH0sICAgImludGVybmFsT3B0aW9ucyI6IHsgICAg ICJ0ZW5hbnQiOiAicDk3LXFhLXA2NiIsICAgICAiX2ludHN0YXRlIjogImRlcHJl Y2F0ZWQiLCAgICAgInNjb3BlIjogIm9wZW5pZCBwcm9maWxlIGVtYWlsIiAgIH0s ICAgIndpZGdldFVybCI6ICJodHRwczovL2Nkbi5hdXRoMC5jb20vdzIvYXV0aDAt d2lkZ2V0LTUuMS5taW4uanMiLCAgICJpc1RoaXJkUGFydHlDbGllbnQiOiBmYWxz ZSwgICAiYXV0aG9yaXphdGlvblNlcnZlciI6IHsgICAgICJ1cmwiOiAiaHR0cHM6 Ly9wOTctcWEtcDY2LmF1dGgwLmNvbSIsICAgICAiaXNzdWVyIjogImh0dHBzOi8v cDk3LXFhLXA2Ni5hdXRoMC5jb20vIiAgIH0sICAgImNvbG9ycyI6IHsgICAgICJw YWdlX2JhY2tncm91bmQiOiAiI0ZGRkZGRiIsICAgICAicHJpbWFyeSI6ICIjMjQy NDI0IiAgIH0gfQ=='))));
config.extraParams = config.extraParams || {};
var connection = config.connection;
var prompt = config.prompt;
var languageDictionary;
var language;
if (config.dict && config.dict.signin && config.dict.signin.title) {
languageDictionary = {
title: '',
signUpTitle: '',
signUpTerms: 'By signing up, you agree to our <a href="https://www.phillips66.com/terms-conditions">terms of service and privacy policy.</a> ',
};
} else if (typeof config.dict === 'string') {
language = config.dict;
}
var loginHint = config.extraParams.login_hint;
var colors = config.colors || {};
// Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
initialScreen: config.extraParams.initialScreen || "login",
auth: {
redirectUrl: config.callbackURL,
responseType: (config.internalOptions || {}).response_type ||
(config.callbackOnLocationHash ? 'token' : 'code'),
params: config.internalOptions
},
/* additional configuration needed for custom domains
configurationBaseUrl: config.clientConfigurationBaseUrl,
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: 'YOUR_CUSTOM_DOMAIN'
}, */
assetsUrl: config.assetsUrl,
allowedConnections: ['Username-Password-Authentication'],
rememberLastLogin: !prompt,
language: language,
languageDictionary: languageDictionary,
theme: {
logo: 'https://p97opsstorage.blob.core.windows.net/prd-b2c-ui/p66-v4/images/logo.png',
//logo: 'YOUR LOGO HERE',
primaryColor: '#D7262C'
},
prefill: loginHint ? {email: loginHint, username: loginHint} : null,
closable: false,
defaultADUsernameFromEmailPrefix: false,
allowForgotPassword: true,
mustAcceptTerms: true,
additionalSignUpFields: [
{
name: "firstName",
placeholder: "First Name",
},
{
name: "lastName",
placeholder: "Last Name",
}
]
// uncomment if you want small buttons for social providers
// socialButtonStyle: 'small'
});
if (colors.page_background) {
var css = '.auth0-lock.auth0-lock .auth0-lock-overlay { background: ' +
colors.page_background +
' }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
var customHeaderCss = '.auth0-lock.auth0-lock .auth0-lock-header { background: black }';
style.appendChild(document.createTextNode(customHeaderCss));
var customColorBannerCss = '.auth0-lock.auth0-lock .auth0-global-message.auth0-global-message-error { background: grey }';
style.appendChild(document.createTextNode(customColorBannerCss));
document.body.appendChild(style);
}
function onCheckTermsOfConditions(checked) {
$('.auth0-lock-submit').prop('disabled', !checked);
}
function saveEmail(checked) {
let emailInput = $("#1-email");
let email_value = emailInput.val();
let placeholder = emailInput.placeholder;
let val = checked ? email_value || placeholder : undefined;
Cookies.set("email_value", val);
}
function addTermsOfConditions() {
let button = $('.auth0-lock-submit');
button.prop('disabled', true);
let forgotPasswordLink = document.querySelector('.auth0-lock-alternative');
if (forgotPasswordLink) {
$(forgotPasswordLink).append('<div><span class="auth0-lock-sign-in-terms-agreement"><label><input id="signin_toc_agree_flag" type="checkbox" onclick="onCheckTermsOfConditions(checked)" style="margin-right: 5px; position: relative"><span>By logging in, you agree to our <a href="https://www.phillips66.com/terms-conditions">terms of service and privacy policy.</a> </span></label></span></div>');
}
button.prop('disabled', true);
$('#signin_toc_agree_flag').prop('checked', false);
}
function addRememberMe() {
let tocSpan = document.querySelector('.auth0-lock-sign-in-terms-agreement');
let emailInput = $("#1-email");
if (!tocSpan) {
return;
}
let email = Cookies.get('email_value');
$(tocSpan).append('<div><span class="auth0-lock-remember_me"><label><input id="remember_me_flag" type="checkbox" onclick="saveEmail(checked)" style="margin-right: 5px; position: relative"><span>Remember me</span></label></span></div>');
console.log(email);
console.log(emailInput);
setTimeout(()=>emailInput.val(email === 'undefined'? emailInput.placeholder: email),800);
$("#remember_me_flag").prop("checked", email!=="undefined");
}
function initExtraElements() {
addTermsOfConditions();
addRememberMe();
}
lock.on("signin ready", initExtraElements);
lock.on("forgot_password ready", function () {
location.href = "https://p97static.blob.core.windows.net/$web/redirector-qa-p66.html";
});
let markup = lock.show();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment