Documentation for Minimal Viable Solution implementation of LearnDB with pgweb

Installation:

• Install IIS, following the instructions as described here under the heading "Add IIS Manager".
• Install the URL-rewrite 2.1 extension as described here under the heading "Setting up the reverse proxy for HTTPS connections".
  • Additional context for several steps:
    • Step 1:
      • Within IIS, open up the "Default Web Site" by expanding the tabs in the "Connections" window and double click on the site. The "Bindings..." option will appear in the "Actions" window on the far right, under the "Edit Site" tab.
    • Step 7:
      • Enter localhost:8081 into the only active input box, then stop after step 7. We do not need to allow "Rewrite the domain names of links in HTTP responses".
• Download/Install node.js with npm via this link. I used the Long Term Support version.
• Clone, (fork, or download) the temp branch of the LearnDB GitHub repo in order to work with the files locally.
  • To install the specific npm packages/modules required, navigate to the src fold of the LearnDB clone, then run the command npm install

How to Run each Service:

• pgweb:
  • Run from command line with the flag --sessions
• IIS:
  • Start from GUI. Search for iis in the windows search feature. Select "Internet Information Services (IIS) Manager"
  • Expand the tabs under the "Connections" window on the far left and navigate to and double click on "Default Web Site".
  • Click "Start" on the right-hand side in the "Actions" tab, underneath the "Manage Website" sub-tab.
• LearnDB node.js server for Change Password functionality:
  • In a command terminal, navigate to the src folder of the LearnDB clone, then run the command npm start.

Rules to Implement the html rewriting for the content of pgweb

Rules to Change the Title and Header of the page:

• Add an outbound blank rule titled "Change Title"
  • Set the "Pattern" field of the "Match" section to <title>pgweb</title>
  • Set the "Value" field of the "Action" section to <title>LearnDB</title>
• Add an outbound blank rule titled "Change Header"
  • Set the "Pattern" field of the "Match" section to <h1>pgweb</h1>
  • Set the "Value" field of the "Action" section to <h1>LearnDB</h1>

Rules to Reorganize the input boxes on the homepage:

• Add an outbound blank rule titled "Change Username Label to Database"
  • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Username</label>
  • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelDB">Database</label>
• Add an outbound blank rule titled "Change Username Input to Database Input"
  • Set the "Pattern" field of the "Match" section to <input type="text" id="pg_user" class="form-control" />
  • Set the "Value" field of the "Action" section to <input type="text" id="pg_db" name="inputDB" class="form-control" />
• Add an outbound blank rule titled "Change Password Label to Username"
  • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Password</label>
  • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelUsr">Username</label>
• Add an outbound blank rule titled "Change Password Input to Username Input"
  • Set the "Pattern" field of the "Match" section to <input type="password" id="pg_password" class="form-control" />
  • Set the "Value" field of the "Action" section to <input type="text" id="pg_user" name="inputUsr" class="form-control" />
• Add an outbound blank rule titled "Change Database Label to Password Label"
  • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Database</label>
  • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelPasswd">Password</label>
• Add an outbound blank rule titled "Change Database Input to Password Input"
  • Set the "Pattern" field of the "Match" section to <input type="text" id="pg_db" class="form-control" />
  • Set the "Value" field of the "Action" section to <input type="password" id="pg_password" name="inputPasswd" class="form-control" />

Rules to Add the "Change Password" link on the homepage:

• Add an outbound blank rule titled "Add Link to Change Password Server After Connect Button"
  • Set the "Pattern" field of the "Match" section to <button type="button" id="close_connection_window" class="btn btn-block btn-default">Cancel</button>
  • Set the "Value" field of the "Action" section to <button type="button" id="close_connection_window" class="btn btn-block btn-default">Cancel</button></div><div class="col-sm-12" name="divChangePasswd"><p class="help-block"><a href="http://localhost:5000">Change Password</a></p>

Rules to Add the "About" tab within the DB viewer of pgweb:

• Add an outbound blank rule titled "Add About Tab after Connections"
  • Set the "Pattern" field of the "Match" section to <li id="table_connection">Connection</li>
  • Set the "Value" field of the "Action" section to <li id="table_connection">Connection</li><li id="table_about">About</li>
• Add an outbound blank rule titled "Change pgweb's app.js to my js file to control the Tabs"
  • Set the "Pattern" field of the "Match" section to <li id="table_connection">Connection</li><li id="table_about">About</li>
  • Set the "Value" field of the "Action" section to <script type="text/javascript" src="http://localhost:5000/javascript/pgweb_app.js"></script>

Changes that I've made to the 'temp' branch explained:

The diff/comparison for the 'temp' branch vs the 'dev' branch is available here.

• I am hosting the static pgweb_app.js file that will replace pgweb's app.js file. This modification allows for the additional functionality of the "About" Tab within the DB viewer page. This file is located at src/client/javascript/pgweb_app.js. The specific changes to the javascript are minimal from pgweb's orignial file.
• I have changed the src/client/views/index.html file to include the version, so it that will appear more similar to the original pgweb html file.
• I have changed the src/client/css/index.css file to include the styling for the .version class.

Current short-comings/TO-DO for this implementation:

• Allow localhost:5000 for the node.js server to be rewritten as either a page or subdomain (example localhost/ChangePassword or changepassword.localhost)
• Possibly find a better alternative to manually changing the app.js file from pgweb and instead find a way to dynamically change it
• Double Check that https is enabled and that all connections can be secured