back
08.08.2018

Login API: One design tool - many possibilities

What is worse – a badly designed login page or no login page at all? The answer is naturally no login page at all, because the worst case has to be granting every user access to the network with no form of authentication. A badly designed login page is, however, avoidable. You can quickly adapt it or create a completely customised design with the IACBOX Login API module. You can find out how to do this in the second part of our Login API in detail blog series. Do you already have something specific in mind? Then let’s get going!

We are currently in the WebAdmin (the administration interface of the IACBOX) in the Customer login / Customer-specific login page menu. The Customer-specific login (local Login API) is activated.

You can use the following steps for both the local Login API (included as standard in delivery) and the external variant (requires a separate licence).

Logo and background image

Do you want to use your own logo and background image for your login page? First of all, upload the two image files to htdocs/images. Right-click on htdocs/images to open the context menu. Select the menu item "Upload File". The images will appear in the directory.

Open the main configuration file under conf > main.config and edit the following two parameters:

logo = [logo file name]
background-image = [background image file name]

Example:
logo = login_logo.png
background-image = login_bg_full.jpg

Simple changes to the standard design

You can easily make simple changes to the standard design. You can find all the stylesheets used (.css files) in the directory htdocs/css. The standard classes are contained in the file named style.css. Open the file to view all the formats used by the login page. However, do not edit this file as future updates will otherwise not be possible.

Use the file style_overlay.css to make our changes. It can overwrite the standard classes in style.css. The file is empty as standard and is also integrated in the login page. If you want to create completely new files for styles, you will need to integrate them in the template htdocs/index_view.php.

Adding your own texts (multi-lingual texts are possible)

Do you want to welcome new guests or visitors to the network, inform them of opening times or share other information with them? All you have to do is simply add your own texts to the login page. Open the file index_view.php in the htdocs directory. Enter the following code at the place you want the text to appear:

<?php echo $this->translate('ihr-text'); ?>

Now add a meaningful translation placeholder next to your-text.
NOTE: The placeholder must be written in lowercase alphanumerical characters and contain hyphens instead of blank spaces.

You can find all the language files available for the Login API in the conf/lang directory. Open the desired language and add the placeholder and the corresponding translation.

Example:
German (de.lang)
ihr-text = sample text

English (en.lang)
your-text = sample text

You can add a language if it is not among the 25 listed languages. The file name must consist of the two-character ISO language code followed by the suffix ".lang". Right-click on the lang directory to add the new file. Now copy all translations from another .lang file and replace the displayed text with the new language. You need to enter the language name in the languages.lang file as shown in the following examples for the language to appear in the selection on the login page:

Examples:
lang-de = Deutsch
lang-it = Italiano

You now need to add the additional language code to config.languages.

plugins = ticket, status

# //// Languages //////////////////////////////////////////////////////////////////////////////////

# List of all available languages
languages = en, ar, id, zh, cs, da, de, es, fr, el, he, hr, it, ja, hu, nl, nb, pl, pt, ro, ru, sk, sl, sv, tr

# Fallback language
# Required
# String: two-letter language code like en, de, ...
fallback-language = en

Adapting the design of a login method

So far, you have added your logo, changed the login page to your colours and added text in all possible languages. Are you happy with how things are? No, the design of the login page doesn't quite match the rest of the website? No problem! You can change the appearance of the login methods and the standard class of plugins as described in the section Simple changes to the standard design.

Changes to the structure of a plugin can be made directly in HTML code in the file Iacbox/LoginApi/Plugin/[PluginName]/[PluginName].php.

Directory example:
Iacbox/LoginApi/Plugin/Free/free.php

Please note: If a plugin directory (e.g.: for the plugin PMS) contains two files (pms-local.php and pms.php) then the file with the suffix _local equates to the template file of the local Login API and the file without a special suffix equates to the external variant of the Login API.

You will also see the file [pluginName]_ttsel.php for plugins that require the selection of a ticket. This can also be adapted.

To add your own texts to plugins, please follow the instructions in the section Adding your own texts (multi-lingual texts are possible).

