Logging in and Registration, independent from accounts-ui

simonv3 · Sep 18, 2015 · 0bd6824 · 0bd6824
1 parent a880887
commit 0bd6824
Show file tree

Hide file tree

Showing 34 changed files with 19,218 additions and 164 deletions.
diff --git a/.meteor/packages b/.meteor/packages
@@ -8,7 +8,6 @@ meteor-platform
 urigo:angular
 angularui:angular-ui-router
 accounts-password
-accounts-ui
 less
 tmeasday:publish-counts
 oshai:angular-marked

diff --git a/.meteor/versions b/.meteor/versions
@@ -1,7 +1,5 @@
 accounts-base@1.2.0
 accounts-password@1.1.1
-accounts-ui@1.1.5
-accounts-ui-unstyled@1.1.7
 angular:angular@1.4.4
 angularui:angular-ui-router@0.2.15
 autoupdate@1.2.1

diff --git a/client/config/accounts.js b/client/config/accounts.js
@@ -0,0 +1,4 @@
+Accounts.onEmailVerificationLink(function(token, done) {
+  Accounts.verifyEmail(token);
+  done();
+});
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,47 @@
+<head>
+  <base href="/">
+  <title>Quick Survey</title>
+</head>
+
+<body ng-app="quick-survey">
+  <div class="page-wrap">
+    <div class="nav" ng-controller="NavBarCtrl">
+      <div class="admin" ng-if="is_admin">
+        <a href="/">survey</a>
+        <a href="/admin">admin</a>
+      </div>
+      <div class="registration"
+        ng-if="state.current.name !== 'setup'">
+        <a class="button"
+          ng-href="/login"
+          ng-hide="$root.currentUser">Log in</a>
+        <a class="button"
+          ng-href="/register"
+          ng-hide="$root.currentUser">Register</a>
+        <div class="username"
+          ng-show="$root.currentUser">
+          Hello <span ng-bind="$root.currentUser | displayName"></span>
+        </div>
+        <a class="button"
+          ng-href="/logout"
+          ng-show="$root.currentUser">Log out</a>
+      </div>
+    </div>
+    <div ui-view
+      class="container small-row"
+      ng-class="{ admin: $state.includes('admin') }">
+    </div>
+  </div>
+  <div ng-show="loading">
+    <span></span>
+    <span></span>
+    <span></span>
+  </div>
+  <footer class="site-footer">
+    <div class="wide-row footer-wrapper">
+      <img src="/images/squirrel-small.png" alt="Quick Survey Squirrel Logo"/>
+      <p>Powered by Quick-Survey, a self-hosted, easy-to-install survey tool that you control and own. Get started on <a href="https://github.com/simonv3/quick-survey"><i class="icon-github"></i> GitHub</a>.
+      </p>
+    </div>
+  </footer>
+</body>
diff --git a/client/js/filters/displayName.js b/client/js/filters/displayName.js
@@ -0,0 +1,13 @@
+angular.module('quick-survey').filter('displayName', function () {
+  return function (user) {
+    if (!user)
+      return;
+    if (user.profile && user.profile.name)
+      return user.profile.name;
+    else if (user.emails)
+      return user.emails[0].address;
+    else
+      return user;
+  }
+});
+
diff --git a/client/js/routes.ng.js b/client/js/routes.ng.js
@@ -15,18 +15,22 @@ angular.module('quick-survey').run(function($rootScope, $state) {
   });
 
   $rootScope.$watch('currentUser', function() {
+    console.log('currentUser', $rootScope.currentUser);
     if (!$rootScope.loggingIn && $rootScope.currentUser === null) {
       $state.go('active-survey');
     }
   });
 
 });
 
-angular.module("quick-survey").config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
-  function ($urlRouterProvider, $stateProvider, $locationProvider) {
+angular.module("quick-survey").config(
+  function ($urlRouterProvider, $stateProvider, $locationProvider,
+      $urlMatcherFactoryProvider) {
 
     $locationProvider.html5Mode(true);
 
+    $urlMatcherFactoryProvider.strictMode(false);
+
     $stateProvider
       .state('active-survey', {
         url: '/',
@@ -82,7 +86,42 @@ angular.module("quick-survey").config(['$urlRouterProvider', '$stateProvider', '
               });
           }]
         }
+      })
+
+      .state('login', {
+        url: '/login',
+        templateUrl: 'client/js/users/views/login.ng.html',
+        controller: 'LoginCtrl',
+        controllerAs: 'lc'
+      })
+      .state('register',{
+        url: '/register',
+        templateUrl: 'client/js/users/views/register.ng.html',
+        controller: 'RegisterCtrl',
+        controllerAs: 'rc'
+      })
+      .state('register-success', {
+        url: '/register/success',
+        templateUrl: 'client/js/users/views/register-success.ng.html',
+      })
+      .state('reset-password', {
+        url: '/reset-password',
+        templateUrl: 'client/js/users/views/reset-password.ng.html',
+        controller: 'ResetPasswordCtrl',
+        controllerAs: 'rpc'
+      })
+      .state('logout', {
+        url: '/logout',
+        resolve: {
+          "logout": ['$meteor', '$state', function($meteor, $state) {
+            return $meteor.logout().then(function(){
+              $state.go('active-survey');
+            }, function(err){
+              console.log('logout error - ', err);
+            });
+          }]
+        }
       });
 
     $urlRouterProvider.otherwise("/");
