on - edited on by
Serhii Pustovit
The following script will showcase how to move and resize the don't have an account option on the guest portal registration page.
For introduction on the different options used (including how to put javascript on your portal), please reference this document, ISE Web Portal Customization Options. This document also goes over the Don't have an account option.
Note: playing with the delay might have your page load correctly in places of higher latency
The following script moves the text up and makes it bigger
Insert this script into the optional content 2 of the self-registration page under your guest portal
<script>
$('#ui_login_self_reg_button').insertAfter('#ui_login_instruction_message');
</script>
<style>
#ui_login_self_reg_button {
font-size:2em;
}
</style>
To locate "Dont have an account?" in the middle of block, you have to insert only these scripts:
<script>
setTimeout(function(){
var link = $('.cisco-ise-form-buttons .ui-link');
var password = $('.ui-controlgroup-controls .ui-input-text:nth-child(3)');
- password.before(link),1000});
</script>
<style>
.ui-body-a .ui-link{
text-align:center;
display:block;
width:100%;
}
</style>
To locate "Dont have an account" over "Username", you have to use these scripts:
<script>
setTimeout(function(){
var link = $('.cisco-ise-form-buttons .ui-link');
var text = $('#ui_login_instruction_message');
text.after(link)
},1000);
</script>
<style>
.ui-body-a .ui-link {
text-align:center;
display:block;
width:100%;
}
</style>
To use button instead of link, you should use these script:
<script>
$(document).on('pageshow', function() {
var regButton = $("<div class='cisco-ise-form-buttons'><div aria-disabled='false' class='hotspot-btn reg-btn ui-submit ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-up-b' id= 'ui_registration_button' data-disabled='false' data-mini='true' data-inline='true' data-theme='b' data-wrapperels='span' data-iconshadow='true' data-shadow='true' data-corners='true'><span class='ui-btn-inner'><span class='ui-btn-text'>Get Access</span></span></div></div>");
regButton.insertAfter('#ui_login_instruction_message');
regButton.on("click", function(){
$("#ui_login_self_reg_button").click();
});
$("#ui_login_self_reg_button").hide();
if($('[id="ui_registration_button"]').length >1) {
for (i=1; i<=regButton.length; i++) {
$($('[id="ui_registration_button"]')[i]).parent().remove();
}
}
});
</script>
one last thing to be modified... in desktop mode the new button have to be centered like in mobile mode
(I put the button below the instruction text.)
Hi
Testing your script:
Desktop view - It’s fine !
Mobile view
Get Access Button need to be moved down, while Sign one button need to be moved a little bit up.
When I try to tweak for the position on the mobile view , I got a shift in the desktop view too.
<style>
#ui_registration_button {
padding: 6px 0 0px;
height: 23px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -270%);
width: 18%;
}
.cisco-ise-main-content {
height: 350px;
}
#portalloginForm {
transform: translate(-0%, 25%);
}
</style>
Yes; I have the AUP acceptance setup on the login page.
I copied scripts and styles. Here is what I get. Even If I click the acceptance it is still greyed out.
