Skip to content

C
coopwire-hypothesis
Commit 570f2b16 authored by Sean Hammond's avatar Sean Hammond
Browse files
Options

Merge pull request #2582 from hypothesis/replace-accounts-forms 

Server-rendered accounts forms
parents c36acd9d 8a46ae38
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 364 deletions
h/static/scripts/account/account-controller.js → h/static/scripts/account-controller.js
View file @ 570f2b16
...@@ -144,4 +144,4 @@ function AccountController($scope, $filter, auth, flash, formRespond, identity, ...@@ -144,4 +144,4 @@ function AccountController($scope, $filter, auth, flash, formRespond, identity,
}; };
} }
angular.module('h').controller('AccountController', AccountController); module.exports = AccountController;
h/static/scripts/account/account.js deleted 100644 → 0
View file @ c36acd9d
var angular = require('angular');
// @ngInject
function AuthAppController($location, $scope, $timeout, $window, session) {
function onlogin() {
window.location.href = '/stream';
};
$scope.account = {};
$scope.model = {};
$scope.account.tab = $location.path().split('/')[1];
$scope.$on('auth', function(event, err, data) {
if (data != null ? data.userid : void 0) {
$timeout(onlogin, 1000);
}
});
$scope.$watch('account.tab', function(tab, old) {
if (tab !== old) {
$location.path('/' + tab);
}
});
// TODO: We should be calling identity.beginProvisioning() here in order to
// move toward become a federated BrowserID provider.
session.load(function(data) {
if (data.userid) {
onlogin();
}
});
}
// @ngInject
function AuthPageController($routeParams, $scope) {
$scope.model.code = $routeParams.code;
$scope.hasActivationCode = !!$routeParams.code;
}
// @ngInject
function configure($httpProvider, $locationProvider, $routeProvider) {
// Use the Pyramid XSRF header name
$httpProvider.defaults.xsrfHeaderName = 'X-CSRF-Token';
$locationProvider.html5Mode(true);
$routeProvider.when('/login', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/register', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/forgot_password', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
$routeProvider.when('/reset_password/:code?', {
controller: 'AuthPageController',
templateUrl: 'auth.html'
});
}
angular.module('h')
.config(configure)
.controller('AuthAppController', AuthAppController)
.controller('AuthPageController', AuthPageController);
require('./account-controller');
require('./auth-controller');
h/static/scripts/app.coffee
View file @ 570f2b16
...@@ -98,8 +98,10 @@ module.exports = angular.module('h', [ ...@@ -98,8 +98,10 @@ module.exports = angular.module('h', [
]) ])
.controller('AppController', require('./app-controller')) .controller('AppController', require('./app-controller'))
.controller('AccountController', require('./account-controller'))
.controller('AnnotationUIController', require('./annotation-ui-controller')) .controller('AnnotationUIController', require('./annotation-ui-controller'))
.controller('AnnotationViewerController', require('./annotation-viewer-controller')) .controller('AnnotationViewerController', require('./annotation-viewer-controller'))
.controller('AuthController', require('./auth-controller'))
.controller('StreamController', require('./stream-controller')) .controller('StreamController', require('./stream-controller'))
.controller('WidgetController', require('./widget-controller')) .controller('WidgetController', require('./widget-controller'))
......
h/static/scripts/account/auth-controller.js → h/static/scripts/auth-controller.js
View file @ 570f2b16
...@@ -7,19 +7,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) { ...@@ -7,19 +7,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
$scope.$emit('auth', null, data); $scope.$emit('auth', null, data);
} }
$scope.account.tab = (function() {
switch ($scope.account.tab) {
case 'register':
return 'login';
case 'forgot_password':
return 'reset_password';
case 'reset_password':
return 'login';
default:
return $scope.account.tab;
}
})();
angular.copy({}, $scope.model); angular.copy({}, $scope.model);
if ($scope.form != null) { if ($scope.form != null) {
...@@ -78,12 +65,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) { ...@@ -78,12 +65,6 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
}); });
}; };
if ($scope.account == null) {
$scope.account = {
tab: 'login'
};
}
if ($scope.model == null) { if ($scope.model == null) {
$scope.model = {}; $scope.model = {};
} }
...@@ -106,4 +87,4 @@ function AuthController($scope, $timeout, flash, session, formRespond) { ...@@ -106,4 +87,4 @@ function AuthController($scope, $timeout, flash, session, formRespond) {
}); });
} }
angular.module('h').controller('AuthController', AuthController); module.exports = AuthController;
h/static/scripts/session.js
View file @ 570f2b16
...@@ -8,9 +8,6 @@ var CACHE_TTL = 5 * 60 * 1000; // 5 minutes ...@@ -8,9 +8,6 @@ var CACHE_TTL = 5 * 60 * 1000; // 5 minutes
var ACCOUNT_ACTIONS = [ var ACCOUNT_ACTIONS = [
['login', 'POST'], ['login', 'POST'],
['logout', 'POST'], ['logout', 'POST'],
['register', 'POST'],
['forgot_password', 'POST'],
['reset_password', 'POST'],
['profile', 'GET'], ['profile', 'GET'],
['edit_profile', 'POST'], ['edit_profile', 'POST'],
['disable_user', 'POST'] ['disable_user', 'POST']
......
h/static/scripts/account/test/account-controller-test.coffee → h/static/scripts/test/account-controller-test.coffee
View file @ 570f2b16
...@@ -15,7 +15,7 @@ describe 'h:AccountController', -> ...@@ -15,7 +15,7 @@ describe 'h:AccountController', ->
before -> before ->
angular.module('h', []) angular.module('h', [])
require('../account-controller') .controller('AccountController', require('../account-controller'))
beforeEach module('h') beforeEach module('h')
...@@ -241,7 +241,7 @@ describe "h:AccountController", -> ...@@ -241,7 +241,7 @@ describe "h:AccountController", ->
# The h module hasn't been defined yet, so we need to define it # The h module hasn't been defined yet, so we need to define it
# (this happens when it.only() is used in this describe()). # (this happens when it.only() is used in this describe()).
angular.module("h", []) angular.module("h", [])
require("../account-controller") .controller('AccountController', require('../account-controller'))
) )
beforeEach module('h') beforeEach module('h')
...@@ -379,7 +379,7 @@ describe "h:AccountController", -> ...@@ -379,7 +379,7 @@ describe "h:AccountController", ->
} }
{$scope} = createAccountController( {$scope} = createAccountController(
formRespond: require("../../form-respond")() formRespond: require("../form-respond")()
session: getStubSession( session: getStubSession(
edit_profile: -> {$promise: Promise.reject(server_response)} edit_profile: -> {$promise: Promise.reject(server_response)}
) )
...@@ -451,7 +451,7 @@ describe "h:AccountController", -> ...@@ -451,7 +451,7 @@ describe "h:AccountController", ->
} }
{$scope} = createAccountController( {$scope} = createAccountController(
formRespond: require("../../form-respond")() formRespond: require("../form-respond")()
session: getStubSession( session: getStubSession(
edit_profile: -> {$promise: Promise.reject(server_response)} edit_profile: -> {$promise: Promise.reject(server_response)}
) )
......
h/static/scripts/account/test/auth-controller-test.coffee → h/static/scripts/test/auth-controller-test.coffee
View file @ 570f2b16
...@@ -27,7 +27,7 @@ describe 'h:AuthController', -> ...@@ -27,7 +27,7 @@ describe 'h:AuthController', ->
before -> before ->
angular.module('h', []) angular.module('h', [])
require('../auth-controller') .controller('AuthController', require('../auth-controller'))
beforeEach module('h') beforeEach module('h')
beforeEach module('h.templates') beforeEach module('h.templates')
......
h/static/styles/common.scss
View file @ 570f2b16
...@@ -125,6 +125,13 @@ html { ...@@ -125,6 +125,13 @@ html {
.form-inline .control-group { margin-bottom: 0; } .form-inline .control-group { margin-bottom: 0; }
.form-vertical { .form-vertical {
legend {
font-size: $body1-font-size;
line-height: $body1-line-height;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
select, textarea, input, button { select, textarea, input, button {
display: block; display: block;
// margin-top: .75em; // margin-top: .75em;
......
h/templates/client/auth.html
View file @ 570f2b16
<div class="form-vertical tabbable" <div class="form-vertical"
tab-reveal="['forgot_password', 'reset_password']"
ng-controller="AuthController as vm" ng-controller="AuthController as vm"
ng-form="form" ng-form="form"
ng-model="account.tab" ng-submit="vm.submit(form['login'])">
ng-submit="vm.submit(form[account.tab])"> <ul class="nav nav-tabs">
<!-- Login --> <li class="active"><a href="">Sign in</a></li>
<form data-title="Sign in" <li><a href="/register" target="_blank">Create an account</a></li>
data-value="login" </ul>
class="form tab-pane" <div class="tab-content">
name="login" <form data-value="login"
form-validate class="form"
novalidate> name="login"
form-validate
<p class="form-description form-error" novalidate>
ng-show="login.responseErrorMessage">
{{login.responseErrorMessage}} <p class="form-description form-error"
</p> ng-show="login.responseErrorMessage">
{{login.responseErrorMessage}}
<div class="form-field"> </p>
<label class="form-label" for="field-login-username">Username or email address:</label>
<input class="form-input" type="text" id="field-login-username" <div class="form-field">
name="username" value="" <label class="form-label" for="field-login-username">Username or email address:</label>
ng-model="model.username" ng-minlength="3" <input class="form-input" type="text" id="field-login-username"
required autocapitalize="false" /> name="username" value=""
<ul class="form-error-list"> ng-model="model.username"
<li class="form-error" required autocapitalize="false" />
ng-show="login.username.$error.required" <ul class="form-error-list">
>Please enter your username or email address.</li> <li class="form-error"
<li class="form-error" ng-show="login.username.$error.required"
ng-show="login.username.$error.minlength" >Please enter your username or email address.</li>
>Usernames are at least 3 characters.</li> <li class="form-error"
<li class="form-error" ng-show="login.username.$error.response"
ng-show="login.username.$error.response" >{{login.username.responseErrorMessage}}</li>
>{{login.username.responseErrorMessage}}</li> </ul>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-login-password">Password:</label>
<input class="form-input" id="field-login-password"
type="password" name="password" value=""
ng-model="model.password"
required autocapitalize="false" autocorrect="false" />
<ul class="form-error-list">
<li class="form-error"
ng-show="login.password.$error.required"
>Please enter your password.</li>
<li class="form-error"
ng-show="login.password.$error.response"
>{{login.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-message">
<a href="" ng-click="account.tab = 'forgot_password'"
>Forgot your password?</a>
</div>
<div class="form-actions-buttons">
<button class="btn btn-primary" type="submit" name="login"
status-button="login">Sign in</button>
</div> </div>
</div>
</form>
<!-- / Login -->
<!-- Register -->
<form data-title="Create an account"
data-value="register"
class="form tab-pane"
name="register"
form-validate
novalidate>
<p class="form-description form-error" <div class="form-field">
ng-show="register.responseErrorMessage"> <label class="form-label" for="field-login-password">Password:</label>
{{register.responseErrorMessage}} <input class="form-input" id="field-login-password"
</p> type="password" name="password" value=""
ng-model="model.password"
<div class="form-field"> required autocapitalize="false" autocorrect="false" />
<label class="form-label" for="field-register-username" <ul class="form-error-list">
>Username: <li class="form-error"
<span class="form-hint">(between 3 and 15 characters)</span></label> ng-show="login.password.$error.required"
<input class="form-input" id="field-register-username" >Please enter your password.</li>
type="text" name="username" value="" <li class="form-error"
required autocapitalize="false" ng-model="model.username" ng-show="login.password.$error.response"
ng-minlength="3" ng-maxlength="15" >{{login.password.responseErrorMessage}}</li>
ng-pattern="/^[A-Za-z0-9._]+$/" </ul>
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.username.$error.required"
>Please choose a username.</li>
<li class="form-error"
ng-show="register.username.$error.minlength"
>Usernames must be at least 3 characters.</li>
<li class="form-error"
ng-show="register.username.$error.maxlength"
>Usernames must be 15 characters at most.</li>
<li class="form-error"
ng-show="register.username.$error.pattern"
>Only letters, numbers, underscore and dot are allowed.</li>
<li class="form-error"
ng-show="register.username.$error.response"
>{{register.username.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-register-email"
>Email Address:</label>
<input class="form-input" id="field-register-email"
type="email" name="email" value=""
ng-model="model.email" required autocapitalize="false"
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.email.$error.email"
>Is this an email address?</li>
<li class="form-error"
ng-show="register.email.$error.required"
>Please enter your email.</li>
<li class="form-error"
ng-show="register.email.$error.response"
>{{register.email.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-register-password"
>Password:
<span class="form-hint">(at least two characters)</span></label>
<input id="field-register-password" class="form-input"
type="password" name="password" value=""
required autocapitalize="false" autocorrect="false"
ng-minlength="2" ng-model="model.password"
ng-model-options="{updateOn: 'blur'}" />
<ul class="form-error-list">
<li class="form-error"
ng-show="register.password.$error.required"
>Please enter a password.</li>
<li class="form-error"
ng-show="register.password.$error.minlength"
>Passwords must be at least 2 characters.</li>
<li class="form-error"
ng-show="register.password.$error.response"
>{{register.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-message">
You are agreeing to be bound by our <a href="terms-of-service" target="_blank"
>Terms of Service</a>.
</div>
<div class="form-actions-buttons">
<button class="btn" type="submit" name="sign_up"
status-button="register">Sign up</button>
</div> </div>
</div>
</form>
<!-- / Register -->
<!-- Forgot password -->
<form data-title="Password reset"
data-value="forgot_password"
class="form tab-pane"
name="forgot_password"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="forgot_password.responseErrorMessage">
{{forgot_passwordresponseErrorMessage}}
</p>
<div class="form-field">
<label class="form-label" for="field-forgot-email"
>Please enter your email address:</label>
<input class="form-input" id="field-forgot-email"
type="email" name="email" value=""
required autocapitalize="false" ng-model="model.email" />
<ul class="form-error-list">
<li class="form-error"
ng-show="forgot_password.$error.email"
>Is this an email address?</li>
<li class="form-error"
ng-show="forgot_password.$error.required"
>Please enter your email.</li>
<li class="form-error"
ng-show="forgot_password.$error.response"
>{{forgot_password.email.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions">
<div class="form-actions-buttons">
<button class="btn" type="submit" name="forgot_password"
status-button="forgot_password">Request reset</button>
</div>
</div>
</form>
<!-- / Forgot password -->
<!-- Reset password -->
<form data-title="New password"
data-value="reset_password"
class="form tab-pane"
name="reset_password"
form-validate
novalidate>
<p class="form-description form-error"
ng-show="reset_password.responseErrorMessage">
{{reset_password.responseErrorMessage}}
</p>
<input type="hidden" name="code" value="{{model.code}}" ng-if="hasActivationCode"/>
<div class="form-field" ng-if="!hasActivationCode">
<label class="form-label" for="field-activate-code"
>Your reset code:
<span class="form-hint">(this will be emailed to you)</span>
</label>
<input class="form-input" id="field-activate-code"
type="text" name="code" value=""
required autocorrect="false" autocapitalize="false"
ng-model="model.code" />
<ul class="form-error-list">
<li class="form-error"
ng-show="reset_password.code.$error.required"
>Please enter your reset code</li>
<li class="form-error"
ng-show="reset_password.code.$error.response"
>{{reset_password.code.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-field">
<label class="form-label" for="field-activate-password"
>New password:
<span class="form-hint">(at least two characters)</span>
</label>
<input class="form-input" id="field-activate-password"
type="password" name="password" value=""
required autocapitalize="false" autocorrect="false"
ng-minlength="2" ng-model="model.password" />
<ul class="form-error-list">
<li class="form-error"
ng-show="reset_password.password.$error.required"
>Please choose a password.</li>
<li class="form-error"
ng-show="reset_password.password.$error.minlength"
>Passwords must be at least 2 characters.</li>
<li class="form-error"
ng-show="reset_password.password.$error.response"
>{{reset_password.password.responseErrorMessage}}</li>
</ul>
</div>
<div class="form-actions"> <div class="form-actions">
<div class="form-actions-buttons"> <div class="form-actions-message">
<button class="btn" type="submit" name="activate" <a href="/forgot_password" target="_blank">Forgot your password?</a>
status-button="activate">Save</button> </div>
<div class="form-actions-buttons">
<button class="btn btn-primary" type="submit" name="login"
status-button="login">Sign in</button>
</div>
</div> </div>
</div> </form>
</form> </div><!-- /.tab-content -->
<!--/ Reset password -->
</div> </div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment