refactor build config

src/browser/main/tpls/directives/side-nav.tpl.html

@@ -0,0 +1,35 @@
+<div class="current-user">
+  <div ng-if="vm.currentUser">
+    <img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
+    <a href ng-bind="vm.currentUser.name"></a>
+    <span class="nav-control-group pull-right">
+      <a ui-sref="settings" class="btn btn-sm btn-default" ui-sref-active="active"}"><i class="fa fa-gears fa-fw"></i></a>
+      <a href class="btn btn-sm btn-default" ng-click="vm.signOut()"><i class="fa fa-sign-out fa-fw"></i></a>
+    </span>
+
+  </div>
+  <div ng-if="!vm.currentUser">
+    <span>Guest</span>
+
+    <span class="nav-control-group pull-right">
+      <a class="btn btn-sm btn-default" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i></a>
+      <a class="btn btn-sm btn-default" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i></a>
+    </span>
+
+  </div>
+</div>
+
+<ul class="nav nav-pills nav-stacked">
+  <li>
+    <a btn-new-snippet href="#"><i class="fa fa-plus-square-o"></i> New Snippet</a>
+  </li>
+  <li class="divider"><hr></li>
+  <li>
+  </li>
+  <li ui-sref-active="active">
+    <a ui-sref="home"><i class="fa fa-home"></i> Home</a>
+  </li>
+  <li ui-sref-active="active">
+    <a ui-sref="snippets"><i class="fa fa-code"></i> Snippets</a>
+  </li>
+</ul>

src/browser/main/tpls/modals/delete-snippet-modal.tpl.html

@@ -0,0 +1,16 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Delete Snippet</h4>
+  </div>
+
+  <div class="modal-body">
+    <p>
+      Are you sure to delete it?
+    </p>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-danger">Delete It</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/modals/edit-snippet-modal.tpl.html

@@ -0,0 +1,49 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Edit Snippet</h4>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <textarea ng-model="vm.snippet.description" name="description" class="form-control" placeholder="Description..."></textarea>
+    </div>
+    <div class="form-group">
+        <input ng-model="vm.snippet.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Callsign">
+
+        <ui-select ng-model="vm.snippet.mode" style="display: inline-block;" theme="bootstrap">
+          <ui-select-match placeholder="Select Type">{{$select.selected}}</ui-select-match>
+          <ui-select-choices repeat="mode in vm.aceModes | filter:$select.search">
+            <div ng-bind-html="mode | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+    </div>
+
+    <div class="form-group">
+      <div
+        ui-ace="{
+          mode: vm.snippet.mode.toLowerCase(),
+          theme:'solarized_dark',
+          useWrapMode : true
+
+        }"
+        ng-model="vm.snippet.content"
+      ></div>
+    </div>
+
+    <div class="form-group">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.snippet.Tags" theme="bootstrap">
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
+        <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
+         refresh-delay="200">
+          <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-primary">Submit</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/modals/new-snippet-modal.tpl.html

@@ -0,0 +1,49 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>New Snippet</h4>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <textarea ng-model="vm.description" name="description" class="form-control" placeholder="Description..."></textarea>
+    </div>
+    <div class="form-group">
+        <input ng-model="vm.callSign" type="text" name="callSign" class="inline-form-control" placeholder="Callsign">
+
+        <ui-select ng-model="vm.mode" style="display: inline-block;" on-select="vm.log(vm.mode.name.toLowerCase())" theme="bootstrap">
+          <ui-select-match placeholder="Select Type">{{$select.selected}}</ui-select-match>
+          <ui-select-choices repeat="mode in vm.aceModes | filter: $select.search">
+            <div ng-bind="::mode"></div>
+          </ui-select-choices>
+        </ui-select>
+    </div>
+
+    <div class="form-group">
+      <div
+        ui-ace="{
+          mode: vm.mode.toLowerCase(),
+          theme:'solarized_dark',
+          useWrapMode : true
+
+        }"
+        ng-model="vm.content"
+      ></div>
+    </div>
+
+    <div class="form-group">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.Tags" theme="bootstrap">
+        <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
+        <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
+         refresh-delay="100">
+          <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-primary">Submit</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/browser/main/tpls/states/auth.register.tpl.html