Your own design for the login page 

If the login page you want differs significantly from the template and the change options are inadequate, you have the option to design a completely customised login page with the Login API. This requires php knowledge.

Add a new file to the htdocs directory with a right-click and change the template parameter for this file under conf/main.config in the main configuration file.

Example:
template = example.php

This change causes your login page to appear on the Login API. Now design your new page by adding a style file (under htdocs/css). The following components of the original index_view.php are required to guarantee functionality:

<!DOCTYPE html>
<html>
<?php

use Iacbox\LoginApi\Core\Internal\EncodingHandler;
use Iacbox\LoginApi\Core\VisualPlugin;
use Iacbox\LoginApi\Core\AuthPlugin;
use Iacbox\LoginApi\Core\Session;

$locationId =  $loginApi->getLocationId();
?>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=11,IE=10,IE=9">
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/jquery.form-validator.min.js"></script>
<?php
	// output needed CSS and JS files for all VisualPlugins
	foreach ($loginApi->getPlugins() as $name => $plugin) {
		if ($plugin instanceof VisualPlugin) {
			$cssFiles = $plugin->getCssIncludes();
			if ($cssFiles != null) {
				foreach ($cssFiles as $f) {
					echo '<link rel="stylesheet" href="index.php?res='.EncodingHandler::base64UrlEncode($f).'" media="screen" type="text/css">'."\n";
				}
			}
			$jsFiles = $plugin->getJsIncludes();
			if ($jsFiles != null) {
				foreach ($jsFiles as $f) {
					$f = trim($f);
					echo '<script type="text/javascript" src="index.php?res='.EncodingHandler::base64UrlEncode($f).'"></script>'."\n";
				}
			}
		}
	}
?>
	<link rel="stylesheet" href="css/style_overlay.css" media="screen" type="text/css">
	<style>
		<div id="message-box" class="message-box">
			<noscript>
				<div class="alert alert-danger"><?php echo $loginApi->translate('error-activate-javascript'); ?></div>
			</noscript>
<?php
			if ($successMsgs != null) {
				foreach ($successMsgs as $msg) {
					echo '<div class="alert alert-success" role="alert">'.$msg.'</div>';
				}
			}

			if ($errorMsgs != null) {
				foreach ($errorMsgs as $msg) {
					echo '<div class="alert alert-danger" role="alert">'.$msg.'</div>';
				}
			}
?>
		</div>
<?php
	$inTabMode = true;
	if ($session == null || ! $session->clientDataAvailable) {
		// We're lacking state! Do the refresh call manually to avoid DOSing the box with automated calls - that's our Turing test ;)
		echo '<div class="no-session"><form id="no-session-form" method="POST" action="'.$_SERVER['PHP_SELF'].'?refresh=1">'
			.'<div onClick="$(\'form#no-session-form\').submit();" class="button session-btn">'.$loginApi->translate('session-expired-or-cookies-disabled-please-try-again').'</div></form></div>';

	} else if ($session->getState() != Session::ONLINE) {
		// NOTE: we use the pluginNames because they are exactely in the user defined order from the config file
		// If we would iterate of authPlugins directely the order can change what would be bad UX
		$pluginNamesSorted = $loginApi->getPluginNames();
		$authPlugins = $loginApi->getAuthPlugins();
		$currentAuthPlugin = $loginApi->getSession()->authPlugin;
		$inTabMode = count($authPlugins) <= 2;
?>

NOTE: Do NOT edit the Login API directly under index_view.php as it will otherwise not be updated or receive new changes.

You can find the first part of the Login API in detail series here.

Are you interested in wireless Internet access for guests, staff or things for your enterprise, or do you provide network solutions for clients? Drop a few lines to share your opinion with us: service@asteas.com

At Asteas, we see it as our task to shape wireless Internet access in networks efficient and legally conformant for the supplier, efficient and comfortable for the user and secure for both.

For more information, visit our website www.asteas.com or contact us here.

Accept
More information
This website uses cookies to improve its usability.