Part II describes how I overcame some of the appearance and navigation issues encountered when deploying Vanilla through SSO in an embedded format.

2. Controlling user navigation and appearance

2.1 Side menu navigation buttons launch full site within embedded frame

If you're deploying non-embedded Vanilla, this probably isn't a problem for you, but for embedded installations clicking the sign-in and register buttons result in your full site launching within the embedded frame. This just looks ugly! To get control over it, we go back to the jsConnect class file. Line 90 is the key line. I modify this line to make things look pretty when your user is already signed in, then I add some code to take control when a user is not signed in.

File: forum\plugins\jsconnect\class.jsconnect.plugin.php

     Line 90: 
$Result = '<div class="JsConnect-Guest">&nbsp; &nbsp; '.Anchor(sprintf(T('Sign In with %s'), $Provider['Name']), $SignInUrl, 'Button 

Primary SignInLink').$RegisterLink.'</div>';  //sblaine replaced <div class="JsConnect-Guest"> with <div class="JsConnect-Guest">&nbsp; &nbsp; 

     Line 92: Code snippet added.
//sblaine added this section
        if(!isset($_COOKIE['signed_in_id'])) {
            $Result = '<div class="JsConnect-Guest">&nbsp; &nbsp; Members: <a href="../sign-in.php" target="_parent">Sign-

in</a></div><div class="JsConnect-Guest">&nbsp; &nbsp; Non-Members: <a href="../join.php" target="_parent">Sign-up</a></div>';
        }
//sblaine section end

When you deploy the modified file you'll see that the sign-in and register buttons have been replaced with links to sign-in or sign-up and your pages will now launch fully in the parent window.

2.2 Controlling banner menu sign-in

If your users click the sign-in link on the banner menu, they're offered the same buttons that appear in the side menu and clicking these buttons results in the same ugly full site launch within the embedded frame. Fortunately, the fix we've already applied in section 2.1 corrects this issue for the banner menu navigation as well. However, clicking the banner menu sign-in launches a popup that offers your users the option of signing-in through your site or signing-in directly to the forum. You may wish to restrict the direct sign-in option by modifying Vanilla code such that the direct sign-in option is not displayed. Note the changes I made to the Vanilla signin.php file attached.

File: forum\applications\dashboard\views\entry\signin.php

   // Render the main signin form.
   echo '<div class="MainForm">';

   //include $this->FetchViewLocation('passwordform');  //sblaine commented out this line

   //echo $this->Data('MainForm');  //sblaine commented out this line

   //echo '</div>';  //sblaine commented out this line

   //sblaine added this section

    if(!isset($_COOKIE['signed_in_id'])) {
        echo '&nbsp; &nbsp; You must sign-in or sign-up through TennisCircle.net.</div>';
    }
    else {
        echo '</div>';
    }

   //sblaine section end

   // Render the buttons to select other methods of signing in.
   if (count($Methods) > 0) {
      //echo '<div class="Methods">'  //sblaine commented out this line
      //   .Wrap('<b>'.T('Or you can...').'</b>', 'div');  //sblaine commented out this line

      foreach ($Methods as $Key => $Method) {
         $CssClass = 'Method Method_'.$Key;
         echo '<div class="'.$CssClass.'">',
            $Method['SignInHtml'],
            '</div>';
      }

      //echo '</div>';  //sblaine commented out this line

    //sblaine added this section 
    if(!isset($_COOKIE['signed_in_id'])) {
        echo '<br /></div>';
    }
    else {
        echo '</div>';
    }  
    //sblaine section end

   }

echo '</div>';

To enhance the aesthetics of the new sign-in popup, I made one small change to jsconnect.css as follows:

File: forum\plugins\jsconnect\design\jsconnect.css
.JsConnect-Container { overflow: hidden; margin: 5px 0; padding: 15px ; /* //sblaine added this line */ }

2.3 Restricting changes in the Vanilla user profile

You may allow your users to maintain a profile on your site. Once you deploy Vanilla it has it's own user profile system built-in and from within the Vanilla profile users can change their password or upload a photo, they can even change their user name and email address. Unfortunately, without writing a significant chunk of code, these changes will not be reflected within the user account of my main site. I opt to restrict access to these Vanilla profile modifications rather than write code to link any changes back to my main site.

I modify sidemenu.php such that links to 'Change My Password' and 'Change My Picture' are not displayed. Note that this does not disable these functions, but requires that a user guess the link url and type it into the browser in order to access the functions.

File: forum\applications\dashboard\views\modules\sidemenu.php

             // Loop through all the links in the group.
         foreach ($Item['Links'] as $Link) {
            //echo "\n  <li".Attribute($Link['Attributes']).">",  //sblaine commented out this line
            //   Anchor($Link['Text'], $Link['Url']),   //sblaine commented out this line
            //   '</li>';   //sblaine commented out this line

            //sblaine added this section

            if($Link['Text'] <> 'Change My Password' AND $Link['Text'] <> 'Change My Picture') {
                echo "\n  <li".Attribute($Link['Attributes']).">",
                Anchor($Link['Text'], $Link['Url']),
                '</li>';
            }

            //sblaine section end

         }

         echo "\n", '</ul>';
      }

      echo "\n", '</div>';
   }
   ?>
</div>

I allow the 'Edit My Account' link to remain visible within the user profile even though this link navigates to a popup that allows changes to username and email address. I modify edit.php to disable the username and email address form fields to prevent editing as follows:

File: forum\applications\dashboard\views\profile\edit.php

      <?php
         echo $this->Form->Label('Username', 'Name');
         $Attributes = array();

         if (!$this->CanEditUsername) {
            $Attributes['disabled'] = 'disabled';
         }
         $Attributes['disabled'] = 'disabled';  //sblaine added this line
         echo $this->Form->TextBox('Name', $Attributes);
      ?>
   </li>
   <li>
      <?php
         echo $this->Form->Label('Email', 'Email');
         //echo $this->Form->TextBox('Email');  //sblaine commented out this line
         $Attributes['disabled'] = 'disabled';  //sblaine added this line
         echo $this->Form->TextBox('Email', $Attributes);  //sblaine added this line
      ?>
   </li>

I hope you find this tutorial useful. I'd like to thank the Vanilla Forums development staff for a great product. Please, keep up the good work.

Thanks.

Steven Blaine, Ph.D.