How To Install Setup The Client Portal

Collect! Credit and Collection Software™

Page Table of Contents

* Apache Configuration * Client-Side Configuration * User Levels * Runtime Configuration File * Server-Side Configuration

Related 'How To' Tutorials

* Install The Rest API * Install And Setup Apache * Install Setup The Client Portal * Install Setup The Consumer Portal * Setup TCN Chat In The Consumer Portal * Setup The Collect! Dashboard Portal * Update The API Based Portals

How To Install Setup The Client Portal

The Client Portal is web-based interface that allows Clients to access to their account and view the Debtors that have been placed by them. The configuration is divided into Client-Side Configuration, which which controls some UI elements, and Server-Side Configuration, which controls some functionality within the application.

This module is dependent on the Collect! REST API, which must be installed first. Please refer to the Help topics How to Install the REST API and How to Install and Setup Apache.

Apache Configuration

Apache is used to proxy the domain requests. This allows you to communicate on HTTPS for all requests, without having to open extra ports to the internet.

Please refer to the Help document How to Install and Setup Apache linked above for the instructions to install Apache. This section will go over the vhost configuration for the Client Portal.

C:\wamp64\bin\Apache\Apache2.4.#\conf\httpd.conf

Add defines for the domains.

Define DOMAIN_NAME_CLIENT client.yourdomain.com

C:\wamp64\bin\Apache\Apache2.4.#\conf\extras\httpd-vhosts.conf

Copy and paste the below into the bottom of the file.

<VirtualHost *:80>
  ServerName ${DOMAIN_NAME_CLIENT}
  ServerAlias ${DOMAIN_NAME_CLIENT}
  DocumentRoot "${INSTALL_DIR}/www"
  <Directory "${INSTALL_DIR}/www/">
    Options +Indexes +Includes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
  </Directory>

  <Directory "${INSTALL_DIR}/www/.well-known/">
    Require all granted
  </Directory>

  RewriteEngine on
  RewriteCond %{REQUEST_URI} '!/.well-known/acme-challenge/'
  RewriteCond %{HTTP:Upgrade} !=websocket [NC]
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=301]
</VirtualHost>

C:\wamp64\bin\Apache\Apache2.4.#\conf\extras\httpd-ssl.conf

Copy and paste the below into the bottom of the file.

<VirtualHost _default_:443>

# General setup for the virtual host
DocumentRoot "${INSTALL_DIR}/www"
ServerName ${DOMAIN_NAME_CLIENT}:443
ServerAdmin ${ADMIN_EMAIL}
ErrorLog "${SRVROOT}/logs/error.log"
TransferLog "${SRVROOT}/logs/access.log"
Header set X-Frame-Options sameorigin
Header set X-Content-Type-Options "nosniff"
Header set X-Permitted-Cross-Domain-Policies "none"
Header set Referrer-Policy "no-referrer"
Header set Cross-Origin-Resource-Policy "same-origin"
Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"

# SSL Engine Switch:
# Enable/Disable SSL for this virtual host.
SSLEngine on

# Server Certificate:
SSLCertificateFile "${SSL_FILE_PATH}/${DOMAIN_NAME_CLIENT}-crt.pem"

# Server Private Key:
SSLCertificateKeyFile "${SSL_FILE_PATH}/${DOMAIN_NAME_CLIENT}-key.pem"

# Server Certificate Chain:
SSLCertificateChainFile "${SSL_FILE_PATH}/${DOMAIN_NAME_CLIENT}-chain.pem"

<FilesMatch "\.(cgi|shtml|phtml|php)$">
  SSLOptions +StdEnvVars
</FilesMatch>
<Directory "${SRVROOT}/cgi-bin">
  SSLOptions +StdEnvVars
</Directory>

# SSL Protocol Adjustments:
BrowserMatch "MSIE [2-5]" \
      nokeepalive ssl-unclean-shutdown \
      downgrade-1.0 force-response-1.0

# Per-Server Logging:
CustomLog "${SRVROOT}/logs/ssl_request.log" \
        "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

ProxyPreserveHost On
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

</VirtualHost>

Final Steps

If Apache is already configured and running, then you need to comment out "Include conf/extra/httpd-ssl.conf" line in the httpd.conf file.
Restart the Apache service.
Setup SSL Certificates.
Uncomment "Include conf/extra/httpd-ssl.conf" in the httpd.conf file.
Restart Apache.

Client-Side Configuration

The Client-Side elements affect the User Interface. You will need to contact us to obtain the latest installation package.

Unpack the installation package into the {Collect}\bin\companion\ folder. This should result in {Collect}\bin\companion\client-portal.
Navigate to the Client Portal folder in Powershell Admin mode.

cd {Collect}\bin\companion\client-portal

Run the Setup Script.

./setup.ps1

Navigate to the CLI folder in Powershell Admin mode.

cd {Collect}\bin\companion\cli