-  }]);
+  });
diff --git a/client/js/users/controllers/loginCtrl.ng.js b/client/js/users/controllers/loginCtrl.ng.js
@@ -0,0 +1,28 @@
+angular.module("quick-survey").controller("LoginCtrl",
+  function ($meteor, $state) {
+    var vm = this;
+
+    vm.credentials = {
+      email: '',
+      password: ''
+    };
+
+    vm.error = '';
+
+    vm.sendEmailVerification = function() {
+      Meteor.call('resendVerificationEmail', vm.credentials.email);
+    };
+
+    vm.login = function () {
+      $meteor.loginWithPassword(vm.credentials.email, vm.credentials.password).then(
+        function () {
+          $state.go('active-survey');
+        },
+        function (err) {
+          vm.error = err;
+        }
+      );
+    };
+  }
+);
+
diff --git a/client/js/users/controllers/registerCtrl.ng.js b/client/js/users/controllers/registerCtrl.ng.js
@@ -0,0 +1,26 @@
+angular.module("quick-survey").controller("RegisterCtrl",
+  function ($meteor, $state) {
+    var vm = this;
+
+    vm.credentials = {
+      email: '',
+      password: ''
+    };
+
+    vm.error = '';
+
+    vm.register = function () {
+      $meteor.createUser(vm.credentials).then(
+        function (response) {
+          console.log(vm.currentUser);
+          vm.success = true;
+        },
+        function (err) {
+          if (err.error === 'account-created') $state.go('register-success')
+          vm.error = err;
+        }
+      );
+    };
+  }
+);
+
diff --git a/client/js/users/controllers/resetPasswordCtrl.ng.js b/client/js/users/controllers/resetPasswordCtrl.ng.js
@@ -0,0 +1,23 @@
+angular.module("quick-survey").controller("ResetPasswordCtrl",
+  function ($meteor, $state) {
+    var vm = this;
+
+    vm.credentials = {
+      email: ''
+    };
+
+    vm.error = '';
+
+    vm.reset = function () {
+      $meteor.forgotPassword(vm.credentials.email).then(
+        function () {
+          $state.go('active-survey');
+        },
+        function (err) {
+          vm.error = 'Error sending forgot password email - ' + err;
+        }
+      );
+    };
+  }
+);
+
diff --git a/client/js/users/views/login.ng.html b/client/js/users/views/login.ng.html
@@ -0,0 +1,31 @@
+<div class="frontend">
+  <h1>Log in</h1>
+  <form class="registration-form" name="loginForm">
+    <!-- <div>
+      <h2>Login with:</h2>
+      <button>Twitter</button>
+      <button>Facebook</button>
+    </div> -->
+    <div ng-show="lc.error" class="md-warn">
+      <small>
+        {{ lc.error.reason }}
+        <a ng-if="lc.error.error === 'verify-account'" ng-click="lc.sendEmailVerification()">Re-send.
+        </a>
+      </small>
+    </div>
+    <input type="text"
+      ng-model="lc.credentials.email"
+      placeholder="email"
+      aria-label="email"/>
+    <input type="password"
+      ng-model="lc.credentials.password"
+      placeholder="password"
+      aria-label="password"/>
+    <button ng-disabled="!loginForm.$valid"
+      ng-click="lc.login()">Submit</button>
+  </form>
+  <div>
+    <a href="/reset-password">Forgot password?</a>
+    <a href="/register">Create an account</a>
+  </div>
+</div>
diff --git a/client/js/users/views/register-success.ng.html b/client/js/users/views/register-success.ng.html
@@ -0,0 +1,3 @@
+<div class="message empty-state success">
+  Great, check your e-mail for a verification e-mail!
+</div>
diff --git a/client/js/users/views/register.ng.html b/client/js/users/views/register.ng.html
@@ -0,0 +1,34 @@
+<div class="frontend">
+  <h1>Register</h1>
+  <form class="registration-form"
+    name="registerForm">
+    <!-- <div>
+      <h2>Register with:</h2>
+      <button>Twitter</button>
+      <button>Facebook</button>
+    </div> -->
+    <div ng-show="rc.error" class="message warning">
+      <small>{{ rc.error.reason }}</small>
+    </div>
+
+    <input type="email"
+      ng-model="rc.credentials.email"
+      placeholder="email"
+      aria-label="email"
+      required/>
+    <input type="password"
+      ng-model="rc.credentials.password"
+      placeholder="password"
+      aria-label="password"
+      required/>
+    <button ng-disabled="!registerForm.$valid"
+      ng-click="rc.register()">Register</button>
+  </form>
+  <div ng-show="rc.success" class="message success">
+    <small>Great, check your email for a verification e-mail!</small>
+  </div>
+  <div>
+    <a href="/reset-password">Forgot password?</a>
+    <a href="/login">Log in</a>
+  </div>
+</div>
diff --git a/client/js/users/views/reset-password.ng.html b/client/js/users/views/reset-password.ng.html
@@ -0,0 +1,24 @@
+<div class="frontend">
+  <h1>Register</h1>
+  <form class="login-form" name="resetPasswordForm">
+    <div>
+      <h2>Register with:</h2>
+      <button>Twitter</button>
+      <button>Facebook</button>
+    </div>
+    <div ng-show="rc.error" class="md-warn">
+      <small>{{ rc.error }}</small>
+    </div>
+    <input type="text"
+      ng-model="rpc.credentials.email"
+      placeholder="email"
+      aria-label="email"
+      required/>
+    <button ng-disabled="!resetPasswordForm.$valid"
+      ng-click="rpc.register()">Submit</button>
+  </form>
+  <div>
+    <a href="/resetpw">Forgot password?</a>
+    <a href="/register">Create an account</a>
+  </div>
+</div>
diff --git a/client/styles/animations.import.less b/client/styles/animations.import.less
@@ -0,0 +1,43 @@
+@-moz-keyframes spin {
+    from {
+      -moz-transform: rotate(0deg);
+      -moz-transform: scale(2);
+    }
+    to {
+      -moz-transform: scale(1);
+      -moz-transform: rotate(360deg);
+    }
+}
+@-webkit-keyframes spin {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes spin {
+    from {
+      transform: scale(2);
+      transform: rotate(0deg);
+    }
+    to {
+      transform: scale(1);
+      transform: rotate(360deg);
+    }
+}
+
+.animation(@name, @duration, @iterationCount, @timingFunction) {
+  -webkit-animation-name: @name;
+  -webkit-animation-duration: @duration;
+  -webkit-animation-iteration-count: @iterationCount;
+  -webkit-animation-timing-function: @timingFunction;
+  -moz-animation-name: @name;
+  -moz-animation-duration: @duration;
+  -moz-animation-iteration-count: @iterationCount;
+  -moz-animation-timing-function: @timingFunction;
+  -ms-animation-name: @name;
+  -ms-animation-duration: @duration;
+  -ms-animation-iteration-count: @iterationCount;
+  -ms-animation-timing-function: @timingFunction;
+}