Customer Self-Care Web UI

Development

Please follow these steps to set up a development environment for ngcp-csc-ui.

Node and npm

First make sure you have Node.js and npm installed, and then install and build the app.

1. Install latest Node.js v6 and npm v3. It's recommended to install and use nvm to make sure you're using the right versions

2. Clone the ngcp-csc-ui repo locally

3. Run npm install

   npm install

4. Build the app for dev

   npm run dev-build

Vagrant

To run this app you also need to have a vagrant-ngcp environment up and running.

1. Go to your local vagrant-ngcp folder, for example

   cd ~/Sipwise/mr/vagrant-ngcp

2. Spin up a new vagrant box

   ./v n pro1

3. SSH into vagrant box and become root

   ./v s pro1 sudo -s

4. Edit config.yml

   vim /etc/ngcp-config/config.yml

5. Enable csc by finding the the "http_csc:" section of the file, and setting "csc_js_enable:" to yes

   csc_js_enable: yes

6. Run ngcpcfg apply

   ngcpcfg apply 'Enable http_csc'

7. Navigate into the vagrant shared local folder (configured via custom_config file in local vagrant-ngcp/users.d/ folder) and execute dev.sh script to set up symlink between local built files and vagrant files served via nginx

   cd /usr/local/devel/ngcp-csc-ui/ ./dev.sh

You can now access ngcp-csc-ui in browser by using the url provided by the vagrant script.

PBX Customer

You need a pbx subscriber to be able to access the pbx config specific modules in ngcp-csc-ui as a user. To create a pbx subscriber we first need to enable pbx in vagrant.

1. SSH into the vagrant box and become root

   ./v s pro1 sudo -s

2. Edit config.yml

   vim /etc/ngcp-config/config.yml

3. Enable csc by finding the "pbx:" section of the file, and setting "enable:" to yes

   enable: yes

4. Enable write access for subscriberadmins by adding "write" to subscriber privileges as in the following example

       www_admin
         privileges:
           subscriberadmin:
             subscribers:
             - write
   

5. Run ngcpcfg apply

   ngcpcfg apply 'Enable pbx'

6. Log in to ngcp-panel with administrator credentials

7. Go to Settings > Customers

8. Look for customer row with "Cloud PBX Account" written in "Product" column, and click "Details" for that row

9. Go to Subscribers, and click "Create Subscribers". It's good to note that the first subscriber we create becomes the "pilot" for this customer

10. In the "Domains" section, select the row with your local vagrant ip address shown in the "Domain" column

11. For E.164 Number input a dummy number, for example 43 12 34567

12. Input dummy "Display Name", "Email", "Web Username/Password", and "Sip Username/Password", and make sure to select "Administrative", then press "Save"

13. Create another subscriber. This new subscriber (and all subsequent ones) will then becomes a normal pbx subscriber

14. For normal subscribers input an extension in addition to the other fields mentioned above (including "Administrative"), then press "Save"

Now you can log in to csc with one of the normal subscriber you just created. URL for login is the same as for accessing ngcp-panel admin, except with csc suffix and no port specified:

https://<your-ip-address>/csc

Send Fax

You need to first enable faxserver and activate it for the subscriber, to be able to send a fax via the "action button menu".

1. By default, vagrant-ngcp has faxserver enabled by default in the config, so currently we do not need to make any changes here. Otherwise, it would be enabled via /etc/ngcp-config/config.yml by setting "faxserver: enable:" to "yes" and applying the changes with ngcpcfg apply 'enable faxserver'""
2. SSH in to vagrant box, become root, and then execute: dpkg-reconfigure exim4-config
3. Follow the install prompt by first choosing 'mail sent by smarthost; no local mail'
4. Then press enter for default sp1 selection, until you get asked for "IP address or host name of the outgoing smarthost:". There you enter mail.sipwise.com and press enter
5. For the rest of the prompts, press enter to choose the defaults
6. Log in to ngcp-panel with administrator credentials
7. Go to "Settings > Subscribers", find subscriber you want to use as caller, and click "Details"
8. Under "Master Data" click edit, and enter subscribers number also in the E164 field
9. Then go to "Preferences", and set "Fax2Mail and Sendfax" to active
10. Repeat the two steps above, this time for the callee
11. For the callee, you also need to add your internal sipwise email address as "Destination" under "Fax2Mail and Sendfax", and also under "Call Forwards" configure a "Call Forward Unconditional" to "Fax2Mail"
12. Additionally, the visibility of the fax option in "action button menu" is reliant on store state "sendFax: true" in src/store/user.js. This means it can be toggled off in the code as well if neeeded

How to add new npm package

1. Remove the package if you've already installed it

   npm remove <package> <--save-dev || --save>

2. Ensure that you have a clean node_modules folder rm -R node_modules/ npm install

3. Remove obsolete shrinkwrap file

   rm npm-shrinkwrap.json

4. Install new package(s)

   npm install packageA packageB --save-dev

5. Generate new shrinkwrap file including all dependencies

   npm shrinkwrap --dev

   You should see the following result in console:

   wrote npm-shrinkwrap.json

6. Add new shrinkwrap file to git

   git add .

Contributing

See our Contributing Guide file) for information on how to contribute.