Basic authentication is done.(need refactor)

2025-12-28 00:52:20 +00:00 · 2015-05-27 16:42:34 +09:00
parent 3e5fe1284d
commit 092a2f3e8a
22 changed files with 932 additions and 19 deletions
--- a/src/app.js
+++ b/src/app.js
@@ -0,0 +1,19 @@
+/* global angular */
+angular.module('codexen', [
+  'ngSanitize',
+  'ui.select',
+  'ui.ace',
+  'ui.router',
+  'ui.bootstrap',
+  'satellizer',
+  'angular-md5',
+  'templates',
+  'codexen.config',
+  'codexen.directives',
+  'codexen.services',
+  'codexen.states'])
+angular.module('templates', [])
+angular.module('codexen.config', [])
+angular.module('codexen.directives', [])
+angular.module('codexen.services', [])
+angular.module('codexen.states', [])
--- a/src/config/satellizer.js
+++ b/src/config/satellizer.js
@@ -0,0 +1,8 @@
+angular.module('codexen.config')
+  .constant('apiUrl', 'http://localhost:8000/')
+  .config(function ($authProvider, $httpProvider) {
+    $authProvider.baseUrl = 'http://localhost:8000/'
+
+    $httpProvider.defaults.useXDomain = true
+    delete $httpProvider.defaults.headers.common['X-Requested-With']
+  })
--- a/src/directives/side-nav.js
+++ b/src/directives/side-nav.js
@@ -0,0 +1,41 @@
+angular.module('codexen.directives')
+  .directive('sideNav', function(){
+    return {
+      templateUrl:'directives/side-nav.tpl.html',
+      controller:'SideNavController as vm'
+    }
+  })
+  .controller('SideNavController', function($auth, User, $rootScope, $scope){
+    var vm = this
+
+    vm.isAuthenticated = $auth.isAuthenticated()
+
+    var reloadUser = function(){
+      if(vm.isAuthenticated){
+        User.me().success(function (data){
+          console.log('currentUser', data)
+          vm.currentUser = data.user
+        })
+      }
+    }
+    reloadUser()
+
+    vm.signOut = function () {
+      $auth.logout()
+        .then(function () {
+          console.log('Sign Out')
+          $rootScope.$broadcast('userSignOut')
+        })
+    }
+
+    $scope.$on('userSignIn', function () {
+      vm.isAuthenticated = true
+      reloadUser()
+    })
+
+    $scope.$on('userSignOut', function () {
+      vm.isAuthenticated = false
+      vm.currentUser = null
+
+    })
+  })
--- a/src/directives/side-nav.tpl.html
+++ b/src/directives/side-nav.tpl.html
@@ -0,0 +1,26 @@
+
+<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>
+      <button type="button" name="button" dropdown-toggle class="btn btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></button>
+      <ul class="dropdown-menu">
+        <li>
+          <a ng-click="vm.signOut()"><i class="fa fa-signout"></i> Sign Out</a>
+        </li>
+      </ul>
+    </span>
+
+  </div>
+  <div ng-if="!vm.currentUser">
+    <span>Guest</span>
+  </div>
+</div>
+
+<p>Side Nav</p>
+<ul class="nav nav-pills nav-stacked">
+  <li>
+    <a href="">My Page</a>
+  </li>
+</ul>
--- a/src/index.html
+++ b/src/index.html
@@ -12,9 +12,14 @@

    <title>Codexen!</title>

+    <% styles.forEach(function(style){ %>
+    <link rel="stylesheet" href="<%=style %>" media="screen" title="no title" charset="utf-8">
+    <% }) %>
+
+
  </head>
  <body>
-    <div ui-view name="side-view" id="side-view"></div>
+    <div side-nav id="side-view"></div>
    <div ui-view name="main-view" id="main-view"></div>

    <script src="vendor/ace.js"></script>
@@ -24,6 +29,8 @@
    <script src="vendor/ui-ace.js"></script>
    <script src="vendor/ui-bootstrap-tpls.js"></script>
    <script src="vendor/select.js"></script>
