rebuild app structure

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

@@ -0,0 +1,53 @@
+<div class="current-user">
+  <div ng-if="vm.currentUser">
+    <img width="30" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
+    <span ng-bind="vm.currentUser.name"></span>
+    <span class="dropdown" dropdown is-open>
+      <a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
+      <ul class="dropdown-menu">
+        <li>
+          <a ng-click="vm.signOut()"><i class="fa fa-sign-out"></i> Sign Out</a>
+        </li>
+      </ul>
+    </span>
+
+  </div>
+  <div ng-if="!vm.currentUser">
+    <span>Guest</span>
+
+    <span class="dropdown" dropdown is-open>
+      <a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
+      <ul class="dropdown-menu">
+        <li>
+          <a ui-sref="auth.signin"><i class="fa fa-sign-in"></i> Sign In</a>
+        </li>
+        <li>
+          <a ui-sref="auth.register"><i class="fa fa-user-plus"></i> Register</a>
+        </li>
+      </ul>
+    </span>
+  </div>
+</div>
+
+<p>Side Nav</p>
+<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>
+  <li ui-sref-active="active">
+    <a><i class="fa fa-paperclip"></i> Clips(ready)</a>
+  </li>
+  <li class="divider"><hr></li>
+  <li>
+    <a href=""><i class="fa fa-gears"></i> Configuration</a>
+  </li>
+</ul>

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

@@ -0,0 +1,47 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    New Snippet
+  </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="Call sign">
+
+        <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()
+
+        }"
+        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="Write 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/tpls/modals/new-snippet-modal.tpl.html

@@ -0,0 +1,47 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    New Snippet
+  </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="Call sign">
+
+        <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-html="mode | highlight: $select.search"></div>
+          </ui-select-choices>
+        </ui-select>
+    </div>
+
+    <div class="form-group">
+      <div
+        ui-ace="{
+          mode: vm.mode.toLowerCase()
+
+        }"
+        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="Write 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/tpls/states/auth.register.tpl.html

@@ -0,0 +1,56 @@
+<div class="row">
+  <div class="col-sm-6 col-sm-offset-3">
+    <form novalidate name="registerForm" ng-submit="vm.signup()">
+
+      <!-- Email -->
+      <div class="form-group">
+        <label for="email">E-mail</label>
+        <input ng-model="vm.email" type="text" id="email" name="email" class="form-control" placeholder="E-mail" required>
+
+        <div class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.email.$touched) && !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 ng-click="vm.log(registerForm.password.$error)" class="alert alert-danger" ng-if="(registerForm.$submitted || registerForm.password.$touched) && !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 || registerForm.name.$touched) && !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\-\_]+$</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 || registerForm.profileName.$touched) && !vm.isEmpty(registerForm.profileName.$error)">
+          <div ng-show="registerForm.profileName.$error.required">No Profile name given.</div>
+        </div>
+      </div>
+
+
+      <div class="form-group">
+        <button type="submit" class="btn btn-primary form-control">Register</button>
+      </div>
+    </form>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+<div class="row">
+  <div class="col-sm-6 col-sm-offset-3">
+    <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>
+  </div>
+</div>

src/tpls/states/auth.tpl.html

@@ -0,0 +1,9 @@
+<div class="container-fluid">
+
+  <div class="text-center">
+    <h1>Auth</h1>
+    <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.register">Register</a> or <a class="btn btn-default" ui-sref-active="active" ui-sref="auth.signin">Sign In</a>
+  </div>
+  <ui-view></ui-view>
+
+</div>

src/tpls/states/home.tpl.html

@@ -0,0 +1,13 @@
+<div class="home-state">
+  <h1 class="jumbotron">Codexen App <small>v0.1(breakthru)</small></h1>
+  <p>
+    App for Code snippets<br>
+
+    App: <a href="https://github.com/Rokt33r/codexen-app">Rokt33r/codexen-app</a><br>
+    Server: <a href="https://github.com/Rokt33r/codexen-server">Rokt33r/codexen-server</a>
+  </p>
+
+  <p>
+    © 2015 MAISIN&CO.,Inc.
+  </p>
+</div>

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

@@ -0,0 +1,37 @@
+<div class="snippets-detail-state">
+
+  <div class="detail-header">
+    <span class="detail-header-title">
+      <span ng-bind="vm.snippet.callSign"></span>
+      <small><span ng-bind="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 ng-click="vm.delete()" 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 tags="vm.snippet.tags"></div>
+      <div ui-ace="{
+        showGutter: false,
+        useWrapMode : true,
+        mode:vm.snippet.mode.toLowerCase(),
+        maxLines: -1,
+        rendererOptions: {
+            maxLinks: Infinity
+        }
+      }"
+      readonly
+      ng-model="vm.snippet.content"></div>
+    </div>
+  </div>
+</div>

src/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" type="text" name="name" class="form-control" placeholder="Search ...">
+    </div>
+    <ul class="snippet-list">
+
+      <li ng-if="!vm.isLoaded" class="message-item">
+        <h4>
+          Loading
+        </h4>
+      </li>
+
+      <li ng-if="vm.isLoaded && 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.isLoaded && 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 ng-repeat="snippet in vm.snippets | filter:vm.search" ui-sref="snippets.detail({id:snippet._id})" ui-sref-active="active">
+        <div class="media">
+          <div class="media-left">
+            <img width="25" height="25" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" 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 tags="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>