Update and Seed the database.

node .\main.js database migrate:latest
node .\main.js database seed

Key in Y to the warning and push Enter.
Scroll up or down with the arrow keys on the keyboard until you find 08_default_client_settings.
Use the spacebar to select the 08_default_client_settings option.

Warning Note WARNING: Make sure that no other option is selected. Selecting the wrong option can cause damage.

Push Enter on the keyboard.
Open the {Collect}\bin\companion\client-portal\runtime-config.js file with a text editor.
Update the applicable values. See table below for more information.

User Levels

By default, Collect! uses Level 97 for Master (Parent) Clients and Level 98 for Regular (Subsidiary) Clients.

This client portal uses a mix of DATA Access Rights (begin with a # symbol) and User Interface Access Rights.

Please contact us for a script to help easily configure them.

Runtime Configuration File

This file is in JSON. If you are not familiar with JSON, stop and contact us for changes.

This is the hierarchy of the file:

apiUrl
company
- images
- support
login
disclaimer
theme
hideInactiveAccounts
useCollectDateFormat
headerHeight
lists

Key	Description
apiUrl	This value must be updated to point at the URL for the Collect! API Server. This portal requires the /api and version number in the URL. Example: https://api.yourdomain.com/api/v1/
company -> name	Enter your Company's Name.
company -> images -> favicon -> base64 company -> images -> logo -> base64	Both favicon and logo are optional. If nothing is supplied, the default Collect! images are used. To generate base64 strings for these images: Optimize the image using a service or application. Example: https://imageoptim.com/online Convert the optimized image to Base64. Example: https://www.base64-image.de/ Replace "undefined" with the applicable value for the favicon and/or logo.
company -> support -> email company -> support -> phone	Both email and phone are optional, but may be provided for display in the Collect! Consumer Portal.
login -> title login -> logo -> height	These options may not be visible. If that is the case, it will use the default height sizing. If you need to adjust the height, you can create the applicable JSON code and add a tag for width or height. JSON is comma separated. `login: { title: 'Client Portal', logo: { height: '60px', }, },`
disclaimer	The disclaimer is optional. If provided, the text will appear at the bottom of the login page. Note: This value is a string of HTML which will be displayed in the browser. Make sure to escape any quotation marks for proper display. To leave off, you can leave the code out of the file or set the text to undefined. Example: disclaimer: `Use of this site indicate acceptance of our terms.`,
theme	The Collect! Consumer Portal allows you to configure 5 colors. Update the primary color to match the theme of your website. The others can be left as default unless you want to change them. Example: `theme: { primaryColor: '#2BA3BB', errorColor: '#D93232', warningColor: '#f89939', successColor: '#A1BF2F', infoColor: '#3DD4F2', },`
hideInactiveAccounts	If set to TRUE, this option will hide Debtor accounts that do not have the mode of Active. Example: `hideInactiveAccounts: true,`
useCollectDateFormat	If set to TRUE, this option will force all date fields to use the date format specified in Collect!, rather than the user's default browser settings. Example: `useCollectDateFormat: true,`
headerHeight	If your logo has a larger height, you can set the height of the header bar to a higher value so your logo fits on the screen. If blank, a default height is used. Example: `headerHeight: '100px',`
lists lists -> table lists -> columns lists -> hideDefaultColumns	This section applies to the tabs on the Debtor and Client forms. When undefined, the system will display default columns for each record type. If you would like specific columns to appear in one or more lists, you can define them here. table: The table/record that you want to modify. columns: The columns to be added to the end of the default list. hideDefaultColumns: If TRUE, hide the default columns and only display the columns defined above. `lists: [ { table: "DEBTOR", columns: "de_email,de_number,de_principal", hideDefaultColumns: false: }, { table: "CONTACT", columns: "co_attachment,co_who_from,co_flags_2", hideDefaultColumns: false: }, ],`

Server-Side Configuration

Some features of the Consumer Portal are implemented server-side and their configuration options are stored in the Collect! database. These options can be modified on the administration page of the consumer portal which can be reached via the path: /auth/admin-login

Open https://api.yourdomain.com/configuration-portal in a web browser.
Sign in with an Operator with a User Level that has been designated as Manager.
Select Consumer Portal from the menu.
Update the values in the applicable fields.
Click Save Changes.

Key	Description
Import File Size	This option defines the maximum size of import files that can be uploaded in MB. If set to 0, the import file upload feature will be disabled.
Import File Types	This option defines which import file types can be uploaded. Additional types may be added by typing the file extension and pressing TAB on the keyboard.
Contact Plans - Create/Update	This option defines which contact plan will be run when the associated record type is created or updated. When you have update the rules, click Confirm. You MUST still click on Save Changes on the main form.

Was this page helpful? Do you have any comments on this document? Can we make it better? If so how may we improve this page.

Please click this link to send us your comments: helpinfo@collect.org