User Manager/4/User Signup

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/publicID, 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:

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:

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

Replace #FF0000 with desired color code.

How to change logo

TODO

How to logo text

TODO

How to change form size

TODO

How to change text size

TODO

How to translate form titles

TODO

How to change button style

TODO

How to change form input size

TODO

How to align form on the left side

TODO

How to hide payment method selector

TODO

How to hide profile selector

TODO