• The Dynamic Login Pages applet has a dedicated section for Click-To-Connect.
• By default there is an option for the user to first supply their email before they can connect to the Internet.
• This can be set with and additional expiry date.
• When these are selected the following happens:
  • The Click-ToConnect is displayed as normal.
  • When the user clicks the button, a check is done if there is a need for the user to supply anything (Based on his MAC Address and if there is an expiry date which now is active with this login page)
  • If there is such a need there is a pop-up window asking the user to provide their email before the Internet connectivity will commence.
• There might however be the need to also provide additional info besides the email address.
• This document will show which files needs to be tweaked for that.
• We will add the following fields
  • A Phone number that needs to be 8 digits long.
  • A field called DN which is also a number that needs to be 7 digits long.

• Locate the file pnlDynamicDetailClickToConnect.js.
• It is typically under /var/www/rdcore/rd/classic/src/view/dynamicDetails/pnlDynamicDetailClickToConnect.js
• We will define two combo boxes below cmbReSupply

var cmbReSupplyP = Ext.create('Ext.form.ComboBox', {
    fieldLabel      : 'Re-Supply Phone Interval',
    store           : reSupply,
    queryMode       : 'local',
    displayField    : 'name',
    valueField      : 'id',
    name            : 'ctc_resupply_phone_interval',
    itemId          : 'cmbReSupplyPhone',
    labelCls        : 'lblRd',
    allowBlank      : false,
    forceSelection  : true,
    value           : 0
});
 
var cmbReSupplyDn = Ext.create('Ext.form.ComboBox', {
    fieldLabel      : 'Re-Supply DN Interval',
    store           : reSupply,
    queryMode       : 'local',
    displayField    : 'name',
    valueField      : 'id',
    name            : 'ctc_resupply_dn_interval',
    itemId          : 'cmbReSupplyDn',
    labelCls        : 'lblRd',
    allowBlank      : false,
    forceSelection  : true,
    value           : 0
});

• Then we will add check boxes for these below the email checkbox

{
    xtype       : 'checkbox',      
    fieldLabel  : 'Require Phone To Connect',
    itemId      : 'chkCtcRequirePhone',
    name        : 'ctc_require_phone',
    inputValue  : 'ctc_require_phone',
    checked     : false,
    disabled    : true
},
cmbReSupplyP,
{
    xtype       : 'checkbox',      
    fieldLabel  : 'Require DN To Connect',
    itemId      : 'chkCtcRequireDn',
    name        : 'ctc_require_dn',
    inputValue  : 'ctc_require_dn',
    checked     : false,
    disabled    : true
},
cmbReSupplyDn

• You will notice that the items we added are disabled by default.
• We need to also modify the View Controller to include these new components when certain action are done.
• Locate the file vcDynamicDetailClickToConnect.js.
• It is typically under /var/www/rdcore/rd/classic/src/view/dynamicDetails/vcDynamicDetailClickToConnect.js
• Compare the following with your original code.

Ext.define('Rd.view.dynamicDetails.vcDynamicDetailClickToConnect', {
    extend  : 'Ext.app.ViewController',
    alias   : 'controller.vcDynamicDetailClickToConnect',
    control: {
        '#chkClickToConnect' : {
            change: 'chkClickToConnectChange'
        },
        '#chkCtcRequireEmail' : {
            change:  'chkCtcRequireEmailChange'
        },
        '#chkCtcRequirePhone' : {
            change:  'chkCtcRequirePhoneChange'
        },
        '#chkCtcRequireDn' : {
            change:  'chkCtcRequireDnChange'
        }
    },
    chkClickToConnectChange: function(chk){
        var me      = this;
        var form    = chk.up('form');
        var un      = form.down('#txtConnectUsername');
        var sx      = form.down('#txtConnectSuffix');
        var cd      = form.down('#nrConnectDelay');
        var co      = form.down('#chkConnectOnly');
        var re      = form.down('#chkCtcRequireEmail');
        var rs      = form.down('#cmbReSupply');
        var rp      = form.down('#chkCtcRequirePhone');
        var rsp     = form.down('#cmbReSupplyPhone');
        var rdn     = form.down('#chkCtcRequireDn');
        var rsdn    = form.down('#cmbReSupplyDn');      
        var value   = chk.getValue();
        if(value){
            un.setDisabled(false);
            sx.setDisabled(false);
            cd.setDisabled(false);
            co.setDisabled(false);
            re.setDisabled(false); 
            rs.setDisabled(false);
            rp.setDisabled(false); 
            rsp.setDisabled(false);
            rdn.setDisabled(false); 
            rsdn.setDisabled(false);                   
        }else{
            un.setDisabled(true);
            sx.setDisabled(true);
            cd.setDisabled(true);
            co.setDisabled(true);
            re.setDisabled(true); 
            rs.setDisabled(true);
            rp.setDisabled(true); 
            rsp.setDisabled(true);
            rdn.setDisabled(true); 
            rsdn.setDisabled(true);    
        }
    },
    chkCtcRequireEmailChange: function(chk){
        var me      = this;
        var form    = chk.up('form');
        var value   = chk.getValue();
        var rs      = form.down('#cmbReSupply');
        if(value){
            rs.setDisabled(false);
        }else{
            rs.setDisabled(true);
        }       
    },
    chkCtcRequirePhoneChange: function(chk){
        var me      = this;
        var form    = chk.up('form');
        var value   = chk.getValue();
        var rs      = form.down('#cmbReSupplyPhone');
        if(value){
            rs.setDisabled(false);
        }else{
            rs.setDisabled(true);
        }       
    },
    chkCtcRequireDnChange: function(chk){
        var me      = this;
        var form    = chk.up('form');
        var value   = chk.getValue();
        var rs      = form.down('#cmbReSupplyDn');
        if(value){
            rs.setDisabled(false);
        }else{
            rs.setDisabled(true);
        }       
    }
});

