• The Dynamic Login Pages consist of four pages:
  • Desktop login page for CoovaChilli.
  • Mobile login page for CoovaChilli.
  • Desktop login page for Mikrotik.
  • Mobile login page for Mikrotik.
• These four pages each are a Sencha app which are managed and administered using Sencha cmd.
• We use Sencha cmd to build these apps after we made changes to the source files.
• Building the app is done in order to:
  • Reduce the JavaScript source files and packing it into fewer files.
  • Reduce the footprint and over the network size of the login page.
  • This result in a better user experience.
• By default there are pre-build tar files which you can simply extract and it should work just fine.
• There will however be times when you want to modify the default pages and then this Wiki page can be used as a reference.
• You would modify the default pages when:
  • You would like to use a different language than the default English on the tags and buttons.
  • You would like to include a payments option like PayPal
  • Change the layout or content of the default pages.
  • Modify the default themes of the login pages

• In order to prepare the build environment you will need a few things:
  • A Linux based machine on which you can check out the latest SVN of the rd_login_pages folder from the RADIUSdesk project on SourceForge.
  • A recent version of the Java Runtime Environment (JRE)
  • The ruby program.
  • The Sencha cmd program.
• We will use Ubuntu 14.04 running Nginx as our Linux server.
• Install the JRE using this instructions: http://ubuntuhandbook.org/index.php/2014/02/install-oracle-java-6-7-or-8-ubuntu-14-04/
• You don't need to use the above instructions and can search for your own but they worked well for me.
• Install the ruby program which will be user by Sencha cmd.

sudo apt-get install ruby

• The install of the Sencha cmd is a bit more involved since we will be installing two versions.
  • The 4.x version to be used for building the mobile pages. (The 5.x version of Sencha cmd seems to have a bug that prevents it from building the Mobile pages correct)
  • The 5.x version to be used for building the desktop pages.

• You can download the 4.x version of Sencha cmd here: http://www.sencha.com/products/sencha-cmd/download/sencha-cmd-4.0.2/
• The highest version seems to work just fine (3074/67)
• You can find even later versions of the 4.x release of Sencha cmd but the 4.0.4 one I've downloaded refused to install.
• After you downloaded the zip file do the following as a normal user to install it:

unzip SenchaCmd-4.0.2.67-linux-x64.run.zip
chmod 755 SenchaCmd-4.0.2.67-linux-x64.run
./SenchaCmd-4.0.2.67-linux-x64.run
#Depending on your environment you will get a GUI or text based installer asking you to accept an EULA

• The latest version of the Sencha cmd is 5.0.2.270 at the time of this writing.
• You can download it from this URL: http://www.sencha.com/products/sencha-cmd/download
• After you downloaded the zip file do the following as a normal user to install it:

unzip SenchaCmd-5.0.2.270-linux-x64.run.zip
chmod 755 SenchaCmd-5.0.2.270-linux-x64.run
./SenchaCmd-5.0.2.270-linux-x64.run
#Depending on your environment you will get a GUI or text based installer asking you to accept an EULA

• We first installed the 4.x version of Sencha cmd and then the version 5.x.
• We also installed it as a normal user which means they will be in that user's home directory under the bin directory.
• It may be a good option to reboot the machine or at least log out and in again to ensure the path environment has the latest changes.
• You can then as that user issue the following command to ensure you are ok with where everything is located:

#Check if the sencha command is in the path
sencha
#Check which binary it is using:
sencha which
#Navigate to the /home/<user>/bin/Sencha/Cmd/<4.x>/ directory
#Record the absolute path to the 4.x sencha binary e.g
/home/system/bin/Sencha/Cmd/4.0.2.67/sencha

• You should now know where are the two versions of the Sencha cmd and how to call them.
• The environment is now prepared to start building, all we need now is some Sencha apps which we will get next.

• We assume you have a install of RADIUSdesk on Ubuntu 14.04 running Nginx without the Dynamic Login Pages installed yet.
• Check out the latest code of the dynamic login pages under the /usr/share/nginx/html directory:

cd /usr/share/nginx/html
sudo svn checkout svn://dvdwalt@svn.code.sf.net/p/radiusdesk/code/trunk/rd_login_pages ./rd_login_pages

