Add playable version to UI and in config file.

client/app/main/main.component.js

@@ -5,8 +5,10 @@ import routing from './main.routes';
 export class MainController {
 
   /*@ngInject*/
-  constructor($http) {
+  constructor($http, $scope, appConfig) {
+    'ngInject';
     this.$http = $http;
+    $scope.appVersion = appConfig.version;
   }
 }
 

client/app/main/main.html

@@ -1,8 +1,8 @@
 <header class="hero-unit" id="banner">
   <div class="container">
-    <p style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<span class="-rotate-90" style="font-size: 70px;">A</span>ble</p>
+    <p style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<span class="-rotate-90" style="font-size: 70px;">A</span>ble <span style="color: darkgrey; font-size: small"> {{ appVersion }}</span></p>
     <p class="lead"><a style="color:#d9534f;" href="http://www.ansible.com" target="_blank">Ansible</a> Playbook generator and orchestrator</p>
-    <img src="assets/images/Button-1-play-icon.png" alt="I'm Yeoman">
+    <img src="assets/images/Button-1-play-icon.png" alt="I'm Playable">
   </div>
 </header>
 
@@ -101,11 +101,11 @@
           <i class="fa fa-send" aria-hidden="true"></i> <a href="mailto:mmumshad@gmail.com">  mmumshad@gmail.com </a>
           <i class="fa fa-twitter" aria-hidden="true"></i> <a href="https://twitter.com/mmumshad">  @mmumshad </a>
           <br>
-          I am a Cloud Computing Solutions Architect and an Ansible Enthusiast. This is a fun project that I think will help Ansible users. I Look forward to working with you in maintaining and improving this open-source platform.
+          I am an Ansible Enthusiast. This is a fun project that I think will help Ansible users. I Look forward to working with you in maintaining and improving this open-source platform.
         </div>
       </div>
       <div layout="row" layout-align="center" style="text-align: center;margin-top:30px;" class="layout-align-center-stretch layout-row">
-        <div class="alert alert-danger">This is a proof-of-concept implementation. This is only to be used for testing purpose and NOT to be used in production.</div>
+        <div class="alert alert-danger">This is a proof-of-concept implementation and is in Alpha version. This is only to be used for testing purpose and NOT to be used in production.</div>
       </div>
     </div>
   </div>

client/components/navbar/navbar.component.js

@@ -23,12 +23,13 @@ export class NavbarComponent {
 
   isCollapsed = true;
 
-  constructor(Auth) {
+  constructor(Auth, appConfig) {
     'ngInject';
 
     this.isLoggedIn = Auth.isLoggedInSync;
     this.isAdmin = Auth.isAdminSync;
     this.getCurrentUser = Auth.getCurrentUserSync;
+    this.appVersion = appConfig.version;
   }
 
 }

client/components/navbar/navbar.html

@@ -1,7 +1,7 @@
 <div class="navbar navbar-default navbar-static-top">
   <div class="container">
     <div class="navbar-header">
-      <a href="/" class="navbar-brand"><small><span style="font-size:25px;font-family:'ExpletusSans-Regular'">play<span style="font-size:35px;">A</span>ble</span></small></a>
+      <a href="/" class="navbar-brand"><small><span style="font-size:25px;font-family:'ExpletusSans-Regular'">play<span style="font-size:35px;">A</span>ble</span></small> <span style="color: darkgrey; font-size: small">{{ $ctrl.appVersion }}</span></a>
       <button class="navbar-toggle" type="button" ng-click="$ctrl.isCollapsed = !$ctrl.isCollapsed">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>

server/config/environment/shared.js

@@ -1,6 +1,7 @@
 'use strict';
 
 exports = module.exports = {
+  version: 'Alpha',
   // List of user roles
   userRoles: ['guest', 'user', 'admin'],
   'scriptEngine' : {