RADIUSdesk

Trace: › click_to_connect_extra › bootstrap_overview › rdtechnicaluserguides › update

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
technical_discussions:click_to_connect_extra [2021/10/24 18:56] – [CakePHP3 App Side] admintechnical_discussions:click_to_connect_extra [2021/10/24 19:28] (current) – [Modify the Login Pages for the Extra Options] admin
Line 184: Line 184:
 }, },
 </code> </code>
-  * Next we will see what we need to modify on the CakePHP3 App Side+  * Remember to run **Sencha Command** after these to generate the optimized JavaScript code. 
 +  * There is a dedicated Wiki Page in this site for it. 
 +  * Next we will see what we need to modify on the CakePHP3 App Side.
  
 ==== CakePHP3 App Side ==== ==== CakePHP3 App Side ====
Line 353: Line 355:
 } }
 </code> </code>
 +
 +  * This brings us to the end of the CakePHP 3 modifications.
 +  * The only remaining part is the login page themselves.
 +
 +==== Modify the Login Pages for the Extra Options ====
 +  *  Locate the file rdConnect.js.
 +  * It is typically under ///var/www/login/cp/js/rdConnect.js//
 +  * We need to add a flag to set if we created the pop-up window (**ctcFormDone**)
 +<code javascript>
 +cMinWidth           = 240; //240 mobile 300 desktop
 +scrollHeight        = 1000;
 +
 +var ctcFormDone     = false;
 +
 +fDebug          = function(message){  
 +    if(cDebug){
 +        console.log(message)  
 +    }
 +};
 +
 +</code>
 +  * Next we have to add some **OR** coonditions when the user click on the **Click To Connect** button
 +<code javascript>
 +var email_check = location.protocol+'//'+document.location.hostname+"/cake3/rd_cake/data-collectors/mac-check.json";
 +
 +webix.ajax().timeout(3000).post(
 +    email_check,formData,{ 
 +    error   : function(text, data, XmlHttpRequest){
 +        console.log("ERROR -> Getting Info for MAC");    
 +    },
 +    success : function(text, data, XmlHttpRequest){
 +        if(data.json().success == true){            
 +            if((data.json().data.ctc_require_email == true)||(data.json().data.ctc_require_phone == true)||(data.json().data.ctc_require_dn == true)){
 +                if(ctcFormDone == false){ //If not already done 
 +                    buildClickToConnectForm(data.json().data);
 +                }                       
 +                showForm("winEmail", b);
 +            }else{
 +                onBtnClickToConnectClick();
 +            } 
 +        }else{
 +            console.log("OTHER ERROR");   
 +        }
 +    }
 +});
 +</code>
 +  * Lets then see the function that is called **buildClickToConnectForm**. 
 +  * This is called only once.
 +  * We also include validation rules for those fields.
 +<code javascript>
 +var buildClickToConnectForm = function(data){
 +
 +    console.log("Click To Connect Form");
 +    console.log(data);
 +    var e1 = {
 +      view      : "template",
 +      template  : "Please supply to get <b>Guest Access</b>"
 +    };
 +    var e2 = { view:"text", label:'Email', name:"email" };
 +    var e3 = { view:"text", label:'Phone', name:"phone" };
 +    var e4 = { view:"text", label:'DN',    name:"dn" };
 +    var b1 = { view:"button", value: "Submit", click:function(){
 +     if (this.getParentView().validate()){ //validate form
 +         var button      = this;
 +         var formData    = new FormData();
 +         var mac_address = getParameterByName('mac');
 +            formData.append("mac", mac_address);
 +         
 +            var values      = this.getParentView().getValues();
 +            console.log(values);
 +            if(values.email){
 +                formData.append("email", values.email);  
 +            }
 +            if(values.phone){
 +                formData.append("phone", values.phone);  
 +            }
 +            if(values.dn){
 +                formData.append("dn", values.dn);  
 +            }
 +            
 +
 +            //We also add the following
 +            var called      = getParameterByName('called');
 +            formData.append("cp_mac", called);
 +
 +            var nasid       = getParameterByName('nasid');
 +            formData.append("nasid", nasid);
 +
 +            //This might not always be included
 +            var ssid        = getParameterByName('ssid');
 +            if(ssid !== ''){
 +                formData.append("ssid", ssid);
 +            }   
 +            
 +            var add_mac  = location.protocol+'//'+document.location.hostname+"/cake3/rd_cake/data-collectors/add-mac.json";
 +            webix.ajax().timeout(3000).post(
 +                add_mac,
 +                formData,
 +                { 
 +                error   : function(text, data, XmlHttpRequest){
 +                    console.log("ERROR -> Adding MAC");    
 +                },
 +                success : function(text, data, XmlHttpRequest){
 +                    if(data.json().success == true){
 +                      //console.log("ADDED MAC NOW TRY TO CONNECT");
 +                      webix.message("All is correct");
 +                      button.getTopParentView().hide(); //hide window
 +                      onBtnClickToConnectClick();
 +                        
 +                    }else{
 +                        //console.log("OTHER ERROR");
 +                        webix.message({ type:"error", text:data.json().message });   
 +                    }
 +                }
 +            });          
 +            
 +        }
 +     else
 +     webix.message({ type:"error", text:"Form data is invalid" });
 +    }};
 +    
 +    var elements = [e1];
 +    var height   = 140;
 +    var rules   = {};
 +        
 +    if(data.ctc_require_email == true){
 +        elements.push(e2);
 +        height = height+60;
 +        rules.email = webix.rules.isEmail;
 +    }
 +    if(data.ctc_require_phone == true){
 +        elements.push(e3);
 +        height      = height+60;
 +        rules.phone = function(value){
 +            if (! /^[0-9]{8}$/.test(value)) {
 +              webix.message("Phone number must be 8 digits long"); 
 +              return false;
 +            }
 +            return true;
 +        };
 +    }
 +    if(data.ctc_require_dn == true){
 +        elements.push(e4);
 +        height = height+60;
 +        rules.dn = function(value){
 +            if (! /^[0-9]{7}$/.test(value)) {
 +              webix.message("DN number must be 7 digits long"); 
 +              return false;
 +            }
 +            return true;
 +        };
 +    }
 +    elements.push(b1);
 +    
 +    frmEmail = {
 +     view        :"form",
 +     borderless  :true,
 +     elements    : elements,
 +     rules       :rules,
 +     elementsConfig:{
 +     labelPosition:"top",
 +     }
 +    };
 +     
 +     webix.ui({
 +        view    : "popup",
 +        id      : "winEmail",
 +        head    : false,
 +        height  : height,
 +        body    :webix.copy(frmEmail)
 +    });
 +    
 +    ctcFormDone = true;     
 +}
 +
 +</code>
 +  * That brings us to the totality of the changes required.
 +  * These login pages does not need any further optimization. (They are done using Webix) 
 +
 +
  
  
Last modified: 2021/10/24 18:56