• Create symbolic links from the ext folder in the RADIUSdesk viewer component to the CoovaChilli and Mikrotik desktop login pages:

sudo ln -s /usr/share/nginx/html/rd/ext /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/ext
sudo ln -s /usr/share/nginx/html/rd/ext /usr/share/nginx/html/rd_login_pages/desktop/Mikrotik/ext

• Extract the touch.tar.gz file included under the /rd_loginpages/mobile/CoovaChilli folder:

cd /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli
sudo tar -xzvf ./touch.tar.gz

• Create a symbolic link from the touch folder in the rd_login_pages/mobile/CoovaChilli directory to the Mikrotik mobile login page:

sudo ln -s /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/touch /usr/share/nginx/html/rd_login_pages/mobile/Mikrotik/touch

• Change the ownership of the login pages to be that of the user who you installed the Sencha cmd as. Our user is called system.

sudo chown -R system. /usr/share/nginx/html/rd_login_pages

• Issue the following command - remember your path to the Sencha cmd binary will most likely differ:

cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
/home/system/bin/Sencha/Cmd/5.0.2.270/sencha app build

• From the output you will see something like this:

[WRN] The application was last modified by an older version of Sencha Cmd (5.0.1.231), current is 5.0.2.270. Please run 'sencha app upgrade -noframework' to update to 5.0.2.270.

• This means that the sencha app you pulled from SVN was created with an older version of Sencha cmd.
• Go ahead and update your app to work best with the current 5.x version of sencha cmd:

cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
/home/system/bin/Sencha/Cmd/5.0.2.270/sencha app upgrade -noframework

• After that you can build your app again:

cd /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli
/home/system/bin/Sencha/Cmd/5.0.2.270/sencha app build

• The warning should now be gone.
• Unfortunately there will now be a new list of warnings

....
[WRN] C1014: callParent has no target (this.callParent in Ext.ux.TabCloseMenu.onBeforeDestroy) -- /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/ext/src/ux/TabCloseMenu.js:85
....

• These does not seem to break the build but it is annoying and has been reported to Sencha: http://www.sencha.com/forum/showthread.php?289764-Sencha-Cmd-v5.0.1.231-shows-warning-against-Ext-JS-5.0.1

• There is one last thing that you have to do. Clean up after Sencha cmd
• These all apply only to the desktop login pages.
• The index.html page which is generated by Sencha cmd does not have the css included.
• Edit the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/build/production/CoovaChilli/index.html file to include the custom css.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>Login</title>
<link rel="stylesheet" href="resources/CoovaChilli-all.css"/>
<link rel="stylesheet" href="resources/css/login.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

• Finally the bootstrap.css file also needs to be returned to normal

cp /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/bootstrap.css.orig /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/bootstrap.css

• The newly build page will live at:
• http://127.0.0.1/rd_login_pages/desktop/CoovaChilli/build/production/CoovaChilli/index.html

• Issue the following command - remember your path to the Sencha cmd binary will most likely differ:

cd /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli
/home/system/bin/Sencha/Cmd/4.0.2.67/sencha app build

• From the output you will see something like this:

The application was last modified by an older version of Sencha Cmd (4.0.1.45)
the current is 4.0.2.67.
Please run "sencha app upgrade" to update to 4.0.2.67.

• This means that the sencha app you pulled from SVN was created with an older version of Sencha cmd.
• Go ahead and update your app to work best with the current 4.x version of sencha cmd:

cd /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli
/home/system/bin/Sencha/Cmd/4.0.2.67/sencha app upgrade -noframework

• After that you can build your app again:

cd /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli
/home/system/bin/Sencha/Cmd/4.0.2.67/sencha app build

• The warning should now be gone.

• There is one last thing that you have to do. Copy the custom CSS file over to the build directory
• These all apply only to the mobile login pages.

cp /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/resources/css/login.css /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/build/production/CoovaChilli/resources/css/

• The newly build page will live at:
• http://127.0.0.1/rd_login_pages/mobile/CoovaChilli/build/production/CoovaChilli/index.html

• Now that you have the build environment set-up and confirmed that the build process works as intended refer to the other Wiki pages to:
  • Change the theme of the Login Page
  • Incorporate PayPal.
  • Modify the Language.