FM_ReactLogin

Overview

This module is used to install custom login pages for individual organizations via Facebook's React JavaScript. It uses the module FM_LoginApis as an endpoint for user logins.

Installation & Configuration

Installation

FM_ReactLogin can no longer be installed using the manage modules page, it is now done through the manage.php file found in the FiLMS module.

eg, icom.icomproductions.ca/includes/modules/FM_ReactLogin/manage.php

Note that installing this module will install FM_LoginApis and uninstall FM_ngLogin.

The FM_ReactLogin orgresources manager uses a zipped file containing the organizations orgresources for the FM_ReactLogin modules. These folder must be zipped, and contain one and only one login-config.json file. Note that the zip file should only contain on directory at most with login-config.json at the root, otherwise the directories will be truncated when they are uploaded and may cause some server clutter or a login page to not function properly. FM_ReactLogin requires login-config.json to be in the root of the orgresources folder, so it is a good idea to model the uploaded folder after that.

An example of a good orgresources folder to upload is as follows

- folder

- subfolder

- stuff in subfolder

- login-config.json

- en.json

- fr.json

- index.css

An example of a BAD (please don't do this because it's silly) is as follows

- folder

- subfolder

- anotherSubfolder

- login-config.json

- en.json

- fr.json

- index.css

After you have selected the organization as well as the orgresources to upload click on the Upload button to install FM_ReactLogin using the selected orgresources. After the file is uploaded, the installer looks in the login-config.json file for the permittedApis setting and sets them. If it doesn't find anything, permittedApis will be blank and will have to be set manually in the application settings for the organization.

If FM_ReactLogin is already installed for an organization, the button should say 'Update' instead. This will delete all existing orgresources and update the current orgresources to that of the uploaded file. The updater looks for the permittedApis setting in the login-config.json file. If it finds the setting, and it is different than what is already set, it will update it.

The download button is also enabled if there is anything located in the org resources folder for FM_ReactLogin. This will download a zipped orgresources file from the server.

UPDATING orgresources deletes all orgresources permanently, so please ensure that it is the desired operation before proceeding.

Configuration

There is one set of FM_ReactLogin application settings for each organization:

• FM_LoginApis Login API Groups Permitted: The Name of the API groups that this organization is permitted to use
• FM_ReactLogin Browser Check String: The string used to control browser-update.org that is part of the requirement check (see documentation below)

Usage

Configuration for building the login page is done via the login-config.json file.

• The default login-config file is found in \includes\modules\FM_ReactLogin\defaultConfig (this file should NOT be edited)
• For custom login pages, this file is located in the FM_ReactLogin folder within the orgresources directory for the organizations

Refer to the API documentation for setting up the login-config.json file.

Requirements check

Module supports checks for:

• Out-dated browsers
• Browsers that are no longer supported by the vendor
• Flash plugin with minimum flash version
• Browser is blocking popups

Enabling Flash and Popup Checks

Checks are enabled in the login-config.json file found in the FM_ReactLogin directory of the organization's orgresources folder. By default, checks for flash and popups are disabled. To enable them, change the following variables in the JSON file:

• showFlashWarning - boolean value, false by default, set to true to enable flash check
• minFlashCheck - (optional) integer value, 1 by default, requires showFlashWarning to be true, sets the minimum version of flash
• popupAlert - boolean value, false by default, set to true to enable popup check

If these values are not found in the settings file, they are set to their default values in the code.

WARNING: Flash and popup checks can interfere with a site's current CSS, it should be tested locally on a VM before it is enabled!

Enabling Browser Check

Browser check is enabled by default, and is controlled by an application setting called FM_ReactLogin Browser Check String. FM_ReactLogin is specific to an organization, and therefore this browser string needs to be edited for each organization individually.

The default string is notify:{i:-5,f:-4,o:-4,s:-2,c:-4},insecure:true,unsupported:true,api:5, which is converted to JavaScript in the index file for FM_ReactLogin when the page loads. To disable a browser check, the string nomessage: false can be added to this string.

In depth documentation of the browser check string can be found here. Please refer to browser-update.org for the full documentation on browser-update. Browser update has been tested on all of our current login pages and should not interfere with the site's CSS.

PROTIP: If you want force the browser-update message on a page, append #test-bu to the URL and refresh the page. This will not work however if the browser update has been disabled.

Disabling

1. Visit manage page: https://badger.icomproductions.ca/includes/modules/FM_ReactLogin/manage.php
2. Download current config (if applicable)
3. Edit similar to attached package below (badger-daylighting_orgresources)
4. Browse & Update

Limitation

Module cannot be installed globally, and can only be used for a single organization. Currently, multiple organizations cannot share the same login configuration.

FAQ

1. I only see "UNDER CONSTRUCTION" page on the login page.
   1. This means the login page is not set up yet. Please talk to the Tech developer who is working on it.