RADIUSdesk

Trace: › activity_monitor › rb751

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:31] – [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 224: Line 226:
 </code> </code>
   * After taking care of the database lets see what needs to be modified to the CakePHP 3 controllers   * After taking care of the database lets see what needs to be modified to the CakePHP 3 controllers
-  * +  * Locate the file DynamicDetailsController.php. 
 +  * It is typically under ///var/www/rdcore/cake3/rd_cake/src/Controller/DynamicDetailsController.php// 
 +  * There is not much that needs modification since CakePHP takes care of most things behind the scenes. 
 +  * Just locate the **editClickToConnect** method and modify **$check_items** 
 +<code php> 
 +$check_items = [ 
 + 'connect_check', 
 + 'connect_only', 
 + 'ctc_require_email', 
 + 'ctc_require_phone', 
 + 'ctc_require_dn', 
 +]; 
 +</code> 
 +  * Locate the file DataCollectorsController.php. 
 +  * It is typically under ///var/www/rdcore/cake3/rd_cake/src/Controller/DataCollectorsController.php// 
 +  * We will modify the login page eventually to have various options displayed in the Pop-Up for Click-To-Connect so we need to modify the DataCollectorsController to only check the email field **IF PRESENT** 
 +  * See the following snippets  
 +<code php> 
 +public function addMac(){ 
 +    if ($this->request->is('post')) {  
 +        if($this->request->getData('email')){ 
 +            if(!$this->_test_email($this->request->data['email'])){ 
 +                return; 
 +            } 
 +        } 
 +        $dd = $this->_find_dynamic_detail_id(); 
 +</code> 
 +  * And this one  
 +<code php> 
 +private function _addOrEdit($user,$type= 'add') { 
 + 
 +    //__ Authentication + Authorization __ 
 +     
 +    $user_id    = $user['id']; 
 +     
 +    if($this->request->getData('email')){ 
 +        if(!$this->_test_email($this->request->data['email'])){ 
 +            return; 
 +        } 
 +    } 
 +     
 +    $this->request->data['public_ip'] = $this->request->clientIp(); 
 +</code> 
 +  * Also the **macCheck** method need to give feedback on those new methods in order so we can determine which fields must be shown in the Pop-Up 
 +<code php> 
 +public function macCheck(){ 
 + 
 +    $data   = $this->request->data;       
 +    $q_r    = $this->_find_dynamic_detail_id(); 
 +     
 +    $data['ctc_require_email'] = false; // By defaul don't ask for email;      
 +                        
 +    if($q_r){ 
 + 
 +        //Once we found the Dynamic Login Page; We need to figure out if we need to ask for an email for this person 
 +        //For that we need to look for a combo **dynamic_detail_id** and **mac** 
 +        //IF found look at the modify timestamp and if it 'expired' ask for it again 
 +        //If not found ask for it (ctc_require_email == true) 
 +        //Else we set ctc_require_email == false since we found the combo and it has not expired yet   
 +        $dd_id          = $q_r->dynamic_detail_id; 
 +        $dd_resuply_int = $q_r->dynamic_detail->ctc_resupply_email_interval; 
 +        $dd_resuply_intP = $q_r->dynamic_detail->ctc_resupply_phone_interval; 
 +        $data['dd_id']  = $dd_id; 
 +         
 +        if($q_r->dynamic_detail->ctc_require_email == true){ 
 +            $q_dd = $this->{$this->main_model}->find() 
 +                ->where([$this->main_model.'.dynamic_detail_id' => $dd_id,$this->main_model.'.mac' => $this->request->data['mac']]) 
 +                ->first(); 
 +            if($q_dd){ 
 +                if($dd_resuply_int > 0){ //This has an expiry date lets compare 
 +                 
 +                    $expiry_time    = $q_dd->modified->toUnixString()+($dd_resuply_int * 24 * 60 *60); 
 +                    $now            = new FrozenTime(); 
 +                    if($expiry_time < $now->toUnixString()){ 
 +                        //It already expired ask for a new one 
 +                        $data['ctc_require_email'] = true;  
 +                    }    
 +                } 
 +            }else{ 
 +                $data['ctc_require_email'] = true; //We did not found it so have to supply email 
 +            } 
 +        } 
 +         
 +        if($q_r->dynamic_detail->ctc_require_phone == true){ 
 +            $q_dd = $this->{$this->main_model}->find() 
 +                ->where([$this->main_model.'.dynamic_detail_id' => $dd_id,$this->main_model.'.mac' => $this->request->data['mac']]) 
 +                ->first(); 
 +            if($q_dd){ 
 +                if($dd_resuply_intP > 0){ //This has an expiry date lets compare                   
 +                    $expiry_time    = $q_dd->modified->toUnixString()+($dd_resuply_intP * 24 * 60 *60); 
 +                    $now            = new FrozenTime(); 
 +                    if($expiry_time < $now->toUnixString()){ 
 +                        //It already expired ask for a new one 
 +                        $data['ctc_require_email'] = true;  
 +                    }    
 +                } 
 +            }else{ 
 +                $data['ctc_require_phone'] = true; //We did not found it so have to supply email 
 +            } 
 +        } 
 +         
 +        if($q_r->dynamic_detail->ctc_require_dn == true){ 
 +            $q_dd = $this->{$this->main_model}->find() 
 +                ->where([$this->main_model.'.dynamic_detail_id' => $dd_id,$this->main_model.'.mac' => $this->request->data['mac']]) 
 +                ->first(); 
 +            if($q_dd){ 
 +                if($dd_resuply_intP > 0){ //This has an expiry date lets compare                   
 +                    $expiry_time    = $q_dd->modified->toUnixString()+($dd_resuply_intP * 24 * 60 *60); 
 +                    $now            = new FrozenTime(); 
 +                    if($expiry_time < $now->toUnixString()){ 
 +                        //It already expired ask for a new one 
 +                        $data['ctc_require_dn'] = true;  
 +                    }    
 +                } 
 +            }else{ 
 +                $data['ctc_require_dn'] = true; //We did not found it so have to supply dn 
 +            } 
 +        }       
 +                   
 +    }  
 +     
 +    $this->set(array( 
 +        'data' => $data, 
 +        'success' => true, 
 +        '_serialize' => array('data','success') 
 +    )); 
 +     
 +} 
 +</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:31