View source for User Manager/4/User Signup

{{Versions| 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 [[User Manager/4/User Signup #Page customization | design customization]] (since version 4.6)
* No user prefix used
* Each customer can change its own signup settings in [[User Manager/4/Customer page #Signup settings | 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 [[User Manager/4/Customer page #Customers | customer section]] of the customer web-page:
** Customer '''must''' have [[User Manager/4/Public ID | '''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  [[User Manager/4/Customer page #Signup settings | 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 [[User Manager/4/Customer page #Signup settings | '''sign-up email body''']] field definition

* Other conditions:
** Customer '''must''' have at least one [[User Manager/4/Profiles | profile]] - can be with price or without it (free profile)
** The subscriber '''must''' either have at least one [[User Manager/4/User payments #Supported payment methods | '''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 <code>/tool email</code>, command <code>"set server=xxx.xxx.xxx.xxx"</code>. 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 [[User Manager/4/Profiles | profile]]
** User chooses [[User Manager/4/User payments #Supported payment methods | 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 [[User Manager/4/User payments #Supported payment methods | 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 Manager/4/User page | 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 [[User Manager/4/Public ID | customers public id]].

Sign-up form will be shown:

[[Image:UserMan4SignupForm.png | 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 [[User Manager/4/Profiles | 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. [[User Manager/4/User payments #Supported payment methods | 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 [http://www.mikrotik.com/testdocs/ros/3.0/pnp/hotspot.php HotSpot Servlet Page] customization, but there are differences as well:
* [http://www.mikrotik.com/testdocs/ros/3.0/pnp/hotspot.php  HotSpot] supports multiple customized versions, every [http://www.mikrotik.com/testdocs/ros/3.0/pnp/hotspot.php  HotSpot] profile can use its own. In User Manager all the customers share the same customized page
* [http://www.mikrotik.com/testdocs/ros/3.0/pnp/hotspot.php 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 [http://en.wikipedia.org/wiki/Ftp FTP] or [http://en.wikipedia.org/wiki/SSH_file_transfer_protocol 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 [http://en.wikipedia.org/wiki/Html HTML] syntax highlighting could aid you. See: [http://en.wikipedia.org/wiki/HTML_Editor HTML Editors]
** If you use additional [http://en.wikipedia.org/wiki/Css CSS], [http://en.wikipedia.org/wiki/Javascript Javascript] and image files, save them into the same umfiles directory
** When using references to [http://en.wikipedia.org/wiki/Css CSS], [http://en.wikipedia.org/wiki/Javascript Javascript] or images, use <code>/umfiles/filename</code> as URL in HTML. Examples:
*** <code><img src="/umfiles/myImages.png" alt="" /></code>
*** <code><script type="text/javascript" src="/umfiles/myScript.js"></script></code>
*** <code><link rel="stylesheet" type="text/css" href="/umfiles/myStyle.css" /></code>
** There are some [[User Manager/4/User Signup #Used files | required files]], which cannot be deleted. And also there are some [[User Manager/4/User Signup #Used variables | 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:
* '''<code>signup.html</code>''' - 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 [http://en.wikipedia.org/wiki/HTML_form form input fields] must be included:
** <code><input type="hidden" name="signup" value="start" /></code> - this field indicates, that "Sign up" button has been pressed, better do not modify this line
** <code><input name="email" value="$(email)"/></code> - email address
** <code><input name="login" value="$(login)"/></code> - username
** <code><input type="password" name="password"/></code> - password
** <code><select name="buy_profile">..</select></code> - profile to be assigned. Profile select box is generated, by placing variable <code>$(profiles)</code> 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 <code>#buy_profile</code> and/or <code>.signup</code> in the [http://en.wikipedia.org/wiki/Css CSS]
** <code><input type="radio" name="pay_method"/></code> - payment method. Radio buttons with accessible payment methods is generated, by placing variable <code>$(methods)</code> 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 <code>#pm_paypal</code> and <code>pm_authnet</code> accordingly in the [http://en.wikipedia.org/wiki/Css CSS]
* '''<code>redirect.html</code>''' - 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
* '''<code>signup_pay_form.html</code>''' - 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 [http://en.wikipedia.org/wiki/Css CSS] stylesheets, images, [http://en.wikipedia.org/wiki/Javascript Javascript] files.

=== Used variables ===
The following variables will be replaces by actual values in all the above listed [http://en.wikipedia.org/wiki/Html HTML] scripts:
* <code>$(email)</code> - user email address
* <code>$(login)</code> - user login
* <code>$(profiles)</code> - available profile select box
* <code>$(methods)</code> - available payment method radio buttons
* <code>$(error)</code> - error message indicating result of the last action. Empty if there was no error
* <code>$(inputs)</code> - data sent to payment gateway
* <code>$(url)</code> - 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 <code>style.css</code> find block describing <code>body</code> style, change line containing <code>background-color</code>:
  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 [http://en.wikipedia.org/wiki/HTML_colors color code].

[[Image:UserMan4SignupCustomizeBgColor.png | sign-up form customization: red background]]

==== How to change form background color ====
In file <code>style.css</code> find block describing <code>.shadow-cnt</code> style, change line containing <code>background-color</code>:
  .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 [http://en.wikipedia.org/wiki/HTML_colors color code].

[[Image:UserMan4SignupCustomizeFormBg.png | sign-up form customization: blue form background]]

==== How to change logo  ====
In file <code>signup.html</code> find row defining logo image:
  <img src="/umfiles/logo.gif" alt="Mikrotik" />

Change <code>src</code> attribute to URL to logo image:
  <img '''src="http://www.routerboard.com/img/pricelist/165_m.png"''' alt="Mikrotik" />

[[Image:UserMan4SignupCustomizeLogo.png | 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".

[[Image:UserMan4SignupCustomizeLogoBig.png | sign-up form customization: resized logo]]

==== How to logo text  ====
In file <code>signup.html</code> find row defining logo title:

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

change it to desired text:

<pre>
<p id="logo_title">This is custom logo text</p>
</pre>
[[Image:UserMan4SignupCustomizeLogoTitle.png | sign-up form customization: logo title]]

Logo text can also contain an URL:
<pre>
<p id="logo_title">Visit <a href="http://mum.mikrotik.com/">MUM</a>!</p>
</pre>
[[Image:UserMan4SignupCustomizeLogoTitleURL.png | sign-up form customization: logo title with URL]]

==== How to change text size  ====
In file <code>style.css</code> find block describing <code>body</code> style, change line containing <code>font-size</code>:
  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 [http://www.w3schools.com/css/css_units.asp CSS size units] are also available.

[[Image:UserMan4SignupCustomizeTextSize.png | 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 <code>signup.html</code> search for "email" and replace it with translated word.

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

<pre>
  ...
              <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>
  ...
</pre>

[[Image:UserMan4SignupCustomizeTranslate.png | sign-up form customization: translation into German]]

==== How to change button style  ====
Edit file <code>style.css</code>, add style block for element <code>#btn_signup</code>. 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;
  }

[[Image:UserMan4SignupCustomizeButton.png | sign-up form customization: button style]]

==== How to change form input size  ====
In  file <code>style.css</code> edit style block for elements with class <code>.signup</code>:

  .signup {
    '''width: 200px;''' 
  }

200px means "200 pixels", change 200 to required size. Other [http://www.w3schools.com/css/css_units.asp CSS size units] are also available.

[[Image:UserMan4SignupCustomizeInputs.png | sign-up form customization: input size]]

==== How to align form on the left side  ====
In  file <code>style.css</code> edit style block for element <code>#cntr_continner</code>, change <code>margin-left</code> 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.

[[Image:UserMan4SignupCustomizeFormLeft.png | sign-up form customization: align form on the left side]]

==== How to hide payment method selector ====
First - you need to know, which  [[User Manager/4/User payments #Supported payment methods | payment methods]] are supported by the customer. Currently the only allowed methods are [http://www.paypal.com PayPal] and [http://www.authorize.net/ Authorize.Net].

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

  <tr class="top" id="method_row">
    <td align="right">
      pay with
    </td>
    <td align="left">
      $(methods)
    </td>
  </tr>

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:

    <td colspan="2" align="right">
      <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'''">

[[Image:UserMan4SignupCustomizeMethods.png | sign-up form customization: hide payment methods]]