• Finally we need to add those extra fields to the grid displaying these items
• Locate the file gridDynamicDetailEmails.js.
• It is typically under /var/www/rdcore/rd/classic/src/view/dynamicDetails/gridDynamicDetailEmails.js
• See the following snippet

{ text: 'E-Mail',         dataIndex: 'email',    tdCls: 'gridTree', flex: 1,stateId: 'StateGridDynamicDetailEmails2'},
{ text: 'Phone',          dataIndex: 'phone',    tdCls: 'gridTree', flex: 1,stateId: 'StateGridDynamicDetailEmails2a'},
{ text: 'DN',             dataIndex: 'dn',       tdCls: 'gridTree', flex: 1,stateId: 'StateGridDynamicDetailEmails2b'},
{ 
    text        : 'Captive MAC',
    dataIndex   : 'cp_mac', 
    tdCls       : 'gridTree',
    hidden      : true, 
    flex        : 1,
    stateId		: 'DD_Email_B'
},

• Next we will see what we need to modify on the CakePHP3 App Side

• We need to add extra fields to the dynamic_details sql table inside the rd database.
• See the following SQL Patch snippet which add those fields if not present

IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'ctc_require_phone' AND TABLE_NAME = 'dynamic_details' AND table_schema = 'rd') THEN
    ALTER TABLE dynamic_details ADD COLUMN `ctc_require_phone` tinyint(1) NOT NULL DEFAULT '0';
END IF;
 
IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'ctc_resupply_phone_interval' AND TABLE_NAME = 'dynamic_details' AND table_schema = 'rd') THEN
    ALTER TABLE dynamic_details ADD COLUMN `ctc_resupply_phone_interval` INT(4) NOT NULL DEFAULT '0';
END IF;
 
IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'ctc_require_dn' AND TABLE_NAME = 'dynamic_details' AND table_schema = 'rd') THEN
    ALTER TABLE dynamic_details ADD COLUMN `ctc_require_dn` tinyint(1) NOT NULL DEFAULT '0';
END IF;
 
IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'ctc_resupply_dn_interval' AND TABLE_NAME = 'dynamic_details' AND table_schema = 'rd') THEN
    ALTER TABLE dynamic_details ADD COLUMN `ctc_resupply_dn_interval` INT(4) NOT NULL DEFAULT '0';
END IF;

• We also need to add extra field to the data_collectors sql table inside the rd database.
• See the following SQL Patch snippet which add those fields if not present

IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'phone' AND TABLE_NAME = 'data_collectors' AND table_schema = 'rd') THEN
    ALTER TABLE data_collectors ADD COLUMN `phone` VARCHAR(36) NOT NULL DEFAULT '';
END IF;
 
IF NOT EXISTS (SELECT * FROM information_schema.columns
    WHERE column_name = 'dn' AND TABLE_NAME = 'data_collectors' AND table_schema = 'rd') THEN
    ALTER TABLE data_collectors ADD COLUMN `dn` VARCHAR(36) NOT NULL DEFAULT '';
END IF;

• After taking care of the database lets see what needs to be modified to the CakePHP 3 controllers