Display the version in the web interface

In the settings drop-down this adds an “About” section that also shows
the commit if "exposeVersion" is set to true.

Fixes #2968

settings.json.template

@@ -409,7 +409,7 @@
   */
 
   /*
-   * Expose Etherpad version in the Server http header.
+   * Expose Etherpad version in the web interface and in the Server http header.
    *
    * Do not enable on production machines.
    */

src/node/utils/Settings.js

@@ -292,7 +292,7 @@ exports.scrollWhenFocusLineIsOutOfViewport = {
 };
 
 /*
- * Expose Etherpad version in the Server http header.
+ * Expose Etherpad version in the web interface and in the Server http header.
  *
  * Do not enable on production machines.
  */

src/static/css/pad.css

@@ -938,6 +938,13 @@ input[type=checkbox] {
   outline: none;
   width: 120px;
 }
+.row {
+  float: left;
+  width: 100%;
+}
+.row + .row {
+  margin-top: 15px;
+}
 .column {
   float: left;
   width:50%;

src/templates/pad.html

@@ -127,6 +127,7 @@
 
         <div id="settings" class="popup">
             <h1 data-l10n-id="pad.settings.padSettings"></h1>
+            <div class="row">
               <div class="column">
                   <% e.begin_block("mySettings"); %>
                   <h2 data-l10n-id="pad.settings.myView"></h2>
@@ -203,6 +204,13 @@
                   <% e.end_block(); %>
               </div>
             </div>
+            <div class="row">
+              <h2 data-l10n-id="pad.settings.about">About</h2>
+              <span data-l10n-id="pad.settings.poweredBy">Powered by</span>
+              <a href="http://etherpad.org">Etherpad-lite</a>
+              <% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
+            </div>
+        </div>
 
         <div id="import_export" class="popup">
             <h1 data-l10n-id="pad.importExport.import_export"></h1>