+    <script src="vendor/satellizer.js"></script>
+    <script src="vendor/angular-md5.js"></script>

    <% scripts.forEach(function(script){ %>
    <script src="<%=script %>"></script>
--- a/src/main.scss
+++ b/src/main.scss
@@ -0,0 +1,49 @@
+$fa-font-path: "./resources/fonts";
+@import "../node_modules/font-awesome/scss/font-awesome";
+
+@import "bootstrap";
+@import "ui-select";
+
+@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
+
+$side-view-bg: $navbar-inverse-bg;
+$side-view-color: $navbar-inverse-color;
+
+html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  overflow: auto;
+}
+
+#side-view{
+  position:absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 200px;
+  color: $navbar-inverse-color;
+  background-color: $side-view-bg;
+  box-sizing: border-box;
+  padding: 10px 0 10px 10px;
+  .nav.nav-pills>li>a{
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+.alert{
+  margin: 5px 0;
+}
+
+#main-view{
+  position:absolute;
+  top: 0;
+  bottom: 0;
+  left: 200px;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
--- a/src/services/user.js
+++ b/src/services/user.js
@@ -0,0 +1,15 @@
+angular.module('codexen.services')
+  .factory('User', function ($http, apiUrl, $rootScope, $state) {
+    $rootScope.$on('userSignOut', function(){
+      $state.go('auth.signin')
+    })
+
+    var me = function () {
+      var url = apiUrl + 'auth/user'
+      return $http.get(url)
+    }
+
+    return {
+      me: me
+    }
+  })
--- a/src/states/auth/auth.tpl.html
+++ b/src/states/auth/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>
--- a/src/states/auth/register.js
+++ b/src/states/auth/register.js
@@ -0,0 +1,19 @@
+/* global angular */
+angular.module('codexen.states')
+  .controller('AuthRegisterController', function ($auth, $log) {
+    var vm = this
+    vm.isEmpty = function (obj) {
+      for (var i in obj) if (obj.hasOwnProperty(i)) return false
+      return true
+    }
+    vm.signup = function () {
+    $auth.signup({
+      email: vm.email,
+      password: vm.password,
+      name: vm.name,
+      profileName: vm.profileName
+    }).then(function (data) {
+      console.log(data)
+    })
+    }
+  })
--- a/src/states/auth/register.tpl.html
+++ b/src/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>
--- a/src/states/auth/signin.js
+++ b/src/states/auth/signin.js
@@ -0,0 +1,15 @@
+/* global angular */
+angular.module('codexen')
+  .controller('AuthSignInController', function ($auth, $rootScope) {
+    var vm = this
+
+    vm.signIn = function () {
+      $auth.login({
+        email: vm.email,
+        password: vm.password
+      }).then(function(data){
+        console.log(data)
+        $rootScope.$broadcast('userSignIn')
+      })
+    }
+  })
--- a/src/states/auth/signin.tpl.html
+++ b/src/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>
--- a/src/states/states.js
+++ b/src/states/states.js
@@ -0,0 +1,35 @@
+/* global angular */
+angular.module('codexen.states')
+  .config(function($stateProvider, $urlRouterProvider){
+    $urlRouterProvider
+      .when('/auth', '/auth/register')
+      .when('/auth/', '/auth/register')
+
+    $stateProvider
+      /* Auth */
+      .state('auth', {
+        url: '/auth',
+        views:{
+          'main-view': {
+            templateUrl: 'states/auth/auth.tpl.html'
+          }
+        }
+      })
+      .state('auth.register', {
+        url: '/register',
+        templateUrl: 'states/auth/register.tpl.html',
+        controller: 'AuthRegisterController as vm'
+      })
+      .state('auth.signin', {
+        url: '/signin',
+        templateUrl: 'states/auth/signin.tpl.html',
+        controller: 'AuthSignInController as vm'
+      })
+
+      /* Home */
+      .state('home', {
+        url: '/',
+        template: 'this is a home'
+      })
+
+  })