Members Only

JSON

You will first need to add the “MEMBERS_ONLY” component to the list of features, in the same place as the menu builder, forms, treasury, etc. components are listed. When building a brand new site this will need to be added into your -make.json file, and if you’re doing a case or adding to a site after it’s been put on UAT, you’ll need to add it to the institution via postman.

CMS

When the site is up to UAT, create a new group called Members within the Members Only section. (You can create yourself as a user for testing purposes.)

When you’re done creating the group, you should be able to go to your landing page (and whatever other members only subpages you may have) and, in the editor for that specific page, set the Visibility to the name of the group you created, rather than “Public.” Click save, and publish.

To test, you can try to go directly to a members-only page within an incognito menu. It should redirect you to the login page. If you try to access from a regular window, the cookies in your browser will show that you are logged in to the CMS. Anyone with access to log in to the CMS is automatically green-lit to view members only pages, so you need to test in an incognito window where those cookies don’t exist.

For this reason, your login page should always have its visibility set to Public, so that people can actually access it to log in.

The redirect to the login page noted above also helps explain why the URL must always be members-login. If the URL is something else, it’ll send you to a 404 instead.

Templates

You will need to create two templates for a members only setup. They can both be based off of a basic subpage if no other design was provided. Usually, the login/logout components are set either in the main body of the page, with content areas above and below, or they take the place of one of the sub-ad areas.

Login Page

The first page to create is a login page. This page MUST have the URL /members-login, with no categories in the URL. The reason for that is, if someone is logged into the component and then clicks logout, they will be redirected to the /members-login page to log in again if desired. That is something that’s hard-coded into the CMS part of the component and cannot be changed. If the URL is something other than /members-login, the user will be redirected to a 404 page when they log out because /members-login does not exist.

• HTML Tag

<section aria-label="Members Login" id="section--mem-login">
	<banno:member-login landingPage="landingPageUrl"></banno:member-login>
</section>

• landingPageUrl should be a relative url with a leading slash

Landing Page/Member’s Only Subpage

As mentioned above, the landing subpage can have any URL as long as that URL is also reflected in the login component. The client should try to make sure that all members only subpages are linked to from the landing page, as members only subpages will not show up in the overall site search even after logging in to the component. This component will provide Logout and Change Password links inside each members page

On all members only subpages, you will need to include the code to allow the user to log out of the component.

• HTML Tag

<section class="members-logout text-center my-3" aria-label="Member Logout" id="section--mem-logout">
	<banno:member-logout></banno:member-logout>
</section>

Styles

These pieces will style and add the javascript functionality needed to make the forgot password fields show and hide as well as properly validate with Parsley so that it looks and feels like other forms.

.banno-members {
   &-login-container,&-reset-container {
    max-width:500px;
    margin:40px auto 40px 0;
      form {
         input {
          @extend .form-control;
          margin-bottom:10px;
         }
         .banno-members-submit {
          @extend .btn-success;
         }
         margin-bottom:30px;
      }
   }
   &-reset-container {
    padding:40px;
    border:1px solid $default;
      form {
        .banno-members-submit {
          @extend .btn-inverse;
        }
      }
   }
}

Scripts

Add this block of code to your $(function() { }); block of code in the scripts.js file

// Members only functions
$(".banno-members-wrapper form").each(function(){
  $(this).find("input").each(function(){
      $(this).wrap('<div class="relative"></div>');
      $(this).prop("required", true);
  });
  $(this).parsley();
});
$("#reset-pass-control,#login-control").on("click", function(e){
  e.preventDefault();
  $("#reset-pass-control").toggleClass("d-none");
  $(".banno-members-reset-container").toggleClass("d-block");
});