Want to add button to logon page which when clicked changes session variable
Hi Folks,
I'm new to F5 and please excuse my terminology as I am learning.
I've built up an APM logon process which presents a TOTP logon screen that collects TOTP and calls an API to validate it, the logon screen also contains a check box to manage their account. That check box sets a session parameter and I check for it as a part of logon, if value is yes, one goes on a different logon flow.
While effective, The check box is ugly .............. and I am looking to make it pretty.
I've been searching on customization of logon page but am not sure I am using correct search terms. How can one make a button or http link and when clicked sets a parameter which I can route a flow based upon it?
APM has two different kinds of HTML framework/customization systems: "Modern", which uses Preact (with a virtual DOM, etc) "Standard" which uses plain javascript that operates on the regular HTML DOM. You select between these two when you create the Access Profile. You cannot switch an existing profile to the other mode.
In Standard customization, you can put any code directly into any of the customization boxes. In Modern customization you can't. So for, say a logon page, you can put whatever code you want directly into the logon page fields, like this example that uses a span tag to apply CSS attributes to the input field:
Then you end up with this:
With "Modern" customization, it's a little harder because you can't just place arbitrary code into those boxes. You have to apply styles into the user stylesheet and code into the user code area. Here's what that looks like in the UI, using the example doc'd here:
With this method, you can simply execute javascript code to directly manipulate the DOM with vanilla JS or use React-style JS.
Finally I'm sure you're probably aware that APM has a built-in OTP mechanism. It's split into 3 parts: Generate the OTP (with OTP generate agent), Ask user for OTP (with logon page agent), then validate OTP (using OTP validate agent. Any of these 3 steps can be substituted for custom functions because you can read and (over)write any APM session variables with whatever data you want using iRules and VPE rules. So to use these OTP verify you could just load the value you got from your API into the OTP session variable. The variable names that APM uses for this are:
(in a per-request policy it's "subsession" instead of "session")
session.otp.assigned.ttl = timeout (sec)
session.otp.assigned.expire = timeout + current time (unix format)
session.otp.assigned.val = generated OTP value
Any further questions please let us know. APM has a lot of flexibility but it can be confusing at times.
I ended up using a radio button instead of the check box and set one conditiont to be the default and allowed users to click the other if they needed. A little better looking and no custom code.
Altostratus