@@ -0,0 +1,54 @@
+
+<form novalidate name="registerForm" ng-submit="registerForm.$valid?vm.signup():null">
+
+  <!-- Email -->
+  <div class="form-group">
+    <label for="email">E-mail</label>
+    <input ng-model="vm.email" type="email" id="email" name="email" class="form-control" placeholder="E-mail" required>
+
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.email.$error)">
+      <div ng-show="registerForm.email.$error.required">No E-mail given.</div>
+      <div ng-show="registerForm.email.$error.email">Invalid Address.</div>
+    </div>
+
+  </div>
+
+  <!-- Password -->
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input ng-model="vm.password" type="password" id="password" name="password" class="form-control" placeholder="Password" required>
+
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.password.$error)">
+      <div ng-show="registerForm.password.$error.required">No password given.</div>
+    </div>
+
+  </div>
+
+  <hr>
+
+  <!-- Username -->
+  <div class="form-group">
+    <label for="name">Username</label>
+    <input ng-model="vm.name" ng-pattern="'^[A-Za-z0-9\-\_]+$'" type="text" id="name" name="name" class="form-control" required>
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.name.$error)">
+      <div ng-show="registerForm.name.$error.required">No Username given.</div>
+      <div ng-show="registerForm.name.$error.pattern">Username should be ^[A-Za-z0-9\-\_]+$ (only alphanumeric, hyphen, underscore characters)</div>
+    </div>
+  </div>
+
+
+  <!-- Profile name -->
+  <div class="form-group">
+    <label for="profileName">Profile name</label>
+    <input ng-model="vm.profileName" type="text" name="profileName" class="form-control" required>
+
+    <div class="alert alert-danger" ng-if="registerForm.$submitted && !vm.isEmpty(registerForm.profileName.$error)">
+      <div ng-show="registerForm.profileName.$error.required">No Profile name given.</div>
+    </div>
+  </div>
+
+
+  <div class="form-group">
+    <button ng-class="{'btn-danger':registerForm.$invalid, 'btn-primary':registerForm.$valid}" type="submit" class="btn form-control">Register</button>
+  </div>
+</form>

src/browser/main/tpls/states/auth.signin.tpl.html

@@ -0,0 +1,15 @@
+<form ng-submit="vm.signIn()">
+  <div class="form-group">
+    <label for="email">E-mail</label>
+    <input ng-model="vm.email" type="text" id="email" name="name" class="form-control" placeholder="E-mail">
+  </div>
+
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input ng-model="vm.password" type="password" id="password" name="name" class="form-control" placeholder="Password">
+  </div>
+
+  <div class="form-group">
+    <button type="submit" class="btn btn-primary form-control">Sign In</button>
+  </div>
+</form>

src/browser/main/tpls/states/auth.tpl.html

@@ -0,0 +1,19 @@
+<div class="auth-state container-fluid">
+  <div class="row">
+    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3 panel panel-default">
+
+      <div class="text-center">
+
+        <h1>Authentication</h1>
+
+        <div class="auth-control">
+          <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.register"><i class="fa fa-user-plus fa-fw"></i> Register</a> or <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.signin"><i class="fa fa-sign-in fa-fw"></i> Sign In</a>
+        </div>
+
+      </div>
+
+      <ui-view></ui-view>
+
+    </div>
+  </div>
+</div>

src/browser/main/tpls/states/home.tpl.html

@@ -0,0 +1,10 @@
+<div class="home-state">
+  <h1 class="jumbotron">Codexen App <small>v0.1</small></h1>
+  <p>
+    App for Code snippets<br>
+  </p>
+
+  <p>
+    © 2015 MAISIN&CO.,Inc.
+  </p>
+</div>

src/browser/main/tpls/states/settings.tpl.html

