Skip to content

Instantly share code, notes, and snippets.

@snobu

snobu/unified.html

Last active January 19, 2023 11:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save snobu/3847ab693b6ff026c72e3abf260803fd to your computer and use it in GitHub Desktop.
Save snobu/3847ab693b6ff026c72e3abf260803fd to your computer and use it in GitHub Desktop.
Download ZIP
AAD B2C login template
Raw
unified.html
<!DOCTYPE html>
<html>
<head>
<title>App Login</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style id="common">
@font-face {
font-family: 'SegoeUI';
src: url(https://compromised.b2clogin.com/static/tenant/templates/fonts/segoeui.WOFF);
font-weight: normal;
}
@font-face {
font-family: 'SegoeUI';
src: url(https://compromised.b2clogin.com/static/tenant/templates/fonts/segoeui_bold.WOFF);
font-weight: bold;
}
#AmazonExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/amazon.svg);
}
#AmazonExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/amazon.svg);
}
#FacebookExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/facebook.svg);
}
#FacebookExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/facebook.svg);
}
#GitHubExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/github.svg);
}
#GitHubExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/github.svg);
}
#AppleExchange,#AppleManagedExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/apple.svg);
}
#AppleExchange:hover,#AppleManagedExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/apple.svg);
}
#GoogleExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/google.svg);
}
#GoogleExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/google.svg);
}
#LinkedInExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/linkedin.svg);
}
#LinkedInExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/linkedin.svg);
}
#MicrosoftAccountExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/microsoft.svg);
}
#MicrosoftAccountExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/microsoft.svg);
}
#QQExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/qq.svg);
}
#QQExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/qq.svg);
}
#TwitterExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/twitter.svg);
}
#TwitterExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/twitter.svg);
}
#WeChatExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/wechat.svg);
}
#WeChatExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/wechat.svg);
}
#WeiboExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/weibo.svg);
}
#WeiboExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/weibo.svg);
}
.buttons #cancel:before {
content: url(https://login.microsoftonline.com/templates/src/images/left-arrow.svg);
}
</style>
<style id="idpselector">
#SignInWithLogonNameExchange, #SignUpWithLogonEmailExchange, #SignUpWithLogonNameExchange {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/colored/local.svg);
}
#SignInWithLogonNameExchange:hover, #SignUpWithLogonEmailExchange:hover, #SignUpWithLogonNameExchange:hover {
background-image: url(https://compromised.b2clogin.com/static/tenant/templates/idp_logos/white/local.svg);
}
#SignUpWithLogonEmailExchange.text-link {
background-image: none;
background-color: transparent !important;
}
#SignUpWithLogonEmailExchange.text-link:hover {
background-image: none;
background-color: transparent !important;
}
</style>
<!-- common.css -->
<style>
/* Following are generated styles via gulp. */
/* inject: css */
html{background:0 0}body{font-family:Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;background-attachment:fixed;background-color:#75c0e0;background-position:center;background-repeat:no-repeat;background-size:cover;text-align:left}.container{text-align:center;width:100%;display:table;height:100vh;padding:0}a:focus{outline:0}select{border:none;border-bottom:1px solid #ccc}select:focus{text-shadow:0 0 0 #000;outline:0;border:none;border-bottom:1px solid #1662c7}select:-moz-focusring{color:transparent}img[data-tenant-branding-background=true]{width:100%;height:100%;object-fit:cover;z-index:0;position:fixed;left:0;overflow:hidden;top:0}div[data-tenant-branding-background-color=true]{width:100%;height:100%;position:fixed;z-index:0}#api{margin:0 auto}.heading h1{margin-bottom:20px}.col-lg-6{max-width:470px;width:100%;float:none;display:inline-block;vertical-align:top;padding:0}.row{width:100%;margin:0;display:table-cell;vertical-align:middle}ul{padding:0}#simplemodal-container .simplemodal-data{padding:5px 8px;overflow:hidden;background-color:#fff;border-radius:3px;font-style:italic}#LocalAccountSigninEmailExchange,#SignInWithLogonNameExchange{background-image:url(none);background-size:10%;background-position-x:95%;background-position-y:50%;background-repeat:no-repeat;border-radius:.2rem;width:100%;width:100%;font-size:1em;margin-left:auto}#LocalAccountSigninEmailExchange:hover,#LocalAccountSigninUsernameExchange:hover,#SignInWithLogonEmailExchange:hover,#SignInWithLogonNameExchange:hover,#SignUpWithLogonEmailExchange:hover,#SignUpWithLogonNameExchange:hover{background-color:#1662c7!important}#AmazonExchange:hover{background-color:#36474f!important}#FacebookExchange:hover{background-color:#3b5595!important}#GitHubExchange:hover{background-color:#0f0f0f!important}#AppleExchange:hover,#AppleManagedExchange:hover{background-color:#0f0f0f!important}#GoogleExchange:hover{background-color:#c64a29!important}#LinkedInExchange:hover{background-color:#0274b3!important}#MicrosoftAccountExchange:hover{background-color:#01a4ef!important}#QQExchange:hover{background-color:#1a97df!important}#TwitterExchange:hover{background-color:#1da1f2!important}#WeChatExchange:hover{background-color:#4cc522!important}#WeiboExchange:hover{background-color:#e81123!important}.buttons{text-align:right}.buttons button{display:block;width:50%;height:40px;background-color:#0067b8;border-radius:.2rem;color:#fff;font-size:1em;border:none;margin-left:auto;margin-top:10px}.buttons button:hover{background-color:#0058ad;border-color:#204d74}.buttons #continue:disabled,.buttons button[aria-disabled=true]{opacity:.3}.buttons button:not([aria-disabled=true]){opacity:1}.buttons #cancel{padding:0;margin-left:auto;background:0 0;border:0;width:inherit;position:absolute;background-color:transparent;top:2px;left:3.5%;font-size:1em;color:#505050;box-shadow:none;text-align:left}.buttons #cancel:hover{color:#000!important}.buttons #cancel:before{padding:10px;vertical-align:sub;zoom:90%;display:inline-block}#attributeList ul{padding:0}#attributeList ul li{list-style:none;margin:1rem 0}label{font-weight:600}#attributeList ul li label{float:left}#attributeList ul li.EmailBox label,#attributeList ul li.Password label,#attributeList ul li.TextBox label{display:none!important}#attributeList ul li label[for=country]{float:left;display:inline-block!important}#attributeList ul li label[for=cpiminternal_legalCountry]{float:none;text-align:left;display:block!important}#attributeList ul li label[for=cpiminternal_dateOfBirth]{float:none;text-align:left;display:block!important}#attributeList ul li input{outline:0;height:30px;width:70%;border-radius:unset;border:none;border-bottom:1px solid #ccc;box-shadow:none}#attributeList ul li input:focus{border:none;border-bottom:1px solid #1662c7}#attributeList ul li input::-webkit-input-placeholder{text-indent:20px}#attributeList ul li .attrEntry.validate input:invalid{border-color:#b00}#attributeList ul li .attrEntry .verify{margin-top:15px;padding-bottom:10px;position:relative;text-align:right}#attributeList ul li .attrEntry .verify #email_ver_but_send{width:50%;height:40px;background-color:#0067b8;color:#fff;float:right}#attributeList ul li .attrEntry .verify #email_ver_but_send:hover{background-color:#0058ad}@media screen and (-ms-high-contrast:active){#attributeList ul li .attrEntry .verify button,.buttons #continue{border:1px dashed #fff!important}#attributeList ul li .attrEntry .verify button:hover,.buttons #continue:hover{border:1px solid #fff!important}}#attributeList ul li .attrEntry .verify #email_ver_but_verify{width:inherit;padding:0 20px;height:40px;background-color:#0067b8;color:#fff;margin-left:148px}#attributeList ul li .attrEntry .verify #email_ver_but_verify:hover{background-color:#0058ad}#attributeList ul li .attrEntry .verify #email_ver_but_resend{padding:0 20px;border:0;font-size:1em;height:40px;right:0;bottom:-38px;background-color:#0067b8;color:#fff;width:inherit;float:right;margin-left:5px}#attributeList ul li .attrEntry .verify #email_ver_but_resend:hover{background-color:#0058ad}#attributeList ul li .attrEntry .verify #email_ver_but_edit{margin-bottom:15px;border:none;color:#fff;background-color:#0067b8;width:50%;height:40px;float:right}#attributeList ul li .attrEntry .verify #email_ver_but_edit:hover{background-color:#0058ad}#attributeList ul li .attrEntry .verify #email_ver_input_label{display:none!important}#api .working{background:url(data:image/gif;base64,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) no-repeat;height:30px;width:auto;background-position:center bottom}#attributeList ul li .attrEntry .itemLevel{display:none}#attributeList ul li .attrEntry .dropdown_single{height:45px;width:100%;margin-bottom:15px;padding-left:15px}#attributeList ul li .attrEntry div#cpiminternal_dateOfBirth.date{margin-bottom:15px;display:table;width:100%}#attributeList ul li .attrEntry div#cpiminternal_dateOfBirth.date select{display:table-cell;height:45px;padding-left:15px}#attributeList ul li .attrEntry div#cpiminternal_dateOfBirth select#cpiminternal_dateOfBirth_day.day{margin-right:3%;width:23%}#attributeList ul li .attrEntry div#cpiminternal_dateOfBirth select#cpiminternal_dateOfBirth_month.month{margin-right:3%;width:38%}#attributeList ul li .attrEntry div#cpiminternal_dateOfBirth select#cpiminternal_dateOfBirth_year.year{width:33%}#attributeList ul li .helpLink{display:none}@media screen and (max-width:100%){.row .panel-default .panel-body{margin-top:40px}.row .panel-default .panel-body .branding img{display:block;height:80px;width:auto;margin:0 auto}.row .panel-default .panel-body .branding h1{display:none}.row .panel-default .panel-body h3{font-size:1.5em;margin-top:15px}#attributeVerification #attributeList ul li input{width:60%;height:40px;margin-bottom:10px;border-radius:.2rem;border:none;text-indent:10px}#attributeVerification #attributeList ul li input::-webkit-input-placeholder{text-indent:10px}#attributeVerification #attributeList ul li #email{width:65%;float:left;position:relative;z-index:2}#attributeVerification #attributeList ul li #email_ver_but_verify{background:0 0;border:0;color:#0067b8;font-size:1em;position:relative;right:0;top:60px;font-size:1.1em;width:auto;z-index:1;height:20px}#attributeVerification #attributeList ul li #email_ver_input{min-width:50%;width:60%;float:left}#attributeVerification #attributeList ul li #email_ver_but_resend{top:10px;font-size:1.1em;height:20px}#attributeVerification #attributeList ul li .attrEntry #email{height:40px}#attributeVerification #attributeList ul li .attrEntry .verify #email_ver_but_send:after{content:" Verify";font-size:1.1em;font-style:bold;margin-left:40%}#attributeVerification #attributeList ul li .attrEntry .verify #email_ver_but_send{height:40px;width:auto;float:right;overflow:hidden;text-indent:-200px}#attributeVerification #attributeList ul li .attrEntry .verify #email_ver_but_edit{margin-bottom:15px;border:none;color:#fff;background-color:#0067b8;border-radius:.2rem;font-size:1em;width:30%;height:40px;overflow:hidden;padding-top:6px;margin-left:40%}#attributeVerification #attributeList ul li .attrEntry .verify:after{content:" ";display:block;clear:both}#attributeVerification #attributeList #verifying_blurb{margin-top:15px}#attributeVerification .buttons #continue{height:40px}#attributeVerification .buttons #cancel{font-size:1em;left:40%}}.panel,.panel_layout,.panel_layout_row,body,html{height:100%}@media only screen and (max-width:600px){img[data-tenant-branding-background=true]{display:none}.container{background-color:#fff}.container .row .panel-default{border-radius:0;border:none;box-shadow:none}}
/* endinject */
</style>
<style>
/* Following are generated styles via gulp. */
/* inject: css */
.unified_container .row .panel-default{margin-top:auto;margin-bottom:auto;height:100%;background-color:#fff;min-width:350px;padding:40px 30px}.unified_container .row .panel-default .panel-body{max-width:380px;width:auto;margin:0 auto;padding:0}.unified_container .row .panel-default .panel-body .companyName{font-size:1.5em;margin-bottom:45px}.unified_container .row .panel-default .panel-body .companyLogo{display:block}.unified_container .row .panel-default .panel-body img{max-width:100%;width:auto;height:70px;margin:0 auto;display:block;float:left}.unified_container .row .panel-default .panel-body h3{font-size:1.5em;display:none}.unified_container .row .panel-default #api{display:table;margin:0;width:100%}.unified_container .row .panel-default #api .intro{display:block;text-align:left}.unified_container .row .panel-default #api .intro h2{font-size:20px}.unified_container .row .panel-default #api .divider{display:none}.unified_container .row .panel-default #api .localAccount{position:relative;top:10px;width:100%}.unified_container .row .panel-default #api .localAccount .intro h2{font-size:20px}.unified_container .row .panel-default #api .localAccount .error{color:#b00;text-align:left}.unified_container .row .panel-default #api .localAccount .entry .buttons{margin:15px 0 23px 0}.unified_container .row .panel-default #api .localAccount .entry .buttons button{float:right;background-image:none;background-color:#0067b8;border:none;border-radius:.2rem;cursor:pointer;display:inline-block;font-size:1em;font-weight:400;height:inherit;line-height:1.3333333;margin-top:1rem;margin-right:0;margin-left:0;padding:10px 16px;text-align:center;touch-action:manipulation;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit;-moz-user-select:none;-ms-touch-action:manipulation;-ms-user-select:none;-webkit-user-select:none;color:#fff;width:40%}.forgot-password{text-align:left}.forgot-password.center-height{position:absolute;right:0;bottom:0;clear:right;cursor:pointer;text-align:right}@media screen and (-ms-high-contrast:active){.unified_container .row .panel-default #api .accountButton,.unified_container .row .panel-default #api .localAccount .entry .buttons button{border:1px dashed #fff}.unified_container .row .panel-default #api .accountButton:hover,.unified_container .row .panel-default #api .localAccount .entry .buttons button:hover{border:1px solid #fff}}.unified_container .row .panel-default #api .localAccount .entry .buttons button:hover{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;background-color:#0058ad;color:#fff}.unified_container .row .panel-default #api .localAccount .entry .entry-item{position:relative;width:100%;padding-top:6px;padding-bottom:6px;display:block}.unified_container .row .panel-default #api .localAccount .entry .entry-item label{display:none}.unified_container .row .panel-default #api .localAccount .entry .entry-item input{outline:0;background-color:#fff5b2!important;background-image:none!important;border-style:none;border-bottom:1px solid #ccc;color:#555;display:inline-block;font-size:1em;height:30px;line-height:1.42857143;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s!important;width:100%!important;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s!important;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s!important}.unified_container .row .panel-default #api .localAccount .entry .entry-item input:focus{border-style:none;border-bottom:1px solid #FFF5B2}.unified_container .row .panel-default #api .localAccount .entry .entry-item #password{margin-bottom:20px}.unified_container .row .panel-default #api .localAccount .entry .entry-item .password-label{text-align:left;height:0;left:0;width:100%}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-30%)}100%{opacity:1;transform:translateX(0)}}.create{animation:.5s ease-out 0s 1 slideInFromLeft}.unified_container .row .panel-default #api .localAccount .entry .entry-item .password-label #forgotPassword{position:absolute;right:0;bottom:0;clear:right;cursor:pointer;text-align:right}.unified_container .row .panel-default #api .localAccount .rememberMe{position:relative;margin-top:-2.25rem;text-align:left;width:16rem}.unified_container .row .panel-default #api .localAccount .rememberMe.align-to-left{margin-top:1rem;text-align:left}#api .working{display:none}.unified_container .row .panel-default #api .localAccount .create p{text-align:right;margin-top:7rem;margin-right:-1.5rem}.unified_container .row .panel-default #api .claims-provider-list-text-links p{text-align:right;margin-top:7rem}.unified_container .row .panel-default #api .localAccount .create #createAccount{border-radius:.2rem;display:inline-block;font-size:1em;font-weight:400;height:inherit;line-height:1.3333333;padding:10px 16px;text-align:center;touch-action:manipulation;user-select:none;white-space:nowrap;-moz-user-select:none;-ms-touch-action:manipulation;-ms-user-select:none;-webkit-user-select:none;width:auto;margin-top:-3rem;cursor:pointer}.unified_container .row .panel-default #api .social{display:table-footer-group;position:relative;top:1px;width:auto}.unified_container .row .panel-default #api .accountButton{background-size:10% 70%;background-position-x:3%;background-position-y:50%;background-repeat:no-repeat;display:block;font-size:16px;height:45px;width:100%;margin-left:auto;overflow:hidden;padding:0 50px;max-width:380px;border:none;margin-top:5px}.unified_container .row .panel-default #api .accountButton:hover{color:#fff;border-radius:.2rem;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.claims-provider-list-text-links-bottom-under-form{text-align:right}@media (max-width:100%){.unified_container .row .panel-default{margin-top:auto;margin-bottom:auto;height:550px}.unified_container .row .panel-default .panel-body{padding:15px 10px;margin-top:20px}.unified_container .row .panel-default .panel-body .companyName{display:none}.unified_container .row .panel-default .panel-body .companyLogo{display:block}.unified_container .row .panel-default .panel-body h3{display:block}.unified_container .row .panel-default .panel-body #api{width:auto}.unified_container .row .panel-default .panel-body #api .social{top:370px;width:auto}.unified_container .row .panel-default .panel-body #api .social .options .accountButton{height:40px}.unified_container .row .panel-default .panel-body #api .social .options #FacebookExchange{background-size:12px;background-position:50% 75%;margin-bottom:10px}.unified_container .row .panel-default .panel-body #api .social .options #GoogleExchange{background-size:20px;background-position:50% 75%;margin-bottom:10px}.unified_container .row .panel-default .panel-body #api .social .options #TwitterExchange{background-size:20px;background-position-x:56px;background-position-y:14px;margin-bottom:10px}.unified_container .row .panel-default .panel-body #api .localAccount{top:20px}.unified_container .row .panel-default .panel-body #api .localAccount .entry .entry-item{display:block;width:100%;margin-bottom:10px}.unified_container .row .panel-default .panel-body #api .localAccount .entry .entry-item .password-label{top:145px}.unified_container .row .panel-default .panel-body #api .localAccount .entry .entry-item #logonIdentifier{height:40px}.unified_container .row .panel-default .panel-body #api .localAccount .entry .entry-item #password{height:40px}.unified_container .row .panel-default .panel-body #api .localAccount .entry .entry-item:nth-child(2){width:auto;float:left}.unified_container .row .panel-default .panel-body #api .localAccount .entry .buttons #next{width:auto;text-indent:-4px;height:40px;line-height:0;position:relative;bottom:5px;left:8px}}@media screen and (max-width:320px){.unified_container .row .panel-default #api .localAccount .entry .entry-item .password-label #forgotPassword{right:0;bottom:0}.forgot-password.center-height{right:0;bottom:0}.unified_container .row .panel-default #api .localAccount .rememberMe{width:50%}}
/* endinject */
</style>
<!-- optionally, add external CSS -->
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" data-preload="true" /> -->
</head>
<body>
<div id="background_branding_container" data-tenant-branding-background-color="false">
<img data-tenant-branding-background="false" src="https://compromised.b2clogin.com/static/tenant/templates/backgrounds/4-2.png" alt="Illustration"/>
</div>
<div class="container unified_container " role="presentation">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
<img class="companyLogo" data-tenant-branding-logo="true" src="https://compromised.b2clogin.com/static/tenant/templates/images/logo.svg" alt="Company Logo">
<div id="api" role="main">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment