User Manager/4/User Signup

Applies to RouterOS: v4.x test and v5.x packages

Usually user accounts are created by customers. But users can also sign-up by filling in the sign-up form. This feature is available since version 4.5 (2.9.31 in old version of User Manager).

New in version 4.x

• It is possible to sign up using free profile without payment
• Signup page design customization (since version 4.6)
• No user prefix used
• Each customer can change its own signup settings in Signup setting tab without need of subscriber (root customer) intervention

Setup

User sign-up can be enabled per customer. I.e., some customers can allow it while others don't.

Sign-up is disabled by default. To enable it several requirements must be met:

• Configuration in customer section of the customer web-page:
  • Customer must have public ID
  • If users access sign-up page from a local address which is not accessible from outside (global Internet) and use payment to buy profile which is not free customer must have public host address configured. This address is needed by PayPal and Authorize.Net, payment response will be sent to it
  • The customer should have email address specified. Email will be send to users who sign up (if the user specifies his/her email address) using this as from-address

• Configuration in Signup setting tab of the customer web-page:
  • The customer must enable sign-up by checking the "Signup allowed" box. This box is also available in customer detail form
  • Signup email subject and body can be personalized. There are defaults defined, but one can customize them. However there are constant strings (will be replaced by actual values) that must be present within the message body. See sign-up email body field definition

• Other conditions:
  • Customer must have at least one profile - can be with price or without it (free profile)
  • The subscriber must either have at least one payment method enabled and configured or have free profile which does not require payment
  • SMTP-server should be specified. It can be done via console, under /tool email, command "set server=xxx.xxx.xxx.xxx". This SMTP server will be used to send email reminding user's account data. Users can however log on to the HotSpot after a successful payment without receiving this email

Sign up steps

User sign-up can divided in following steps:

• Customer configures required parameters (described above);
• User creates an account:
  • User opens sign-up page URL in the browser
  • User fills in the sign-up form
  • User chooses profile
  • User chooses payment method
  • An inactive account is created for the user
• User activates the account in one of the following ways:
  • If the profile is free, account is activated automatically
  • If the profile has a price, payment must be made:
    • User is redirected to Payment Gateway
    • The payment is being processed
    • Payment gateway sends response (was the payment successful or not) to User Manager router
    • The account gets activated (if the payment was successful);
• User can start using services. Status check and setting change can be done in the user web-page.

Creating account

User opens http://routerIP/user/signup, where routerIP must be replaced with the IP address or host name of the User Manager router and publicID must be replaced with customers public id.

Sign-up form will be shown:

sign-up form

Input fields:

• email. Email address for user account. Account data will be sent to this address if one specified;
• login. Desired username. It must be at least 3 characters long.
• password. Self explanatory;
• confirm password. Password once again to reduce possibility to mistype it;
• time (price). The initial profile for the user account. Price is shown in braces. 0.00 indicates that profile is free of charge and no payment will be processed ;
• pay with. Payment method selector.

After the "Sign up" button is pressed, an inactive account is being created and the user is redirected to payment gateway.

Page customization

It is possible to customize default Signup page design, by uploading your own HTML, CSS and image files directly onto the router.

User Manager Signup page customization is similar to HotSpot Servlet Page customization, but there are differences as well:

• HotSpot supports multiple customized versions, every HotSpot profile can use its own. In User Manager all the customers share the same customized page
• HotSpot provides conditional customization with $(if ...), User Manager has simpler interface, using only predefined variables, without conditional blocks

Customization steps

To customize signup pages, follow these steps:

• Signup page must be accesses at least once, because template files are created on first request. Therefore open signup page in your browser. If you have opened signup page previously, skip this step
• Log in to your router using FTP or SFTP and download "umfiles" directory containing all required files to your computer. If there is no "umfiles" directory, see previous step
• Edit the files using text editor of your choice. Editors supporting HTML syntax highlighting could aid you. See: HTML Editors
  • If you use additional CSS, Javascript and image files, save them into the same umfiles directory
  • When using references to CSS, Javascript or images, use /umfiles/filename as URL in HTML. Examples:
    • <img src="/umfiles/myImages.png" alt="" />
    • <script type="text/javascript" src="/umfiles/myScript.js"></script>
    • <link rel="stylesheet" type="text/css" href="/umfiles/myStyle.css" />
  • There are some required files, which cannot be deleted. And also there are some variables which can be included in the HTML files, but are optional
• Upload "umfiles directory" containing modified files from your computer back to the router. Replace any files having equal names
• That's it! Refresh signup page in your browser and see if you get the expected result!
• In case something has went wrong and you want to restore original files, you can just delete "umfiles" directory from the router and refresh signup page in the browser - default templates will be restored

Used files

There are several predefined files required for successful signup:

• signup.html - main HTML file, used when the user opens signup page. Contains form where user fills in email, username, password, chooses profile and payment method. This file is free for modifications, but the following form input fields must be included:
  • <input type="hidden" name="signup" value="start" /> - this field indicates, that "Sign up" button has been pressed, better do not modify this line
  • <input name="email" value="$(email)"/> - email address
  • <input name="login" value="$(login)"/> - username
  • <input type="password" name="password"/> - password
  • <select name="buy_profile">..</select> - profile to be assigned. Profile select box is generated, by placing variable $(profiles) in the HTML file. Although it is possible to specify profiles manually, it is recommended to use this variable and let the User Manager choose, which profiles are available for signup. To customize design of profile select box, specify style for #buy_profile and/or .signup in the CSS
  • <input type="radio" name="pay_method"/> - payment method. Radio buttons with accessible payment methods is generated, by placing variable $(methods) in the HTML file. Although it is possible to specify methods manually, it is recommended to use this variable and let the User Manager choose, which payment methods are available for signup. To customize design of Paypal and Authorize.Net radio buttons, specify style for #pm_paypal and pm_authnet accordingly in the CSS
• redirect.html - used to redirect user to User page after successful assignment of free profile, which does not require payment. It is recommended not to modify this file
• signup_pay_form.html - used to redirect user to payment gateway. It is recommended not to modify this file

In addition to above mentioned, other files (which are referenced from the predefined ones) can be stored in "umfiles" directory - for example, custom CSS stylesheets, images, Javascript files.

Used variables

The following variables will be replaces by actual values in all the above listed HTML scripts:

• $(email) - user email address
• $(login) - user login
• $(profiles) - available profile select box
• $(methods) - available payment method radio buttons
• $(error) - error message indicating result of the last action. Empty if there was no error
• $(inputs) - data sent to payment gateway
• $(url) - url used for redirect, contains return url after successful signup/payment. By default, url to User page is used

Customization Examples

How to change background color

In file style.css find block describing body style, change line containing background-color:

 body {
   margin: 0px;
   padding: 0px;
   background-color: #FF0000;
   color: #788180;
   font-family: verdana,helvetica,sans-serif;
   font-size: 11px; 
   text-align: left !important;
 }

Color #FF0000 means "red", replace it with desired color code.

sign-up form customization: red background

How to change form background color

In file style.css find block describing .shadow-cnt style, change line containing background-color:

 .shadow-cnt {
   background-color: #00FF00;
   border: 1px solid #808080; 
   padding: 10px 20px;
   margin: -6px 6px 6px -6px !important;
   margin: 0;
 }

Color #00FF00 means "green", replace it with desired color code.

sign-up form customization: blue form background

How to change logo

In file signup.html find row defining logo image:

 <img src="/umfiles/logo.gif" alt="Mikrotik" />

Change src attribute to URL to logo image:

 <img src="http://www.routerboard.com/img/pricelist/165_m.png" alt="Mikrotik" />

sign-up form customization: logo

If the image is too big and you want to resize it, you can specify width for it:

 <img src="http://www.mikrotik.com/img/mfm/button_cr.png" width="150px" alt="Mikrotik" />

150px means "width of 150 pixels".

sign-up form customization: resized logo

How to logo text

In file signup.html find row defining logo title:

<p id="logo_title">RouterOS User Manager</p>

change it to desired text:

<p id="logo_title">This is custom logo text</p>

sign-up form customization: logo title

Logo text can also contain an URL:

<p id="logo_title">Visit <a href="http://mum.mikrotik.com/">MUM</a>!</p>

sign-up form customization: logo title with URL

How to change text size

In file style.css find block describing body style, change line containing font-size:

 body {
   margin: 0px;
   padding: 0px;
   background-color: #FF0000;
   color: #788180;
   font-family: verdana,helvetica,sans-serif;
   font-size: 14px;
   text-align: left !important;
 }

14px means "14 pixels", change 14 to required size. Other CSS size units are also available.

sign-up form customization: text size

How to translate form titles

To translate text, just find it in HTML files and replace with translated version. For example, to translate word "email" in first page, open file signup.html search for "email" and replace it with translated word.

Here is an example of signup page translated (using http://translate.google.com) into German:

  ...
              <div class="shadow-cnt">
                <div id="cntr_logo">
                  <img src="/umfiles/logo.gif" alt="Mikrotik" />

                  <p id="logo_title">RouterOS User Manager</p>
                </div>                
                <table class="cntr_tbl">
                  <tr>
                    <td align="right">
                      E-Mail
                    </td>

                    <td align="left">
                      <input type="text" id="sf_email" name="email" 
                             class="signup" value="$(email)" maxlength="100">
                    </td>
                  </tr>
                  
                  <tr>
                    <td align="right">
                      Benutzername
                    </td>
            
                    <td align="left">
                      <input type="text" 
                             name="login" id="sf_user" maxlength="100"
                             value="$(login)" class="signup" />
                    </td>
                  </tr>

                  <tr>
                    <td align="right">
                      Kennwort
                    </td>
    
                    <td align="left">
                      <input type="password" name="password" id="sf_pwd"
                             class="signup" maxlength="50">
                    </td>
                  </tr>

                  <tr>
                    <td align="right">
                      Kennwort bestätigen
                    </td>

                    <td align="left">
                      <input type="password" name="confirm_password" id="sf_cnf_pwd"
                             class="signup" maxlength="50">
                    </td>
                  </tr>

                  <tr class="top">
                    <td align="right">
                      <br />
                      <b>Prepaid-Zeit</b>
                    </td>
                  </tr>

                  <tr class="top">
                    <td align="right">
                      Zeit (Preis)
                    </td>
      
                    <td align="left">
                      $(profiles)
                    </td>
                  </tr>

                  <tr class="top" id="method_row">
                    <td align="right">
                      Zahlen mit
                    </td>

                    <td align="left">
                      $(methods)
                    </td>
                  </tr>

                  <tr>                
                    <td colspan="2" align="right">
                      <input type="submit" name="btn_signup" value="Registrieren">
                    </td>
                  </tr>

                  <tr>                
                    <td colspan="2" align="center">
                      <p class="signuperror">$(error)</p>
                    </td>
                  </tr>
                </table>          
              </div>
  ...

sign-up form customization: translation into German

How to change button style

Edit file style.css, add style block for element #btn_signup. For example, to assign blue background, yellow text color and dashed black border to the button, add the following lines:

 #btn_signup {
   width: 100px;
   background-color: #00cccc;
   border: 2px dashed black;
   color: yellow;
 }

sign-up form customization: button style

How to change form input size

In file style.css edit style block for elements with class .signup:

 .signup {
   width: 200px; 
 }

200px means "200 pixels", change 200 to required size. Other CSS size units are also available.

sign-up form customization: input size

How to align form on the left side

In file style.css edit style block for element #cntr_continner, change margin-left attribute:

 #cntr_continner {
   width: 320px;
   height: 305px;
   margin-left: 10px;
   margin-right: auto;
   padding: 5px;
 }

10px means "10 pixels margin on the left side", change 10 to required size.

sign-up form customization: align form on the left side

How to hide payment method selector

First - you need to know, which payment methods are supported by the customer. Currently the only allowed methods are PayPal and Authorize.Net.

If you want to use one (default) payment method and do not display any radio buttons, you can edit file signup.html by deleting the following lines:

     pay with

     $(methods)

and inserting hidden form field containing information about payment method. For example, to use PayPal, add the following line right before submit button code: <input type="hidden" name="pay_method" value="2"> I.e. the result should look like this:

     <input type="hidden" name="pay_method"  value="2">
     <input type="submit" name="btn_signup" id="btn_signup" value="Sign up">

To use Authorize.Net, just change the value of the pay_method input to 1:

     <input type="hidden" name="pay_method"  value="1">

sign-up form customization: hide payment methods