@@ -0,0 +1,33 @@
+<div class="settings-state container-fluid">
+  <div class="row">
+    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3 panel panel-default">
+      <h1><i class="fa fa-gears"></i> Settings</h1>
+      <p>
+        Some settings...
+      </p>
+      <hr>
+      <div class="section">
+        <h4>Change Password</h4>
+        <form ng-submit="vm.changePassword()">
+          <alert type="success" ng-show="vm.isSuccess" close="vm.isSuccess=false">
+            Successfully changed!!
+          </alert>
+          <alert type="danger" ng-show="vm.isError" close="vm.isError=false">
+            Request failed!!
+          </alert>
+          <div class="form-group">
+            <label for="password">Current Password</label>
+            <input ng-model="vm.password" class="form-control" type="password" name="password"  placeholder="Current Password">
+          </div>
+          <div class="form-group">
+            <label for="newPassword"> New Password</label>
+            <input ng-model="vm.newPassword" class="form-control" type="password" name="newPassword" placeholder="New Password">
+          </div>
+          <div class="form-group">
+            <button type="submit" class="btn btn-primary form-control">Change Password</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/browser/main/tpls/states/snippets.detail.tpl.html

@@ -0,0 +1,41 @@
+<div class="snippets-detail-state">
+
+  <div class="detail-header">
+    <span class="detail-header-title">
+      <small>callsign</small>
+      <span ng-bind="vm.snippet.callSign"></span>
+      <small><span ng-bind="vm.snippet.updatedAt|fromNow"></span> <i class="fa fa-clock-o"></i></small>
+    </span>
+    <span class="detail-header-control pull-right">
+      <!-- <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
+      <button btn-edit-snippet="vm.snippet" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+      <button btn-delete-snippet="vm.snippet" type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
+    </span>
+  </div>
+
+  <div class="detail-body">
+
+    <div ng-if="!vm.isLoaded" class="">
+      Loadding
+    </div>
+
+    <div ng-if="vm.isLoaded" class="">
+      <p ng-bind="vm.snippet.description"></p>
+
+      <div tag-list="vm.snippet.Tags"></div>
+
+      <div ui-ace="{
+        showGutter: false,
+        useWrapMode : true,
+        mode:vm.snippet.mode.toLowerCase(),
+        maxLines: -1,
+        theme:'solarized_dark',
+        rendererOptions: {
+            maxLinks: Infinity
+        }
+      }"
+      readonly
+      ng-model="vm.snippet.content"></div>
+    </div>
+  </div>
+</div>

src/browser/main/tpls/states/snippets.list.tpl.html

@@ -0,0 +1,57 @@
+<div class="snippets-list-state">
+
+  <div class="left-pane">
+    <div class="snippet-search">
+      <input ng-model="vm.search" ng-change="vm.searchSnippets()" type="text" name="name" class="form-control" placeholder="Search ..." autocomplete="off">
+    </div>
+    <ul class="snippet-list">
+
+      <li ng-if="vm.isLoading" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="!vm.isLoading && vm.snippets==0 && !vm.isGuest" class="message-item">
+        <h4>
+          Empty List
+        </h4>
+        <button btn-new-snippet class="btn btn-default"><i class="fa fa-plus-square-o"></i> New Snippet</button>
+      </li>
+
+      <li ng-if="!vm.isLoading && vm.isGuest" class="message-item">
+        <h4>
+          Sign In to access
+        </h4>
+        <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
+      </li>
+
+      <li snippet-item="snippet" ng-repeat="snippet in vm.filtered" ui-sref="snippets.detail({id:snippet.id})" ng-class="{active:vm.snippetId===snippet.id}">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}" alt="" />
+          </div>
+          <div class="media-body">
+            <p ng-bind="snippet.callSign" class="call-sign">
+            </p>
+            <p ng-bind="snippet.description">
+            </p>
+            <p class="created-at">
+              <span ng-bind="snippet.updatedAt|fromNow"></span>
+            </p>
+          </div>
+        </div>
+        <div tag-list="snippet.Tags"></div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="right-pane">
+    <div ng-if="'snippets'|isState">
+      No snippet selected.
+    </div>
+    <div ui-view></div>
+  </div>
+
+
+</div>